Jump to content

create animation dynamically


InsaneHero
 Share

Recommended Posts

Hi all, this might be the wrong place to ask (I suspect the answer will be to drop down to PIXI) but I figure it's worth a try here first :)

 

I am running some intensive processes which produce an animating series of images.  I want to record those images (preferably without displaying on screen, but that's not crucial just yet) so I can play it back in Phaser as an animation.

 

I've just spent a few hours going up and down through Phaser documentation, looking at Animation, AnimationManager, Camera, Stage, Sprite and a bunch of other classes trying to work out how to do this.  But I'm stuck.

 

I've created a Phaser.FrameData object and an Animation which references it.  Then I'm using PIXI.RenderTexture.render to get a piece of the game.camera.displayObject into a surface.  This all seems to work.  How do I get that texture into the Animation, and having done that, how do I get the Animation into a Sprite.animations (AnimationManager class) so it can be played back?

 

For anyone who has read this far, thanks for your consideration of my problem! :)

 

Link to comment
Share on other sites

I think your best course of action is to look through the source, starting at the Loader.spriteSheet function and working your way through to find out how a  image is turned into frameData. I assume you realise an animation must be contained on a single image right now? So using a RenderTexture is fine  providing you're managing the process of placing each frame onto evenly sized left-to-right/top-to-bottom ordered regions which can then be parsed easily into frames.

Link to comment
Share on other sites

Here, like this :)

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });function preload() {    game.load.image('orb', 'assets/sprites/orb-blue.png');}function create() {    game.stage.backgroundColor = '#ef3d45';    //  We're going to dynamically create an animation.    //  It will consist of 16 frames, each 22x22 pixels in size.    //      //  So the overall dimensions will be 352x22    var orb = game.make.sprite(0, 0, 'orb');    //  First create a BitmapData object at the size we need    var bmd = game.add.bitmapData(352, 22);    //  Next draw the orb image into the BitmapData 16 times (once for each frame)    var x = 0;    var y = -22;    for (var i = 0; i < 16; i++)    {        bmd.drawSprite(orb, x, y);        x += 22;        y += 3;    }    //  Add it to the display just so you can see what the final sprite sheet looks like    game.add.image(0, 0, bmd);    //  And now add it to the cache, so any sprite can use it    //  The parameters can be found in the API docs, but the important parts are to leave the URL blank and pass the bmd.canvas as the data value    //  The 22x22 is the frame size and 16 the quantity of frames    game.cache.addSpriteSheet('dynamic', '', bmd.canvas, 22, 22, 16, 0, 0);    //  Let's create a bunch of sprites all using the same new animation data    for (i = 0; i < 16; i++)    {        var test = game.add.sprite(200, 100 + (i * 22), 'dynamic');        test.animations.add('float');        // test.play('float', 20 + i, true); // uncomment this line and comment out the line below for some trippy fun :)        test.play('float', 20, true);    }}

Uses the sprite from the examples/assets folder.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...