Rendering of masked rotating 2D image with Unity

Summary

I explain how to render a masked rotating image.

 

Samples

The sample project – GitHub

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/RotationMask_Sample  

The sample project – STYLY GALLERY 

 

Masked rotating image

Rotate a texture

Firstly, create a rotating image as shown below.

 

Mask a texture

The ‘Mask’ effect is to show the part of the texture where the mask image is white, while it hides where the mask image is black.

 

The result – A masked rotating image

It gives the result shown below.

  You can make various expressions by replacing the texture.

I picked up those textures from the sample project in GitHub.  

Create a masked rotating image

Let’s create a masked rotating image with Unity.  

Textures used

The following two textures are used in this tutorial. Download them and add them to the project file.

 

Create a board

Crate a board by selecting ‘Create > 3D Object > Plane’ in the Hierarchy window.

 

Create a Shader

To mask the texture, we use a shader available in Unity. Click the Create button on the project tab and select ‘Shader/Unlit Shader’ to create a shader file.

  Open the shader file created and paste the code shown below and save the file.

Shader "STYLY/Examples/RotationMask" {
	Properties{
		_Color("Color", Color) = (1,1,1,1)
		_OverTex("Base Texture (RGB)", 2D) = "white" {}
		_MaskTex("Mask Texture (RGB)", 2D) = "white" {}
		_RotationSpeed("Rotation Speed", Float) = 1.0
	}
		SubShader{
			Tags { "RenderType" = "Opaque" }
			LOD 200

			CGPROGRAM
			#pragma surface surf Standard fullforwardshadows
			#pragma target 3.0

			sampler2D _MaskTex;
			sampler2D _OverTex;

			struct Input {
				float2 uv_MaskTex;
				float2 uv_OverTex;
			};

			float _RotationSpeed;
			fixed4 _Color;

			#define ANGLE (_Time.z * _RotationSpeed)

			void surf(Input IN, inout SurfaceOutputStandard o) {
				fixed4 mask = tex2D(_MaskTex, IN.uv_MaskTex);
				clip(mask.r - 0.5); // do not draw if mask.r is less than 0.5

				fixed2 center = fixed2(0.5, 0.5);

				float2x2 rotate = float2x2(cos(ANGLE), -sin(ANGLE), sin(ANGLE), cos(ANGLE));
				fixed2 uv_OverTex = mul(rotate, IN.uv_OverTex - center) + center;
				fixed4 over = tex2D(_OverTex, uv_OverTex);
				fixed4 c = mask * over * _Color;
				o.Emission = c.rgb;
			}
			ENDCG
		}
		FallBack "Diffuse"
}

 

Create a material

Right-click the shader and select ‘Create/Material’ to create a material.

 

Assign textures to the material

Assign the base texture and the mask texture to the material created. Select the material created earlier.

    To prevent the Inspector from changing when selecting another asset, lock it by clicking the key icon in the top-right corner.

 

  Drag the textures onto the Inspector to assign them to the material.

That’s all for the setting of the material.

 

Assign the material to the Plane object

Drag the material into the board created earlier (the Plane object) to assign.

 

Completion

It completes the masked rotating image.

 

Edit the rotating mask

Change the colour

Let’s change the colour of the rotating mask.   Select the colour of the material to change the colour.

  Set it to yellow as shown below.

  The whole board has been coloured in yellow.

 

Upload it from Unity to STYLY

Please read the article below to learn how to upload the object created in Unity to STYLY. https://styly.cc/ja/manual/unity-asset-uploader/