So I have a circular image that is going to be a mini-game. The premise is that the player clicks anywhere on the circle to fill that segment in, and they keep clicking until they find a hidden object in a segment basically. I’m looking for ideas on how to handle the UI of this.
One thought I had is using a shader to only show the pixels of the image that have been filled in so far. Since I have no experience with shaders at all, this would be a difficult solution for me.
Another idea I had is each time a player clicks create a radial filled image, rotate it to the angle on the circle that the player clicked, and then fill it in by a certain amount. This might work if the circle looked the same throughout the entire image, but it won’t.
Does anyone have any suggestions on possible ways I could implement this in UI?
EDIT:
I actually misunderstood what it was I was supposed to do. It’s going to actually start as visible, and clicking it needs to mask the part that was visible. A rect mask would be great, except it’s rectangular only instead of radial.
Check out the UICircle Primitive in the UI Extensions project (link in my signature) which has Fill options to achieve what you are looking for both in steps and degree’s
you can use a mask and add an image or rendertexture to it.
With a render texture you can place white shapes on a black background. This would give you the freedom you are looking for
@SimonDarksideJ I looked through that real quick and don’t see anything that would allow multiple chunks at different rotations/angles to be removed from one circle?
@Hosnkobf A mask could potentially work. I wasn’t aware you could assign a custom mask image to a mask, but the amount taken away from the circle depends on an attribute of the player, so I’d still have to be able to radially fill the mask. Which could work, haven’t tried it.
I have something functional already though, came up with the idea of regenerating the sprite at runtime, looping through the image and setting each pixel’s alpha to be invisible if within an angle that should be hidden. It’s fairly slow for something that needs to be done quickly to animate it hiding each chunk, but most of it I was able to multithread so the performance is acceptable.
That’s not the best approach for performance reason. That’s why I would suggest a render texture. It is much faster to generate meshes in the shape you want and render them into a render target than manipulating pixels directly.
Exactly.
What you can do with the render target: the camera rendering has the clear flag “Solid Color” with transparent black as color. then you can put objects in view. You see through the mask where the render target is assigned (to a raw image) where you placed the objects.
create a camera. make the clear flag “Solid Color” and transparent black as clear color. set it to orthographic. Assign a render texture to it.
add a game object in your canvas. add a Raw Image to it and assign the render texture and add a mask. as children are all graphics which you want to hide away.
when the user taps on the screen create an object (e.g. a quad or a code generated mesh) and place it in front of the camera where the user clicked (you will probably have to transform the clicked point into camera space).
→ the user sees the “hide away objects” on all the areas where an object has been placed in front of the camera.
both in steps and degree’s
