codevinsky Posted April 15, 2014 Share Posted April 15, 2014 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 More sharing options...
rich Posted April 15, 2014 Share Posted April 15, 2014 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)); Tilde 1 Link to comment Share on other sites More sharing options...
codevinsky Posted April 15, 2014 Author Share Posted April 15, 2014 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 More sharing options...
rich Posted April 15, 2014 Share Posted April 15, 2014 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);} Tilde 1 Link to comment Share on other sites More sharing options...
PhaserEditor2D Posted August 12, 2014 Share Posted August 12, 2014 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? Link to comment Share on other sites More sharing options...
PhaserEditor2D Posted August 12, 2014 Share Posted August 12, 2014 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. Link to comment Share on other sites More sharing options...
jmp909 Posted October 2, 2015 Share Posted October 2, 2015 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 herehttp://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 1 Link to comment Share on other sites More sharing options...
chipnin Posted December 15, 2016 Share Posted December 15, 2016 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 More sharing options...
Recommended Posts