How to draw your sprites
We've included a several components to make it easier to get started drawing sprites for entities. Here we'll go over how to set up your art and your components to get your sprites on the screen.
For animation, RenderSprite expects game art to be in spritesheets, defined according to EaselJS's SpriteSheet specification.
For an entity to render, it needs to receive ticks from the game. We pass these on from the layer using a handler. We've created HandlerRender for this purpose. You can add this component to the JSON definition of the layer that contains the entity. Make sure to add it to the layer JSON definition after any components that will determine where entities will be located (e.g. logic and collision). Adding the handler to the JSON definition looks like this.
{"type": "HandlerRender"}
Now we need to decide which render component to use on the entity. We have provided a primary render component that you can use, although you're welcome to make your own. The provided component is RenderSprite. This component needs to be added to the JSON definition of your entity as shown below.
{
"type": "RenderSprite",
"spriteSheet": {
"images": ["mookie"],
"frames": {
"width": 144,
"height": 93,
"regY": 93,
"regX": 72
},
"animations": {
"standing-right":[2],
"standing-left": [5],
"walking-right": {"frames": [3, 0, 1, 2], "speed": 0.25},
"walking-left": {"frames": [4, 7, 6, 5], "speed": 0.25},
"jumping-right": {"frames": [0]},
"jumping-left": {"frames": [6]}
}
},
"animationMap":{
"air,left": "jumping-left",
"air,right": "jumping-right",
"moving,left": "walking-left",
"moving,right": "walking-right",
"left": "standing-left",
"right": "standing-right",
"default": "standing-right"
}
}
At the highest level there are three parts to the JSON: id - This is the name of the component we're using. As stated above, we're using Render-Sprite. spriteSheet - This is where we put the information about the sprite sheet and the animations that come from it. What parameters this field accepts and how to lay them out can be found in the SpriteSheet documentation. The one difference in our implementation is that the image names are the ids of the assets rather than image paths. animationMap - This is a map of entity states to animations. For example: "air,left": "jumping-left" The field name is a comma delimited list of entity states. The value is the id of the animation to play (defined in the spritesheet object). When all the states in the field name are true Render-Sprite will play the associated animation. The order of the fields in the animationMap object is important because it is the order in which the fields are evaluated. If there are multiple fields in which all the states are true, the first field that is true will have its animation played. For example, in the JSON definition above, if an object's 'moving' and 'right' states are both true, the 'walking-right' animation will play even though all the states for the 'standing-right' animation are also true because the 'walking-right' animation comes before the 'standing-right' animation in the list.
In cases where two sets of states should result in the same animation being played, you should list them as two different fields. For example: "right": "standing-right", "default": "standing-right"
What animation is played is determined by the state of the object. To set the state, simply update the Entity's state like so: this.owner.state.right = true; this.owner.state.jumping = false;
The position of the animated image will be based on the entity's x and y values and the regX and regY values of the frames. To set an entity's x and y position in a component use: this.owner.x this.owner.y The regX and regY are set in the JSON definition of the sprite sheet and describe the sprite's offset in relation to the x and y position of the entity.
