Add flashlight to your character in 2D project

· 2 min read
Add flashlight to your character in 2D project

It is quite common to see fog in the game development. The character only can see places in a certain range. For example, in the game Don't Starve, the player can only see a certain range around the fire or light.

Don't Starve Fog of War

This article will show you how to create fog and flashlight in your own game and without any code!

Step 1 create a square sprite and a circle sprite under Assets by right click Assets → Create → Sprites → Square/Circle. Name circle sprite Flashlight  and name square sprite Fog. You can also organize them a little bit by putting them in a folder called Flashlight.

Step 2 create the 2D object sprite in the hierarchy named Fog, use the fog sprite in above step, and change the color to black or any other color you like. Also change the mask interaction to visible outside mask. In the scene, resize the fog game object's frame to whole game screen.

Step 3 create 2d object sprite mask in the hierarchy named Flashlight, and use the flashlight sprite created in the step 1 as the sprite. Then drag and drop this under Player like the following:

Run the example:

Conclusion

Use Sprite and Sprite mask to achieve the flashlight effect. There might be some other cool things you can continue, such as gradient colour.