iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Mobile Development

從無到有! Unity AR手遊開發日誌-以山海異聞錄為例系列 第 12

Day 12 | 魔術方塊AR遊戲開發Part1 - 魔術方塊建立

  • 分享至 

  • xImage
  •  

在上一篇文章中為各位介紹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中,執行後就會發現魔術方塊的翻轉變得順暢嘍!


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


上一篇
Day 11 | UnityAR世界建立 - ARFoundation/ARCore介紹
下一篇
Day 13 | 魔術方塊AR遊戲開發Part2 - 魔術方塊偵測
系列文
從無到有! Unity AR手遊開發日誌-以山海異聞錄為例30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言