"Unity3d Ugui" a solution for the position adaptation and adjustment of hierarchical relationships of UI effects

Preface

There are two issues to consider when displaying the effects on the UI:
1, the position of special effects adaptive and Ugui adaptive consistent, otherwise in 16:9 under the special effects adjusted position, cut into 16:10, the position corresponds not
2, the special effects display level is best to clip in the middle of the UI

After all, Ugui is a new UI system, all aspects are very immature, the problem of showing special effects really gave me a headache.
1, UI effects overlay display can refer to the blog of the Rain Pine Momo: Ugui Research Institute does not add the camera to solve the UI and UI effects overlay problem (ix), but only to solve the problem of the stack, and for the complex interface system, each layer is added a uidepth component very painful. Adaptive problems have to be adjusted to different resolutions, unless you can write a similar canvas adaptive system.
2, the use of Ugui rawimage, the camera shooting effect output rendertexture dragged to the rawimage, the operation can see the effect. This approach not only uses the Ugui adaptive, but also the hierarchy can be adjusted, usually show the UI model is used in this way, but for the translucent particles, mesh is not so good processing. Finally found a predecessor's article, finally solved the problem that troubled me for several days. Want to see the original point here. principle

1, with a separate camera, to the effect of photography, set the output target Texture
2, using the Ugui rawimage component, set the texture for the camera output texture

This part of the content, in fact, the official has given the demo, open the rendertexture scene can see this example, do not detail the implementation

Refer to the original text.
The following diagram illustrates several steps:
First say the demo hierarchy, "window" under the two image, a rawimage,rawimage clip in the middle of two image, we want to effect is rawimage on Image1, under Image2.

1. Camera parameter setting

2, special effects set the level of ui3d (self-added layer)

The effects of the camera are as follows:

3, add a rawimage in the UI, set texture as the texture of the previous camera output, plus a default No-alpha material (shader is posted below, demo resources are also)

4, run to see the effect
some questions

1, the larger the size of the rendertexture, the more memory consumption, as far as possible to reduce the size of rendertexture it
2, the size of the rendertexture to be consistent with the size of the rawimage, otherwise tensile deformation
3, each special effect of a camera, if the effect is more, or use the code to manage the effect of the camera bar
Further thinking, usually the art of a special effect of the prefab sent over, we just put this prefab and UI rawimage binding can, camera what do not want to do it every time, so with the following lazy code

Using Unityengine;

Using Unityengine.ui;  [Requirecomponent (typeof (Rawimage))] public class Ui3deffect:monobehaviour {[Serializefield] private Gameobject
    Effectprefab;
    Private Gameobject Effectgo;
    Private Rendertexture rendertexture;
    Private Camera Rtcamera;

    Private Rawimage rawimage; void Awake () {//rawimage can be manually added, set no alpha material to show transparent particles rawimage = gameobject.getcomponent<rawimage&
        gt; ();
        if (rawimage = = null) {rawimage = gameobject.addcomponent<rawimage> (); 
        }} public Recttransform Recttransform {get {return transform as recttransform; }} void Onenable () {if (Effectprefab! = null) {Effectgo = Instantiate

            (Effectprefab);
            Gameobject cameraobj = new Gameobject ("Uieffectcamera");
            Rtcamera = cameraobj.addcomponent<camera> (); Rendertexture = new Rendertexture ((int) recttransform.sizedelta.x, (int) recttransform.sizedelta.y, 24);
            rendertexture.antialiasing = 4;
            Rtcamera.clearflags = Cameraclearflags.solidcolor;
            Rtcamera.backgroundcolor = new Color ();
            Rtcamera.cullingmask = 1 << 8;

            Rtcamera.targettexture = rendertexture;

            EffectGO.transform.SetParent (Cameraobj.transform, false);
            Rawimage.enabled = true;
        Rawimage.texture = rendertexture;
            } else {rawimage.texture = null;
        Debug.logerror ("Effectprefab can ' t be null");
            }} void Ondisable () {if (Effectgo! = null) {Destroy (EFFECTGO);
        Effectgo = null;
            } if (Rtcamera! = null) {Destroy (rtcamera.gameobject);
        Rtcamera = null;
            } if (rendertexture! = null) {Destroy (rendertexture); Rendertexture = null;
    } rawimage.enabled = false;
 }
}

When Rawimage is enabled, create a dynamic camera, rendertexture, and set parameters immediately. When not enabled, the camera and Rendertexture are destroyed automatically. Of course, more special effects, can also be a pool of objects to the camera and rendertexture cache up.
Then use the time is this, only need a step, the special effects prefab dragged in can
attached

Demo

Ui-default-no-alpha.shader

Shader "Ui/default no-alpha" {Properties {[perrendererdata] _maintex ("Sprite Texture", 2D) = "White" {}  _color ("Tint", Color) = (1,1,1,1) _stencilcomp ("Stencil Comparison", Float) = 8 _stencil ("stencil  ID ", float) = 0 _stencilop (" stencil operation ", float) = 0 _stencilwritemask (" stencil Write Mask ", float)

    = 255 _stencilreadmask ("Stencil Read mask", float) = 255 _colormask ("Color Mask", float) = 15}
            Subshader {Tags {"Queue" = "Transparent" "ignoreprojector" = "True"

        "Rendertype" = "Transparent" "previewtype" = "Plane" "canusespriteatlas" = "True"}
            Stencil {Ref[_stencil] comp[_stencilcomp] pass[_stencilop]
        Readmask[_stencilreadmask] writemask[_stencilwritemask]} cull off Lighting off
        Zwrite OFFZtest[unity_guiztestmode] fog{Mode Off} blend one Zero Colormask[_colormask] blend one O Neminussrcalpha//source rgba*1 + Background rgba* (n-Source a value) Pass {cgprogram #pragma vertex ver 
                T #pragma fragment Frag #include "unitycg.cginc" struct appdata_t {
                FLOAT4 vertex:position;
                FLOAT4 Color:color;
            FLOAT2 texcoord:texcoord0;

            };
                struct V2F {float4 vertex:sv_position;
                Fixed4 Color:color;
            Half2 texcoord:texcoord0;

            };

            Fixed4 _color;
                v2f Vert (appdata_t in) {v2f out;
                Out.vertex = Mul (UNITY_MATRIX_MVP, In.vertex);
        Out.texcoord = In.texcoord; #ifdef unity_half_texel_offset OUT.vertex.xy-= (_screenparams.zw-1.0);
                #endif out.color = In.color * _COLOR;
            return out;

            } sampler2d _maintex;
                Fixed4 Frag (v2f in): sv_target {Half4 color = tex2d (_maintex, In.texcoord) * IN.COLOR;  
                Clip (color.a-0.01);
            return color; } ENDCG}}}