Unity XR Interaction Toolkit 開發|三、快速設定互動:行動、抓取、UI 互動【3.0 以上版本】

目錄
Unity XR Interaction Toolkit 開發|三、快速設定互動:行動、抓取、UI 互動【3.0 以上版本】

 

Unity XR Interaction Toolkit 教學說明

 

本次教學將帶您完成 Unity XR Interaction Toolkit 的 SDK 導入,內容涵蓋安裝 Unity 編輯器與相關平台的打包模組,啟用 OpenXR 並配置互動設定檔,解決環境設定中的常見問題,最後導入必要的範例資產並更新 Input System,為後續的 XR 開發奠定穩固基礎。本篇文章在原作者內容的基礎上進行了一些補充與調整,完整版課程及答疑僅限社群成員專享,歡迎關注原文作者並加入社群!

你可以隨時回到初始頁:Unity XR Interaction Toolkit 開發|一、OpenXR 與 XRI 概述【3.0 以上版本】來了解從頭開始串連 Unity 與 XR Interaction Toolkit 的完整流程。

 

 

 

Unity XR 跨平台開發教程簡介

 

歡迎來到 Unity XR 跨平台開發系列教程!本期課程將帶您快速了解如何使用 XR Interaction Toolkit 配置基礎交互功能,讓您感受到當前開發 XR 應用的簡單高效。此外各模塊的詳細知識點將在後續課程中單獨介紹。

 

Unity XR 跨平台開發教程簡介

 

 

基礎配置與環境準備

 

SDK 的導入與環境配置

首先我們需要在 Unity 工程中導入開發所需的 SDK 並完成環境配置,點選上方工具列的 Windows  → Package Manager。

 

首先我們需要在 Unity 工程中導入開發所需的 SDK 並完成環境配置,點選上方工具列的 Windows  → Package Manager。

 

導入 XR Interaction Toolkit 時,請記得加載其 Sample 資源包,例如 Starter AssetsXR Device Simulator,以便快速上手。

 

導入 XR Interaction Toolkit 時,請記得加載其 Sample 資源包,例如 Starter Assets 和 XR Device Simulator,以便快速上手。

 

導入 XR Interaction Toolkit 時,請記得加載其 Sample 資源包,例如 Starter Assets 和 XR Device Simulator,以便快速上手。

 

 

XR Interaction Toolkit 的快速配置

 

如何快速建立交互場景

在 Unity 工程中,我們可以通過右鍵菜單創建一個新的場景,並為其命名,例如 "XR Test"。

 

在 Unity 工程中,我們可以通過右鍵菜單創建一個新的場景,並為其命名,例如 "XR Test"。

 

接著刪除場景中的默認攝像機 Main Camera,因為我們需要使用 XR 提供的攝像機來觀察場景。

 

接著刪除場景中的默認攝像機 Main Camera,因為我們需要使用 XR 提供的攝像機來觀察場景。

 

設定 XR Origin 與場景攝影機

在 Project 視圖中搜尋 "XR Origin",並將其拖入場景中。

 

在 Project 視圖中搜尋 "XR Origin",並將其拖入場景中。

 

在 Project 視圖中搜尋 "XR Origin",並將其拖入場景中。

 

這個對象包含了一個預設的玩家攝像機,可以追蹤用戶的頭部和手柄,模擬真實的視角與動作。

 

這個對象包含了一個預設的玩家攝像機,可以追蹤用戶的頭部和手柄,模擬真實的視角與動作。

 

 

交互功能展示

 

配置地面與傳送功能

在場景中添加一個地面來支持玩家的行走與傳送,在 Unity 的 Hierarchy 面板當中點擊右鍵,再點擊 XR → Teleportation Area。

 

在場景中添加一個地面來支持玩家的行走與傳送,在 Unity 的 Hierarchy 面板當中點擊右鍵,再點擊 XR → Teleportation Area。

 

可以會看到場景中添加了一個地面。

 

可以會看到場景中添加了一個地面。

 

首先要先將地面的的位置重置,找到右邊列表的 Transform 組件。

 

首先要先將地面的的位置重置,找到右邊列表的 Transform 組件。

 

點擊右邊的三個點,再點擊 Reset。

 

點擊右邊的三個點,再點擊 Reset。

 

可以看到  Transform 組件當中的  Position 數據都被重置。

 

可以看到  Transform 組件當中的  Position 數據都被重置。

 

接著找到下方的 Teleportation Area 腳本,這是負責傳送的腳本,我們將腳本內的 Interaction Layer Mask 這個參數改成 Teleporrt

 

接著找到下方的 Teleportation Area 腳本,這是負責傳送的腳本,我們將腳本內的 Interaction Layer Mask 這個參數改成 Teleporrt。

 

設定完成後就可以運行一下程序,測試一下移動效果。

 

