Add bitmapdata to cache as image

[codevinsky]

I've drawn a yellow square on a bitmapdata object:

var bmd = game.add.bitmapData(4,4);bmd.ctx.fillStyle = '#e4c915';bmd.ctx.beginPath();bmd.ctx.fillRect(0, 0, 4, 4);bmd.ctx.closePath();

Is there a way to add the image data to the game cache so that I can reference it like this?

var sprite = game.add.sprite(10, 10, 'yellowBlock');

[rich]

game.cache.addBitmapData(key, bmd);

But you don't use the key when adding a Sprite, otherwise it will think you've given it an Image key. Instead do this:

game.add.sprite(x, y, game.cache.getBitmapData(key));

[codevinsky]

I've changed my code to reflect this and when creating a single sprite, this does indeed work.

 

However, attempting to populate an emitter with this doesn't:

  var bmd = game.add.bitmapData(4,4);  bmd.ctx.fillStyle = '#e4c915';  bmd.ctx.beginPath();  bmd.ctx.fillRect(0, 0, 4, 4);  bmd.ctx.closePath();  game.cache.addBitmapData('yellowBlock', bmd);    // this works  var peeBlock = game.add.sprite(10, 10, game.cache.getBitmapData('yellowBlock'));    // this emitter should explode with yellow blocks  // on click  // but it doesn't seem to work  emitter = game.add.emitter(100, 100, 1000);  emitter.makeParticles(game.cache.getBitmapData('yellowBlock'));    // debug emitter, to make sure my code is correct  brokenEmitter = game.add.emitter(100, 100, 1000);  brokenEmitter.makeParticles('invalidKey');    game.input.onDown.add(particleBurst, this);

The particleBurst method is called correctly, but no particles erupt. The emitter's children[] property is populated correctly with 1000 particles, but emitting either a single particle or a particle burst results in no display.

 

Here's the full code: http://codepen.io/codevinsky/pen/apyfA/?editors=001

[rich]

Because makeParticles only accepts a string key (or array of keys). Here is how to use a bmd with an emitter:

//  Here is our custom ParticleMonsterParticle = function (game, x, y) {    Phaser.Particle.call(this, game, x, y, game.cache.getBitmapData('particleShade'));};MonsterParticle.prototype = Object.create(Phaser.Particle.prototype);MonsterParticle.prototype.constructor = MonsterParticle;var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, render: render });function create() {    game.stage.backgroundColor = '#003663';    //  Create our bitmapData which we'll use as our particle texture    var bmd = game.add.bitmapData(64, 64);    var radgrad = bmd.ctx.createRadialGradient(32, 32, 4, 32, 32, 32);    radgrad.addColorStop(0, 'rgba(1, 159, 98, 1)');    radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');    bmd.context.fillStyle = radgrad;    bmd.context.fillRect(0, 0, 64, 64);    //  Put the bitmapData into the cache    game.cache.addBitmapData('particleShade', bmd);    //  Create our emitter    emitter = game.add.emitter(game.world.centerX, 200, 200);    emitter.width = 800;    //  Here is the important line. This will tell the Emitter to emit our custom MonsterParticle class instead of a normal Particle object.    emitter.particleClass = MonsterParticle;    emitter.makeParticles();    emitter.minParticleSpeed.set(0, 300);    emitter.maxParticleSpeed.set(0, 400);    emitter.setRotation(0, 0);    emitter.setScale(0.1, 1, 0.1, 1, 12000, Phaser.Easing.Quintic.Out);    emitter.gravity = -200;    emitter.start(false, 5000, 100);    game.input.onDown.add(updateBitmapDataTexture, this);}function updateBitmapDataTexture() {    //  Get the bitmapData from the cache. This returns a reference to the original object    var bmd = game.cache.getBitmapData('particleShade');    bmd.context.clearRect(0, 0, 64, 64);    //  createRadialGradient parameters: x, y, innerRadius, x, y, outerRadius    var radgrad = bmd.ctx.createRadialGradient(32, 32, 4, 32, 32, 32);    var c1 = Phaser.Color.getWebRGB(Phaser.Color.getRandomColor(0, 255, 255));    var c2 = Phaser.Color.getWebRGB(Phaser.Color.getRandomColor(0, 255, 0));    radgrad.addColorStop(0, c1);    radgrad.addColorStop(1, c2);    bmd.context.fillStyle = radgrad;    bmd.context.fillRect(0, 0, 64, 64);    //  All particles using this texture will update at the next render    bmd.dirty = true;}function render() {    game.debug.text('Click to regenerate the texture', 16, 28);}

[PhaserEditor2D]

Hello

 

I was trying to use bitmap data with buttons and it works if I do:

 

game.add.button(x, y, bmd);

 

But I want to use also bitmap data for the downFrame but it does not work, in the documentation it says I can use only a number of a string.

 

What can I do?

[PhaserEditor2D]

I found a solution. I create an "offline" canvas and use the toDataURL() method to load the "offline" image.

game.load.spritesheet('key', canvas.toDataURL(), w, h)

Then I use the 'key' in the button creation.

[jmp909]

there's also an option I detail here if you need something that has to be pulled from the Image cache using a string key (specifically RetroFont in this case) : http://www.html5gamedevs.com/topic/17436-image-creation-and-cache/?p=99066

 

convert the bitmap data to a dataURI with myBitmapData.generateTexture("key") which automatically adds the image to the Image cache with that key

 

this is explained here

http://phaser.io/docs/2.3/Phaser.BitmapData.html#generateTexture

 

Rich's example won't work in that case because RetroFont won't pull it's key from the BitmapData cache.

(it's not relevant to your actual case but it's relevant to your subject line, so I thought I'd add it here for anyone coming here for that reason)

[chipnin]

On 10/2/2015 at 10:11 AM, jmp909 said:

there's also an option I detail here if you need something that has to be pulled from the Image cache using a string key (specifically RetroFont in this case) : http://www.html5gamedevs.com/topic/17436-image-creation-and-cache/?p=99066

 

convert the bitmap data to a dataURI with myBitmapData.generateTexture("key") which automatically adds the image to the Image cache with that key

 

this is explained here

http://phaser.io/docs/2.3/Phaser.BitmapData.html#generateTexture

 

Rich's example won't work in that case because RetroFont won't pull it's key from the BitmapData cache.

(it's not relevant to your actual case but it's relevant to your subject line, so I thought I'd add it here for anyone coming here for that reason)

Thanks. This is good solusion.

And we can use cache of bitmapData:

bmd = game.make.bitmapData(width, height, key, true);
button.setTexture(this.cache.getBitmapData(key));