Search the Community

Showing results for tags 'mask'.

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 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 72 results

  1. Good afternoon, I was hoping that the community could look over my code and see if something needs to be adjusted. I recently started learning Javascript and I just started learning Phaser and easystar yesterday so this might all look ridiculous. At the moment all I am trying to accomplish is pathfinding the way it is done in a point and click adventure game such as Monkey Island or Day of the Tentacle from Lucasarts. I am trying to achieve it much how AGS(Adventure Game Studio) allows the user to set it up. Basically, you import a room image and then you draw over the room with a chosen color(Sort of like drawing a mask) all the area's that a character can walk and find a path to and from. What I am trying to achieve in my code is the same principle above and I am trying to use easystar and Phaser to accomplish this. Let me explain my code: I have three images: the 'background' image which will load up the image of the room the character will be in. 'walkablepath' will be the image that contains the image mask. Anything that is hot pink is where the character can walk. 'maincharacter' is the player character that will find the path when we click on a part of the screen we want the player to go to. At start we will create a 'bmd' object, create the walkable grid and then destroy the bmd object. The 'bmd' object is what will hold the walkable mask information. It will match the same size as the room image. It will have complete transparency and will be overlaid over the background image, but not visible to the user. 'walkableGrid' will be the grid data that easystar will use to calculate the walkable paths. 'walkableRGB' will contain the RGB value of Hot Pink so that we can find the hot pink pixels. 'gridCollection' will collect the X and Y pixel data in the 'bmd' object and push it to the 'walkableGrid' as it goes through each pixel line from top to bottom. The code will do this by iterating through each X and Y pixel in a loop. After that is completed, the mask will be destroyed, easystar will have a setup to determine the acceptable tiles in the grid. Function calculateWalkPath() will be called each time the user clicks on the screen and the game will try and calculate the path for the user to walk and move him to his destination. Please see the code below: //Set the initial game paramters - Will start with 800x600 resolution and will use WebGL as a renderer and default back to Canvas if WebGL is not present. var game = new Phaser.Game(800,600, Phaser.AUTO, '', { preload: preload, create: create, update: update}); var easystar = new EasyStar.js(); //Lets get easy star in here. var bmd; //This will be the object that will take the pixel data of the scene. //Assets that will be preloaded at start function preload(){ game.load.image('background', 'assets/room1.png'); //The game room background that will be loaded. game.load.image('walkablepath', 'assets/walkablepath.png'); //The room's walkable area. game.load.image('maincharacter', 'assets/character.png', 32, 48); //The main characters animated spritesheet who will be walking around the room. } //The first function called when we start our game function create(){ //We are going to obtain the width and height of the background room. var backWidth = game.cache.getImage("background").width;var backHeight = game.cache.getImage("background").height; bmd = game.make.bitmapData(backWidth, backHeight); //Getting ready to determine the room size and get the pixel data of the walkable path. game.add.sprite(0,0,'background'); // Will add the room background to the desktop. It will place the upper left part of the image to the upper left part of the screen. bmd.alpha = 0; //Let's make sure the image is completely invisible to the users eyes. bmd.draw('walkablepath', 0, 0); //Will overlay the transparent walkable path over the background image. var walkableGrid = new Array(); //Lets make the grid that easy star will define as the walkable points. var gridCollection; //This will collect the 2 dimensional array grids and push it to the walkableGrid. var walkableRGB = "255105180"; //This is the RGB value of the area's the user can walk on. - Hot Pink is the RGB Color //Following code will begin at the top left corner of the walkable area and check each pixel for the hot pink color. If it finds it, it will add a 0. If not, 1. for (i = 0; i < backWidth; i++) { gridCollection = "["; for (j = 0; j < backWidth; j++) { if (bmd.getPixelRGB(i, j) == "255105180"){ gridCollection = gridCollection + "0"; } else { gridCollection = gridCollection + "1"; } //If there is still more width in the image, it will add a comma. Otherwise it won't and the array can be closed off. if (j != backWidth) { gridCollection = gridCollection + ","; } } //Close up and then Push the Array to the walkable grid gridCollection = gridCollection + "]"; walkableGrid.push(gridCollection); } bmd.kill(); //let's destroy the walkable area path we created from view - we need to find a better way to do this process. easystar.setGrid(walkableGrid); //Let's add the 2 dimensional grid array we just created to Easy star's pathfinding grid. easystar.setAcceptableTiles([0]); //Let's also make sure that easy star is aware that the 0 tiles are the tiles that the player can walk on. } function update(){ } function calculateWalkPath() { //This function will be called every time the user clicks on a path to walk to. //Now let's calculate the path and presumably use tweening to move the character from it's current x and y position to it's next calculated position easystar.findPath(xClickDest, yClickDest, playerXpos, playerYpos, function( path ) { if (path === null) { //Do something like a shrug animation from the character for not being able to find a path. } else { game.add.tween(maincharacter).to( { x: path[0].x }, 2000, Phaser.Easing.Linear.None, true); game.add.tween(maincharacter).to( { y: path[0].y }, 2000, Phaser.Easing.Linear.None, true); } }); //Let's get this party started. easystar.setIterationsPerCalculation(1000); easystar.calculate(); } I have to admit, I did not test this code yet. I rather have a fresh pair of eyes on this as I spent a good half hour trying to figure this out today and feel rather brain dead. Now, my questions are these: Will this code operate correctly? Did I use Phaser and Easystar correctly? What about memory management and speed and what is a better way to manage this? How would you improve it? Also, can I set more than one acceptable tile for easystar and how? Thanks for looking and for your assistance.
  2. Kacper Pietrzak

    Applying multiple masks to single sprite

    Question is pretty straightforward, how can I apply multiple masks to one sprite. Let's say I have a sprite and I want it to be displayed only in particular places. In my case I want zombies to be visible only in light, having only flashlight it's pretty easy to implement since there is only one source of light and I can do something like that: this.zombies.setAll('mask', this.flashlightGraphics); But what do I do when I want to apply multiple masks, is there a way to combine graphics objects ? Thanks
  3. mcolman

    Circle mask

    Hi, I want to apply a circle mask to a sprite. What's the most performant way to do so with WebGL? Alpha mask or graphics mask? I recall that graphics circles were once made up of LOTS of lineTo calls so they were never actually perfect circles and performed really bad, not sure if this has been fixed though?? Thanks!
  4. hopgop1

    Basic Troubleshooting Help

    Hi, I'm a relative noob to javascript and Phaser, and I'm having an issue coding my first proper game. I'm using Phaser version 2.6.2 and the latest version of Chrome browser. I'm asking the user a basic maths question, but when I draw the buttons for the user to click they appear but aren't clickable. Here is the console error: And here is the code I believe to be causing the error: game.add.button(50, 250 + i * 75, "buttons", this.checkAnswer).frame = i; And there is also this bit of code to draw the button mask: this.buttonMask =, 250); this.buttonMask.beginFill(0xffffff); this.buttonMask.drawRect(0, 0, 400, 200); this.buttonMask.endFill(); numberTimer.mask = this.buttonMask; Any help would be appreciated, if you need any extra information to help me I'll gladly provide it. Been staring at this problem for over a week and I just can't figure out what's wrong, I hope it's something simple I'm doing wrong. Thanks
  5. I'm working on a "fake zoom" function that looks like this: class Zoomer extends Phaser.Group { zoom = (amount = { x: 1.5, y: 1.5 }) => { this.x = -((amount.x * ( / 2)) - ( / 2)); this.y = - (amount.x * ( * 1.15)); this.scale.setTo(amount.x, amount.y); } } The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all. This is how I usually create masks on a Phaser.Sprite: createMask() { const graphics =, this.y); graphics.beginFill(0xFFFFFF); graphics.drawRect(0, 0, this.width, this.height); this.addChild(graphics); this.mask = graphics; } How can I make the group scaling/repositioning include the group's sprites' masks as well?
  6. Madclaws

    Collision mask in Phaser

    hi guys, Why there is no collision mask (like in construct 2d) in phaser.I think that will be a good feature.
  7. Fenopiù

    Phaser mask is a bully

    Good morning everyone! I've created my mask to let my group "symbols" drawn only if inside the mask. mask =, 0); mask.beginFill(0xffffff); mask.alpha = 0; mask.drawRect(x, y, xx - x, yy - y) mask.endFill(); symbols.mask = mask; The images who can be drawned everywhere are in the "images" group. The images in the behind the mask and the symbols in the mask are correctly rendered. The images that I want OVER the mask are still rendered behind the mask. Any ideas why or how can I fix it?
  8. I've been reading a backlog of how to do this all the way back to when the recommendation was to use canvas. What is the new and modern way of accomplishing this? Let's say I have a rectangle that fills my screen and makes the game look like night time.. then I have a torch and I want to cut (or lighten) a circle out of the night rectangle. I've tried drawing a circle using graphics and setting its colors to white, black, and alphas to 1.0 or 0, then adding it as a mask onto the rectangle -- this only seems to perform a regular mask operation (aka draw the night within the circle) but never the opposite (draw the nighttime everywhere but the circle). I know how to accomplish this via canvas or webgl, but it looks like this feature is already in pixi I'm just not sure how to do it! Thanks for reading! p.s. if the answer involves using a filter could you please reply with code.. im never sure which object exactly gets the filter added EDIT: and will the new method work if calculated *every frame* ?
  9. Hi. How to add the mask (graphic) to group?. If the mask is added to the group, it no longer masks the sprite inside.
  10. I have a Phaser game created and I am able to create an updated visibility graphic object while my sprite moves. However, like in this example, and every other I have found online:, they are using an image of the thing you want to see as the 'background', and simply .mask against the visibility graphic. In my case, I do not have an image of the map as it is created through a tilemap generator, so my current code basically shows the opposite of what I am looking for: For this example, I created a test box in the bottom right of the screen that has nothing to do with the real map (I'll add the correct walls later to the visibility algorithm). I want the part that is not white to be blacked out, and the whited part to be crystal clear. I have tried creating a sprite of just black, and a sprite of just transparent, and had them .mask = visibility graphic. But this just overwrites everything else. I have taken out the most important part of the code for reference: preload () { //load assets that are specific for this level'blackness', '../../assets/images/blackness.jpg');'transparent', '../../assets/images/transparent.png'); //'yellowish', '../../assets/images/yellowish.png') } create () { this.blackness =,0,'blackness'); //this.blackness.alpha = 0.8; //this.transparent =,0,'transparent'); this.lightCanvas =,0); } update() { let visibility = this.createLightPolygon(this.currentPlayerSprite.x, this.currentPlayerSprite.y); this.lightCanvas.clear(); this.lightCanvas.beginFill(0xffffff,0.5); console.log('visibility',visibility) this.lightCanvas.moveTo(visibility[0][0],visibility[0][1]); for(let i=1;i<=visibility.length;i++){ this.lightCanvas.lineTo(visibility[i%visibility.length][0],visibility[i%visibility.length][1]); } //this.transparent.mask = this.lightCanvas; this.lightCanvas.endFill(); }
  11. What i need I have two sprites with transparent background textures and want to clip one sprite with other, while keeping the color of clipped one. What i tried I tried to use DisplayObject.mask property var app = new PIXI.Application(600, 480, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); let squareTexture = PIXI.Texture.fromImage(SQUARE_IMAGE_URL); let circleTexture = PIXI.Texture.fromImage(CIRCLE_IMAGE_URL); let square = new PIXI.Sprite(squareTexture); let circle = new PIXI.Sprite(circleTexture); square.mask = circle; app.stage.addChild(square); app.stage.addChild(circle); But in addition to clipping it also modifies clipped sprite color So is there any way to clip sprite in Pixi while keeping it's original color without using simple shapes painted with Graphic (i really need to do this with any texture with transparent pixels)?
  12. tips4design

    Mask out parts of an image?

    I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions. The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. I think a WebGL solution such as using shaders might be used. Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ? Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this? PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).
  13. Hey. I am trying to using 2 polygons as mask for a sprite group. It seems to work with drawRect perfectly, when I use more than 1 (as in the example image). But whenever I try to use 2 polygons, it just apply the first one created as mask. One polygon is above the window, one being the window itself. (see the code). I have provided my example code here. poly = new Phaser.Polygon( { x: 0, y: 0 },{ x: 0, y: 255 },{ x: 153, y: 255 },{ x: 154, y: 218 }, { x: 176, y: 213 },{ x: 165, y: 215 },{ x: 165, y: 215 },{ x: 176, y: 213 }, { x: 199, y: 211 },{ x: 199, y: 211 },{ x: 201, y: 157 },{ x: 202, y: 149 }, { x: 205, y: 142 },{ x: 200, y: 139 },{ x: 199, y: 132 },{ x: 206, y: 127 }, { x: 215, y: 123 },{ x: 215, y: 123 },{ x: 231, y: 120 }, { x: 256, y: 116 },{ x: 303, y: 116 },{ x: 328, y: 119 },{ x: 349, y: 122 },{ x: 356, y: 125 }, { x: 360, y: 130 },{ x: 361, y: 151 },{ x: 365, y: 184 },{ x: 365, y: 216 }, { x: 366, y: 252 },{ x: 550, y: 251 },{ x: 552, y: 213 },{ x: 550, y: 210 }, { x: 550, y: 207 },{ x: 569, y: 201 },{ x: 591, y: 199 },{ x: 615, y: 199 }, { x: 638, y: 201 },{ x: 659, y: 204 },{ x: 675, y: 208 },{ x: 675, y: 212 }, { x: 675, y: 212 },{ x: 672, y: 213 },{ x: 671, y: 216 },{ x: 671, y: 249 }, { x: 767, y: 249 },{ x: 927, y: 239 },{ x: 947, y: 239 },{ x: 940, y: 479 }, { x: 957, y: 497 },{ x: 960, y: 509 },{ x: 960, y: 509 },{ x: 982, y: 532 }, { x: 984, y: 548 },{ x: 998, y: 568 },{ x: 1005, y: 562 },{ x: 1024, y: 561 }, { x: 1024, y: 0 } ); poly2 = new Phaser.Polygon( { x: 780, y: 280 },{ x: 876, y: 280 },{ x: 876, y: 371 }, { x: 848, y: 371 },{ x: 848, y: 352 },{ x: 779, y: 352 } ); mask =, 0); mask.beginFill(0xFFFFFF); mask.drawPolygon(poly.points); mask.drawPolygon(poly2.points); enemies.mask = mask; Is there something I have missed or is this a bug? Is there another (better) way of doing what I am trying to archive (on the example images)? Basicly it is one big image I just want to be able to define specific areas where enemies can be shown in-game. Since I would probably need to add at least a couple more areas. Thanks for your help.
  14. Basically that's what I want to achieve, removing/hiding a part of a sprite/image/graphic. That's the opposite of how masks work in Phaser, so does anyone know how to achieve that result?
  15. Hi, This is probably a misunderstanding on my part, but how can I get the light to shine on either of the objects in the PG? Meshes work just like I thought, I can display either of them by changing the bitmask.
  16. Hey everyone! I've implemented simple dynamic lightning in my project, but what I'm missing is soft light edges effect. This what it looks like now: I use sprites' masks to achieve that, code looks somewhat like this: updateShowingLayer() { + this.showMaskGraphics.clear(); + this.showMaskGraphics.lineStyle( 2, 0xffffff, 1 ); + this.showMaskGraphics.beginFill( 0x00000000 ); + this.showMaskGraphics.moveTo( this.player.x, this.player.y ); + + for ( let i = 0; i < NUMBER_OF_RAYS; i++ ) { + const rayAngle = mouseAngle - ( LIGHT_ANGLE / 2 ) + ( LIGHT_ANGLE / NUMBER_OF_RAYS ) * i; + let lastX = this.player.x; + let lastY = this.player.y; + for ( let j = 1; j <= RAY_LENGTH; j++ ) { + const landingX = Math.round( this.player.x - ( 2 * j ) * Math.cos( rayAngle ) ); + const landingY = Math.round( this.player.y - ( 2 * j ) * Math.sin( rayAngle ) ); + if ( !this.isTileBlocking( landingX, landingY ) ) { + lastX = landingX; + lastY = landingY; + } else { + break; + } + } + this.showMaskGraphics.lineTo( lastX, lastY ); + } + this.showMaskGraphics.lineTo( this.player.x, this.player.y ); + this.showMaskGraphics.endFill(); } } And then I just set masks in corresponding sprites to `this.showMaskGraphics` The full code is available here: Does anyone have an idea how to make this light soft ? Thanks
  17. Dylan Cristy

    Mask not redrawing correctly

    Similar to this post, I am applying a mask to a group, and then clearing and redrawing the mask each update after things are re positioned. It was working fine, but then I made some changes to some other code that shouldn't affect the masking, but now for some reason the masked area is not updating, even though the Phaser.Graphics.graphicsData.shape appears to be in the right place. Here's my update code: if (this.buttonMask) { this.buttonMask.clear(); this.buttonMask.beginFill(0xffffff); let buttonMaskWidth = // my calculations to figure out the width let buttonMaskLeft = // my calculations to ficure out the X coord this.buttonMask.drawRect(buttonMaskLeft, frameBottom, buttonMaskWidth, this.buttonsGroup.bottom - frameBottom + 2); } And, using the following debug code in render(): if (this.buttonMask.graphicsData) { this.buttonMask.graphicsData.forEach((gdata) => {, '#0f0', false); }); } I can see that the shape that should be used for the mask is in the right place, but the masking effect is still only occurring where the initial rectangle was drawn when the stage first loads. Here's the initial load with masking in the correct place (the green lines are the debug rectangle): And here is after resizing the browser window and re positioning elements. The green debug rectangle is in the correct place, and the buttons are in the correct place, but the masking effect has not moved: Any ideas as to what could be going wrong? I'm not seeing any errors in the console.
  18. eyeswideopen

    Masking of Group with Alpha-Mask

    Hey, is there a way to mask a Group with an Alpha mask? I managed to mask it with a handdrawn Graphics object but since my mask is quite complex i'd like it to work the same way as the Alpha-Mask tutorial just for my Group. So can an image/sprite be used as a mask for a Group somehow? Cheers
  19. Hi, I'm trying to start sort of a drawing app where you can draw lines and show an image through those lines. Problem is, it is incredibly slow... So I have an "imageToReveal" sprite and mask it with the drawn lines. Now this does work in my project, but I cannot get it to work in JSFiddle. check it out here This should render the drawn shapes to a texture and set to texture to Sprite that's masking the image to reveal I don't know if this is the best way, but the simple way with a masked sprite and shapes as children didn't go well either: see this one So my question is, how do I make the first JSFiddle work? (and is it the best way) And if it is, how can I make it faster? since it drops from 60 to 40 after a single shape is put on stage.
  20. I'm trying to create an effect where a shape inverts the color of everything it covers. Imagine two Container objects, one rendered behind the other, the one behind is the "main stage" with all the graphics, and the one in front of it contains my shape, I want that shape to invert the color of everything behind it on the first container, that shape is animated too. I just used containers to explain what I want to do, while it is what I have in my current code, I'm open to any solutions, thanks. P-S : Is there really no real-time chat anywhere? Irc, Discord, etc.. It's a shame such a widely use library doesn't have anywhere where to discuss and talk about everything pixijs related..
  21. LucaDB

    Sprite as a mask problem

    Hi, this is my first post I'm trying to use an image (png) as a container mask, it seems to work well on macOS but on Windows 8.1/10 ( ie11, edge, firefox 53) mask has no effect. Here is the simple code var app = new PIXI.Application(window.innerWidth,window.innerHeight); document.body.appendChild(app.view); var baseContainer = new PIXI.Container(); app.stage.addChild(baseContainer); var theMask = PIXI.Sprite.fromImage('mask.png'); var baseImg = new PIXI.Sprite.fromImage('base.jpg'); baseContainer.addChild(baseImg); baseContainer.addChild(theMask); baseContainer.mask = theMask; I'm using PIXI 4.4.1 Any idea why this is not working? Thank you
  22. Hello friends, I would need some help in finding a coding approach that would allow my to create a mask for a sprite using a complex shaped image. I am trying to create a dynamic energy gauge using my player's sprite silhouette like so: The strategy I imagined for achieving this result was to draw my player's sprite, then overlay it with a green rectangle sprite that I could move (or scale) according to the energy level and then mask this rectangle using the shape of my player sprite as the mask. After a lot of time reading the examples and the documentation on Phaser's website, I found two options: Masking a sprite using a Graphics or using Alpha Masking. However both seem to have limitations that prevent me from reaching the result. - Masking a sprite with Graphics: this option only let's me mask my player sprite using Graphics shapes (circle, rectangle, etc.) and not a complex shape like my silhouette - Alpha Masking: this option uses two loaded images (base image = green rectangle, alpha image = player silhouette), combines them into a bitmapdata and then uses the bitmapdata as a texture for a sprite. However, I cannot figure a way to update the base image dynamicaly to account for the changes in the gauge. If anyone can propose some approaches I could try, I would be very thankful. Cheers, jci
  23. ANVoevodin

    Mask works with rotation only

    Hi. I wasted a lot of time with next problem: my mask only works when its rotation is 0.1 or more (when I applied mask to a container, the container didn't display anything). I made little example on jsfiddle, but it works well I know I'm asking too much to help me without example and I understand the problem is exactly in my project, but maybe somebody encountered with similar problem or knows what can be a cause? Pixi 4.3.4. P.S. I've read docs about masks, but maybe I did't get something... Thanks!
  24. royibernthal

    Canvas 2D Mask

    @Nockawa Is there a way to create a mask in Canvas2D? Something like that:
  25. like this. i want add some sprites in this area, and i only want sprites displayed in the (alpha==1) pixels... what should i do?