設定完成後就可以運行一下程序,測試一下移動效果。

 

設定完成後就可以運行一下程序,測試一下移動效果。

 

 

製作抓取物體的操作

 

配置可抓取的物體

在 Unity 的 Hierarchy 面板當中點擊右鍵,再點擊 XR → Grab Interactable。

 

在 Unity 的 Hierarchy 面板當中點擊右鍵,再點擊 XR → Grab Interactable。

 

在場景中可以看到新增的物體,物體本身能夠被玩家抓取的。

 

在場景中可以看到新增的物體,物體本身能夠被玩家抓取的。

 

在 Hierarchy 面板選中這個物體並按下 F 鍵,可以快速拉近跟物體的距離。

 

在 Hierarchy 面板選中這個物體並按下 F 鍵,可以快速拉近跟物體的距離。

 

如何改變物體外觀與顏色

在場景當中創建一個名為 Materials 的文件夾。

 

在場景當中創建一個名為 Materials 的文件夾。

 

並在其中添加材質球。將材質球設置為紅色後。

 

並在其中添加材質球。將材質球設置為紅色後。

 

將紅色材質球拖動到物體上,即可完成物體外觀顏色的更改。

 

將紅色材質球拖動到物體上,即可完成物體外觀顏色的更改。

 

完成後可以運行一下程序,來看是否可以把這個方塊給抓起。

 

完成後可以運行一下程序,來看是否可以把這個方塊給抓起。

 

不論是遠距離還是近距離都可以抓取物體。

 

不論是遠距離還是近距離都可以抓取物體。

 

不論是遠距離還是近距離都可以抓取物體。

 

也可以改變抓取腳本上的參數,來設置不一樣的抓取方式,在 Inspector 區域內找到 XR Grab Interactable,這個腳本就是負責抓取用的 Interactable 腳本。

 

也可以改變抓取腳本上的參數,來設置不一樣的抓取方式,在 Inspector 區域內找到 XR Grab Interactable,這個腳本就是負責抓取用的 Interactable 腳本。

 

在 Interactable 腳本內找到 Far Attach Mode,將 Defer To Interactor 改成 Near。

 

在 Interactable 腳本內找到 Far Attach Mode,將 Defer To Interactor 改成 Near。

 

再次運行程序,進到場景當中用手柄射線射向要抓取的物體,然後按下抓取鍵。

 

再次運行程序,進到場景當中用手柄射線射向要抓取的物體,然後按下抓取鍵。

 

可以看到物體從遠方飛到了手柄的模型上。

 

可以看到物體從遠方飛到了手柄的模型上。

 

 

UI 交互功能實現

 

添加 UI 控件及其交互功能

在場景中新增一個 UI Canvas,這是 UI 元素的容器。

 

在場景中新增一個 UI Canvas,這是 UI 元素的容器。

 

可以看到它自動創建出了兩個物體,這兩個物體都是在 UI 交互當中會用到的物體。

 

可以看到它自動創建出了兩個物體,這兩個物體都是在 UI 交互當中會用到的物體。

 

由於現在的畫布物體太大了,我們可以先把它的範圍縮小,可以先修改  Rect Transform 內的 Scale 參數,將參數都設為 0.01。

 

由於現在的畫布物體太大了,我們可以先把它的範圍縮小,可以先修改  Rect Transform 內的 Scale 參數,將參數都設為 0.01。

 

現在場景中的方框範圍就是畫布的範圍。

 

現在場景中的方框範圍就是畫布的範圍。

 

調整 Canvas 的大小和位置,讓它位於玩家物體的前方。

 

調整 Canvas 的大小和位置,讓它位於玩家物體的前方。

 

然後在畫布上添加不同的 UI 控件,點選 Hierarchy 內的 Canva → Create Empty 先創建一個空物體,用於表示一個 UI 面板。

 

然後在畫布上添加不同的 UI 控件,點選 Hierarchy 內的 Canva → Create Empty 先創建一個空物體,用於表示一個 UI 面板。

 

點擊右側的 Anchor Presets,按下鍵盤的 Alt 鍵,選擇右下角的方框。

 

點擊右側的 Anchor Presets,按下鍵盤的 Alt 鍵,選擇右下角的方框。

 

然後在這個空物體的上再創件一個 UI 控件,我們選擇 UI → Image,相當於背景圖。

 

然後在這個空物體的上再創件一個 UI 控件,我們選擇 UI → Image,相當於背景圖。

 

把背景圖的顏色改一下,改成紅色。

 

把背景圖的顏色改一下,改成紅色。

 

然後在 UI 面板上再添加其他的 UI 控件,我們選擇 UI → Buttlon - TextMeshPro,創建一個按鈕。

 

然後在 UI 面板上再添加其他的 UI 控件,我們選擇 UI → Buttlon - TextMeshPro,創建一個按鈕。

 

