sbcgames / spriter-player-for-phaser Goto Github PK

Hello,
I recently ran into an issue with implementing Spriter into my Phaser-CE 2.11.1 ES-6 project.

I used the provided es5 'spriter.js' file and referenced it within my index file. After, I attempted the following code on Phaser.State class:

create()
{
        let spriterLoader = new Spriter.Loader();
        let spriterFile = new Spriter.SpriterJSON(this.cache.getJSON("TESTJson"));
        let spriterData = spriterLoader.load(spriterFile);

        _this._spriterGroup = new Spriter.SpriterGroup(this.game, spriterData, "TEST", "Hero", 0, 100);_
}

The bottom line throws the following Phaser exception:

[email protected]:3 Uncaught Error: The value passed as the game argument ([object Object]) is not an instance of Phaser.Game.
at e.Sprite.e.Component.Core.init ([email protected]:3)
at new e.Sprite ([email protected]:3)
at SpriterGroup.setObjects (spriter.js:3402)
at SpriterGroup.loadKeys (spriter.js:3438)

Investigating it deeper, the error is thrown at this line in the Spriter.SpriterGroup.setObjects method:
sprite = new Phaser.Sprite(this.game, 0, 0, this._textureKey);

The funny part is that this.game is an actual reference to the game. When running the following code:
console.log("Is instance? : " + (this.game instanceof Phaser.Game));
it returns true.

Any ideas what's going on?

Thanks!
Jacob

Have you considered using signals to dispatch events when animations are finished as Phaser does?
Each animation could have its own listener.

Hello,
I have an issue while trying to make my spritesheet animations work.
In my spritesheet atlas json file, some frames are rotated.
The spriter player seems to ignore the "rotated" property: the animation works, but most of the frames in the rendered sprite are not counter-rotated.
This results in the sprite looking disassembled.

Can you help me?

I just noticed that the code does not support it. I am coding directly on js so I won't be able to turn in my code, but basically implemented the getTag function:

SpriterJSON.prototype.getTag = function (element) {
    return new Spriter.Item(this.parseInt(element, "id"), this.parseString(element, "name"));
};

and on Loader.prototype.loadTags, I hacked a way to get the child nodes. This probably breaks xml loading but im just using json.
var tagDefs = tags;//tags.getChildNodes(0, "i");
getChildNodes(0, "i") does not work for json files for some reason. Looking at the source, i think the variables might also be screwed.

Thanks for this great tool!

I was testing it to use it on mobile but the performance seems to be very bad yet. Phaser render mode was webgl and I tested with the demo included here.

I tested it on a Nexus 6p using Crome and the framerate reaches 50fps.
On Iphone 6s with Safari it reaches 36fps.

These are the best devices on mobile so I didn't tested on lower devices yet. I suppose it will be slower.

Is there anything we can do to improve it?

we are using the latest version of spriter (v9) and it doesn't work. They may have changed something in the json that stores the animation.

