Display image/frame from Atlas within Bitmapdata

[Nick]

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? 

[george]

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

[rich]

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);    }}

[Nick]

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. 

[jotarp]

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);    }}