Atlas Animation Z-Index

[johncintron]

Hi everyone,

In an animation, it's trivial to reorder a group's children as long as they come from the same atlas. For example:

 

group = game.add.group();

var bottom = group.create(x, y, atlas_key, sprite_key_0);

var top = group.create(x, y, atlas_key, sprite_key_1);

top.animations.add("key", [sprite_key_1, sprite_key_0], FPS, loop);

bottom.animations.add("key", [sprite_key_0, sprite_key_1], FPS, loop);

 

This code effectively brings sprite_key_0 to the top on the first frame because bottom is created last and uses sprite_key_0 during its animation.

However, what's not trivial and may be impossible is to use different atlas textures and reorder children that use different atlases.

Hopefully here's a clear example of what I'm trying to communicate:

 

group = game.add.group();

var bottom = group.create(x, y, some_atlas, sprite_0);

var top = group.create(x, y, another_atlas, sprite_9);

Now suppose I want to create an animation for bottom that uses frames from another_atlas -- so like

bottom.animations.add("key", [some_atlas_sprite_0, some_atlas_sprite_1, another_atlas_sprite_9, another_atlas_sprite_3], FPS, loop);

 

This seems to be impossible because bottom cannot use frames from a different atlas. Is there a reasonable workaround? Please don't suggest merging some_atlas with another_atlas because I have 1.8 GB in sprite assets.

[drhayes]

You can add whatever sprite you want to a group. The convenience methods make it easy to get the group to create and add sprites for you, but ultimately you can call "group.add" and stick whatever you want in there.

[stupot]

Hi John, I think you have a little confusion about sprites/groups/children/z-order. 

A sprite can exist in any group and in any z-order.  Each sprite can have a list of frames which can be treated as an animation BUT these frames must all be in the same baseTexture, ie an animation cannot be made from frames from more than one image/atlas/spritesheet. ALSO child sprites in a group are not limited to using the same baseTexture, I think when you said "group's children" you were referring to the frames of a sprites animation, in land of Phaser a groups children are very different things.

It's a common question, how to create animation from several sources, Phaser cannot do this out of the box.  You'll either have to rearrange your graphics or write some code to handle animation sourced from several textures (I'm pretty sure I've seen some suggestions for this previously).

[johncintron]

I appreciate the quick responses.

 

I worded my question rather poorly, but I think I have a better understanding of it now. So a a child of a group can load from atlas_x, while another child of the same group can load from atlas_y, but the latter child cannot use frames from atlas_x in its animation.

 

Let me restate what I'm trying to accomplish more specifically. Suppose I have a humanoid sprite. In its idle state, his sprites are loaded in this order:

body = group.create(0, 0, "body_atlas", "torso_idle");

sword = group.create(0, 0, "weapons", "sword_idle");

arms = group.create(0, 0, "body_atlas", "arm_idle");

head = group.create(0, 0, "body_atlas", "head_front");

so his head is the topmost element. Now I want to add animations to each child like so: on the first frame, the ordering is preserved, i.e. the head will be at the top. On the third frame, the sword will appear on top of the head, and on the sixth frame, the sword will move back down.

It's trivial to move his head down alone, i.e. I could do group.moveDown(head), but there's no way to call moveDown() in the middle of an animation.

Is there a quick workaround for this?

[stupot]

Right I got it now, you want to manipulate the z-order of your sprite components during the frame animation.  I don't think Phaser provides this functionality but you can do it yourself, best approach would probably be customise the animation player to also process a z-order list along with it's usual frame list.

Or you could manage the whole animation yourself, frames & z's in an update function.  Could be long winded and I get the feeling you need a more generic solution

Also I did see this the other day, didn't go into it in detail but may be of use to you:

http://phaser.io/news/2016/03/z-order-tutorial