How can recreate this?

Solar2D General Questions/Discussion
#1

In a lot of games, during the tutorial they will have the screen darken and leave a portion (usually rectangular) light to bring attention to an object that you should swipe or tap.

There is an example here: http://imgur.com/7K2hvOW

Notice how the rest of the screen is darkened except for a rectangular area around the word TOUR.

I feel like it could be accomplished with some sort of mask, but I’m not sure how to do it. It needs to be dynamic (able to adapt to different dimensions), and possibly accommodate multiple light areas (for example, drag this object into this space).

Does anyone have any ideas?

#2

For the part that blacks out the screen, that’s a simple display.newRect() that’s filled with black color at maybe a 0.5 or 0.25 alpha depending on how dark you want it.

Next to create the holes, you could make a graphics.newMask() using various techniques that can be used to make masks on the fly or you could prepare them in advanced.

Rob

#3

@Rob Thanks to your suggestion I was able to find this tutorial from Sergey Lerg about how to create resizable masks: http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-35/

One of the main things that threw me off was that I needed sort of a “reverse” mask. In the Corona docs for masks all the examples show images with masked edges, and I needed solid edges with a masked middle. I was able to accomplish this by inverting the colors of the sample mask in Sergey’s tutorial, so that white became black, and black became white.

#4

Why don’t you just use 4 rectangles around the target?

#5

That was going to be my last resort but the masks keep the code much simpler. With the mask you just make one large rectangle that takes up the screen, then apply the mask and scale/move the mask until it’s where you need it. If you need multiple “highlights” like I do, just cut the screen up into multiple rectangles and apply the mask to each one as necessary. Otherwise, you would need to create 4 rectangles for each “highlight” that you want to have.

#6

For the part that blacks out the screen, that’s a simple display.newRect() that’s filled with black color at maybe a 0.5 or 0.25 alpha depending on how dark you want it.

Next to create the holes, you could make a graphics.newMask() using various techniques that can be used to make masks on the fly or you could prepare them in advanced.

Rob

#7

@Rob Thanks to your suggestion I was able to find this tutorial from Sergey Lerg about how to create resizable masks: http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-35/

One of the main things that threw me off was that I needed sort of a “reverse” mask. In the Corona docs for masks all the examples show images with masked edges, and I needed solid edges with a masked middle. I was able to accomplish this by inverting the colors of the sample mask in Sergey’s tutorial, so that white became black, and black became white.

#8

Why don’t you just use 4 rectangles around the target?

#9

That was going to be my last resort but the masks keep the code much simpler. With the mask you just make one large rectangle that takes up the screen, then apply the mask and scale/move the mask until it’s where you need it. If you need multiple “highlights” like I do, just cut the screen up into multiple rectangles and apply the mask to each one as necessary. Otherwise, you would need to create 4 rectangles for each “highlight” that you want to have.