Unity UI double sided image

2
votes

I would like to create an image in Unity UI system that has different colors on both sides. Such as when I rotate it 180 degrees it looks different.

I experimented with two images with a single parent and then rotating the parent. It didn't really work even with an addition of canvas components or changing "z" axis.

The only solution I could find is to change their sorting layer mid-rotate but I really want to avoid that.

2
unity3d

2 Answers

2
votes

Use a parent object like you mentioned, place the two images under it. Create two materials and add the following single face shader:

Shader "GUI/3D Text Shader - Cull Back" 
{ 
    Properties{ 
        _MainTex("Font Texture", 2D) = "white" {} 
        _Color("Text Color", Color) = (1,1,1,1) 
    }
    SubShader
    { 
        Tags{ "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" } 
        Lighting Off Cull Back ZWrite Off Fog{ Mode Off } 
            Blend SrcAlpha OneMinusSrcAlpha 
            Pass
            { 
                Color[_Color] 
                SetTexture[_MainTex]
                { 
                    combine primary, texture * primary 
                } 
            } 
    } 
}

Assign both materials to each image. Flip one of the image by 180 degrees on the y axis. Then you should be able to rotate the parent to create the flip effect.

Credit to: http://answers.unity3d.com/questions/310203/1-way-text-mesh.html

1
votes

Old but may help some one else; this solution is for a 3D GameObject image; and the logic can be applied to a UI image

Steps:

  1. Create GameObject

  2. Create a couple of Quad objects as children of the brand new GameObject

  3. Drag/Drop each individual image onto relevant Quad

  4. For the quad that you want its image to be reversed, set its axis (whatever access you want to -180), and leave the other quad non-rotated Now you can rotate the parent GameObject, and both images will show;

My example is showing kind of waving flag