Jump to content

Add bitmapdata to cache as image


codevinsky
 Share

Recommended Posts

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');
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);}
Link to comment
Share on other sites

  • 3 months later...
  • 1 year later...

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)

Link to comment
Share on other sites

  • 1 year later...
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));

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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