Jump to content

Search the Community

Showing results for tags 'bitmapdata'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. 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);},
  2. Hello, please help. Can I put sprites with children in the bitmapdata? I'll attach the picture, is this possible and how? Thank you.
  3. 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!
  4. 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
  5. 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?
  6. 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.
  7. 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?
  8. 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.
  9. 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);
  10. 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);
  11. 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; }
  12. 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.
  13. 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.
  14. 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.
  15. 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,(p.radio*2),(p.radio*2)); //Points of the planet to get pixels. col = []; col[0] = bmd.getPixelRGB(10,p.radio); //izquierda - centro col[1] = bmd.getPixelRGB(((p.radio*2)-10),p.radio); col[2] = bmd.getPixelRGB(p.radio,10); //centro - arriba col[3] = bmd.getPixelRGB(p.radio,((p.radio*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, p.radio*2); p.capaPintura.renderXY(pintData,p.radio,p.radio); //Shadow color 2 pintData.beginFill(colorPlanet[1]); pintData.drawCircle(0, 0, p.radio*2); p.capaPintura.renderXY(pintData,p.radio*1.1,p.radio*.9); //Planet color pintData.beginFill(colorPlanet[2]); pintData.drawCircle(0, 0, p.radio*2); pintData.endFill(); p.capaPintura.renderXY(pintData,p.radio*1.25,p.radio*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... .
  16. 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?
  17. 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); ink.circle(32, 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.
  18. 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.
  19. Hey guy Is there any way can combine multiple bitmapdatas into one?
  20. 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?
  21. 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
  22. 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)); }
  23. 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
  24. Hey guys, Is it possible that we can draw something on the bitmapdata without totally overlapping it? The result may look like this:
  25. 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?
  • Create New...