FairyGUI achieve 3D UI effects

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/wangjiangrong/article/details/96429081

With FairyGUI when art wanted to do some 3D UI effects, but is not supported on the editor, we need to help achieve here Unity, and the general idea was to do a similar projection effects before, by a custom piece of data in this Unity GObject to be modified. https://blog.csdn.net/wangjiangrong/article/details/95341797

However, the default camera FairyGUI Stage Camera orthogonal camera, achieved after the rotation GObject 3D effect is not necessary to use the camera to see-through mode process. On how to ensure a complete UI just displayed on the screen, on the previous question about the camera Size also analyzed https://blog.csdn.net/wangjiangrong/article/details/96338240

So, after we need to do is, first modify the good Stage Camera, then Fine Arts in Unity achieve the 3D effect it wanted by rotating 2DUI, record their rotation value, you need to UI 3D effect by FairyGUI that to custom properties at Add rotation value, when we finally resolved the configuration of the object rotation value of rotation can be.

Results are as follows:

FairGUI, arranged to the left button UIRotation: 0, -30,0 | PositionZ: -50 (angle of rotation and the Z-axis), the right button arranged UIRotation: 0,30,0

After parsing Unity shown below

With the 3D effect can be seen, though ugly point =. =

The following settings and to modify the code:

首先将Stage Camera的Projection改为Perspective，Field of View设置为90。同时对StageCamera.cs脚本进行修改，我们将摄像机的Z轴设置为-cachedCamera.orthographicSize，HitTestContext.cachedMainCamera设置为自己（不做这步操作会导致UI触电出问题，无法点击），生成Stage Camera的时候修改对应配置。

using UnityEngine;

namespace FairyGUI
{
	/// <summary>
	/// Stage Camera is an orthographic camera for UI rendering.
	/// </summary>
	[ExecuteInEditMode]
	[AddComponentMenu("FairyGUI/UI Camera")]
	public class StageCamera : MonoBehaviour
	{
        ......
		void OnScreenSizeChanged(int newWidth, int newHeight)
		{
			......
			if (constantSize)
			{
				cachedCamera.orthographicSize = DefaultCameraSize;
				upp = cachedCamera.orthographicSize * 2 / screenHeight;
			}
			else
			{
				upp = 0.02f;
				cachedCamera.orthographicSize = screenHeight / 2 * UnitsPerPixel;
			}
			cachedTransform.localPosition = new Vector3(cachedCamera.orthographicSize * screenWidth / screenHeight, -cachedCamera.orthographicSize, -cachedCamera.orthographicSize);

			......
		}

		/// <summary>
		/// Check if there is a stage camera in the scene. If none, create one.
		/// </summary>
		public static void CheckMainCamera()
		{
			......
            //HitTestContext.cachedMainCamera = Camera.main;
            HitTestContext.cachedMainCamera = main;
        }


		/// <param name="name"></param>
		/// <param name="cullingMask"></param>
		/// <returns></returns>
		public static Camera CreateCamera(string name, int cullingMask)
		{
			......
            //camera.orthographic = true;
            camera.orthographic = false;
            camera.orthographicSize = DefaultCameraSize;
            //camera.nearClipPlane = -30;
            //camera.farClipPlane = 30;
            camera.farClipPlane = DefaultCameraSize + 1;

            ......
		}
	}
}

然后在之前我们解析投影新增的GObject.cs上添加解析自定义旋转（UIRotation）与Z轴（PositionZ）的代码，如下

using UnityEngine;
using System;

namespace FairyGUI
{
    public partial class GObject : EventDispatcher
	{
        ......
        bool mIs3DUI = false;
        Vector3 mUIRotation = Vector3.zero;
        float mPositionZ = 0;
        public bool Is3DUI
        {
            get { return mIs3DUI; }
        }
        public Vector3 UIRotation
        {
            get { return mUIRotation; }
        }
        public float PositionZ
        {
            get { return mPositionZ; }
        }

        //call in AnalyUserDefineData
        public virtual void CustomAction()
        {
            if (data != null && mIs3DUI && displayObject != null)
            {
                displayObject.cachedTransform.localEulerAngles = mUIRotation;
                _z = mPositionZ;
            }
        }

        //call in Setup_AfterAdd
        public void AnalyUserDefineData(object data)
        {
            if (data != null && !"".Equals(data.ToString()))
            {
                string[] args = data.ToString().Split('|');
                foreach(string arg in args)
                {
                    string[] keyvalue = arg.Split(':');
                    if (keyvalue.Length != 2)
                    {
                        continue;
                    }
                    ......
                    if (keyvalue[0].Equals("UIRotation"))
                    {
                        mIs3DUI = true;
                        string[] array = keyvalue[1].Split(',');
                        mUIRotation = new Vector3(float.Parse(array[0]), float.Parse(array[1]), float.Parse(array[2]));
                    }
                    if (keyvalue[0].Equals("PositionZ"))
                    {
                        mPositionZ = float.Parse(keyvalue[1]);
                    }
                }

                CustomAction();
            }
        }

    }
}

最后还需要注意的是，需要设置RenderMode为WorldSpace，否则一样会影响UI的触电导致无法点击。

果然用的UIPanel则直接在UIPanel上设置，用GRoot的话初始化的时候设置

GRoot.inst.container.renderMode = RenderMode.WorldSpace;