Jump to content

A Spriter Tool: Spriter Play (based on HTML5 & JS)


finscn

Recommended Posts

In the next version , I will implement a powerful "export" feature:


  • 1 export sprite PNG (like old Spriter IDE )
    2 export sprite-sheet PNG (like Spriter IDE b8 )
    3 export "packed-bones-sheet" PNG (see the attachment) , and generate the config-info.
    ( User could customize frame count )

I'm a free version user (Sorry) , so the pro feature I can't implement.

post-17044-14159834212436_thumb.jpg

Link to comment
Share on other sites

Nice work, finscn! BTW, it works fine in Opera 12.17 (and probably the newer WebKit-based ones, too), although maybe a little slowly. Are the animations supposed to be going as fast as in Spriter itself, or have you slowed them down? If you're not already planning it, maybe an FPS counter would be a good idea.

EDIT: I just tried it in Chrome, and it goes the same speed.

EDIT2: I checked the files and there's no copyright or license info. Is this public-domain?

Link to comment
Share on other sites

Hi @ RunnerPack , Thank you

My english is very pool , So I can't say many words :'(

I updated it just now .

I add some settings , now , you can set FPS , animation's frame count , speed scale .

It's free and no any limit. You can use and modify it in any where any time.

But , now it's just a prototype . When It is good enough , I think I will create a project in Github.

Thank you :)

Link to comment
Share on other sites

Hi finscn,

I read the source code of your app from inspector, sorry for not getting your permission :P

My suggest to solve performance issue is using

requestAnimationFrame(yourLoopingFunction)

instead of

setInterval()

See more about it here:

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame?redirectlocale=en-US&redirectslug=DOM%2Fwindow.requestAnimationFrame

Link to comment
Share on other sites

@PixelPicoSean , Thanks for your suggestion.

But in this case requestAnimationFrame is NOT a good choice.

If use requestAnimationFrame, the FPS is not be custom by user , It will always by system FPS or (system FPS) * 1/n (n is natural number).

=======================

Update again. Now Use can generate sheet animation :

look screenshot:

post-17044-14159834225762_thumb.png

Link to comment
Share on other sites

  • 2 weeks later...

Hi PixelPicoSean,

Unless I'm not understanding you, I think you are misunderstanding the way Spriter handles timing. Spriter's animations are played back based on actual fractions of a second..and for this very reason, animations have the exact same timing/duration no matter what device and target FPS the animations are played back with...there would just be less interpolated frames displayed during the playback.

Every animation system that tweens, whether it lets people animate based on an arbitrary FPS does NOT play back based on FPS, it plays based on fractions of a second, unless it is NOT tweening.

That said, Spriter b8 (the latest build release) offers features for those used to animating based on a given FPS to be able to set up their timeline in a manner that will be more comfortable for them. I'll make a video and manual entry for that as soon as I can, but that's likely at least a few days from now.

Did I misunderstand your point?

cheers,

Mike at BrashMonkey

Link to comment
Share on other sites

Hi finscn! You again :P

You should use requestAnimationFrame, as Brash said. FPS is a convenient way to develop, but when animation are played that doesn't mater anymore, you should do extra math to interpolate.

easy example:

10 fps means -> 100ms per frame. What would you do at 150ms? you interpolate frame 1 and frame 2 by half.

I have a demo of doing matrix interpolation in canvas with js-2dmath http://htmlpreview.github.io/?https://github.com/llafuente/js-2dmath/blob/master/test/matrix23.html

Very simple example, use Linear interpolation.

That said.

I didn't see this project in your github, if you make a repo I will help you (but you must use js-2dmath)

Link to comment
Share on other sites

Hi BrashAdmin,

I do understand the way Spriter works, sorry for not checking my post :P

Actually the speed of animations counted by FPS does not mean anything to me, in my folk of spriter-impacthttps://github.com/pixelpicosean/Spriter-Impact animation speed is count by seconds.

There's an awesome official Construct2 plugin for Spriter, so I've been wandering will you release another pure js implementation framework?

Regards,

Sean

Link to comment
Share on other sites

Possibly, if someone else doesn't do it before us. We are currently working on absolutely complete and thorough documentation to make creating implementations superfast and simple. This is the next step toward getting implementations on everything as quickly as possible.

Link to comment
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...