[Solved] How to make sprite only visible in certain rectangle area?

I am trying to make fruit slot machine game. It almost done but I can’t make fruit sprites invisible when it beyond the slot area. The fruit sprites should be partial visible if it just pass the edge of rectangle area. I tried to edit the shader program to make it work. Here are vp and fp code for fruit sprite material.

uniform highp mat4 view_proj;

// positions are in world space
attribute highp vec4 position;
attribute mediump vec2 texcoord0;

varying mediump vec2 var_texcoord0;
varying mediump vec4 var_position;

void main()
{
	gl_Position = view_proj * vec4(position.xyz, 1.0);
	var_texcoord0 = texcoord0;
	var_position = position;
}
varying mediump vec4 var_position;
varying mediump vec2 var_texcoord0;

uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;

void main()
{
	// Pre-multiply alpha since all runtime textures already are
	lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
	if(var_position.y >= -175.0 && var_position.y <= 175.0) {
		gl_FragColor = texture2D(texture_sampler, var_texcoord0.xy) * tint_pm;
	} else {
		gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
	}
}

Here is the gameobject structure.
Screen Shot 2022-05-16 at 9.49.07 PM

The problem is the fruits are all invisible when I run the project. The project will use collectionfactory to create slot collection which contain fruits gameobject like the upper picture I post. When I update the fruits gameobject position, the fruits are all invisible now.
Before I change the material of fruit sprites.


After I change the material of fruit sprites.

You can try this, but it only works with gui nodes.

1 Like

set the gray background with the white “window” cutted out to position.z = 1
the white window position.z = 0
the fruits position.z = 0.5

just an idea, no need shaders

4 Likes

I would add that background should be RGBA and window should be transperent not white.
Also, about shader. There are normalized position from -1 to 1.
So, condition “var_position.y >= -175.0 && var_position.y <= 175.0” will no work correctly.

Can I update gui node position like update game object position in script? Can I add game object in gui mode? If so, I would try it.

This can be one solution. If I can’t find solution by editing shader, I will try this.

I guess you can use your own predicate in the render scripts to render to the stencil buffer, and use that when rendering the sprites.

E.g. there are some topics around this on the forum:

Is there any example to help? I am interested to try it.

For this purpose only isn’t it better (and easier) to just prepare a slots machine window image, which is transparent in the middle, but the body isn’t and put it in front of the fruits (proper z)?

5 Likes

You can update the position but you can’t add game objects, here has more info about gui.

sounds good.

Dong: there is a super simple system built in for managing sprite visibility, and it’s the Z co-ordinate. Game Objects and sprites exist in 3D space, so each one has an X, Y and Z co-ordinate. Increase the X co-ordinate and the GO moves right, increase the Y co-ordinate and the GO moves up.

By setting the Z co-ordinate, you can move things closer to the camera. The only difference is that Z co-ordinate only moves between 0 and 1. If you have two game objects in the same position on screen (XY cordinate are the same), the system checks the Z co-ordinate to see which one is on top of the other.
By creating a white background with Z co-ordinate 0, fruit with a Z co-ordinate of 0.25, and a grey background around the outside with a Z co-ordinate of 1, you will have they effect you need.

Please don’t worry about shading or masking, they are not necessary.

1 Like

Look at this example: The sunglasses and the cat have different Z layers, so the sunglasses are always in front of the cat. Look at the position variable: it’s 0.002 or 0.003.


4 Likes

88.josh. Thx for your reply. I understand I can make it by editing z order. The reason why I am asking for shader programming because I want to use nine-patch feature in gui node. So I make background as gui node not sprite, but fruits are sprites. They are not the same in defold system.

Okay, in that case you need to create layers in your GUI scene. I’m on my phone now, but it’s a very simple process- search for GUI layers in the manual and you will find it very simple.

Tell me your idea.

Aa, this explains why you do not see your sprites - GUI is always drawn in front of sprites (in default render script, and that’s how GUI should be of course drawn per se

In such case - really, just try to cut the windows in the slot machine image to transparent and you will achieve what you’d like to :wink:

P.S. and for your first code snippet - you do see fruits always with your sprite fp, because their position is always between -175 and 175, because in shaders you have a different position “scale” - x and y coords are transformed to <0,1>, so you’d rather want to change the values for something like <0.2, 0.7> - you can experiment or (better!) calculate exact value by having also screen height

2 Likes

Actually I changed the draw order to make gui draw first in render script, that’s why you can see the fruits sprite on the gui background.

I will try that.

1 Like

This doesn’t work. All fruits invisible.

Problem solved. The fp code is correct. The problem is when I change the material to fruits.material, I don’t set the tag in fruits material. So in the render script it doesn’t draw the fruits sprite at all. Just add fruits tag in fruits.material and add render.draw(self.fruits_pred) in render script code. Problem sovled. My bad. Thx for all the replies before. This post proved that editing shader program code like before can make sprite clipping effect, which can be another solution to make it. :smiley:

9 Likes