InsaneHero Posted August 1, 2014 Share Posted August 1, 2014 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 More sharing options...
lewster32 Posted August 1, 2014 Share Posted August 1, 2014 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 More sharing options...
rich Posted August 1, 2014 Share Posted August 1, 2014 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. lewster32, eguneys and InsaneHero 3 Link to comment Share on other sites More sharing options...
rich Posted August 1, 2014 Share Posted August 1, 2014 Just to add - you don't have to create the animation in one long strip.You can divide it up into columns and rows just fine, the addSpriteSheet call will deal with that happily. Link to comment Share on other sites More sharing options...
InsaneHero Posted August 2, 2014 Author Share Posted August 2, 2014 That's a perfect example, thanks Rich! Link to comment Share on other sites More sharing options...
Recommended Posts