codevinsky

Add bitmapdata to cache as image

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

Share this post


Link to post
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

Share this post


Link to post
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);}

Share this post


Link to post
Share on other sites

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)

Share this post


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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.