I've created a Flash animation runtime for PixiJS (Pixi Flump Runtime)

[jackwlee01]

I've been developing a Flump runtime for Pixi.js over the last 6 months for a game I am working on. I would now like to share my library with the Pixi community. 

For those of you unfamiliar with Flump (a seperate project), it is a Flash animation exporter that converts your nested timeline animation to sprite atlases with keyframe data. Previously no runtime existed for PixiJS.

Here are two examples of exported Flash animation running in PixiJS with Pixi Flump Runtime.

Dog example

Monster example

Flump has been an invaluable tool in my arsenal, I hope you guys find it useful! Check out the github project for the source code of the examples. Documentation will be coming soon. It has currently been tested with Haxe projects, but I would really like some feedback on your experiences using it with Javascript.

Also, thank you Mathieu Anthoine for your valuable input and testing of the library! It's been immensely useful having a second set of eyes early in the development

[d13]

Wow, I could really use this!

I have a gazillion old FLA animations that I need to reuse.

I'm really looking forward to the documentation... could you keep us updated in this thread?

[jackwlee01]

Sure thing. I have put up a Getting Started page in the wiki

I should mention there are caveats to using Flump. It can't just convert any swf. You need to create you assets in a particular way. The workflow is a bit more effort than your standard Flash game but it is well worth it (the exporter will convert your vector assets to texture atlases, so you can expect 60fps on mobile).

If you are keen to try things out, I would recommend first taking a look at the animation exporter Flump, which is pretty well documented and quite easy to get started with (no command line necessary).

You can then take a look at my Pixi Flump Runtime examples, which are very basic and will get your animations on screen with minimal effort.

Then take a look at the API in the wiki. There are some classes in there for building advanced functionality but for getting started you only need to worry about Movie and Sprite.

So far Haxe users have been using the library for their Pixi games and feedback has been good so far. I am a primarily a Haxe developer so I would be very grateful for any feedback or testing of the javascript version.

[chewey]

Hi,

I have an animation Im working with, which follows your example dog - but it contains only flip book animations rather than a mixture of sprites and flip book. It all works well, but Id really like to be able to control the movies on layers from Pixi, so the flip book animations can be animated via code. I can access movies on layers using getChildMovie, but when I address the movie between requestAnimationFrame and render for a loop, I get nothing displayed?

Many thanks

 

[jackwlee01]

Hey Chewey,

Sorry for the late reply, I am not on these forums very much. I'll be sure to turn on notifications to respond faster in the future.

Can you please post your code? This is one aspect of the library that I am trying to improve, so it may be a little flakey for the time being. It is quite tricky accessing the children because they are constantly changing while the movie plays.

What you might actually require is the getLayer method. A movie is made of layers (Containers), and it is inside those layers where the children are added and removed. Note that the transformations of each frame get applied to the layer.

If your use case is like what I am imagining, it would be something like setting up a sort of container movie clip, with only a single frame, that lays out your game scene or hud, like as you would do in regular Flash. However attempting to manipulate child display objects of a playing parent movie clip with many frames would result in unpredictable behaviour.

[chewey]

Hi,

 

I decided it as quicker to actually animate the moves inside Flash, then export the JSON as per normal. It works ok - and maybe the code version would have looked a bit stilted.

I have deleted my code notes - but as I said, I used getChildMovie something like

var flashAnim = new PIXI.flump.Movie("myMovie");    
    stage.addChild(flashAnim );

And from there access the child inside the var by

flashAnim.getChildMovie(layername) - as you suggested I think I did use layer name ( maybe because the layer was called flipbook ? ). That allowed me to manipulate the x,y, rotate and so on, but if you try and animate it in some way, the whole FlashAnim disappears.

 

I don't think its a deal breaker, it would just be handy if you could move some stuff by code, but in essence I guess its recreating some sprite functionality...

[chewey]

Yes - also I didn't see you had replied to me, only because I logged in to reply about something else. Notification would be handy. Where is that located in the settings, do you know?

[d13]

On July 8, 2016 at 9:19 AM, chewey said:

 Notification would be handy. Where is that located in the settings, do you know?

Im my experience the notifications on this forum don't work, even if you have them switched on (which they are by default)

[chewey]

Yes - I didn't get this one...I need to check in more often.