Search the Community

Showing results for tags 'mask'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 64 results

  1. 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 https://jsfiddle.net/wrfthr8u/5/ 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)?
  2. 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).
  3. 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 = this.add.graphics(0, 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.
  4. 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?
  5. 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. http://www.babylonjs-playground.com/#XUH5GR
  6. 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) => { this.game.debug.rectangle(gdata.shape, '#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.
  7. 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
  8. 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.
  9. 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.
  10. 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..
  11. 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
  12. 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: http://www.emanueleferonato.com/2014/10/21/phaser-tutorial-how-to-create-an-html5-survival-horror-game-in-6-easy-steps/, 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 this.game.load.image('blackness', '../../assets/images/blackness.jpg'); this.game.load.image('transparent', '../../assets/images/transparent.png'); //this.game.load.image('yellowish', '../../assets/images/yellowish.png') } create () { this.blackness = this.game.add.sprite(0,0,'blackness'); //this.blackness.alpha = 0.8; //this.transparent = this.game.add.sprite(0,0,'transparent'); this.lightCanvas = this.game.add.graphics(0,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(); }
  13. 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!
  14. Canvas 2D Mask

    @Nockawa Is there a way to create a mask in Canvas2D? Something like that: https://phaser.io/examples/v2/sprites/mask
  15. Assume I have a circle mask for my stage, coded as below. const RADIUS = 200; const mask = new PIXI.Graphics(); mask.beginFill(); mask.lineStyle(3, 0xB2112D); mask.drawCircle(RADIUS, RADIUS, RADIUS); mask.endFill(); stage.addChild(mask); When I set the mask of another container in stage to this mask, I don't see any line around the edges. Is it possible to have border line effect in masks? What should I do if I want to outline the mask area? Currently I just put another Graphics object with a larger radius behind the masked container but this is just a work around.
  16. Can't clear mask in canvas

    Hi! I'm using a drawn rectangle as a mask and I need to delete it after a tween, so I'm using onComplete and then in the callback function 'this.mask.clear()'. Seems to work fine in WebGL, but testing in some browsers using canvas it seems the mask is still there after the animation (other stuff in the function is working, just clear() not working on the mask). Is there any workaround for this? Or any other way to get rid of a mask? Any help is appreciated, thank you.
  17. Hello! I have a container with a buncha sprites that creates the background for my game. The background is a sandy ocean floor with procedurally varied sprites of rocks and coral. I've attached a picture of how the game looks. You may notice that the top left quadrant of the ocean floor looks lighter and sandy. This light color is a shape which I am attempting to use as a mask. In the above image it is not set as a mask, and is merely drawn so you can see its shape (its basically a fluffy cloud made with simplex/perlin noise). Here's the exact image but its not much to look at: (is it invisible? well its a fluffy white cloud with a transparent background) When I set this image to be the mask for the background, I EXPECT the background to not be drawn in the area covered by the cloud. I had this working at some point, and the result was that it looks like the ocean gets deeper where the cloud mask is used (was awesome). INSTEAD of getting that result, I appear to be doing something wrong, because what happens is that my entire sprite sheet gets substituted as a mask. Here's what that looks like: The ocean floor now has shapes that come from the top left corner of my spritesheet. It happens be be showing the pattern from the sprite that makes that lattice of surface waves. Something about the rectangles from the spritesheet and the mask is getting tangled. Here is the code for the mask: function Background() { PIXI.Container.call(this) this.cloudMask = new PIXI.Sprite.fromImage('compressed-cloud.png') this.addChild(this.cloudMask) this.mask = this.cloudMask this.cloudMask.scale.x = this.cloudMask.scale.y = 30 // ... rest of code adds the sand+coral+stones to 'this' } I've skipped the code that adds the rest of the images so as not to provide unnecessarily information. Is there something wrong with how I'm using that mask? That code produces the second screencapture (the bug). Commenting out //this.mask =this.cloudMask is what produced the first image (where the sand is just lighter in the shape of a cloud). Thanks for reading my question. Full Background.js code included below just in case: function Background() { PIXI.Container.call(this) this.cloudMask = new PIXI.Sprite.fromImage('compressed-cloud.png') this.addChild(this.cloudMask) this.mask = this.cloudMask this.cloudMask.scale.x = this.cloudMask.scale.y = 30 this.floor = new PIXI.Container() this.layer0 = new PIXI.Container() this.layer1 = new PIXI.Container() this.layer2 = new PIXI.Container() this.addChild(this.floor) this.addChild(this.layer0) this.addChild(this.layer1) this.addChild(this.layer2) this.sand = new PIXI.extras.TilingSprite( PIXI.Texture.fromFrame('sand.jpg'), 1000, 1000 ) this.sand.scale.x = this.sand.scale.y = 10 // let a little bit of the background blue color come through the sand this.sand.alpha = 0.5 this.floor.addChild(this.sand) // add the roundish rocks for (var i = 0; i < 50; i++) { var rock = new PIXI.Sprite.fromFrame('rock.png') rock.anchor.x = rock.anchor.y = 0.5 rock.scale.x = rock.scale.y =(Math.random() * 1.5) + 4 rock.x = Math.random() * 5000 rock.y = Math.random() * 5000 rock.rotation = Math.random() * Math.PI * 2 this.floor.addChild(rock) } // add the angular rocks for (var i = 0; i < 50; i++) { var rock = new PIXI.Sprite.fromFrame('rock2.png') rock.anchor.x = rock.anchor.y = 0.5 rock.scale.x = rock.scale.y =(Math.random() * 1.5) + 4 rock.x = Math.random() * 5000 rock.y = Math.random() * 5000 rock.rotation = Math.random() * Math.PI * 2 this.floor.addChild(rock) } // add the first layer of coral for (var i = 0; i < 550; i++) { var coral = new PIXI.Sprite.fromFrame('coral.png') coral.anchor.x = coral.anchor.y = 0.5 coral.scale.x = coral.scale.y =(Math.random() * 1.5) + 4 coral.x = Math.random() * 5000 coral.y = Math.random() * 5000 coral.rotation = Math.random() * Math.PI * 2 // disabled: tinting coral to create slightly different families //coral.alpha = (Math.random() * 0.5) + 1 //coral.tint = Math.random() * 0xff1111 this.layer0.addChild(coral) } // add the second layer of coral for (var i = 0; i < 550; i++) { var coral = new PIXI.Sprite.fromFrame('coral.png') coral.anchor.x = coral.anchor.y = 0.5 coral.scale.x = coral.scale.y = (Math.random() * 1.5) + 3 coral.x = Math.random() * 5000 coral.y = Math.random() * 5000 coral.rotation = Math.random() * Math.PI * 2 //coral.alpha = (Math.random() * 0.5) + 1 //coral.tint = Math.random() * 0xff1111 this.layer1.addChild(coral) } // add the third layer of coral for (var i = 0; i < 550; i++) { var coral = new PIXI.Sprite.fromFrame('coral.png') coral.anchor.x = coral.anchor.y = 0.5 coral.scale.x = coral.scale.y = (Math.random() * 1.5) + 2 coral.x = Math.random() * 5000 coral.y = Math.random() * 5000 coral.rotation = Math.random() * Math.PI * 2 //coral.alpha = (Math.random() * 0.5) + 1 //coral.tint = Math.random() * 0xff1111 this.layer2.addChild(coral) } // each layer of coral is slightly more 'solid' looking as it // nears the surface this.layer0.alpha = 0.5 this.layer1.alpha = 0.7 this.layer2.alpha = 0.9 } Background.prototype = Object.create(PIXI.Container.prototype) Background.prototype.constructor = Background // create a subtle 3d effect as the player swims around Background.prototype.parallax = function(x, y) { // bottom layer of coral does not move, and is anchored to the ground this.layer0.x += x * 0 this.layer0.y += y * 0 // second layer moves subtley this.layer1.x += x * 0.01 this.layer1.y += y * 0.02 // top layer moves a little more this.layer2.x += x * 0.02 this.layer2.y += y * 0.02 } module.exports = Background
  18. Mouse events on masked containers

    Hello everyone! I'm currently working with the latest version of PIXI.js (4.1.1) and have a problem with masked container. Code example: var stage = new PIXI.Container(), mask = new PIXI.Graphics(), gameStage = new PIXI.Container(); mask.drawRect(0, 0, 1100, 630); mask.endFill(); gameStage.mask = mask; stage.addChild(rectangle); stage.addChild(gameStage); gameStage contains a list of interactive buttons but I can't interact with any element behind the mask.
  19. Hi guys! I'm trying to create PIXI mask with transparency at the top and at the bottom of rectangle. To make transparency I draw 10 lines with different alpha at the top, then draw a rectangle and 10 lines at the bottom. But the problem is that mask is created without transparency. It just makes 10 lines without alpha. How to achieve a transparency effect without using png sprite? Just PIXI.Graphics. Thank you! Here is my code: var mask = new PIXI.Graphics(), x = 0, y1 = 200, y2 = 600, width = 1000, alpha = 0.1, steps = 10, i; //first block of 10 lines for (i = 0; i < steps; i++) { mask.moveTo(0, y1 + i); mask.lineStyle(1, "0xffffff", alpha); mask.lineTo(width, y1 + i); alpha += 0.1; } //Rectangle mask.beginFill("0xffffff"); mask.drawRect(x, y1 + steps, width, 390); mask.endFill(); alpha = 1; //second block of 10 lines for (i = 0; i < steps; i++) { mask.moveTo(0, y2 + i); mask.lineStyle(1, "0xffffff", alpha); mask.lineTo(width, y2 + i); alpha -= 0.1; }
  20. Rectangle mask

    Hi, Any opinions of the most performant way to do a simple rectangle mask on a Group? Currently I'm using group.mask, it's ok, but I've read that masks are slow and they flush the webgl batch. The children of the Group will be animated, so need to keep this in mind. Would you think drawing the Group to a RenderTexture and calling renderXY every frame would be faster? Or drawing the Group to BitmapData? Actually I'm still unsure what the differences are between RenderTexture and BitmapData? You can draw DisplayObjects to them both, and they can both be used as a texture...? Any help appreciated. Cheers,
  21. Draw closed polygon with border

    1. How can I draw closed polygon like the image above but without the diagonal black line that creates/finishes the polygon? 2. Or should I use Phaser.Polygon function at all? Is there some better solution? 3. Is it possible to create rectangle with mask smaller than the rectangle creating the image above? How would I apply border to this solution?
  22. Does anybody know how to subtract the alpha values from a shape? After hours of research, my best bet is to utilize an alpha filter (link) The current Shape.mask value does not seem to have an easy way to invert masks (link) Example of what I want to achieve:
  23. Does anybody know how to subtract the alpha values from a shape? After hours of research, my best bet is to utilize an alpha filter (link) The current Shape.mask value does not seem to have an easy way to invert masks (link) Example of what I want to achieve:
  24. Real 3D Mask

    Is there a way to mask a certain part of a box in a 3d environment? (not masking 2d sprites with a 2d mask) For instance, I create a box, I mask its lower part, in runtime the upper part is not rendered - only the lower part, and the upper face of the box is not cut - in other words, only the height of the box is cut, keeping the upper face, unlike 2d masking a 3d shape which would look very bad. I attached a sketch to help you picture what I mean. Does something like that exist? If not, do you perhaps have an idea how to approach that problem? Playing with the box's height won't do the trick for me, because I need the texture diffused in its material to not be resized - just cut.