Day 12 | 魔术方块AR游戏开发Part1 - 魔术方块建立

在上一篇文章中为各位介绍ARFoundation/ARCore，今天我们要来制作魔术方块AR游戏。

目录
游戏机制介绍
建立魔术方块模型
撰写旋转程序

游戏机制介绍

画面中会摆放3x3x3的魔术方块，玩家需要透过旋转魔术方块，

让刑天与道具处在同一面，帮助主角收集到所有道具。

收集完所有东西，游戏就结束喽!

使用到的素材有:

刑天(3D模型)	斧头(3D模型)	盾牌(3D模型)	贴图

建立魔术方块模型

Step 1 建立方块单位

魔术方块的模型基本上就是「正方体」加上「面」，直接在Unity完成即可。

首先先拉出一个方块(Cube)，在方块的六格面都分别放上面(这边是使用Cube制作)。

调整Transform中的Scale数值，就可以将Cube调整成面的样子。

完成图长这个样子(为了方便示意，面在这边用不同颜色示意，正式版都会贴上相同贴图)。

记得为每个面取上不同位置的名字

完成後将方块单位制作成Prefab
(将在Scene内组合好了的物件(GameObject) 拉到 Assets 文件夹便可以制作成Prefab)

Step 2 将单位组成魔术方块

接着将方块单位制作成Prefab，并将其组装成3x3x3的魔术方块。

重叠在内部的面，可以将其隐藏，以免影响魔术方块的外观。

避免混淆，也要记得为每个方块单位分别取好名字。

为了後续的程序撰写，所有的方块单位都要被放在同个群组(Cube)里喔!

撰写旋转程序

旋转物件

public GameObject target;

在程序码中宣告一个物件，并在Scene中将群组(Cube)指定给target。

如此一来，在执行时才可以控制魔术方块旋转。

旋转功能

旋转的原理需要知道手指移动的方向，并用方向数值去判断魔术方块要如何选转。

首先会需要有两个变数，分别记录第一、二次点击的位置，并将其相减，计算手指的移动数值。

并将移动数值标准化(normalized)，

 if (Input.touchCount ==2)
        {
            firstPressPos = new Vector2(Input.touchPosition.x, Input.touchPosition.y);
        }
        if (Input.touchCount == 2)
        {
            secondPressPos = new Vector2(Input.touchPosition.x, Input.touchPosition.y);
            
            currentSwipe = new Vector2(secondPressPos.x - firstPressPos.x, secondPressPos.y - firstPressPos.y);
            
            currentSwipe.Normalize();
        }

得到方向後，接着要判断数值大小，并旋转魔术方块。

 if (LeftSwipe(currentSwipe))
            {
                target.transform.Rotate(0, 90, 0, Space.World);
            }

 bool LeftSwipe(Vector2 swipe)
    {
        return currentSwipe.x < 0 && currentSwipe.y > -0.5f && currentSwipe.y < 0.5f;
    }

程序码以左旋转为例，其他方向的旋转以此类推。

要是对於数值判断不太清楚，可以试着将数值print()出来，会更明白之间的关系喔!

print(currentSwipe);

将其他方向的程序码都撰写好後，要记得将旋转的部分放进同一个函式中。

并且将函式放进Update()里面。

 void Update()
    {
        Swipe();
    }

让旋转更自然

旋转功能完成後，会发现魔术方块旋转得很僵硬。

为了让它看起来自然一点需要做到:

• 点击拖曳时，魔术方块也可以跟着转动
• 在旋转的过程中加入时间

    void Drag()
    {
        if (Input.touchCount ==2)
        {
            touchDelta = Input.touchPosition - previousTouchPosition;
            touchDelta *= 0.1f; 
            transform.rotation = Quaternion.Euler(touchDelta.y, -touchDelta.x, 0) * transform.rotation;
        }
        else
        {
            if (transform.rotation != target.transform.rotation)
            {
                var step = speed * Time.deltaTime;
                transform.rotation = Quaternion.RotateTowards(transform.rotation, target.transform.rotation, step);
            }
        }
        previousTouchPosition = Input.touchPosition;
    }

将Drag()放入Update中，执行後就会发现魔术方块的翻转变得顺畅喽!

以上就是魔术方块的建立及翻转功能，下一篇将会为各位讲解魔术方块的侦测及面的旋转，明天见!