function gameLoop() {
//Loop this function at 60 frames per second
requestAnimationFrame(gameLoop);
//Move the cat 1 pixel to the right each frame
cat.x += 1;
//Render the stage to see the animation
renderer.render(stage);
}
//Start the game loop
gameLoop();
If you run this code, you will see the sprite gradually move to the right of the stage.
It really is everything! Just change any sprite properties in small increments within the loop and they will animate over time. If you want the sprite to animate in the opposite direction (to the left), just give it a negative value, like -1. You'll find this code in the movingSprites.html file - here is the complete code:
//Aliases
var Container = PIXI.Container,
autoDetectRenderer = PIXI.autoDetectRenderer,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite;
//Create a Pixi stage and renderer
var stage = new Container (),
renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);
//Load an image and the run the `setup` function
loader
.add("images/cat.png")
.load(setup);
//Define any variables that are used in more than one function
var cat;
function setup() {
//Create the `cat` sprite
cat = new Sprite(resources["images/cat.png"].texture);
cat.y = 96;
stage.addChild(cat);
//Start the game loop
gameLoop();
}
function gameLoop(){
//Loop this function 60 times per second
requestAnimationFrame(gameLoop);
//Move the cat 1 pixel per frame
cat.x += 1;
//Render the stage
renderer.render(stage);
}
(Note that the cat variable needs to be defined outside of the setup and gameLoop functions so you can access it there).
You can animate sprites of scale, rotation or size - whatever! You'll see more examples of how to animate the previous sprite.
2. Use the speed property
To give you more flexibility, it's a good idea to use two speed properties to control the speed of the sprite's movement: vx and vy. vx is used to set the speed and direction of the sprite on the x-axis (horizontal). vy is used to set the speed and direction of the sprite on the y-axis (vertical). Instead of changing the sprite x and y values directly, first update the speed variables and then assign those speed values to the sprite. This is an extra mod you need for interactive game animations.
The first step is to create the vx and vy properties on your sprite and give them an initial value.
cat.vx = 0; cat.vy = 0;
Setting vx and vy to 0 means the sprite doesn't move.
Next, in the game loop, update vx and vy how fast you want the sprite to move. Then assign these values to the sprite x and y properties. Here's how to use this technique to make the cat sprite move down and right one pixel per frame:
function setup() {
//Create the `cat` sprite
cat = new Sprite(resources["images/cat.png"].texture);
stage.addChild(cat);
//Initialize the cat's velocity variables
cat.vx = 0;
cat.vy = 0;
//Start the game loop
gameLoop();
}
function gameLoop(){
//Loop this function 60 times per second
requestAnimationFrame(gameLoop);
//Update the cat's velocity
cat.vx = 1;
cat.vy = 1;
//Apply the velocity values to the cat's
//position to make it move
cat.x += cat.vx;
cat.y + = cat.vy;
//Render the stage
renderer.render(stage);
}
When you run this code, the cat will move down to the right one pixel per frame:
what if you want the cat to move in a different direction? To move the cat to the left, give it a vx value of -1. To move it up, give the cat a vy value of -1. To make the cat move faster, give it larger vx and vy values, like 3, 5, -2, or -4.
You'll see how the modular sprite's velocity vx and vy velocity properties help with keyboard and mouse pointer control systems for games, as well as make it easier to implement physics.
3. Game state
As a style, and to help modularize your code, I recommend structuring your game loop as follows:
//Set the game's current state to `play`:
var state = play;
function gameLoop() {
//Loop this function at 60 frames per second
requestAnimationFrame(gameLoop);
//Update the current game state:
state();
//Render the stage to see the animation
renderer.render(stage);
}
function play() {
//Move the cat 1 pixel to the right each frame
cat.x += 1;
}
As you can see, gameLoop calls the state function 60 times per second. What is the state function? Assigned to play. This means that all the code in the play function will also run 60 times per second.
Here's how the code from the previous example is refactored into this new model:
//Define any variables that are used in more than one function
var cat, state;
function setup() {
//Create the `cat` sprite
cat = new Sprite(resources["images/cat.png"].texture);
cat.y = 96;
cat.vx = 0;
cat.vy = 0;
stage.addChild(cat);
//Set the game state
state = play;
//Start the game loop
gameLoop();
}
function gameLoop(){
//Loop this function 60 times per second
requestAnimationFrame(gameLoop);
//Update the current game state:
state();
//Render the stage
renderer.render(stage);
}
function play() {
//Move the cat 1 pixel to the right each frame
cat.vx = 1
cat.x += cat.vx;
}
4. Keyboard Movement
With a little more work, you can build a simple system to control sprites using the keyboard. To simplify your code, I suggest you use this custom function keyboard to listen and capture keyboard events.
function keyboard(keyCode) {
var key = {};
key.code = keyCode;
key.isDown = false;
key.isUp = true;
key.press = undefined;
key.release = undefined;
//The `downHandler`
key.downHandler = function(event) {
if (event.keyCode === key.code) {
if (key.isUp && key.press) key.press();
key.isDown = true;
key.isUp = false;
}
event.preventDefault();
};
// The `upHandler`
key.upHandler = function (event) {
if (event.keyCode === key.code) {
if (key.isDown && key.release) key.release();
key.isDown = false;
key.isUp = true;
}
event.preventDefault();
};
//Attach event listeners
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
window.addEventListener(
"keyup", key.upHandler.bind(key), false
);
return key;
}
The keyboard function is easy to use. Create a new keyboard object like this:
var keyObject = keyboard(asciiKeyCodeNumber);
One of its parameters is the ASCII code of the keyboard key you want to listen for. Here is a list of ASCII keyboard code numbers.
Then assign the press and release methods to the keyboard object as follows:
keyObject.press = function() {
//key object pressed
};
keyObject.release = function() {
//key object released
};
The keyboard object also has isDown and isUp boolean properties that you can use to check the state of each key.
Take a look at the keyboardMovement.html file in the examples folder to see how to use this keyboard function to control the sprite using the keyboard's arrow keys. Run it and use the left, up, down, right arrow keys to move the cat around the stage.
Here is the code that does all of this:
function setup() {
//Create the `cat` sprite
cat = new Sprite("images/cat.png");
cat.y = 96;
cat.vx = 0;
cat.vy = 0;
stage.addChild(cat);
//Capture the keyboard arrow keys
var left = keyboard(37),
up = keyboard(38),
right = keyboard(39),
down = keyboard(40);
//Left arrow key `press` method
left.press = function() {
//Change the cat's velocity when the key is pressed
cat.vx = -5;
cat.vy = 0;
};
//Left arrow key `release` method
left.release = function() {
//If the left arrow has been released, and the right arrow isn't down,
//and the cat isn't moving vertically:
//Stop the cat
if (!right.isDown && cat.vy === 0) {
cat.vx = 0;
}
};
//Up
up.press = function() {
cat.vy = -5;
cat.vx = 0;
};
up.release = function() {
if (!down.isDown && cat.vx === 0) {
cat.vy = 0;
}
};
//Right
right.press = function() {
cat.vx = 5;
cat.vy = 0;
};
right.release = function() {
if (!left.isDown && cat.vy === 0) {
cat.vx = 0;
}
};
//Down
down.press = function() {
cat.vy = 5;
cat.vx = 0;
};
down.release = function() {
if (!up.isDown && cat.vx === 0) {
cat.vy = 0;
}
};
//Set the game state
state = play;
//Start the game loop
gameLoop();
}
function gameLoop() {
requestAnimationFrame(gameLoop);
state();
renderer.render(stage);
}
function play() {
//Use the cat's velocity to make it move
cat.x += cat.vx;
cat.y + = cat.vy
}