State of the elves

If you have a complex game character or interactive object, you may want that character to behave differently depending on what’s happening in the game environment. Each individual behavior is called a state. If you define states on sprites, they can be triggered whenever an event corresponding to that state occurs in the game. For example, when controlling a game character through the arrow key on the keyboard, pressing the left arrow will move the character to the left. In fact, it can be understood that pressing the left key head will trigger the state of the character to the left.

To start using Sprite states, you first need a status player. The status player is used to control the Sprite state. The Pixi Sprite doesn’t have its own state player, but you can use the Sprite method in the SpriteUtilities library, which will create a Sprite with a built-in state player.

Use the SpriteUtilities library mentioned in the previous article, see learning PixiJS – animated sprites article.

sprite

Definition:

Use the Sprite function to create any type of Pixi Sprite.

Usage:

let anySprite = su.sprite(frameTextures, xPosition, yPosition);
Copy the code

Parameters:

The first parameter frameTextures can be any of the following:

  • aPNGImage string
  • aPixiTexture object
  • Texture atlas frameidAn array of
  • aPNGAn array of image strings
  • aPixiTexture object array

If you supply the Sprite method with an array, it will return an animated Sprite with a built-in status player.

The status player is simply a collection of four new properties and methods that control the Sprite animation state.

  • FPS: Property used to set the exact animation speed, in frames per second. Its default value is 12. FPS is independent of the game loop FPS, which means you can have Sprite animations play at a speed independent of the game or application speed.

  • PlayAnimation: A method for playing Sprite animations. If you want to play a subset of frames, you pass in the start frame number and the end frame number. By default, animations will loop unless you set the Sprite’s loop property to false.

  • StopAnimation: A method to stop the Sprite animation at the current frame.

  • Show: The acceptance argument is a number used to display the method of a particular frame number.

The second argument, xPosition, and the third argument, yPosition, represent the X and y coordinates of the Sprite to be created.

What is Sprite state?

Below is a PNG image of a game character that contains all the frames needed to make it look like the character is walking in four different directions.

There are actually eight Sprite states in this Sprite: four static states and four animated states. Let’s look at what these states are and how to define them.

The static state

The static state of the Sprite defines the four positions of the Sprite when it is not moving. These states are: down, left, right, and Up. The following image shows the states on the Sprite and the frame numbers that identify them.

You can see that frame 0 is down, frame 4 is left, frame 8 is right, and frame 12 is up. How do you define these states? First, create sprites. The following code shows how to create sprites using the Sprite method.

let frames = su.filmstrip("images/Iori.png".32.32);
let Iori = su.sprite(frames);
Copy the code

Next, create an object literal property called States on the Sprite. Create down, left, right, and Up keys in the States object. Sets the value of each key to the frame number corresponding to the state.

Iori.states = {
    down: 0.left: 4.right: 8.up: 12
};
Copy the code

The next step is to use the Sprite’s show method to show the correct state. For example, the following code shows how to display the left state of the Sprite:

Iori.show(Iori.states.left);
Copy the code

The following figure shows how changing these states affects the appearance of the Sprite.

You can use it wherever you need to, allowing sprites to react to changes in the game world. One of the more common scenarios is when you press a key on a keyboard, so you can change the orientation of the Sprite by pointing the arrow key. For example, when you press the left arrow key, you can turn the Sprite to the left in the following way.

// Press the left arrow
left.press = (a)= > {
 // Display 'left' state
 Iori.show(Iori.states.left);
};
Copy the code

Simply use the same format for the rest of the arrow keys to make the Sprite face in all four directions.

The animation state

The animation state of the Sprite defines four sequences of actions for the Sprite to move. These states are: walkDown, walkLeft, walkRight, and walkUp. The image below shows the position of these states on the Sprite diagram.

Each of these states consists of four frames that, when played in a loop, create a continuous walking animation. To define each animation state, create a key in the States object that describes that state. The value of the key should be an array of two elements: the start frame number and the end frame number. For example, here’s how to define the walkLeft state:

//3 is the frame number at the beginning of the animation sequence, and 5 is the frame number at the end
walkLeft: [3.5]
Copy the code

Here’s how to add these four new animation states to Iori sprites:

Iori.states = {
    down: 0.left: 4.right: 8.up: 12.walkDown: [0.3].walkLeft: [4.7].walkRight: [8.11].walkUp: [12.15]};Copy the code

Now that its states are defined, let’s make a Sprite that can walk.

Combine what you’ve learned about making animated sprites with defining states and keyboard responses to create a walking game character.

See the effect

If you want the Sprite to move faster or slower across the screen, change the values of vx and VY in the arrow key method. If you want the Sprite’s walking animation to be faster or slower, change the Sprite’s FPS property.

Tool for making animation frames

  • Manually draw each frame using Adobe Illustrator or Photoshop.
  • Flash Professional simply exports the animation as a Sprite and you can use it in JavaScript games. You can also use tools like Shoebox to convert Flash’s SWF file format into a texture atlas.
  • Piskel is a free online tool for creating pixel-style animated game characters.
  • Dragon Bones, Spine, and Creature. All three tools are very similar. They can create complex game characters, animate them, and export them as Sprite drawings and JSON files.
  • Shoebox is a free App based on Adobe Air that can be used to create Sprite images, split Sprite images, detect sprites in transparent images and cut them out.

PixiJS – Animation sprites

Next, learn about PixiJS – Particle effects