timeline animation

[maf]

i keep running into the need to implement fairly complex animations in cut scenes for games/apps. currently using phaser for game and scene management which is going great, but i'm sick of manually porting timeline animations into code - i've used flash cc's html5 export functionality fairly successfully with the createjs library in the past for other projects - just trying to get my head round trying to merge these two worlds.

 

wondering if anyone's had any experience with this - a sprite with a BitmapData texture rendered to by createjs?

 

or any alternative suggestions? Basically looking for something an artist can use to spit out timeline animations that I can easily integrate into a Phaser state.

 

These animations are not involved in the actual gameplay, just presented as separate sequences between levels.

[rich]

As we discussed on twitter I'd use createJS to write direct to a BitmapData canvas, however I will try and find time to put together an example of doing this, because CJS has its own internal timer system and all kinds of stuff going on, which if you're not careful to shut down it will really impact performance.

[maf]

cheers rich - got it all working in a fairly rudimentary fashion, here's the approach if others are interested (the code is typescript but shouldn't make much difference):

 

I've used flash cc to publish a timeline animation, which gives me a javascript file, in this case called outroAnimation.js, and a bunch of image assets used in the animation - I add all these into my manifest of assets to preload, and then onFileComplete add any images to the createjs lib:

onFileComplete( progress, key ){	if( this.cache.checkImageKey( key ))	{		console.log(key);                window.images = window.images || {};		// here we add a reference to the createjs image cache in case the image is used in an easeljs animation		window.images[key] = this.cache.getImage( key );	}}

in the Phaser.State that runs the animation, I just create a bitmapData instance, give it a sprite to render it's canvas onto, then fire up a createjs Stage with the same canvas as it's target. As mentioned the timing stuff gets a bit messy - my approach is to listen for the createjs tick event, mark the canvas as dirty, and then only update everything if necessary - Phaser is running at 60fps and my animation is running at 30. I'm also monitoring the animation to see when it's finished - you could also dispatch events by adding javascript to the timeline in flash which can be handy for anything you need to sync with the animation.

create(){	super.create();	this.bmpd = this.game.add.bitmapData( this.game.width, this.game.height );	this.animationSprite = this.add.sprite(0,0);	this.bmpd.add( this.animationSprite );	this.world.sendToBack(this.animationSprite);	this.animation = new lib.outroAnimation( null, 0, false );	this.stage = new createjs.Stage(this.bmpd.canvas);	this.stage.addChild(this.animation);	this.stage.update();	createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;	createjs.Ticker.setFPS(30);	this.onTick = ()=>{ this._onTick(); };	createjs.Ticker.addEventListener("tick", this.onTick );	this.animation.gotoAndPlay(0);}_onTick(){	this.animationIsDirty = true;}update(){	if( this.animationIsDirty )	{		this.stage.update();		this.bmpd.dirty = true;		this.animationIsDirty = false;		if( !this.animation.paused && this.animation.currentFrame == this.animation.timeline.duration - 1 )		{			this.animation.stop();			this.onAnimationComplete();		}	}}onAnimationComplete(){	// handle end of animation}shutdown(){	super.shutdown();	//createjs.Ticker.reset();	// TODO : resetting createjs.Ticker seems to disable it permanently, just removing the listener for now which	// means ticker will continue to run, as long as everything else is tidied up (removed from stage etc) - should be ok	createjs.Ticker.removeEventListener("tick", this.onTick );	this.stage.removeAllChildren();	this.stage.removeAllEventListeners();	this.stage.enableDOMEvents(false);	this.stage.canvas = null;	this.stage = null;}

there's a whole world of confusion about how to properly shut down createjs, so far I've not managed to stop the Ticker and successfully restart it if and when this state is revisited so I've just left it running and made sure it has nothing to do - not ideal but seems ok for now. Needs a bit more work but sure is nice to enable the animation team to hit cmd-return in flash and output animation straight into my build without having to code a single tween : )

[rich]

Glad you got it mostly working  

[G3n3ralTao]

Hi there,

I was wondering if there was more work done with createJS and Phaser. We need a timeline animation with one of our project and createJS would fit right in with our production pipeline .

Thank you in advance