Early we’ve described, how to create animated units with Tiled Map Editor and I’ve promised to provide JavaScript internals of how it is made in Tiled Game Engine. In this topic we’ll cover how units animation made, what is z-ordering and how it is applied here, how to transform tiled layer to object group and why it should to be done.

Unit entity

If you’ll take a demo code from animated tiles chapter and load new map in it you will not see any units on the screen, but animated teleport tile only. Also you will not notice any errors in the console for unsupported object types (probably it should be in the development mode?.. vote for it… ).

EntitiesFactory was already described, but let’s take one more look at it. When TiledMap::parse call EntitiesFactory::create it can return either Entity inherited object or undefined. It depends on the list of registered entity types. By default just Entity and Tile types registered. Let’s add Unit entity.

Adding new entity type

When you’re creating new entity type it is supposed it implements Entity interface:

    /**
     *  @constructor
     *  Entity class constructor to define all internal variables
     */
    function Entity() {...};
    /**
     *  Initialize entity, parse entity data and prepare other entity-related stuff
     *  @param {object} data            Entity initialization data object
     *  @param {object} assetManager    Reference to the TiledGameEngine.Assets instance
     *  @param {object} map             Reference to the TiledGameEngine.TiledMap instance
     */
    Entity.prototype['init'] = function(data, assetManager, map) {...};
    /**
     *  Update entity state and return time till next update (in ms)
     *  @param {number} dt          Time difference from previous call
     *  @param {number} time        Time of current call
     *  @param {array}  viewport    TypedArray with view port position and dimension: [left, top, width, height, visible]
     *  @return {number} Time till next update
     */
    Entity.prototype['update'] = function(dt, time, viewport) {...};
    /**
     *  Render entity to specified canvas
     *  @param {object} ctx         CanvasContext to draw in
     *  @param {object} stage       Reference to current active stage
     *  @param {array}  viewport    TypedArray with view port position and dimension: [left, top, width, height, visible]
     */
    Entity.prototype['render'] = function(ctx, stage, viewport) {...};

First of all let’s create new entity class and register it in the EntitiesFactory, using correct object type name

    function Unit() {
        // call super-class implementation
        TiledGameEngine.EntitiesFactory['entity'].call(this);
    }
    // super-class inheritance
    Unit.prototype = Object.create(TiledGameEngine.EntitiesFactory.entity.prototype);

    // @Entity interface implementation
    Unit.prototype.init = function(data, assetManager, map) {
        // call super-class implementation
        TiledGameEngine.EntitiesFactory['entity'].prototype.init.call(this, data, assetManager, map);
    };
    Unit.prototype.update = function update(dt, time, viewport) {
        this.redraw = false;
        return 16;
    };
    Unit.prototype.render = function render(ctx, stage, viewport) {
    };
    // Register new entity type in factory
    TiledGameEngine.EntitiesFactory.register('unit', Unit);

All registered entities are available as property of EntitiesFactory. To inherit from some existing Entity you can easily access to the base class:

TiledGameEngine.EntitiesFactory['entity']

While registering new entity type we should provide object type name, that will be linked with this entity. Object type name is case insensitive, so you can type it as you want – Tiled Game Engine will automatically transform it to the lower case. I recommend to implement new entity in separate class with automatic registering in the end of the file.

In the update function we check time difference since last entity animation frame update and made corresponding changes in the entity state, like changing animation direction, increasing animation frame index changing animation state and others.

In the render function we simply render current entity animation frame to the canvas.