---
# System prepended metadata

title: Day 12 | 魔術方塊AR遊戲開發Part1 - 魔術方塊建立
tags: [Unity, AR手遊]

---

# Day 12 | 魔術方塊AR遊戲開發Part1 - 魔術方塊建立
###### tags: `Unity` `AR手遊`
在上一篇文章中為各位介紹ARFoundation/ARCore，今天我們要來製作魔術方塊AR遊戲。
> **目錄**
> 遊戲機制介紹
> 建立魔術方塊模型
> 撰寫旋轉程式
## 遊戲機制介紹
畫面中會擺放3x3x3的魔術方塊，玩家需要透過旋轉魔術方塊，

讓刑天與道具處在同一面，幫助主角收集到所有道具。

收集完所有東西，遊戲就結束嘍!

使用到的素材有:


| 刑天(3D模型) | 斧頭(3D模型)| 盾牌(3D模型) | 貼圖|
| -------- | -------- | -------- |-------|
|![](https://i.imgur.com/9cH7kZc.png)| ![](https://i.imgur.com/tQkjzLI.png)| ![](https://i.imgur.com/iUvnRkB.png)|![](https://i.imgur.com/0tuAN0b.jpg)|

## 建立魔術方塊模型
### Step 1 建立方塊單位
魔術方塊的模型基本上就是「正方體」加上「面」，直接在Unity完成即可。

首先先拉出一個方塊(Cube)，在方塊的六格面都分別放上面(這邊是使用Cube製作)。

調整Transform中的Scale數值，就可以將Cube調整成面的樣子。
![](https://i.imgur.com/cQJuRUg.png)

完成圖長這個樣子(為了方便示意，面在這邊用不同顏色示意，正式版都會貼上相同貼圖)。

![](https://i.imgur.com/UfX1gAI.png)



記得為每個面取上不同位置的名字
![](https://i.imgur.com/6Chd7i5.png)

完成後將方塊單位製作成Prefab
(將在Scene內組合好了的物件(GameObject) 拉到 Assets 文件夾便可以製作成Prefab)


### Step 2 將單位組成魔術方塊

接著將方塊單位製作成Prefab，並將其組裝成3x3x3的魔術方塊。
![](https://i.imgur.com/sg7OBHg.png)

重疊在內部的面，可以將其隱藏，以免影響魔術方塊的外觀。

避免混淆，也要記得為每個方塊單位分別取好名字。

為了後續的程式撰寫，所有的方塊單位都要被放在同個群組(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中，執行後就會發現魔術方塊的翻轉變得順暢嘍!

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