第一次創建的時候會跳出彈窗,讓我們導入 TextMeshPro,TextMeshPro 是 Unity 當中用來顯示文本的插件。

 

第一次創建的時候會跳出彈窗,讓我們導入 TextMeshPro,TextMeshPro 是 Unity 當中用來顯示文本的插件。

 

我們點擊彈窗內的 Import TMP Essentials。

 

我們點擊彈窗內的 Import TMP Essentials。

 

成功導入資源後就可以看到按鈕上顯示了 Button 的文字。

 

成功導入資源後就可以看到按鈕上顯示了 Button 的文字。

 

調整按鈕跟文字的大小,讓它符合畫布的範圍。

 

調整按鈕跟文字的大小,讓它符合畫布的範圍。

 

然後在 UI 面板的物體上再創建一個 UI 元,點選 UI → Slider。

 

然後在 UI 面板的物體上再創建一個 UI 元,點選 UI → Slider。

 

同樣修改 Slider 的大小,讓它符合畫布的範圍。

 

同樣修改 Slider 的大小,讓它符合畫布的範圍。

 

遠距與近距 UI 操作的區別

完成後可以運行一下程序,先用手柄的設限射向畫布上的 UI 按鈕。

 

完成後可以運行一下程序,先用手柄的設限射向畫布上的 UI 按鈕。

 

射到按鈕上後可以看到按鈕的顏色會發生改變。

 

射到按鈕上後可以看到按鈕的顏色會發生改變。

 

射線射到按鈕後按下手柄的板機鍵,這時候相當於我們點擊了按鈕,可以看到按鈕顏色會變暗。

 

射線射到按鈕後按下手柄的板機鍵,這時候相當於我們點擊了按鈕,可以看到按鈕顏色會變暗。

 

接著用手柄的射線射向滑動條˙。

 

接著用手柄的射線射向滑動條˙。

 

射到滑動條後按下手柄的板機鍵,可以拖動滑動條。

 

射到滑動條後按下手柄的板機鍵,可以拖動滑動條。

 

也可以嘗試走近一點透過點觸的方式進行交互。

 

也可以嘗試走近一點透過點觸的方式進行交互。

 

 

總結與後續課程展望

 

本期教程展示了 XR 中的一些基礎交互功能,包括 3D 物體的交互、UI 操作以及移動功能。通過簡單的配置,您可以快速上手 XR 應用開發。在接下來的課程中,我們將深入解析每個交互模塊的具體知識點,敬請期待!

 

上一步:Unity XR Interaction Toolkit 開發|二、導入 SDK【3.0 以上版本】

下一步:Unity XR Interaction Toolkit 開發|四、XR Origin:追蹤參考係與相機高度【3.0 以上版本】

————————————————

以上內容來自 CSDN 作者:YY-nb

 

 

 

本文原創(或整理)於亞洲電玩通,未經作者與本站同意不得隨意引用、轉載、改編或截錄。

特約作家簡介

X
A
Y
B
JamXu的頭像
JamXu
十年遊戲研發
二十年遊戲台主
三十年遊戲玩家

經中華網龍遊戲企劃進入遊戲圈,然後被雷打到去學程式前後端又學了點設計帶帶幾個研發團隊,見證了 3D 渲染技術及遊戲引擎互相進步,也見證了研發代理的更迭與博弈遊戲的興起,再毅然研究起 SEO 網路行銷社群廣告投放,深信自研自賣才是最大贏家,期望能為台灣研發重回輝煌時光貢獻一點力量。如果你也有遊戲夢,歡迎交流認識。


支持贊助 / DONATE

亞洲電玩通只是很小的力量,但仍希望為復甦台灣遊戲研發貢獻一點動能,如果您喜歡亞洲電玩通的文章,或是覺得它們對您有幫助,歡迎給予一些支持鼓勵,不論是按讚追蹤或是贊助,讓亞洲電玩通持續產出,感謝。

亞洲電玩通AsiaGameMaster - Steam 遊戲鑑賞家
亞洲電玩通AsiaGameMaster - FB 粉絲專頁
亞洲電玩通AsiaGameMaster - IG 粉絲專頁
亞洲電玩通AsiaGameMaster - Twitter
亞洲電玩通AsiaGameMaster - Yoytube 粉絲專頁
亞洲電玩通AsiaGameMaster - Tiktok

BTC

亞洲電玩通AsiaGameMaster - BTC 鏈贊助地址

352Bw8r46rfXv6jno8qt9Bc3xx6ptTcPze

 

ETH

亞洲電玩通AsiaGameMaster - ETH 鏈贊助地址

0x795442E321a953363a442C76d39f3fbf9b6bC666

 

TRON

亞洲電玩通AsiaGameMaster - TRON 鏈贊助地址

TCNcVmin18LbnXfdWZsY5pzcFvYe1MoD6f

延伸閱讀