Hi guys, We are creating a mobile puzzle game and for that we want to add some In-game tutorials but we are not sure how these overlay and masking system is created. In the attached image there is two references of what we are trying to create. The screen is almost covered with overlay image and only small portion which should be interacted by user and the girl character are highlighted with cut-outs. We tried masking and also shaders but nothing seems to be working. Does anyone explain, how to make this in unity?
This is how I have handled it for sure. What I did was a tutorial “interception” point that decided “Oh I have to tell you about these pieces.”
When a level with those original game pieces were spawned, I would:
put a darkening layer over the entire top of the game (with raycast to block touches)
iterate the pieces I want to highlight and:
clone them
move them to be sorted above the darkening layer
give them touch delegates that were hard-wired to:
—> call their original button delegates
—> Destroy() the darkening panel
—> Destroy() themselves
This way as soon as they were touched, they would call the original game button’s touch below them, making it so no game logic needed to be changed.