让我们克隆PokémonGO一样的游戏 - 1、AR模式

PokémonGO中的AR效果相对简单，用一个章节简单介绍。当然也可以用第三方SDK实现AR效果，如kudan、wikitude等都是自带SLAM功能的。

LZ的实际项目稍微复杂，用了真实的经纬度信息，在后台可以管理每个小精灵的刷新信息。相关内容还没有写到，暂时不作介绍。

资源来自于PokemonGO.apk，提取完发现没有Assets里没有一只小精灵，恐怕是做了AB，于是去国外网站找了一只没有动作的皮神。有兴趣的同学可以在这里下载更多。

如上图所示，我们要在一个场景中制作平面模式与AR模式的切换。确保层级遮挡关系正确，然后从最底层开始依次编辑每个层。

平面背景层 切分好的背景和树木用image组件拼好效果，填满画布。

AR背景层

新建RawImage，编辑脚本CameraAsBackground.cs，再挂上自带的组件AspectRatioFitter，控制画布比例。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class CameraAsBackground : MonoBehaviour
{
    private RawImage image;
    private WebCamTexture cam;
    private AspectRatioFitter arf;

	void Start ()
    {
        arf = GetComponent<AspectRatioFitter>();

        image = GetComponent<RawImage>();
        cam = new WebCamTexture(Screen.width,Screen.height);
        image.texture = cam;
        image.enabled = false;
    }

    void Update ()
    {
        if (cam.width < 100)
        {
            return;
        }

        float cwNeeded = -cam.videoRotationAngle;
        if (cam.videoVerticallyMirrored)
        {
            cwNeeded += 180f;
        }

        image.rectTransform.localEulerAngles = new Vector3(0f,0f,cwNeeded);

        float videoRatio = (float)cam.width / (float) cam.height;
        arf.aspectRatio = videoRatio;

        if (cam.videoVerticallyMirrored)
        {
            image.uvRect = new Rect(1, 0, -1, 1);
        }
        else
        {
            image.uvRect = new Rect(0,0,1,1);
        }
	}
    

    public void videoTexture(bool isOpen)
    {
        if (isOpen)
        {
            image.enabled = true;
            cam.Play();
        }
        else
        {
            cam.Stop();
            image.enabled = false;
        }
    }
}

模型层
把皮神模型拖放到摄像机前合适的位置。Game面板中把比例调到Portrait方向预览。

UI层

新建CatchManager.cs。因为 “AR背景层” 是叠在 “平面背景层” 上面的，所以用AR切换开关控制该层显示与隐藏。ARMode挂上AR On/Off 两张状态图。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class CatchManager : MonoBehaviour
{
    private bool isARMode = false;
    public Sprite[] ARMode;
    public Image ARModeImage;
    private GyroController gyroController;
    private CameraAsBackground cameraAsBackground;

    void Start ()
    {
        gyroController = GameObject.FindObjectOfType<GyroController>();
        cameraAsBackground = GameObject.FindObjectOfType<CameraAsBackground>();
    }
	
	public void SwitchARMode ()
    {
        isARMode = !isARMode;
        if (!isARMode)
        {
            ARModeImage.sprite = ARMode[0];
            gyroController.DetachGyro();
            cameraAsBackground.videoTexture(false);
        }
        else
        {
            ARModeImage.sprite = ARMode[1];
            gyroController.AttachGyro();
            cameraAsBackground.videoTexture(true);
        }
    }
}

摄像机层
在MainCamera挂上新建脚本GyroController.cs。这是一个调用陀螺仪，并平滑处理抖动的脚本。

using UnityEngine;

public class GyroController : MonoBehaviour
{
	#region [Private fields]

	private bool gyroEnabled = true;
	private const float lowPassFilterFactor = 0.2f;

	private readonly Quaternion baseIdentity =  Quaternion.Euler(90, 0, 0);
	private readonly Quaternion landscapeRight =  Quaternion.Euler(0, 0, 90);
	private readonly Quaternion landscapeLeft =  Quaternion.Euler(0, 0, -90);
	private readonly Quaternion upsideDown =  Quaternion.Euler(0, 0, 180);
	
	private Quaternion cameraBase =  Quaternion.identity;
	private Quaternion calibration =  Quaternion.identity;
    private Quaternion baseOrientation =  Quaternion.Euler(90, 0, 0);
    private Quaternion baseOrientationRotationFix =  Quaternion.identity;

	private Quaternion referanceRotation = Quaternion.identity;

	#endregion

	#region [Unity events]

	void Start () 
	{
        DetachGyro();
	}

	void Update() 
	{
		if (!gyroEnabled)
			return;
		transform.rotation = Quaternion.Slerp(transform.rotation, cameraBase * ( ConvertRotation(referanceRotation * Input.gyro.attitude) * GetRotFix()), lowPassFilterFactor);
	}


    #endregion

    #region [Public methods]

    // Attaches gyro controller to the transform.
    public void AttachGyro()
	{
        Input.gyro.enabled = true;
        gyroEnabled = true;
		ResetBaseOrientation();
		UpdateCalibration(true);
		UpdateCameraBaseRotation(true);
		RecalculateReferenceRotation();
	}

	// Detaches gyro controller from the transform
	public void DetachGyro()
    {
        transform.rotation = Quaternion.identity;
        gyroEnabled = false;
        Input.gyro.enabled = false;
    }

	#endregion

	#region [Private methods]

	/// Update the gyro calibration.
	private void UpdateCalibration(bool onlyHorizontal)
	{
		if (onlyHorizontal)
		{
			var fw = (Input.gyro.attitude) * (-Vector3.forward);
			fw.z = 0;
			if (fw == Vector3.zero)
			{
				calibration = Quaternion.identity;
			}
			else
			{
				calibration = (Quaternion.FromToRotation(baseOrientationRotationFix * Vector3.up, fw));
			}
		}
		else
		{
			calibration = Input.gyro.attitude;
		}
	}
	
	/// Update the camera base rotation.
	/// Only y rotation.
	private void UpdateCameraBaseRotation(bool onlyHorizontal)
	{
		if (onlyHorizontal)
		{
			var fw = transform.forward;
			fw.y = 0;
			if (fw == Vector3.zero)
			{
				cameraBase = Quaternion.identity;
			}
			else
			{
				cameraBase = Quaternion.FromToRotation(Vector3.forward, fw);
			}
		}
		else
		{
			cameraBase = transform.rotation;
		}
	}
	
	// Converts the rotation from right handed to left handed.
	// The result rotation.
	// The rotation to convert.
	private static Quaternion ConvertRotation(Quaternion q)
	{
		return new Quaternion(q.x, q.y, -q.z, -q.w);	
	}

    // Gets the rot fix for different orientations.
    // The rot fix.
    private Quaternion GetRotFix()
	{
		return Quaternion.identity;
	}
	
	// Recalculates reference system.
	private void ResetBaseOrientation()
	{
		baseOrientationRotationFix = GetRotFix();
		baseOrientation = baseOrientationRotationFix * baseIdentity;
	}

	// Recalculates reference rotation.
	private void RecalculateReferenceRotation()
	{
		referanceRotation = Quaternion.Inverse(baseOrientation)*Quaternion.Inverse(calibration);
	}

	#endregion
}

附上本节完整 Demo下载