Jump to content

How to use Spriter in Phaser


CharlesCraft50
 Share

Recommended Posts

@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 :)

Link to comment
Share on other sites

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);
        }
    }
}

 

Link to comment
Share on other sites

@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();

 

Link to comment
Share on other sites

@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 :)

Link to comment
Share on other sites

@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...

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

@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

2017-01-30.png

Link to comment
Share on other sites

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).

 

Link to comment
Share on other sites

@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);

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 6 months later...
  • 3 years later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...