Search the Community

Can you create a alphaMask from bitmapdata rather than images? I have a circle loader that I am building as bitmapData and I have the source image I want to mask, but I can't figure out how to use the mask bitmap data for bmd.alphaMask or convert the mask bitmapData to a image that the method can use. Any help would be appreciated. createPie : function (game, w, h) { console.log("create pie", w, h, this); var mask = game.add.bitmapData(w, w), bmd = game.add.bitmapData(w, w), canvas = bmd.canvas, context = bmd.ctx, size = 270, degreesToRadians = function (degrees) { return (degrees * Math.PI) / 180; }; var drawPie = function () { bmd.clear(); context.save(); var centerX = Math.floor(w / 2); var centerY = Math.floor(w / 2); var radius = Math.floor(w / 2); var startingAngle = degreesToRadians(270); var arcSize = degreesToRadians(size); var endingAngle = startingAngle + arcSize; context.beginPath(); context.moveTo(centerX, centerY); context.arc(centerX, centerY, radius, startingAngle, endingAngle, false); context.closePath(); context.fillStyle = 'rgba(0, 0, 0, 1)'; context.fill(); context.restore(); bmd.render(); }; drawPie(); game.cache.addBitmapData("loaderMaskBMD", bmd); var maskImage = game.add.image(348, 221, bmd); console.log("maskImage", maskImage); // doesn't work //game.cache.addImage("loaderMaskImage", maskImage); game.load.onFileComplete.add(function (progress) { console.log("load", progress); size = (360 / 100) * progress; drawPie(); }); // doesn't work //mask.alphaMask('preloaderRingLoaded', maskImage); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getBitmapData("loaderMaskBMD")); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getImage("loaderMaskImage")); var sp = game.add.sprite(348, 221, mask); sp.width = w; sp.height = h; console.log("sp", sp);},

Hello, please help. Can I put sprites with children in the bitmapdata? I'll attach the picture, is this possible and how? Thank you.

Hi everyone, I'm actually working on an app using phaser. I receive inputs from a device and i need to draw the last 200 points received each frame. I looked all day trying various solutions with bitmapdata and render textures but i couldn't find any way to draw all thoose points at once, each time i check with the firfox's canvas inspector i get to 202 drawings with something like 800 calls, i'm totally lost. Could any one help me? Thank you in advance!

Hello, Can anyone share information how can I do manual caching of sprite or speed up rendering in general? If I have group with lots of small sprites, it's wise to convert it into single BitmapData and use it as texture to prevent recalculations. However, I have no clue how can I do that and what other methods Phaser may offer. Thanks everyone in advance for help

