Search the Community

Showing results for tags 'bitmapData'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 75 results

  1. How to cache Texture or BitmapData

    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
  2. 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();, 10, 20, 'rgba(0, 0, 0, 255');, 10, 20, 'rgba(0, 0, 0, 255'); this.bmd.blendReset(); this.bmd.update(); this.ground = this.add.sprite(0, 630, this.bmd);; 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?
  3. 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:[i] = 0;[i + 1] = 0;[i + 2] = 0;[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.
  4. 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.
  5. 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 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();, 100, 50, 'rgb(255, 255, 255)'); this.texture.render(this.image); x += 10; }
  6. 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. 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.
  7. GetPixel trouble.

    Hi there, im develong a game with ink. They are some planets and you shoot ink on them and then you conquer them. I use a temporal bitmapdata do draw render texture planets on it to use bitmapdata getpixel method to get if the planet is completely of a color (or almost). Im wondering if theres a better method because this is so laggy. Theres a way to get a pixel from renderTexture? conquer: function(p) { //I draw planet renderTexture on bmd bitmapdata to allow the getpixel function bmd.draw(p.capaPintura,0,0,(*2),(*2)); //Points of the planet to get pixels. col = []; col[0] = bmd.getPixelRGB(10,; //izquierda - centro col[1] = bmd.getPixelRGB(((*2)-10),; col[2] = bmd.getPixelRGB(,10); //centro - arriba col[3] = bmd.getPixelRGB(,((*2)-10)); if (col[0].rgba === col[1].rgba && col[2].rgba === col[0].rgba && col[0].rgba === col[3].rgba){ var c = 0; if(col[0].rgba === 'rgba(0,0,255,1)') c = 1; var colorPlanet = []; switch(c) { case 0: colorPlanet[0] = 0x550000; //Shadow color colorPlanet[1] = 0xAA0000; //Shadow color2 colorPlanet[2] = 0xFF0000; break; case 1: colorPlanet[0] = 0x000055; colorPlanet[1] = 0x0000AA; colorPlanet[2] = 0x0000FF; break; } //Shadow color pintData.beginFill(colorPlanet[0]); pintData.drawCircle(0, 0,*2); p.capaPintura.renderXY(pintData,,; //Shadow color 2 pintData.beginFill(colorPlanet[1]); pintData.drawCircle(0, 0,*2); p.capaPintura.renderXY(pintData,*1.1,*.9); //Planet color pintData.beginFill(colorPlanet[2]); pintData.drawCircle(0, 0,*2); pintData.endFill(); p.capaPintura.renderXY(pintData,*1.25,*0.75); } } Thats the code, i use it to check if the planet points (col[0], col[1], col[2] and col[3]) are of the same color, then if they are same color y draw on the planet renderTexture (p.capaPintura) colors of the conquerer ink. this is the planet after being conquerer by the blue team, the code works, but i have to use the conquer function once every time a planet is hit by ink or it wont work.. and its so laggy, theres a method to do it just with render textures?, i have to draw the planet renderTexture on bmd just to use getPixel, so if the planet is bigger then bigger is the lag i get because of that draw... .
  8. BitmapData Ram leak

    Hí there, im trying to create a game where i shoot ink to walls to paint them. But while i tested i saw that game ram usage increases every time i draw in a bitmapdata. The bitmapdata size is 300x300, when i shoot to it i draw a 64x64 (random color circle) temporal bitmapdata on it. I think the bitmapdata is holding data from all drawing i made... but i dont know why. This is the code where i draw: var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; ink = game.make.bitmapData(64, 64);, 32, 32, color); wall.draw(ink, ink.x-(wall.x-wall.width/2),ink.y-(wall.y-wall.height/2), ink.width,inkp.height); i only have ink and wall, but if i shoot the walllot of times (Sooo many times bacause i networked it to play with my friends) it start taking like 2000mb ram :/. if i just delete those lines the game is fine, i dont know why wall bitmapdata is acumulating data from all draws i do.... Thanks.
  9. connect the dots

    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.gameData = gameData; this.TweenAnimation = new connecttheDots.TweenAnimation(); this.SoundMannager = new connecttheDots.SoundMannager(; this.DataUtils = new connecttheDots.DataUtils(); this.activeDrag = false; this.stroke = 1; this.dotGroup =; this.lineGroup =; this.canvasGroup =; this.init(); } connecttheDots.GameController.prototype = Object.create(Phaser.Sprite.prototype); connecttheDots.GameController.prototype.constructor = connecttheDots.GameController; connecttheDots.GameController.prototype.init = function(){ this.pointArr = [ /*{x: - ( * .15), y: - ( * .2), angle:-90, type: "start"}, {x: + ( * .15), y: - ( * .2), angle:0, type: "middle"}, {x: + ( * .15), y: + ( * .2), type: "end"} */ {x: - ( * .15), y: - ( * .2), angle:-49, type: "start"}, {x: + ( * .15), y: + ( * .2), type: "end"}, {x: + ( * .12), y: - ( * .2), angle:22, type: "start"}, {x: + ( * .05), y: + ( * .06), type: "end"}, {x: - ( * .07), y: - ( * .1), angle:22, type: "start"}, {x: - ( * .15), y: + ( * .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, this.pointArr[i].x, this.pointArr[i].y, objData); //this.dotGroup.add(this["dot"+i]); } this.dot0.glow(true);; // canvas this.canvasBTM =,; //this.canvasBTM.context.fillStyle ="#ffffff"; //this.canvasBTM.context.fillRect(0,0,,; 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);, 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["dot"+Number(].glow(true); this["dot"+Number(].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",; this["dot"].glow(false); if( { this.destDot = this["dot"+Number(]; this.destDot.glow(true);; } this.curDot = btn.parent; this.curLine = this["line"]; console.log(this.curLine); } Hope you can help me. Thank you.
  10. 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 I've only added the game.time.fps to the fiddles. - with texture I get 34-36 fps, - 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?
  11. BitmapData fill not working

    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
  12. Hey guy Is there any way can combine multiple bitmapdatas into one?
  13. 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. 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
  14. BitmapData Pick color and paint

    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() {'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.square.load('test'); this.square.addToWorld(,, 0.5, 0.5);, this); }, drawRec: function(color, x, y) { this.bmd =, 100); this.bmd.ctx.beginPath(); this.bmd.ctx.rect(0,0,50,50); this.bmd.ctx.fillStyle = color; this.bmd.ctx.fill(); this.sprite =, y, this.bmd); }, pickColor: function(pointer, x, y) { console.log(this.bmd.getPixelRGB(x,y)); }
  15. Hey guys, Is it possible that we can draw something on the bitmapdata without totally overlapping it? The result may look like this:
  16. 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?
  17. 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: 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.
  18. 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?
  19. Drawing single pixels with alpha

    Hi I'm having trouble with setpixel32, which according to the docs here ( 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):,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?
  20. reset bitmapdata canvas

    hi there, im trying to erase a part of the bitmapdata canvas ( a blue rectangle) with the mouse. but want to know how i destroy it or reset it to bring the solid rectangle solid again without any holes (made with the mouse) any ideas? i tried .destroy() but seems that doesnt help
  21. bitmapdata and sprites

    hi there, if i create a Sprite and assign a BitmapData as its texture. then i can operate over the sprite texture(bitmapdata) using the bitmaps methods like getpixels? or how can i erase it after that ( i mean the bitmapdata)? thanks in advance
  22. Proper way to drawing with mouse

    Hi guys, I´m working on simple Connect-the-dots game (there are dots on the screen and you have to join them with mouse in order to get some image) and I´m trying to implement pencil, which will draw on canvas. I also need functionality where all what I´ve previously drawn will change the color when the image is complete, that means I need to preserve created data somehow. I´ve already tried multiple solutions I found here and around the internet, but nothing seems to work as I need. I´ve tried this: 1) Drawing with bitmapdata Basically this solution:, the problem is dots aren´t close enough each other when you move mouse fast and also I cannot access previously drawn data in order to change their color. 2) Drawing with, this);, this); startDrawing: function(pointer) { this.drawing = true; =;;, 0xFFFFFF);, pointer.y);, this); }, onDraw: function(pointer, x, y) { if (this.drawing),y); }, stopDrawing: function(pointer, x, y) { this.drawing = false;;, this); }, Here I`ve experienced some serious drawbacks. First, this solution doesn`t work at all in Opera (also I`ve noticed weird behaviour of this example in my browser - the shapes are just blinking or you cannot see them at all) and in other browsers it looks like shapes are closing themselves automatically - that means shape is after each step closed (it is always polygon) and I cannot make path just from the lines - is it correct behaviour of the graphics class? 2) Drawing directly to canvas context through bitmapdata Currently I ended up with this: this.bmd =,; this.bmd.addToWorld();, this);, this); startDrawing: function(pointer) { this.drawing = true; this.bmd.ctx.beginPath(); this.bmd.ctx.lineWidth = 10; this.bmd.ctx.moveTo(pointer.x, pointer.y);, this); }, onDraw: function(pointer, x, y) { if (this.drawing){ this.bmd.ctx.lineTo(x, y); this.bmd.ctx.stroke(); } }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.bmd.ctx.closePath();, this); }, This solution seems to work only in IE, in Firefox and Opera nothing is shown. Could you please provide me some advices how to solve my situation? What is the best way to implement pencil-like behaviour in Phaser? I`ve already spent whole afternoon on this - without usable solution. Thanks in advance!
  23. apply texture to image

    Hi, I have made this sample using pure html5 canvas, is there a way I can simulate it using Phaser?
  24. Drawing sprites with bitmapdata

    Im trying to make a game where player will run on whatever I draw. I tried just drawing(adding) sprites where my mouse is but as we know, if you move your mouse/finger a bit faster it draws little dots (assuming sprite is a dot). Then I tried inserting some sort of manual interpolation or something similar and it was a partial success but my drawings where too rough ( I want a smooth line, not zigzags or stairs looking line) and I dont know how to do it right. Last thing I tried is using bitmapdata and drawing is perfect but I cant use physics on it. For example I want it to move left all the time just like in 2d endless runners and for player to be able to run on it. Im sure there is a solution but I cant find it so I would really need your help with it. RoadDraw.Game = function(game) { this.totalBuildings; this.buildings; this.spriteMaterial; this.worldMaterial; this.boxMaterial; this.dotMaterial; this.lastX; this.lastY; this.currentX; this.currentY; this.betweenClicks = false; this.player; this.loop; }; var bmd; RoadDraw.Game.prototype = { create: function() { this.physics.startSystem(Phaser.Physics.P2JS); this.physics.p2.gravity.y = 350; this.totalBuildings = 4; this.buildWorld(); }, buildWorld: function() { this.add.image(0,0, 'sky'); player = this.add.sprite(50, 50, 'player'); player.anchor.setTo(0.5, 0.5); player.scale.setTo(1,1); this.physics.p2.enable(player); player.animations.add('run', [5, 6, 7, 8], 10, true); player.body.fixedRotation = true; bmd = this.add.bitmapData(800,600); sprite = this.add.sprite(0, 0, bmd); bmd.ctx.beginPath(); bmd.ctx.strokeStyle = "black"; //bmd.addToWorld(); bmd.smoothed = false; }, update: function() { if(this.input.activePointer.isDown) { if(!this.betweenClicks) { bmd.ctx.lineTo(this.input.x, this.input.y); bmd.ctx.lineWidth = 2; bmd.ctx.stroke(); bmd.dirty = true; this.loop = this.add.sprite(this.input.x, this.input.y, bmd); bmd.draw(this.loop); this.loop.scale.setTo(0.004,0.004); this.loop.anchor.set(0.5); this.loop.checkWorldBounds = true; this.loop.outOfBoundsKill = true; this.physics.p2.enable(this.loop); this.loop.body.damping= 0; this.loop.body.mass= 0.1; this.loop.body.immovable = true; this.loop.body.moveLeft(140); this.loop.body.kinematic = true; } this.betweenClicks = false; } else { bmd.ctx.closePath(); bmd.ctx.beginPath(); bmd.ctx.beginPath(); this.betweenClicks = true; } if(player) {"run"); player.body.velocity.x = 0; } } }
  25. Why is BitmapData.clear() so slow?

    I'm seeing a massive performance hit from BitmapData.clear(). I've also noticed it eats up memory. I looked at the source code and the bottleneck appears to be from setting the dirty flag to true. If I use BitmapData.context.clearRect() manually, everything works fine. What is the dirty flag doing? Why is it necessary to set it? Perhaps an argument could be added to skip setting it?