Not enough opportunities to learn have animation with a particular name in the group or not.
For example:
this._spriterGroup.hasAnimationByName('anim1'); => true or false
or var ListOfAnimations = this._spriterGroup.animations; => ['anim1', 'anim2]`

When you import the atlas and scon files which were exported by Spriter i always encounter the mentioned error and the frames aren't loaded.

I tried the example files with the given code, which work fine.
Using load.atlasJSONHash function since spriter always exports in that format doesn't help either nor does using XML.

Attached are the files of the used animation
testAnimation.zip

Update:
The above mentioned error was due to Spriter outputing frame names like: "hero_graphics/forearm.png" which both contains the folder and filetype extension.

My only solution now is to manually strip away the folder and adding { imageNameType: Spriter.eImageNameType.NAME_AND_EXTENSION} to the new Spriter.SpriterJSON() call.

What is still buggy:
As Phaser doesn't support rotated frames i am forced to do the actual packing with TexturePacker since Spriter doesn't allow to prevent rotation.

Is there any other workaround?

Does this support triggers? If not, is it on the roadmap? If it is not on the roadmap, how difficult would it be to implement?

When a charmap is pushed, and a texture in it uses another pivot, the animation still uses the 'old' pivot.

Thank you for this great project, unfortunately Spriter Player does not work properly for the current Phaser CE release anymore.
If I try the demo all body parts are on the same position and do not move. It seems as if the information about the parent (bone) has been lost.
I had a look into the code but I could not fix the issue.
Is there any change to get this fixed?

Good evening,

Will this ever be upgraded for phaser 3 ?

Hi,

spriter throw an error with instant curves. I've found a mistake with the constant spelling:
"instatnt": 1 /* INSTANT */,

instead of:
"instant": 1 /* INSTANT */,

Regards

This feature is implemented in dragon bones and is very practical. For example, you could change the face expression or some parts of a character:

https://dragonbones.github.io/features.html

see "Dynamic Texture Switching".

I could implement that if you give me some directions.

I need to animate 2 characters with the names of Gwen and Christian, I've packed all the png's with texture packer. Would you mind taking a look?

character files

Hi, is it possible to attach box2d bodies to the sprites that compose the animation?

Although is not the optimal way to move box2d bodies I would set their positions according the coordinates and angle of the sprites.

What do you think?

This is awesome! Just wondering if there is there any options within the spriter player to perform blended animations? So from a run, slowing down into a walk, then halting to an idle animation?

Thanks

support easing in and outs

Tags are most useful as a way to track the 'state/tag' of an animation. For example, a 'Guarding' Animation would have different states/tags: 'Vulnerable' (putting the shield up/down) and 'Invulnerable' (when the shield is up)

Currently the only way it seems to track tags is through events - this is problematic as it does not track what tags are currently active for the last keyframe up to now. Even more so it doesn't seem to be possible track this through the current API since the last tag is removed.

The spriter API here (https://github.com/flyover/spriter.js) seems to support it.

First off, thanks for writing Sprite-Player-for-Phaser. It's awesome.

Not sure if this is really an issue...

I've gotten my animations to play forward or backward by adjusting the play speed via setAnimationSpeedPercent.

What I'm running into is that getting back to frame 0 of a non-looping animation does not seem to trigger the onFinished / onLooped events.... which makes sense.

I'm wondering if there's something we can add to give the SpriterGroup awareness of direction (I.e. _animationSpeed < 0) so that it can check for the _time == 0 in those cases.

I'm going to hack at my local version and get that working -- I'll post the change here in case you agree and want me to send you a pull request.

We are using the latest version of spriter (v9) and it doesn't work. They may have changed something in the json that stores the animation.

The character has 3 states: "idle", "happy" and "disappointed"

Here the files I use:

animation json
texture altas png
texture atlas json

Can I get touch events on a playing spriter animation along with the bounding box?
I am collecting information before diving in? I am using Phaser 3 and porting from Phaser-CE

hi @SBCGames 👋

I'm wondering if you had any chance to test your spriter player with Phaser 3 and if so how was it?

Great tool so far!

I'm trying to make a spriter animation follow the camera. This is ussualy done setting fixedToCamera = true;

But If I set it to true for a sprite group it stays fixed on the top left corner of the camera and I can't change it's position.

I can get the same effect with the following code on update so probably something is missing from the SpriterGroup code that allows this:

  this.spriterGroup.position.setTo((this.game.camera.view.x + this.spriterDeviation.x) / this.game.camera.scale.x,
  (this.game.camera.view.y + this.spriterDeviation.y) / this.game.camera.scale.y);

That's your example inside my game. Left as it is now and right with the sprites of the SpriterGroup smoothed.

It looks like the phaser sprites have the smoothed property false by default. Animations doesn't look well without smoothing.

It would be better if there was a "smoothed" boolean in the Spriter.SpriterGroup constructor. What do you think?

Hi did not know how to contact you but this way am not sure if this article I read is yours
Phaser tutorial: manage different screen sizes
Its a nice article thank you for it but the source to the project files link is broken if you still have the code and with the new Phasor do you still use this method as in the article to manage scaling. Am new to Phasor trying to learn it I just don't understand how they manage scaling on different devices without black belts, and stretching any help would be appreciated thanks

Good afternoon. In one of issues you said it will never be updated to Phaser3, so I've made it myself :) Unfortunately, my changes won't work in Phaser2, so our repos incompatible. I've created my own repo for those who will be searching for Phaser3 implementation

https://github.com/nemyagky/phaser3-spriter

Hello!

If you had someone to sponsor you a copy of at least the Spine Essentials one, are you willing to help getting this Spine plugin for Phaser 2.x up to speed?

https://github.com/orange-games/phaser-spine

I remember you saying a some time ago that you got into Spriter plugin development because Spine was a little steep.

Just wondering about this :).

There's the newest Spine-TS branch but this doesn't seem to work "out of the box" as much as the present Phaser-Spine plugin. There appears to be a number of bugs with its various features.

Hi Tom,

I'm afraid I can't make it work. There are 3 animations called "idle", "disappointed" and happy. As you suggested I told TP not to use ".png", folders and rotated textures. I'm used the xml output of Spriter as you said you do.

Texture atlas png
Texture atlas json
Spriter XML

The TS class with the game character

and the error I get

Is Spriter-Player-for-Phaser able to transition or crossfade between animations like Phaser-Spine does? If not, what would be the scope of work to implement?

https://github.com/orange-games/phaser-spine#crossfading-animations

Thanks!