What i’m trying to do is that when the green box hits the invisible black text i want it to gradually appear. Basically the more green box is in the text more of the text will show. Kind of like an x-ray view.
Here is an illustration of how it should look like (slow frame speed so it can be seen better) :
Any suggestions?
The ideas i came up with :
Cutting off each pixel of the text and add command lines to each of them so it looks like what i’m trying to do.
But i’m afraid that’ll just turn events into a mess and also increase the game size unnecessarily (even though it’s practically bytes) Also the object scale is way bigger in the engine than it’s actual size so that might be a problem
Animating the whole sprite just like the gif above , adding an invisivible object to cover each text and playing the animation when mouse is on said invisible object.
But i’d have to add a command line for each frame of the animation in order to make it look smooth if a player just hovers over another text while the animation is still playing. Again it’d need a lot of command lines and game size would be unnecessarily increased because i’d have to animate the green box going over from one text to another one by one.
I’m also open to different ideas on how to make it happen. It certainly doesn’t have to increase it’s opacity. Just need to change the green to black on collided parts.
Perhaps you could use the Sprite Masking extension to cover the words. It uses a shape painter shape or a sprite as the mask shape. You could have a black version of your menu on top of a green version, and use an animated mask to reveal part of the black one, while most of the green one stays visible. Then you’d have a green rectangle underneath the black menu. I’ll add a screenshot in a moment, once I’ve mocked it up in Photoshop.
It’s a shame that GDevelop doesn’t have more blend modes (Blend mode, General/Sprite/Effects). ‘Difference’ would do the job, as it does in Photoshop, but GDevelop only has Normal, Add, Multiply and Screen. None of them produce the effect you’re after.
Edit: Here’s a mock up in PS. On top is a black version of the menu. You’d use a sprite as a mask that only lets one menu line show. A green rectangle is underneath - a simple sprite, the same size as the mask on the black layer. Under that is a green version of the menu and it doesn’t have a mask. The mask and green rectangle (both simple sprites) would need the tween behaviour so you can animate them up and down. Their animation would need to be the same, so they ‘travel’ together. No blend modes needed.
I did exactly what you asked. Masked the black texts with a duplicate of the green rectangle and added tween behaviour to both rectangle and it’s duplicate. The problem is here is that the black text doesn’t show completely.
As you can see black text is barely visible. What could be causing the problem?
I tried it first with a sprite as the mask, but it seems to not work as expected (like the black text is transparent, just like you found). I used a shape painter rectangle instead and it works great.
I am using the below objects, just like in my PS mock-up: black text on top, green rectangle in middle, green text on bottom, and a shape painter shape as a mask for the black text. It animates up and down to match the movement of the green rectangle.
This below screenshot shows the objects spread out so you can see what I’m using, but the black and green text need to be in the same position and the shape painter and green rectangle also need to match size and position (like the last image I’ve pasted here), though positions of things can be set in the events and not just on the scene editor.
worriedpixels gave you a good, working solution but just for some context I would like to mention that the reason for your barely visible text is the color of your masking sprite. The sprite should be red to show the masked object as intended. Here is a topic with links that provides more background: Sprite mask reduces opacity
Huge thanks to both @worriedpixels and @Drona for the help. Menu now works just like how i wanted it to and the fix for the sprite mask not working did work. Once again big thanks for the help.
