AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Phaser transparent rectangle12/18/2023 Next, we create an Image instance as the brush on line 54 without adding it to the Scene. handlePointerMove(pointer) is where the drawing logic lives. Then we set ver to interactive and add 3 events: POINTER_DOWN, POINTER_MOVE, and POINTER_UP. We create an isDown property on line 12 to keep track of whether the left mouse button is pressed or not. This.isDown = true this.handlePointerMove(pointer)Ĭonst x = pointer.x - + * 0.5 const y = pointer.y - + * 0.5 ( this.brush, x, y) This.isDown = false ver = null this.renderTexture = null The last thing we need to do is handle drawing the brush image into our RenderTexture when the mouse is pressed and dragged. This will give us the effect where parts of the reveal image become visible while those same parts become hidden in the cover image. Lastly, we create another BitmapMask and set it to the mask property of the reveal image and leave invertAlpha with a default value of false so that it behaves normally. This makes the mask show what should normally hide and hide what should normally show. The mask is then set to invertAlpha = true because we want to hide the cover image as we draw into our RenderTexture to show the reveal image. We create a new BitmapMask on line 42 and set it to the mask property of ver. There are only 3 new lines that you need to worry about. = true reveal.mask = new ( this, maskImage) Now that we have all the necessary parts we can create and use a BitmapMask. The maskImage data will only be used as alpha masks for the 2 Image instances: reveal and ver. Note that it is also not added to the Scene. Instead, it will be used as the underlying texture for our maskImage created on line 35. Our RenderTexture does not need to be visible. We make a RenderTexture on line 29 but do not add it to the Scene. Import Phaser from 'phaser' const KEY_PHASER_LOGO = 'phaser-logo' const KEY_BRUSH = 'brush' export default class RevealMaskScene extends Phaser.SceneĬonst x = 400 const y = 300 const reveal = (x, y, KEY_PHASER_LOGO) One difference is that the cover image will have a green tint so that we can tell them apart. We will use the Phaser logo as both the cover and reveal images for simplicity. We will be using a brush image–a radial gradient or a transparent image with one dot from a PhotoShop soft brush–to do this. Phaser lets us draw one or more GameObjects into a RenderTexture as many times as we want.īecause we are using a RenderTexture as our alpha mask, the masked area will change as we draw into it. They are created ahead of time in a graphics program while a RenderTexture does not exist until we run the game and create it in code. The basic premise is that we will put two images–a cover image and a reveal image–on top of each other and then mask them both with a RenderTexture.Ī RenderTexture is a texture created at runtime that you can draw into.Ī normal Texture is like an image that we store on our computers. If your reveal effect is fairly simple then you may be able to use a simpler method discussed here. There are multiple ways to achieve this effect in Phaser 3 and in this article, we will look at using a RenderTexture as an alpha mask. This can be used for a simple scratch-off mini-game or a more complicated spotlight or flashlight effect. A reveal effect is where an image on top is erased to reveal another image below it.
0 Comments
Read More
Leave a Reply. |