HTML5 Game Development Blog

  • Tiled Game Engine slide

Units animation, z-ordering and tiled items

Category : JavaScript, Tiled Game Engine Mar 17th, 2015

Pages: 1 2 3 4


animating unit entity

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 undefinedIt 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
    // 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'], 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:


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.

Pages: 1 2 3 4


(17) comments

4 years ago · Reply

I like what you guys are up too. Such clever work and exposure!

Keep up the superb works guys I’ve incorporated you guys to our blogroll.

4 years ago · Reply

Hi, I do think this is a great site. I stumbledupon it 😉 I am going to return yet again since i have book-marked it. Money and freedom is the best way to change, may you be rich and continue to help others.

4 years ago · Reply

Hello There. I found your weblog the use of msn. This is a really smartly written article.

I’ll be sure to bookmark it and come back to read extra of your useful
information. Thanks for the post. I will definitely comeback.

paid surveys
3 years ago · Reply

Hey there! This is my first visit to your blog! We are a team of volunteers and starting a new project in a community in the
same niche. Your blog provided us beneficial information to work on. You have done a marvellous job!

3 years ago · Reply

I was wondering if you ever considered changing the page layout of your website?
Its very well written; I love what youve got to say.

But maybe you could a little more in the way of content
so people could connect with it better. Youve got an awful lot of text for
only having one or two pictures. Maybe you could space it out better?

    3 years ago · Reply


    Yes, I’m thinking about that. I’m going to re-compose all posts for better look and, probably, will re-organize them.

minecraft games
3 years ago · Reply

Thanks for sharing such a good idea, piece of writing is
nice, thats why i have read it fully

Hi just wanted to give you a quick heads
up and let you know a few of the images
aren’t loading correctly. I’m not sure why but I think its a linking issue.
I’ve tried it in two different browsers and both
show the same outcome.

    3 years ago · Reply


    Thanks for pointing that. Could you please specify which images are broken?

Good article! We will be linking to this great
article on our site. Keep up the good writing.

Neat blog! Is your theme custom made or did you download it from somewhere?
A theme like yours with a few simple tweeks would really make my blog jump out.
Please let me know where you got your theme. Many thanks

    3 years ago · Reply


    It is a free theme called Workality Lite.

3 years ago · Reply

Its like you learn my mind! You appear to grasp so much about this, like you wrote the
book in it or something. I feel that you
just could do with some p.c. to force the message home a bit, but other than that, that is great blog.
A fantastic read. I will definitely be back.

Leave a Reply to Anonymous Cancel 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.