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

Parsing object group layer

Early, while parsing JSON file, we were聽ignoring all layers except tiled layers. Now it is time to start parsing objectgroup layers. Actually I do not see any reason to invent new data structure for creating entities. All required information for unit creation is already in the JSON file and we can get it directly. But we should take some actions in advance, to make all things works.

Getting assets from object groups

Remember we’ve put sprite sheet聽and animation information files name into unit object properties? We should load it before we start entities creation.

To get all assets for our entities we should modify our TiledMap.js code a bit. As you remember our parsing process has 2 stages – (1) get assets from file and (2) parse layers data. So we should modify TiledMap::getAssets method to get required images and info files from object groups:

TiledMap.prototype.getAssets = function() {
    // get units images and info files
    var layer, obj, j;
    i = json.layers.length;
    for (; i--;) {
        layer = json.layers[i];
        if (layer['type'] === 'objectgroup') {
            j = layer['objects'].length;
            for (; j--;){
                obj = layer['objects'][j];
                if (obj['type'] === 'unit') {
                    if (obj['properties']) {
                        if (obj['properties']['img'] && obj['properties']['inf']) {
                            imgs[imgs.length] = obj['properties']['img'];
                            imgs[imgs.length] = obj['properties']['inf'];
    return imgs;

Looks a bit hard coded and I’ve put this into issue tracker on GitHub, heh.

Creating unit entities from object group

After all assets are loaded we start parsing our map. In the TiledMap::parse we should convert all object from object group to the entities. I do it in the lazy way, as far entities can appear in any layer and it is reasonable just to collect all required information in collection and then create all entities in one place.

Thus, code for object group parsing will be the following:

        function parseObjectGroup() {
            l = item['objects'].length;
            for (j = 0; j < l; ++j) {
                data = item.objects[j];
                animatedTiles[animatedTiles.length] = data;

And whole layers parsing loop will be:

// compress layer data and remove server-side and development layers
arr = json['layers'];
m = arr.length;
i = 0;
var animatedTiles = [];
for (;i < m;++i) {
    item = arr[i];
    if (item['type'] === 'tilelayer') {
    } else if (item['type'] === 'objectgroup') {
json['layers'] = arr;
// create entities
if (animatedTiles.length > 0) {
    for (i = 0, m = animatedTiles.length; i < m; ++i) {
        var obj = TGE.EntitiesFactory.create(animatedTiles[i], this.assetsManager, this);
        if (obj) {
            this.objects[this.objects.length] = obj;

TiledMap – is model part of our map. But in the view part of our map (class TiledMapStage) everything is done already. We need no changed in the code, as far we followed the same code styles and interfaces we used for animated tiles.

Looks like we’ve done and can run our game 馃槈 But wait! Looks at screen shot below. Looks like something goes wrong and our Minotaur is on the roof, but in the Tiled Map Editor – it is placed behind the house. What’s wrong with it?

Units animation

Wrong object z-ordering

The problem here based on the layering and z-ordering. If you dump data in the Developer Console you’ll notice, that just 4 Units and 1 Tile entities created. Surely, they are ordered on correct way with respect to its dimension, but that is not enough.

Entities created from object group

Entities created from object group and 1 animated tile

To solve that issue we have to convert corresponding tiled layer to the object group. I’m a lazy programmer and I do not like to read tea leaves. That’s why I introduce cool feature (at least I like it) called triggers. Right now I’ll put it custom properties for the layer with objects and make Tiled Game Engine handle it.

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

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.