I am trying to get the highlighter effect as shown in the above image. its a kind of word search game and when the player drags its finger on the letters/word to find the required words. while dragging should generate a highlight effect on the word . i am using Unity UI.
Any help would be appreciated
Thanks
I assume you’re talking only about the graphical side of this, not the input (mouse or touch). There are two common ways of doing the graphics.
The first (simpler) is to create two circle sprites and a square sprite and join them seamlessly. Parent them all together. If you want, you can do this in advance for all the different lengths of words by changing the scale of the square. Alternatively, stretch the square sprite and position the circles at run time, though it requires coding but is more flexible ultimately. You can change the colours at run time by changing the Sprite Renderer Color.
The second technique is something called 9-slicing. You’ll need to create an image that is two circles, connected by a cylinder so the whole thing is the length of, say, a three letter word. You need to be able to stretch the centre part but not stretch the circles at each end so that you can adapt its length to any word length.
This is where 9-slicing comes in. You define a part of the image that can be stretched without affecting the extremities. Very neat but, again, requires some coding.
Whichever approach you take, you’ll ned to use Order in Layer in the Sprite Renderer to make sure that the highlights are drawn in the right order. Higher numbered layers appear in front so make sure your text is uppermost.
For a simple game with limited word length, you could take the first approach. Just remember that diagonal words need longer lengths, so you’ll need to create two lengths of sprite for the same length word, rotated appropriately. Those are the basics and you should be able to get it going. Do come back if you’re stuck.
