Jump to content
Tom Atom

Spriter for Phaser

Recommended Posts

Hi,

 some time ago I wrote Spriter player for Phaser engine. It is written in Typescript and here at GitHub is repository: https://github.com/SBCGames/Spriter-Player-for-Phaser. It supports only features from free version, as at time of writing I had only free one.

 You can see working sample on my blog here: http://sbcgamesdev.blogspot.cz/2015/09/phaser-tutorial-phaser-and-spriter.html

 Beside this I wrote Spriter Minimizer. It is utility to shrink Spriter output (https://github.com/SBCGames/SpriterMinimizer) It is kind of "work in progress", but it can already minimize xml output or convert it into binary. These are output sizes for test anim (grey guy):

  • 346 kb standard, pretty printed, Spriter output,
  • 240 kb Spriter output with pretty printing unchecked,
  • 165 kb after minimization with SpriteMinimizer (with default definitions.xml),
  • 74 kb when converted into binary format with smallOffset switch on.

 

2016-02-20 UPDATE:

New version now includes Spriter Pro features:

blog: http://sbcgamesdev.blogspot.cz/2016/02/phaser-tutorial-spriter-pro-features.html

GitHub: https://github.com/SBCGames/Spriter-Player-for-Phaser

Currently it can load scml and scon files. Support for minimized files (made with Spriter Minimizer) is temporarily down.

 

Share this post


Link to post
Share on other sites

Hi,

We're having a nightmare trying to incorporate Spriter into our project. It seems that the Spriter library doesn't like sprites living in subfolders within the project.

So, as a test, we placed some frames in the project root folder, and made an animation from them (http://psygnomi.com/tmp/FailTest.zip). Here we get:
 
Cannot set frameName: 
 
...with each animation frame displayed. Nothing animates.
 
However, if I change line 3575 in spriter.js to this:
 
                this._sprite.frameName = file.name + '.png';
 
by adding the "+ '.png' " part, it works. (http://psygnomi.com/tmp/WorkingTest.zip)
 
If we try the modified library with a project containing frames within folders, we get the same problem. I think it stems from Spriter incorporating the folder path into the frame name, but referencing it using only the filename.
 
Obviously, placing hundreds if not thousands of sprite animation frames in the root folder isn't helpful, and will take many days to re-animate everything.

Any help will be very much appreciated.

Thanks,

Mark & Stoo
 

Share this post


Link to post
Share on other sites
On 4. 1. 2018 at 9:23 PM, HobekaStoo said:

If we try the modified library with a project containing frames within folders, we get the same problem. I think it stems from Spriter incorporating the folder path into the frame name, but referencing it using only the filename.

Hi, sorry for late reply. It is not always simple to match frame names in atlas .json file with names in animation. To solve this, library allows you to pass object with optional parameters when creating Spriter.SpriterJSON/Xml objects:

var spriterFile = new Spriter.SpriterJSON(this.cache.getJSON("TESTJson"), /* optional parameters */ { imageNameType: Spriter.eImageNameType.NAME_ONLY });

As you can see, one of the parameters is imageNameType. It says, what to do with Spriter frame name (which may contain subfolders and extension - as in your case). By default it strips path and extension to keep only name. This is OK, if your atlas.json has only names in it. But your atlas has name + extension for frame names. To solve it, change parameter from NAME_ONLY to NAME_AND_EXTENSION. All options are described at GitHub page:  https://github.com/SBCGames/Spriter-Player-for-Phaser :

2016-09-16

  • added optional parameter in Spriter.SpriterJSON and Spriter.SpriterXml of type IFileOptions. This parameter is object with some optional keys. Currently important is imageNameType of type Spriter.eImageNameType. It converts and returns name of image taken from Spriter animation file in this way (let's assume name in animation file is path/image_name.png):

NAME_ONLY (default): image_name
NAME_AND_EXTENSION: image_name.png
FULL_PATH_NO_EXTENSION: path/image_name
ORIGINAL: path/image_name.png

So you can strip path, extension or both or keep original name.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...