How to use Spriter in Phaser

[CharlesCraft50]

How to use spriter in phaser/javascript, and how to export it?

[Tom Atom]

Hi, you can follow this tutorial: http://sbcgamesdev.blogspot.cz/2016/04/phaser-tutorial-using-spriter-player.html

[CharlesCraft50]

Thank you

[CharlesCraft50]

@Tom Atom How can I fix this and why there is a problem?:
 

Uncaught TypeError: Cannot read property 'variablesLength' of null
    at new i (spriter.min.js:2)
    at Level1.create (LevelState.js:104)
    at Phaser.StateManager.loadComplete (phaser.js:30083)
    at Phaser.StateManager.preUpdate (phaser.js:29849)
    at Phaser.Game.updateLogic (phaser.js:36333)
    at Phaser.Game.update (phaser.js:36280)
    at Phaser.RequestAnimationFrame.updateRAF (phaser.js:61979)
    at _onLoop (phaser.js:61962)

Thanks in advance

[Tom Atom]

@CharlesCraft50 - please, send me your Spriter animation (whole package - xml + graphics) and also put here code you used to load and run it (sending whole game code would be better, so I can run it on my PC).

[CharlesCraft50]

@Tom Atom I already fixed my problem, Thank you for helping me

[CharlesCraft50]

@Tom Atom How to use the animation properly in the player that can move by using keys? please give me some game demos that uses spriter.

Also this is what happen when I set the gravity of the player:

Thanks in advanced

[Tom Atom]

Spriter character is for example in this game:

or this one:

 Problem with physics is, that if you apply it on every single part of Spriter character, they will fall down with gravity ... maybe physics will fight with animation. What you need is:
1] create empty sprite,
2] enable physics and set body and its size for this sprite (do not enable physics for children!),
3] add Spriter.SpriterGroup as child of this sprite

This is directly from Summer Love - "Hero" frame is empty / blank sprite with size 20x90 - it is just because Arcade physics will automatically set body size to these dimensions:

module Leto {

    export class Player extends Phaser.Sprite {

        private _spriterGroup: Spriter.SpriterGroup;

        // -------------------------------------------------------------------------
        public constructor(game: Phaser.Game) {
            super(game, 0, 0, "Sprites", "Hero");

            // create Spriter loader - class that can change Spriter file into internal structure
            var spriterLoader = new Spriter.Loader();

            // create Spriter file object - it wraps XML/JSON loaded with Phaser Loader
            var spriterFile = new Spriter.SpriterXml(game.cache.getXML("PlayerAnim"));

            // proces Spriter file (XML/JSON) with Spriter loader - outputs Spriter animation which you can instantiate multiple times with SpriterGroup
            var spriterData = spriterLoader.load(spriterFile);

            // create actual renderable object - it is extension of Phaser.Group
            this._spriterGroup = new Spriter.SpriterGroup(this.game, spriterData, "Sprites", "panak", "beh", 200);

            // set position size
            this._spriterGroup.position.set(10, 87);

            // adds SpriterGroup to Phaser.World to appear on screen
            this.addChild(this._spriterGroup);
        }
    }
}

 

[CharlesCraft50]

@Tom Atom How to pause the animation when finished? and is it possible to set the animation time?

Thanks in advanced

[Tom Atom]

@CharlesCraft50 to check if animation is finished or another loop started, you can subscribe to receive these signals in Spriter.SpriterGroup:

        // onLoop(SpriterGroup);
        public onLoop: Phaser.Signal = new Phaser.Signal();
        // onFinish(SpriterGroup);
        public onFinish: Phaser.Signal = new Phaser.Signal();

 If "mySpriterAnim" is you SpriterGroup instance, then do this:

mySpriterAnim.onLoop.add(function() {
    console.log("animation looped");
}, this);

 to pause animation, just stop updating it or if you need to pause it while playing, you can get / set "paused" property of Spriter.SpriterGroup.

 

Btw, this is complete list of signals from Spriter.SpriterGroup (last two were added in last week):

        // onLoop(SpriterGroup);
        public onLoop: Phaser.Signal = new Phaser.Signal();
        // onFinish(SpriterGroup);
        public onFinish: Phaser.Signal = new Phaser.Signal();

        // onSound(SpriterGroup, string); // string for line name which equals soud name without extension
        public onSound: Phaser.Signal = new Phaser.Signal();
        // onEvent(SpriterGroup, string); // string for line name which equals event name
        public onEvent: Phaser.Signal = new Phaser.Signal();
        // onTagChange(SpriterGroup, string, boolean); // string for tag name, boolean for change (true = set / false = unset)
        public onTagChange: Phaser.Signal = new Phaser.Signal();
        // onVariableSet(SpriterGroup, Variable); // Variable is Spriter variable def with access to value
        public onVariableSet: Phaser.Signal = new Phaser.Signal();
        // onBoxUpdated(SpriterGroup, SpriterObject);
        public onBoxUpdated: Phaser.Signal = new Phaser.Signal();
        // onPointUpdated(SpriterGroup, SpriterObject);
        public onPointUpdated: Phaser.Signal = new Phaser.Signal();

 

[CharlesCraft50]

