HTML5 Game Development Blog

  • Tiled Game Engine slide

Supporting animated units

Category : Tiled Game Engine Mar 13th, 2015

Pages: 1 2

Creating animated units in Tiled Game Engine

Any game, especially RPG (or strategies, tower defenses and other types of games) use units player dial with – player unit, MOBs and NPCs. In most cases they differs by characteristics and behavior, but in general they are similar, especially from the rendering perspective. Lets introduce animated units to Tiled Game Engine.

Adding unit object on the map

Let’s start from the basis – Tiled Map Editor doesn’t support animated units. Actually it doesn’t support units in general. Pity but true. But it supports different objects and we’ll use them for our purposes. Let’s start:

  • Add new object layer and call it “npc”
  • create new rectangle shape on npc-layer
Creating animated unit: create object layer and place object on map

Create object layer and place new rectangle object on map


Now we need to define some properties for newly created object, so that Tiled Game Engine can parse it correctly. Let’s start from object typing. In the object properties type an object name (I called newly created object “Wyvern” and set type “unit”)

Creating animated unit: setting object type

Set object type to “unit”

Well, we’re very close to finish unit creation in the map editor, not it’s time to take a break and deep into animation atlases and meta information.

Animated units

As all we know any animation has at least 2 frames. But we are talking about animated units, that means it can move in different direction. Tiled Game Engine supports 8 direction on movements. As soon as unit can move we need to define several animation sequences – one per each direction.

Creating animated unit: movements directions

Unit can move in 8 directions


Also we’re talking about “live” object, that means it can “do” something, i.e. stand, run, hit and etc. I was impressed by Clint Bellanger’s Flare project with its animation and how it is organized. After some thinking over I decided to use similar techniques, but adopted to JavaScript.

Sprite sheet for animated unit

Creating animated unit: sprite sheet

Sprite sheet for Orc

So, let’s take a loot on the sprite map at right (click to get in full size). It looks like each sprite placed in the cell of the grid, where each row corresponds to the face direction and column – to the animation frame. But there are several animation sequences in that sprite sheet and we need to determinate, which sequence we need to play and when it actually finished. For that purposes we use information file, which describes all animation sequences.

Pages: 1 2


Leave a Reply

Your email address will not be published.

Like it? Share It!

We're making our best to provide good and valuable content. Please help us by clicking on one of the social icons, thanks for everything.