(2D) Rendering only the parts of a sprite that are within specific bounds

I’m working in Unity, using the 2D features to recreate the match-3 style of 10000000 (Ten Million).

I have a parent object (green square) with several children objects (blue rectangles) on top of it, as pictured in the first image. I want to only render the parts of the child objects that are over top of the parent object, as shown in the second image.

I can figure out the size and position of everything just fine, what I’m having trouble with is figuring out how to mask off the parts of the child objects that don’t overlap with the parent.

Non-Masked
Masked

Coincidentally this is the exact same problem I’m having and trying to fix right now. By googling I think the answer should be to use a custom shader which renders things based on a position, but I am not really fluent enough in shader writing to know if this is a good option. If you find a solution I’d love to hear it!

I got this half-working, (maybe somewhere to start from at least!) it works in the editor, but not in the game view, really it needs to do the world->screen calculation in the shader, not in update to cope with multiple cameras, but I haven’t got the parent-bounds-world-to-screen conversion working yet.

I attach this script to the children-to-be-clipped objects(blue) under the parent (green)

[ExecuteInEditMode]
public class ClippedChild : MonoBehaviour {

	void Update () {

		Camera cam = Camera.current;
		if (!cam) {
			return;
		}

		GameObject Parent = transform.parent.gameObject;
		Vector4 ParentMin = cam.WorldToViewportPoint( Parent.renderer.bounds.min );
		Vector4 ParentMax = cam.WorldToViewportPoint (Parent.renderer.bounds.max);

		Material Mat = renderer.sharedMaterial;
		Mat.SetVector("_ParentMin", ParentMin );
		Mat.SetVector("_ParentMax", ParentMax );

	}
}

Then this in a shader, also on the child object.

Shader "Custom/ClippedChild" 
{
	Properties {
		_ColourInside ("ColourInside", Color) = (0,1,0,1)
		_ColourOutside ("ColourOutside", Color) = (1,0,0,0.5)
		_ParentMin("ParentMin", Vector ) = (0,0,0,0)
		_ParentMax("ParentMax", Vector ) = (1,1,0,0)
	}
	
	SubShader {
		Tags { "RenderType"="Transparent" }
		LOD 200
		
		CGPROGRAM
		#pragma surface surf Lambert

		float4 _ColourInside;
		float4 _ColourOutside;
		float4 _ParentMin;
		float4 _ParentMax;

		struct Input {
			float3 worldPos;
			float2 screenPos;
		};

		void surf (Input IN, inout SurfaceOutput o) {
			float4 Colour = _ColourInside;
			
			float2 ScreenPos = IN.screenPos;
			float2 ScreenMin = _ParentMin.xy;
			float2 ScreenMax =  _ParentMax.xy;
			if ( ScreenPos.x < ScreenMin.x || ScreenPos.x > ScreenMax.x ||
				 ScreenPos.y < ScreenMin.y || ScreenPos.y > ScreenMax.y 
			)
			{
				Colour =  _ColourOutside; 
				//discard;
			}
				
			o.Albedo = Colour;
			o.Alpha = Colour.a;
		}
		ENDCG
	} 
	FallBack "Diffuse"
}

This code renders the pixel “in” or “out”, but you could use discard; to just not draw the pixel entirely, (colours just helped debug/demo)

As you can see, not wholly working yet, but I’ll see if I can get further. (I think just need to provide world-bounds positions to the shader and calculate the screen bounds there).

[25232-screen+shot+2014-04-15+at+3.57.06+pm.png|25232]

maybe this might help:

http://wiki.unity3d.com/index.php/DepthMask

and maybe this: