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.
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.
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.
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.
3 years ago ·
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.
3 years ago ·
Thank you!
3 years ago ·
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.
3 years ago ·
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.
3 years ago ·
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 ·
Glad you like it.
3 years ago ·
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 ·
Hi,
Yes, I’m thinking about that. I’m going to re-compose all posts for better look and, probably, will re-organize them.
3 years ago ·
Thanks for sharing such a good idea, piece of writing is
nice, thats why i have read it fully
3 years ago ·
You are welcome!
3 years ago ·
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 ·
Hi,
Thanks for pointing that. Could you please specify which images are broken?
3 years ago ·
Good article! We will be linking to this great
article on our site. Keep up the good writing.
3 years ago ·
Thank you!
3 years ago ·
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 ·
Hi,
It is a free theme called Workality Lite.
3 years ago ·
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.