Hello, I'm trying to implement the code from this tutorial in a game I'm making. Actually I can make the holes on the texture using bitmapData. This is how I'm doing: this.bmd = game.make.bitmapData(360, 150); this.bmd.copy('ground'); //ground = image key //Makes two "holes" this.bmd.blendDestinationOut(); this.bmd.circle(50, 10, 20, 'rgba(0, 0, 0, 255'); this.bmd.circle(70, 10, 20, 'rgba(0, 0, 0, 255'); this.bmd.blendReset(); this.bmd.update(); this.ground = this.add.sprite(0, 630, this.bmd); this.game.physics.arcade.enable(this.ground); this.ground.body.allowGravity = false; this.ground.body.immovable = true; However, when I move my player, it walks like if there's no hole on the ground: How can I fix this?

So I'm trying to flood fill a specific area on my bitmap data so I can create a mask for that area, however after setting the array data of the bitmap data nothing is showing up. I'm iterating over the length of array and setting rgba values as such: this.bufferData.data[i] = 0; this.bufferData.data[i + 1] = 0; this.bufferData.data[i + 2] = 0; this.bufferData.data[i + 3] = 255; I then proceed to draw my "buffer" bitmap data into my mask bitmap data as such: this.maskData.draw(this.bufferData, 0, 0, this.bufferData.width, this.bufferData.height, "destination-out"); this.maskData.update(); I've tried calling update() on my bufferData before drawing it into the maskData, however it didn't help.

Open this fiddle on Safari/Mac and check the console. You'll see sprite/1/1, sprite2/0/0. Then hit Run and you'll see 50/50 for both sprites. It seems as though BitmapData.generateTexture doesn't execute the first time around on Safari. The code that produces this issue is as follows; var bmd = this.game.add.bitmapData(50, 50); var result = bmd.generateTexture('test'); var sprite = this.game.add.sprite(0, 0, result); console.log('sprite', sprite.width, sprite.height); var sprite2 = this.game.add.sprite(50,50, 'test'); console.log('sprite2', sprite2.width, sprite2.height); First time around, whatever's in return from generateTexture has 1,1 dimension, and whatever's been placed in the cache under 'test' has 0,0 dimension. Running it again, or reloading the window in Safari causes the dimensions to be 50,50 for both as is expected. I am not having this problem in Chrome on Windows or Mac. Does anyone know how I can get around this?

Hi this is my demo for bitmap drawing. But my problem is it is pixelated. Please help me to get it smooth. Sample image below. thanks in advance.

Hi everyone! Phaser version: 2.4.3. My intention was to render the cellular automata generated map on the screen. To do this I created a BitmapData object and used a basic set of setPixel(...) loops. Everything works but it took 8 seconds when the 'immediate' flag is true. And when the 'immediate' flag is false the map image just won't be visible at all while the console.log(...) says everything is finished so there's no freezing. Thus, the problem is in bmd.update(...) in the end that has no effect at all. Tried filling the entire bitmap with the white color before the loops: the entire bitmap is white but there's no trace of setPixel calls. create: function this.bmd = this.game.make.bitmapData(automata.width, automata.height);for (var i = 0; i < automata.width; i++) { for (var j = 0; j < automata.height; j++) { if (automata.cellmap[i][j]) this.bmd.setPixel(i, j, 255, 255, 255, false); }}this.bmd.update(0, 0, automata.width, automata.height);var img = this.bmd.addToWorld();img.smoothed = false;img.scale.set(2);

Hi, I'm trying to work out how to create a shape with graphics, cache it and add it to a sprite to use repeatedly I was trying to recreate the intro background on this video (see below, not the video thumbnail but the first thing you see when you actually play it). I realised drawing all the star graphics and fills directly over time would probably be too slow, so it would be better to cache the star & it's trail as a bitmap and then create multiple sprites from that. I want to create the graphic early on and pull it out of the cache later. I'm getting an error though. The key is there but it can't find the texture. Does it need longer to store before trying to pull it out again? Obviously I could use a PNG but i'd prefer to be able to generate the graphics at runtime thanks for any advice. J // draw graphics to renderTexturevar renderTexture = this.add.renderTexture(graphics.width, graphics.height);renderTexture.renderXY(graphics, 0, 0, true);// add renderTexture to cachethis.game.cache.addRenderTexture('starRT', renderTexture );// check starRT is in cacheconsole.log(this.game.cache.checkRenderTextureKey('starRT')) // true// Error: Phaser.Cache.getImage: Key "[object Object]" not found in Cache.var sprite = this.game.add.sprite(0,0,this.game.cache.getRenderTexture('starRT'));sprite.x=128;this works fine though, but obviously it's not being pulled from the cache var sprite2 = this.game.add.sprite(0,0,renderTexture);

Apologies if this has either been asked before, or I'm misunderstanding how to use RenderTextures I have a renderTexture that's outputting the contents of a Phaser.Image(), which in turn contains an instance of Phaser.BitmapData(). In my update() loop, I want to update the position of some geometry drawn in the BitMapData, but those changes are never seen in the RenderTexture. What would be the reason for this? Like I said I could be misunderstanding how & why you might want to use a RenderTexture, but this portion of my code will be quite expensive & updated regularly - so it seemed like a good idea to pass this logic out to the GPU if possible, which is what a RenderTexture allows, right? Am open to some better ideas if I do indeed have the wrong idea! Below is the code: it's written in TypeScript and the class extends Phaser.Sprite(), so hopefully it makes sense even to those only familiar with JS. As you can see in my update() I'm redrawing a bitmapData.circle() with a new x position, then rendering back to the RenderTexture again. However, the circle never moves from its original position of 0. If I console.log out the x value, it's clearly update per tick. constructor(game: Phaser.Game, map: any) { const texture = new Phaser.RenderTexture(game, map.widthInPixels, map.heightInPixels, key); const bitmap = new Phaser.BitmapData(game, 'BITMAP', map.widthInPixels, map.heightInPixels); super(game, 0, 0, texture); this.bitmap = bitmap; this.image = new Phaser.Image(game, 0, 0, this.bitmap); this.texture = texture; // Other code to add this .Sprite() to the stage. } private update() { const bitmap = this.bitmap; bitmap.clear(); bitmap.circle(x, 100, 50, 'rgb(255, 255, 255)'); this.texture.render(this.image); x += 10; }

I'm trying to make a snap shot of my game screen so I can fade multiple game elements in at the start of my game. These elements are contained within a root Phaser.Sprite. Fading the root container cases the children to fade unevenly. Meaning you can see parts of some elements behind others that overlap them. It doesn't create a nice effect. The only solution I could think of was to BitmapData::Draw my root container to make a single image of my game screen, then fade that instead so it appears that everything fades evenly together. However, because of a past issue I encountered ( here: http://www.html5gamedevs.com/topic/14117-alpha-mask-trouble/ ), it appears that the children of a sprite are ignored when drawing ( or alpha masking ) to bitmap data object. Now I could just do what I did in my other post, but some of my game elements have nested elements to them. So that solution isn't practical.

So one major optimization issue I have is that I update a bitmap and I have huge bitmaps, originally 4800 wide by 2100 high. ( Currently shrinking them to optimize because of update() ) Bullets remove chunks of ground, so I can't really call it less. The update function completely recreates all of that data. https://github.com/photonstorm/phaser/blob/v2.6.2/src/gameobjects/BitmapData.js#L596 Using the x, y, width and height forgets all the other data besides what is inside that. Does anyone know of any way of only updating a small portion of it while still keeping the rest of the array intact? I've been looking into it for quite some time with little luck.

I am a beginner at phaser trying to create a game that all of the sprites will be generated through bitmapdata. However, I always have to refresh browser twice to see the sprites. Like in the phaser example on generating a sprite: http://phaser.io/examples/v2/create/generate-sprite You won't see the sprite till you refresh. My questions are the following friends: What needs to be done to have all the bmd sprites generated the first load? (Will I have to create a loader, do something with cache?) If developing a multiplayer game with bmd sprites will some problem persist? Thank you for your time and I hope you can help me wrestle with understanding phaser.

Here is my game: Curvatron. In that version (a bit outdated now) the snake's tail is drawn using a Bitmap Data. Every frame, it draws a sprite (small circle) under the snake's head, and erases the end of the tail with a clearRect. This is ugly but it was the fastest method I could find at the time, for mobile. I have been trying to find other ways to do this so that I can have a prettier version on PC, but I'm not sure which one is the best. I tried: Using Graphics, drawing the entire body with a thick line. The entire line is erased and then redrawn every frame. Same thing as 1, but with Bitmap Data. Using Bitmap Data, drawing small circles (not sprites) for each body point, for the entire body. The entire thing is erased with a clearRect every frame and then redrawn.Which one of these approaches is the best? Should I just stick to the original one? Another question: is there much of a performance difference between using a small sprite (16*16) for drawing in the BMD and drawing a circle with the same dimensions?

I'm trying to do a Connect the dots game. what is the best way to do this? I created points and a line sprite between them and when you click on the first point and over the line you draw on a bitmap data. it's not the best solutions.. That's the main code: var connecttheDots = connecttheDots || {}; connecttheDots.GameController = function(state, gameData){ this.state = state; this.game = this.state.game; this.gameData = gameData; this.TweenAnimation = new connecttheDots.TweenAnimation(); this.SoundMannager = new connecttheDots.SoundMannager(this.game); this.DataUtils = new connecttheDots.DataUtils(); this.activeDrag = false; this.stroke = 1; this.dotGroup = this.game.add.group(); this.lineGroup = this.game.add.group(); this.canvasGroup = this.game.add.group(); this.init(); } connecttheDots.GameController.prototype = Object.create(Phaser.Sprite.prototype); connecttheDots.GameController.prototype.constructor = connecttheDots.GameController; connecttheDots.GameController.prototype.init = function(){ this.pointArr = [ /*{x: this.game.world.centerX - (this.game.width * .15), y: this.game.world.centerY - (this.game.height * .2), angle:-90, type: "start"}, {x: this.game.world.centerX + (this.game.width * .15), y: this.game.world.centerY - (this.game.height * .2), angle:0, type: "middle"}, {x: this.game.world.centerX + (this.game.width * .15), y: this.game.world.centerY + (this.game.height * .2), type: "end"} */ {x: this.game.world.centerX - (this.game.width * .15), y: this.game.world.centerY - (this.game.height * .2), angle:-49, type: "start"}, {x: this.game.world.centerX + (this.game.width * .15), y: this.game.world.centerY + (this.game.height * .2), type: "end"}, {x: this.game.world.centerX + (this.game.width * .12), y: this.game.world.centerY - (this.game.height * .2), angle:22, type: "start"}, {x: this.game.world.centerX + (this.game.width * .05), y: this.game.world.centerY + (this.game.height * .06), type: "end"}, {x: this.game.world.centerX - (this.game.width * .07), y: this.game.world.centerY - (this.game.height * .1), angle:22, type: "start"}, {x: this.game.world.centerX - (this.game.width * .15), y: this.game.world.centerY + (this.game.height * .2), type: "end"} ] // dots var i, objData, lineData; for (i = 0; i < this.pointArr.length; i++) { // line if(this.pointArr[i].type != "end") { lineData = { id: i, x1: this.pointArr[i].x, y1: this.pointArr[i].y, x2: this.pointArr[i+1].x, y2: this.pointArr[i+1].y, width: this.DataUtils.getDistanceFrom2Points(this.pointArr[i].x, this.pointArr[i].y, this.pointArr[i+1].x, this.pointArr[i+1].y), angle: this.pointArr[i].angle } this["line"+i] = new connecttheDots.line(this.state, lineData); //this.lineGroup.add(this["line"+i]); } // dot objData = { id: i, x: this.pointArr[i].x, y: this.pointArr[i].y, active: false, type: this.pointArr[i].type } if(i < this.pointArr.length-1) { objData.nextPoint = i+1; } this["dot"+i] = new connecttheDots.dot(this.state, this.pointArr[i].x, this.pointArr[i].y, objData); //this.dotGroup.add(this["dot"+i]); } this.dot0.glow(true); this.dot0.active(true); // canvas this.canvasBTM = this.game.add.bitmapData(this.game.width, this.game.height); //this.canvasBTM.context.fillStyle ="#ffffff"; //this.canvasBTM.context.fillRect(0,0,this.game.width, this.game.height); this.canvasBTM.x = 0; this.canvasBTM.y = 0; this.canvasBTM.addToWorld(this.canvasBTM.x, this.canvasBTM.y); this.canvasBTM.smoothed = false; //this.canvasGroup.add(this.canvasBTM); this.game.input.addMoveCallback(this.draw, this); this.game.input.onUp.add(this.stopDrag, this); } connecttheDots.GameController.prototype.onUpdate = function(){ if(this.curLine){ if(this.curLine.item.input.pointerOver()){ this.activeDrag = true; } else { this.activeDrag = false; } if(this.destDot.item.input.pointerOver()){ console.log("endPath"); this.curLine = null; this.activeDrag = false; if(this.destDot.item.data.nextPoint) { this["dot"+Number(this.destDot.item.data.id+1)].glow(true); this["dot"+Number(this.destDot.item.data.id+1)].active(true); } else { console.log("finish!"); } } } } connecttheDots.GameController.prototype.draw = function(pointer, x, y){ if (pointer.isDown && this.activeDrag){ this.canvasBTM.draw("circle", x, y); } } connecttheDots.GameController.prototype.stopDrag = function(pointer){ this.curLine = null; } connecttheDots.GameController.prototype.clickDot = function(btn){ console.log("clickDot", btn.data); this["dot"+btn.data.id].glow(false); if(btn.data.nextPoint) { this.destDot = this["dot"+Number(btn.data.id+1)]; this.destDot.glow(true); this.destDot.active(true); } this.curDot = btn.parent; this.curLine = this["line"+btn.data.id]; console.log(this.curLine); } Hope you can help me. Thank you.

Hey guy Is there any way can combine multiple bitmapdatas into one?

I keep running into this problem and I can't figure out where it comes from. The performance between graphics and bitmapdata is just too big. These fiddles are based off the starfield examples http://phaser.io/examples/v2/demoscene/starfield http://phaser.io/examples/v2/demoscene/starfield-bitmapdata I've only added the game.time.fps to the fiddles. https://jsfiddle.net/rf2gcfnz/ - with texture I get 34-36 fps, https://jsfiddle.net/7a87eL9n/ - with bitmapdata i get 58-60 fps. Why is that? I believe that texture and graphics should be faster then the bmd, as drawing to bmd involves another step as drawing to bmd and then to the screen. What am I missing?

Hi guys, Can anyone explain me a little bit of this code why its not working? var a = '141,243,160,1'; this.bmd1.fill(a); //it doesn't work // if this.bmd1.fill(141,243,160,1); it works

Hi guys, Could anyone kindly shows me a little bit of code about pick and paint color to the sprite? here is my code that I have played around, but I still cannot find out and achieve it. Thanks you in advance for your time and consideration. preload: function() { this.game.load.image('test', 'test.png'); }, create: function() { this.color1 = this.drawRec('rgb(141,243,160)', 20, 20); this.color2 = this.drawRec('#6bd4e0', 100, 20); this.color3 = this.drawRec('#cb6be0', 20, 100); this.color4 = this.drawRec('#8df3a0', 100, 100); this.square = this.game.make.bitmapData(); this.square.load('test'); this.square.addToWorld(this.game.world.centerX, this.game.world.centerY, 0.5, 0.5); this.game.input.onDown.add(this.pickColor, this); }, drawRec: function(color, x, y) { this.bmd = this.game.make.bitmapData(100, 100); this.bmd.ctx.beginPath(); this.bmd.ctx.rect(0,0,50,50); this.bmd.ctx.fillStyle = color; this.bmd.ctx.fill(); this.sprite = this.game.add.sprite(x, y, this.bmd); }, pickColor: function(pointer, x, y) { console.log(this.bmd.getPixelRGB(x,y)); }

Good day, I have been struggeling with this issue for a few days, I am also quite new to Phaser, so please forgive me if this is a newbie question. I am currently working on a project regarding a destroyable map with p2 physics. I have been using Physics editor to capture the maps size in a JSON file and all that seems to be working fine, also I am creating the map as BitmapData object which also is working fine. But once a part of the map is being destroyed, it needs to recalculate the physics properties which obviously doesn't happen. The solution for me - I am going to get the boundaries of the map (its a small scrollable map not more than 1.5k pixels in width) and triangulate the smaller objects which create the shape myself, which means that if a part of the map is destroyed it will recalculate the physics properties. The issue here is that I simply can't get the boundary pixel positions of a map this size for the triangulation library, my browser simply crashes, for smaller objects it actually works fine and everything is working smooth! Only if I put larger pictures in the example, it crashes... I am using contour.js marching ants algorithm from D3 an example is demonstrated down below to get the contour. http://stackoverflow.com/questions/28207232/draw-border-around-nontransparent-part-of-image-on-canvas Maybe there is a better solution to detecting contour pixel positions of larger objects in Phaser? Why is this example not working with larger png objects? And yes.. I also need to detect the transparent area

Hey guys, Is it possible that we can draw something on the bitmapdata without totally overlapping it? The result may look like this:

Hey guys, I just start to phaser. I tried to develop a game that allow user using their fingers to draw/paint on some particular area of the mobile screen. So my solution is to create two layers, one is the background tile sprite, and the other one is sprite that allow user to draw on it. Here is my code: background = game.add.tileSprite(0, 0, 1080, 1920, 'background'); game.add.sprite(x/2, y/2, 'tree'); bmd = game.add.bitmapData(game.width, game.height); bmd.addToWorld(); game.input.addMoveCallback(paint, this); However, when I tried to draw. I cannot particularly draw on the area of sprite. So, is there any ways that can make the bitmapdata only apear on the sprite instead of the whole background?

Hi I'm having trouble with setpixel32, which according to the docs here (http://phaser.io/docs/2.4.8/Phaser.BitmapData.html#setPixel) can have an alpha value as the 6th argument. However when I try this it just plots over whatever is underneath with a fixed level instead of adding to it. Here is a jsbin to demonstrate the issue (using Phaser 2.4.8): http://jsbin.com/repewekopa/1/edit?html,js,output You'll notice that the alpha works fine with drawing a sprite to the bitmap, but if you substitute "bmd.draw(star, x, y);" with "bmd.setPixel32(x, y, 255, 255, 255, 77);" you'll see that you can only draw a uniform grey colour instead of having it build up as intended. Can anyone please tell me what I'm doing wrong, or if this is something that isn't possible with this method? As an extension question, is there any other faster method of plotting pixels with alpha?

I'm trying to create a HSV color picker using BitmapData. The implementation can be found in this Phaser Sandbox, I followed this example, with the notable difference, that I'm not using an image to generate the BitmapData but I'm generating the data myself. Unfortunately I seem to be unable to retrieve the color data for a given pixel (I tried BitmapData.getPixel(), getPixelRGB, getPixel32()). Does anyone have an idea what I'm doing wrong?