Nick Posted May 28, 2014 Share Posted May 28, 2014 I have number of images within an Atlas that I want to apply some particular border styles too on the fly. Is it possible to create a Bitmapdata object with the desired styles then add an image from the Atlas to it? Link to comment Share on other sites More sharing options...
george Posted May 28, 2014 Share Posted May 28, 2014 Of course it's possible. But you have to do it by your own. Here two important key accessors to use:frame = game.cache.getFrameByName(atlasname, framename)texture = PIXI.TextureCache[frame.uuid]You get the height and width from the frame object with frame.width & frame.height. Build your bitmap with it, draw the extracted texture on the bitmap (see my helper method at the end of the post), apply your borders and use that final 'decorated' bitmap as the texture for a sprite or an image object (pass the bitmap as the key parameter to the sprite/image to use it as a texture). The last time I glimpsed through the source of phaser there was no way to draw a texture directly onto a bitmap, this is my helper function I ripped from the PIXI source to do so. Context ist the bitmap.context property.drawTextureOnBitmapContext: function(texture, context){ trim = texture.trim if(trim){ offset = {x: trim.x, y: trim.y} }else{ offset = {x: 0, y:0} } context.drawImage(texture.baseTexture.source, texture.frame.x, texture.frame.y, texture.frame.width, texture.frame.height, offset.x, offset.y, texture.frame.width, texture.frame.height);}Now it's your turn. Have fun.Regards George Link to comment Share on other sites More sharing options...
rich Posted May 28, 2014 Share Posted May 28, 2014 Or, you know ...BitmapData.draw(sprite, x, y); I've done quite a bit of work on BitmapData.draw recently, so it now draws the given Sprite frame automatically from a sprite sheet or atlas. The following code demonstrates (is against 2.0.6-dev branch, but will be live in the next couple of weeks)var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });function preload() { game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');}var bmd;var jellyfish;function create() { bmd = game.make.bitmapData(800, 600); game.add.image(0, 0, bmd); jellyfish = game.add.sprite(0, 0, 'seacreatures'); jellyfish.animations.add('swim', Phaser.Animation.generateFrameNames('blueJellyfish', 0, 32, '', 4), 30, true); jellyfish.animations.play('swim');}function update() { if (game.input.activePointer.isDown) { // This renders the jellyfish sprite to the BitmapData // Note that it will render the currently displayed animation frame bmd.draw(jellyfish, game.input.activePointer.position.x, game.input.activePointer.position.y); }} Link to comment Share on other sites More sharing options...
Nick Posted May 28, 2014 Author Share Posted May 28, 2014 Thanks Guys! I'm using George's method for now and it's working perfectly. I'll look into updating to Rich's method when I get time to update to 2.0.6. Link to comment Share on other sites More sharing options...
jotarp Posted March 11, 2015 Share Posted March 11, 2015 If I need the first frame, why this doesn't work?How can I choose the frame to draw?function update() { if (game.input.activePointer.isDown) { jellyfish.setFrame(0); // This renders the jellyfish sprite to the BitmapData // Note that it will render the currently displayed animation frame bmd.draw(jellyfish, game.input.activePointer.position.x, game.input.activePointer.position.y); }} Link to comment Share on other sites More sharing options...
Recommended Posts