How to create a scratch-off effect using a Render Texture and cover images.

Posted on 19th Mar 2021. Follow @phaser_ and get the Phaser World newsletter.

image

Tommy Leung from Ourcade presents a new tutorial: "A reveal effect is where an image on top is erased to reveal another image below it. This can be used for a simple scratch-off mini-game or a more complicated spotlight or flashlight effect.

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. If your reveal effect is fairly simple then you may be able to use a simpler method discussed here.

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..."

Read More


The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now
$19