<!doctype html>
<html>
<head>
<script src="https://pixijs.download/release/pixi.min.js"></script>
</head>
<body>
<script>
// Create the application helper and add its render target to the page
let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);
// Create the sprite and add it to the stage
let sprite = PIXI.Sprite.from('sample.png');
app.stage.addChild(sprite);
// Add a ticker callback to move the sprite back and forth
let elapsed = 0.0;
app.ticker.add((delta) => {
elapsed += delta;
sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
});
</script>
</body>
</html>
البته یک عکس png هم کنارش گذاشتم. فایل pixi.min.js را هم کنارش گذاشتم ولی نیازی بهش نیست چون برنامه به سایت خودش لینک داده. فایل pixi.min.js را هم که تغییر نام دادم ، باز برنامه اجرا شد.
So what exactly is PixiJS? At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full scene graph (a hierarchy of objects to render), and provides interaction support to enable handling click and touch events. It is a natural replacement for Flash in the modern HTML5 world, but provides better performance and pixel-level effects that go beyond what Flash could achieve
So what exactly is PixiJS? At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full scene graph (a hierarchy of objects to render), and provides interaction support to enable handling click and touch...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Make a sprite from an image</title>
</head>
<body>
<script src="../pixi/pixi.min.js"></script>
<script>
//Create a Pixi Application
const app = new PIXI.Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
PIXI.Loader.shared
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
//Create the cat sprite
const cat = new PIXI.Sprite(PIXI.Loader.shared.resources["images/cat.png"].texture);
= new PIXI.Sprite(PIXI.TextureCache["images/cat.png"]);
//Add the cat to the stage
app.stage.addChild(cat);
}
</script>
</body>
</html>
در اجرا ، عکس یک گربه داریم در گوشه قسمتی سیاه رنگ. عکس زیر:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using aliases</title>
</head>
<body>
<script src="../pixi/pixi.min.js"></script>
<script>
//Aliases
const Application = PIXI.Application,
loader = PIXI.Loader.shared,
resources = PIXI.Loader.shared.resources,
Sprite = PIXI.Sprite;
//Create a Pixi Application
const app = new Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
//Create the cat sprite
const cat = new Sprite(resources["images/cat.png"].texture);
//Add the cat to the stage
app.stage.addChild(cat);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Loading progress</title>
</head>
<body>
<script src="../pixi/pixi.min.js"></script>
<script>
//Aliases
const Application = PIXI.Application,
Container = PIXI.Container,
loader = PIXI.Loader.shared,
resources = PIXI.Loader.shared.resources,
TextureCache = PIXI.utils.TextureCache,
Sprite = PIXI.Sprite;
//Create a Pixi Application
const app = new Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//Use Pixi's built-in `Loader` module to load an image
loader.onProgress.add(loadProgressHandler);
loader
.add([
"images/cat.png",
"images/blob.png",
"images/explorer.png"
])
.load(setup);
function loadProgressHandler(loader, resource) {
//Display the file `url` currently being loaded
console.log("loading: " + resource.url);
//If you gave your files names with the `add` method, you can access
//them like this
//console.log("loading: " + resource.name);
//Display the percentage of files currently loaded
console.log("progress: " + loader.progress + "%");
}
function setup() {
console.log("setup");
//Create the sprites
const cat = new Sprite(resources["images/cat.png"].texture),
blob = new Sprite(resources["images/blob.png"].texture),
explorer = new Sprite(resources["images/explorer.png"].texture);
//Add the sprites to the stage
app.stage.addChild(cat);
app.stage.addChild(blob);
app.stage.addChild(explorer);
//Position the sprites
blob.position.set(82, 82);
explorer.position.set(128, 128);
}
</script>
</body>
</html>
در کد بالا قسمت load داره. شاید چون عکسها کم حجم است ، چیزی در اجرا من ندیدم. اجرای نهایی در عکس زیر ، شامل سه عکس است ، گربه باز در گوشه بالا و چپ است ولی دو عکس دیگر پایین تر و راست تر رفته اند.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Make a sprite from and image</title>
</head>
<body>
<script src="../pixi/pixi.min.js"></script>
<script>
//Aliases
const Application = PIXI.Application,
Container = PIXI.Container,
loader = PIXI.Loader.shared,
resources = PIXI.Loader.shared.resources,
TextureCache = PIXI.utils.TextureCache,
Sprite = PIXI.Sprite;
//Create a Pixi Application
const app = new Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
loader
.add("images/cat.png")
.load(setup);
function setup() {
//Create the `cat` sprite from the texture
const cat = new Sprite(resources["images/cat.png"].texture);
//Position the sprite and change its width and height
cat.x = 96;
cat.y = 96;
//Optionally change the width and height
cat.width = 80;
cat.height = 120;
//Optionally center the sprite's anchor point
cat.anchor.x = 0.5;
cat.anchor.y = 0.5;
//Rotate the sprite
cat.rotation = 0.3;
//You can use this alternative syntax to set the
//sprites anchor point, scale and rotation
/*
cat.anchor.set(0.5, 0.5);
cat.position.set(120, 120);
cat.scale.set(1.5, 3);
*/
//Add the cat to the stage
app.stage.addChild(cat);
}
</script>
</body>
</html>
عکس گربه کمی چرخیده ، کمی هم گویا حرکت کرده.
همین جوری اگر با نگاه به کد بخوام تفسیر کنم...
بعد ساختن اسپریت...
اول مختصات اون را تغییر داده ،
بعدش سایز اون را تغییر داده
بعدش گویا برده وسط صفحه.. و
بعدش چرخانده عکس را..
کلا کارهایی که با اسپریت می شده کرد را انجام داده.
سالک: چیزی که من تابحال از این برنامه ها فهمیدم.
یک اپلیکیشن ساخته میشه و بعد تعدادی اسپریت و اسپریت ها add میشن به اپلیکیشن ..
و بعدش با اسپریت ها کارهایی میشه کرد که در کد این پست دیدیم.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Make a sprite from a tileset sub-image</title>
</head>
<body>
<script src="../pixi/pixi.min.js"></script>
<script>
//Aliases
const Application = PIXI.Application,
Container = PIXI.Container,
loader = PIXI.Loader.shared,
resources = PIXI.Loader.shared.resources,
TextureCache = PIXI.utils.TextureCache,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle;
//Create a Pixi Application
const app = new Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
loader
.add("images/tileset.png")
.load(setup);
function setup() {
//Create the `tileset` sprite from the texture
const texture = TextureCache["images/tileset.png"];
//Create a rectangle object that defines the position and
//size of the sub-image you want to extract from the texture
const rectangle = new Rectangle(192, 128, 64, 64);
//Tell the texture to use that rectangular section
texture.frame = rectangle;
//Create the sprite from the texture
const rocket = new Sprite(texture);
//Position the rocket sprite on the canvas
rocket.x = 32;
rocket.y = 32;
//Optionally use `pivot` to move the sprite's x and y position
/*
rocket.pivot.set(32, 32);
rocket.rotation = 0.3;
console.log(rocket.position)
*/
//Add the rocket to the stage
app.stage.addChild(rocket);
}
</script>
</body>
</html>
نتیجه اجرا:
یک فایل به نام tileset.png هم در پوشه images این بسته هست ، اینه:
که عکس اون موشک هم داخل عکس هست. داخل پوشه images من عکس موشک دیگری ندیدم. پس احتمالا از این عکس استخراج شده.
اون اعداد 192 و 128 مضارب ۲ و ۳ از ۶۴ است. شاید این طوری موشک را از عکس درآورده.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Make a sprite from a texture atlas</title>
</head>
<body>
<script src="../pixi/pixi.min.js"></script>
<script>
//Aliases
const Application = PIXI.Application,
Container = PIXI.Container,
loader = PIXI.Loader.shared,
resources = PIXI.Loader.shared.resources,
TextureCache = PIXI.utils.TextureCache,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle;
//Create a Pixi Application
const app = new Application({
width: 512,
height: 512,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load a JSON file and run the `setup` function when it's done
loader
.add("images/treasureHunter.json")
.load(setup);
//Define variables that might be used in more
//than one function
let dungeon, explorer, treasure, door, id;
function setup() {
//There are 3 ways to make sprites from textures atlas frames
//1. Access the `TextureCache` directly
const dungeonTexture = TextureCache["dungeon.png"];
dungeon = new Sprite(dungeonTexture);
app.stage.addChild(dungeon);
//2. Access the texture using throuhg the loader's `resources`:
explorer = new Sprite(
resources["images/treasureHunter.json"].textures["explorer.png"]
);
explorer.x = 68;
//Center the explorer vertically
explorer.y = app.stage.height / 2 - explorer.height / 2;
app.stage.addChild(explorer);
//3. Create an optional alias called `id` for all the texture atlas
//frame id textures.
id = resources["images/treasureHunter.json"].textures;
//Make the treasure box using the alias
treasure = new Sprite(id["treasure.png"]);
app.stage.addChild(treasure);
//Position the treasure next to the right edge of the canvas
treasure.x = app.stage.width - treasure.width - 48;
treasure.y = app.stage.height / 2 - treasure.height / 2;
app.stage.addChild(treasure);
//Make the exit door
door = new Sprite(id["door.png"]);
door.position.set(32, 0);
app.stage.addChild(door);
//Make the blobs
const numberOfBlobs = 6,
spacing = 48,
xOffset = 150;
//Make as many blobs as there are `numberOfBlobs`
for (let i = 0; i < numberOfBlobs; i++) {
//Make a blob
const blob = new Sprite(id["blob.png"]);
//Space each blob horizontally according to the `spacing` value.
//`xOffset` determines the point from the left of the screen
//at which the first blob should be added.
const x = spacing * i + xOffset;
//Give the blob a random y position
//(`randomInt` is a custom function - see below)
const y = randomInt(0, app.stage.height - blob.height);
//Set the blob's position
blob.x = x;
blob.y = y;
//Add the blob sprite to the stage
app.stage.addChild(blob);
}
}
//The `randomInt` helper function
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>
pixijs.com
github.com
