# Day 12 | 魔術方塊AR遊戲開發Part1 - 魔術方塊建立
###### tags: `Unity` `AR手遊`
在上一篇文章中為各位介紹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();
        }

<br>

得到方向後，接著要判斷數值大小，並旋轉魔術方塊。

 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中，執行後就會發現魔術方塊的翻轉變得順暢嘍!

---
以上就是魔術方塊的建立及翻轉功能，下一篇將會為各位講解魔術方塊的偵測及面的旋轉，明天見!