Using Animated Sprites

To define the animation, create a new file named <baseTexture>Animation.json to define the animation properties, for example to create an animation for the station ship, create a new file called stationAnimation.json.

Animated sprites require a sprite-sheet, which consists of multiple sprites located within a single image file. The sprites are usually consecutive but do not need to be.

Creating automatically-split sprites

In most cases, this option will be the most suitable, as the engine will calculate the exact positions of frames within the sprite-sheet at runtime.

An example file may appear similar to the following:

{
    "frameWidth": 256,
    "frameHeight": 256,
    "framesPerSecond": 16,
    "autoGenerateFrames": true
}

The "autoGenerateFrames" property allows the engine to guess where the frames are located within the sprite-sheet, so that they do no need to be specified manually.

Creating manually framed sprites

There are occasions where automatically calculating the position is not sufficient, such as when the sprite-sheet contains frames located in variable positions, or in a non-left-to-right ordering. In this case, the frames should be specified manually, as in the following example:

{
    "frameWidth": 256,
    "frameHeight": 256,
    "framesPerSecond": 16,
    "autoGenerateFrames": false,
    "frames": [
        {
            "width": 256,
            "height": 256,
            "x": 0,
            "y": 0
        },
        {
            "width": 256,
            "height": 256,
            "x": 0,
            "y": 256
        }
    ]
}

Using frame sizes different to the ones specified in the frameWidth and frameHeight properties for the width and height properties of individuals frames has not been properly tested and unexpected issues may occur in such cases. For each new frame, a new element should be added to the frames array property. The x co-ordinates ascend from left to right and the y co-ordinates ascend from top to bottom.

Some examples of animated sprites:

• drome.png and dromeAnimation.json
• station.png and stationAnimation.json
• rockyGround.json, rockyGround_ff_2.png and rockyGround_ff_2Animation.json
• bulletProjectile.png and bulletProjectileAnimation.json