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

**URL:** <https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925>\
**Category:** Questions\
**Created:** [May 16, 2022, 2:01pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925 "2022-05-16T14:01:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 16, 2022, 2:01pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/1 "2022-05-16T14:01:40Z")

</div>

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.

```C++
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;
}

```

```C++
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](https://forum-defold-uploads.b-cdn.net/original/3X/e/2/e282a12658904f81493de16896c83b7339937810.png)

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.

 ![Screen Shot 2022-05-16 at 9.59.43 PM](https://forum-defold-uploads.b-cdn.net/original/3X/d/b/db0129e9fcc9427565b767ad1fd4f1e069aac368.jpeg)  
After I change the material of fruit sprites.  
 ![Screen Shot 2022-05-16 at 10.01.20 PM](https://forum-defold-uploads.b-cdn.net/original/3X/c/4/c47fccbb8836ca05ee18276df395c6ee588fc630.png)

---

<div class="post-metadata">

**Author:** ![Clayton](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/clayton/32/25818_2.png) [@Clayton](https://forum.defold.com/u/Clayton)\
**Post date:** [May 16, 2022, 4:50pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/2 "2022-05-16T16:50:31Z")

</div>

You can try [this](https://defold.com/manuals/gui-clipping/), but it only works with gui nodes.

---

<div class="post-metadata">

**Author:** ![rama](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/rama/32/18329_2.png) [@rama](https://forum.defold.com/u/rama)\
**Post date:** [May 16, 2022, 5:04pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/3 "2022-05-16T17:04:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![d3w](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d3w/32/27698_2.png) [@d3w](https://forum.defold.com/u/d3w)\
**Post date:** [May 16, 2022, 6:39pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/4 "2022-05-16T18:39:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 12:58am UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/5 "2022-05-17T00:58:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 8:28am UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/6 "2022-05-17T08:28:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [May 17, 2022, 8:52am UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/7 "2022-05-17T08:52:08Z")

</div>

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:

> [@How to mask/clipping a sprite?](https://forum.defold.com/t/how-to-mask-clipping-a-sprite/28706):
>
> I need a solution for masking sprites like [GUI Clipping](https://www.defold.com/examples/gui/stencil/) mode or [this in Unity](https://docs.unity3d.com/Manual/class-SpriteMask.html). I found [this solution](https://forum.defold.com/t/making-a-flashlight/286/3) but it uses [discard;](https://forum.defold.com/t/making-a-flashlight/286/16) and it masks everything. Also results are not smooth as I want. Maybe It is possible by using a second texture with alpha for sprite shader? But I have no idea how to implement it. I couldn’t find anything similar on shadertoy(such a terrible site frowning ). Does anyone has a solution for sprite base(not for everything) masking (with shader+stencil perhaps)? …

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 8:53am UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/8 "2022-05-17T08:53:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pawel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pawel/32/24623_2.png) [@Pawel](https://forum.defold.com/u/Pawel)\
**Post date:** [May 17, 2022, 11:43am UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/9 "2022-05-17T11:43:36Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![Clayton](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/clayton/32/25818_2.png) [@Clayton](https://forum.defold.com/u/Clayton)\
**Post date:** [May 17, 2022, 11:43am UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/10 "2022-05-17T11:43:46Z")

</div>

You can update the position but you can’t add game objects, [here](https://defold.com/manuals/gui/) has more info about gui.

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 11:54am UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/11 "2022-05-17T11:54:12Z")

</div>

sounds good.

---

<div class="post-metadata">

**Author:** ![88.josh](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/88.josh/32/20137_2.png) [@88.josh](https://forum.defold.com/u/88.josh)\
**Post date:** [May 17, 2022, 12:09pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/12 "2022-05-17T12:09:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![88.josh](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/88.josh/32/20137_2.png) [@88.josh](https://forum.defold.com/u/88.josh)\
**Post date:** [May 17, 2022, 12:11pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/13 "2022-05-17T12:11:56Z")

</div>

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.

 ![Screenshot 2022-05-17 at 14.10.31](https://forum-defold-uploads.b-cdn.net/original/3X/2/6/26734551e703c0dd77754ada770895ee856ec922.jpeg)  
 ![Screenshot 2022-05-17 at 14.10.22](https://forum-defold-uploads.b-cdn.net/original/3X/c/d/cdd9366aa28259ecdb1fc9083d65ab437a27e53a.jpeg)

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 12:16pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/14 "2022-05-17T12:16:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![88.josh](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/88.josh/32/20137_2.png) [@88.josh](https://forum.defold.com/u/88.josh)\
**Post date:** [May 17, 2022, 12:59pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/15 "2022-05-17T12:59:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 1:01pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/16 "2022-05-17T13:01:19Z")

</div>

Tell me your idea.

---

<div class="post-metadata">

**Author:** ![Pawel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pawel/32/24623_2.png) [@Pawel](https://forum.defold.com/u/Pawel)\
**Post date:** [May 17, 2022, 1:30pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/17 "2022-05-17T13:30:07Z")

</div>

> [@Dong\_Wang](#):
>
> So I make background as gui node not sprite, but fruits are sprites.

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 😉

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

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 1:36pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/18 "2022-05-17T13:36:08Z")

</div>

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.

> [@Pawel](#):
>
> so you’d rather want to change the values for something like \<0.2, 0.7\> - you can experiment or (better!)

I will try that.

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 1:39pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/19 "2022-05-17T13:39:17Z")

</div>

> [@Pawel](#):
>
> 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

This doesn’t work. All fruits invisible.

---

<div class="post-metadata">

**Author:** ![Dong\_Wang](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dong_wang/32/28542_2.png) [@Dong\_Wang](https://forum.defold.com/u/Dong_Wang)\
**Post date:** [May 17, 2022, 2:03pm UTC](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925/20 "2022-05-17T14:03:00Z")

</div>

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. 😃

 ![Screen Shot 2022-05-17 at 10.04.37 PM](https://forum-defold-uploads.b-cdn.net/original/3X/2/b/2b9084120a342d30aad7c9c485048a82982ea556.png)

[Next page](https://forum.defold.com/t/solved-how-to-make-sprite-only-visible-in-certain-rectangle-area/70925.md?page=2)