@Tom Atom Is it possible to move the bones of the player in the game?, because I want to make the player like holding the guns, (like the arm is following the gun), I have many guns and they are different sizes and different texture so that is why I want the arm to follow the gun position like holding it.

Thanks in Advanced

[Tom Atom]

@CharlesCraft50   No, it is not possible - running animation would overwrite your changes next frame in any way. However, there is way: in Spriter program you can add special objects - boxes and points into your animation. These are invisible, but are attached to the animation and transformed when it runs. There are two new signals I added last week:

        // onBoxUpdated(SpriterGroup, SpriterObject);
        public onBoxUpdated: Phaser.Signal = new Phaser.Signal();
        // onPointUpdated(SpriterGroup, SpriterObject);
        public onPointUpdated: Phaser.Signal = new Phaser.Signal();

 Whenever point or box are transformed, you can get notifyied about it and you can adjust your attached object position, scale and rotation ... like your gun. I would recommend to use point (box would be handy for moving collision boxes). Passed SpriterObject has property transformed of SpatialInfo type and it has meny properties with current transformation info (angle, ...).

 Easier way, with some limitations would be to use character maps in Spriter to replace one gun picture with different ones. But all sprites have to have the same size and it can be only sprite (while with above solution, you can attach another spriter animation or text or any other Phaser object)

=> in both cases position of arms in animation does not change...

[CharlesCraft50]

@Tom Atom I can't understand how to use point, can you give me examples or code examples

[Tom Atom]

Hi, I did some code changes into Spriter Player and also into Test example. Download latest version here: https://github.com/SBCGames/Spriter-Player-for-Phaser

Part of the example is now attaching independent Phaser.Sprite object to Spriter point in animation (here is how to create point in Spriter: https://brashmonkey.com/question/adding-action-points-to-frames/)

You can see updated example running here on blog page: http://sbcgamesdev.blogspot.cz/2016/02/phaser-tutorial-spriter-pro-features.html Just press "I" key to toggle item on/off.

 

[CharlesCraft50]

@Tom Atom How to fix the position of the point when the animation is scaled?, I need to scale it because the animation is too big in game, the point position is not in the right position:

Quote

player.bodyAnimation.scale.setTo(0.14, 0.14);

I also try it on your example, still the same, not the correct position, even I scaled the book too, it doesn't even work too

[Tom Atom]

You have also to scale transformed x and y of the POINT object. Transformed x and y are coordinates in local space of Sprter.SpriterGroup. If whole animation is scaled, you must also scale everything from within its local space, if you want to use it ouside of it (see comments in test example).

 

[CharlesCraft50]

@Tom Atom I can't change the scale of the transform, it giving me error:

Quote

Uncaught TypeError: Cannot read property 'setTo' of undefined

Code:
 

this._spriterGroup.onPointUpdated.add(function (spriter, pointObj) {
                if (this._item.exists) {
                    var transformed = pointObj.transformed;
                    transformed.scale.setTo(0.14, 0.14);
//Even this: transformed.scale.set(0.14, 0.14);

                    // add SpriterGroups position and angle, bacause _item is in world space, but transformed values are in SpriterGroup local space
                    this._item.position.set(spriter.x + transformed.x, spriter.y + transformed.y);
                    // magic number 62.477 is initial angle of hand image in spriter animation. Compensate here to keep _item (book) more or less vertical
                    // if _item was something like gun or sword, it would look good without this compensation
                    this._item.angle = spriter.angle - 62.447 + transformed.angle;
                }
            }, this);

 

[Tom Atom]

Just change this line:

this._item.position.set(spriter.x + transformed.x, spriter.y + transformed.y);

to this:

this._item.position.set(spriter.x + transformed.x * 0.14, spriter.y + transformed.y * 0.14);

 

Item will still have its original size, as it is not part of the scaled group. If you want to scale it too, then write this in create() method:

this._item.scale.set(0.14);

 

Why this works: transformed.x and y is point in local space of animation (because animation is Phaser.Group and it is attached to scene graph / display list) - it has its 0,0 origin, rotation, scale. Whole this space is put somewhere int the wolrd - at 420,400 in example. Your item object (book image) is not in animation space, but in world space. So, you have move transformed.x and y into world space and then set your item position to it. Simply, it would be transformed.x + _spriterGroup.x and transformed.y + _spriterGroup.y - this would be enough if there was no scale.

 In you case, you use scale 0.14. It means, that point 100,100 relative to animation origin is 100 * 0.14, 100 * 0.14 in world space (... of course + whole animation position).

 The same goes for rotation (which can be seen in example).

 Another approach would be to make item part of _spriterGroup - child object of it. Then setting to transformed.x and transformed.y would be enough, because scale would be applied to whole group (including its children) and translation to correct posiiton in world too.

[JRVisualsLLC]

@CharlesCraft50 I'm having the same problem you started this thread with. Can you share your solution/fix?

On 1/23/2017 at 11:32 AM, CharlesCraft50 said:

Uncaught TypeError: Cannot read property 'variablesLength' of null

Thanks in advance.

[Nejtron]

On 1/25/2017 at 2:57 PM, CharlesCraft50 said:

@Tom Atom I already fixed my problem, Thank you for helping me

Hello  can you pleas tell me how you have fix this problem. I'am working with phaser 3 and can't fix this