在之前的文章中我已经设计出了引导页,那么具体怎么实现呢?这星期我就对这个问题进行了研究,下面是我的一些心得。
1.问题分析
引导页是通过左右滑动来切换界面,首先需要获取点击的屏幕位置,之后再判断是向左还是向右滑动。
切换逻辑是:开始界面是第一张引导页,当第一次左移,场景切换到第二张引导页;第二次左移,场景从第二张引导页切换到开始界面;第一张引导页和第二张引导页可以随意切换,但第一张引导页不能右移,开始界面不能右移。
所以整体来说思路还是比较清晰的。
2.算法分析
为了方便后来的计算,我先reset场景位置,将x,y轴的位置归零。怎么判断手指是向左滑动还是向右滑动呢?算法可以是以下几个过程:
- 左右滑动改变的是x,y轴的位置,只需要判断手指落下的位置和手指拿起的位置的x/y轴的坐标位置,就能对场景的状态进行判断。
- 如果,x的坐标变换的绝对值大于y轴的左边变换的绝对值,且x>0,则判断为左移;
- 如果,x的坐标变换的绝对值大于y轴的左边变换的绝对值,且x<0,则判断为右移;
整体的算法思路就是这样。
3.实现代码
所以我将写了两个脚本,一个添加到第一张引导页场景(YDY1.unity)中,另一个添加到第二张引导页(YDY2.unity)中。
- 在第一张引导页中添加脚本SceneChange.cs,具体代码如下:
using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;
public class SceneChange : MonoBehaviour
{
private Vector3 lastMouseDown = Vector3.zero;
void Update()
{
if (Input.GetMouseButtonDown(0))
{
lastMouseDown = Input.mousePosition;
}
if (Input.GetMouseButtonUp(0))
{
Vector3 mouseUp = Input.mousePosition;
Vector3 touchOffset = mouseUp - lastMouseDown;//偏移
if (Mathf.Abs(touchOffset.x) > 10 || Mathf.Abs(touchOffset.y) > 10)//有效滑动
{
//判断上下左右方向
if (Mathf.Abs(touchOffset.x) > Mathf.Abs(touchOffset.y) && touchOffset.x > 0)
{
SceneManager.LoadScene("YDY1");
}
else if (Mathf.Abs(touchOffset.x) > Mathf.Abs(touchOffset.y) && touchOffset.x < 0)
{
SceneManager.LoadScene("YDY2");
}
}
}
}
}
- 在第二张引导页中添加脚本YDY2SceneChange,具体代码如下:
using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;
public class YDY2SceneChange : MonoBehaviour {
private Vector3 lastMouseDown = Vector3.zero;
void Update () {
if (Input.GetMouseButtonDown(0))
{
lastMouseDown = Input.mousePosition;
}
if (Input.GetMouseButtonUp(0))
{
Vector3 mouseUp = Input.mousePosition;
Vector3 touchOffset = mouseUp - lastMouseDown;//偏移
if (Mathf.Abs(touchOffset.x) > 10 || Mathf.Abs(touchOffset.y) > 10)//有效滑动
{
if (Mathf.Abs(touchOffset.x) > Mathf.Abs(touchOffset.y) && touchOffset.x > 0)
{
SceneManager.LoadScene("YD1");
}
else if (Mathf.Abs(touchOffset.x) > Mathf.Abs(touchOffset.y) && touchOffset.x < 0)
{
SceneManager.LoadScene("Main");
}
}
}
}
}
4.添加场景
在unity中不同的场景切换比较方便,可以通过file->BuildingSetting添加场景,如下图:
直接将需要添加的场景拖拽到“Scenes In Build”,如下图:
注:在该界面的场景顺序即为最终app渲染的顺序。
这样我们的引导页从设计到代码实现就完成了,看起来比较复杂,但核心算法还是比较简单的 。希望对大家有帮助!