Spriter skeletal animations in Phaser

[gmalone]

2 hours ago, gmalone said:

Will let you know.

Letting you know... SUCCESS.   @TomAtom, thanks for taking the time to clarify and adjust the code.  At the end of the day, my issue was the .png file extensions in the atlas json.  But, it is great that you've separated out the spriter.js player from the example code.  And the tutorial is rich w/ information.

I owe you a drink!  Let me know if you have a PayPal acct and I'll buy you that drink.  

Thanks too @ritherz for your useful info.

[Tom Atom]

Quote

I owe you a drink!  Let me know if you have a PayPal acct and I'll buy you that drink.

Hahaha! Thanks. But I take this as a small gift to community. In past years I took a lot from indie developers community (tutorials, tools, sources, ...) and now I can return back something.

[gmalone]

On 4/18/2016 at 1:05 PM, gmalone said:

On 4/19/2016 at 1:34 AM, Tom Atom said:

Hahaha! Thanks.

 

@TomAtom, could you indulge one more fundamental question? 

Referring to your Spriter-Phaser code, I'm having trouble understanding how to apply physics and collisions to a Spriter object/character.  I know that in certain ways it needs an explicit 'group' association to apply physics/collisions, the 'normal' sprite method only works for non-group sprite objects.

I'm poring over the code and the Phaser group docs, but could use an assist if you can.

Thx.  - G

[Tom Atom]

@gmalone: I did not use physics with it yet, but I was thinking about it in past...

First, I thought that adding sprite into SpriterGoup would be enough. But such sprite is affected with physics only by itself - it is independend on its siblings.

As second solution I created sprite, activated its physics and used its addChild() to add whole SpriterGroup as child and this works (modified bouncing Atari from Phaser examples):

            this.game.physics.startSystem(Phaser.Physics.ARCADE);
            this.game.physics.arcade.gravity.y = 100;

            var sprite = this.game.add.sprite(0, 0, "TEST", 0);
            this.game.physics.arcade.enable(sprite);

            sprite.body.velocity.set(-100, -100);
            sprite.body.bounce.set(1);
            sprite.body.collideWorldBounds = true;

            sprite.addChild(this._spriterGroup);

On image below is modified Spriter Test with code above. Green cap is new sprite (as there are no empty sprites in example's atlas) with debug box - guy is its child. It is jumping and bouncing from walls and animated guy is moving together with it.

 

[gmalone]

Yes, good solution.  Attach an invisible controller child sprite to the spriter group object the SpriterGroup object as a child to an invisible controller sprite (parent) to handle collisions.   Clean and straightforward.   Certainly allows easy control of collisions.  

Now, as to physics body fx such as gravity.  Though I'm easily able to get simple sprites to behave well in gravity, getting a Spriter object (so far) just winds up with the object fixed in the sky, animating, but not falling to the ground (see dinosaur in attached image, whereas the star sprite fell to the bridge).  

The challenge:  how to get the full spriter object (with all its children sprites) to act together with gravity.  

I've tried these and a few other group/object methods in various combinations, with no good results...

this._spriterGroup = this.add.physicsGroup(Phaser.Physics.ARCADE); // unclear how/when to use this
this._spriterGroup.enableBody = true;  // I thought this would surely work, but didn't
this._spriterGroup.physicsBodyType = Phaser.Physics.ARCADE;  // wild stab tried w/ and w/o

I could be missing some additional statements or syntax that would make the spriter object fall from the sky.

I suppose the other approach would be to try to apply physics bodies fx to each sprite child inside the spriter object as it's created.  

Puzzling on this now...

Thanks again for your thoughts.

Big heavy dinosaurs MUST FALL!

 

Edited April 22, 2016 by gmalone
Corrected misunderstood technique

[Tom Atom]

Yes, you got expected result - this is what I wrote as first thing that came on my mind, but was not correct.

Do it with second way I described:

Quote

As second solution I created sprite, activated its physics and used its addChild() to add whole SpriterGroup as child and this works ...

So, in your case: create star sprite, add physics body to it, (optionally modify its collision box) and add your SpriterGroup as its child with addChild() method. Every sprite is PIXI.DisplayObjectContainer, so it can have child objects.

Edit: adding physics body to each part would not work - aftar fall you would get pile of individual parts ... which can be funny :-)

[gmalone]

Oh, I had misread your original post thinking the sprite was the child, and the SpriterGroup the parent.  But (much better) the sprite is the parent and the SpriterGroup the child!  Sorry I made you have to repeat yourself.

Thanks, I'll run with this and see where I can take it.

[gmalone]

Hi @TomAtom, an update on how my use of the Spriter-Phaser code is going, and a question...

I've got a single character animating in a game very well.  I'm using the technique we've discussed of using an invisible master-sprite parent to the _spriterGroup child object.  All is working well, including collisions, etc.

Question:
Do you see any problems with my intention to create multiple _spriterGroup game characters, perhaps an array/list of characters that get created and updated in order?  Knowing the code as you do, I was interested in your thoughts on how to implement multiple simultaneous Spriter game characters in a game.

Many thanks.

[gmalone]

Following up:   I've had success creating multiple _spriterGroup[actor] characters, as hoped.  The individual Spriter characters are appearing, updating and subject to controls.

All's well.

[Tom Atom]

Quote

Do you see any problems with my intention to create multiple ...

Sorry, for late reply. I see you made it work. So, just to make it clear: yes, you can make multiple instances of SpriterGroup - all taking data, that needs to be loaded only once. Data are "read only", like templates and nothing is written back into it. This is, where I had problem in past as one of my previous implementations wrote back some help variables into it. As far as I was running only one instance, everything went well. But multiple instances affected each other.

 

[gmalone]

Wondering your thought, if you have time, on making spriter.js allow for playing an animation in reverse?

I've examined the core code that plays the animations and see that it is pretty much wired to play in 'normal' order.  I can see how playing an animation in reverse could be accomplished, but suspect there are many places in the code that I'd have to hunt down that presume the normal sequence.

Why in reverse?  I have a need for a character to step backwards.  I know I could just make another animation in Spriter and be done with it.  May have to do that.  But it occurred to me how useful (at least in this kind of situation) it would be to simply send a 'reverse' flag to the playAnimation and updateAnimations functions.

Just kicking the tires.  

UPDATE:

I'm, for now, just going to create a reverse animation in Spriter and add to the scml/scon... will look more natural that way, anyway.  But I do see how to augment the code to allow a forward/reverse playing of an animation sequence.  Don't have time for it now, but another day.  

[Tom Atom]

Hmmm... interesting idea. Key class to step along any Spriter line (timeline, varline, soundline,...) is LineStepper class. And then there would be neccessary some adjustments like in SpriterBone class to take previous key instead of next one.

 

[Olrand]

Hello! Very nice plugin. 

I make some rpg project now. Is there capability to change graphics on bones dynamically during game process? I want to create player's animations and change parts of player's model when player change armor/weapon items in his inventory.

 

[Tom Atom]

@Olrand I think it is possible with character maps. These are supported in player, but if you want to create animation with them, you will need Spriter Pro.