這篇文章將介紹如何利用 VIVERSE 擴充功能在 PlayCanvas 專案中建立一套互動式任務系統(Quest System)。透過任務導向的設計,能顯著提升元宇宙空間的趣味性與引導性。
任務系統允許開發者定義一系列目標,讓使用者在探索世界時進行互動。你可以設定簡單的「點擊物件」任務,或是需要收集多個目標的「進度條」任務。
⚠️ 提醒:目前任務系統無法在 PlayCanvas 預覽模式(Preview mode)中測試。你必須在預覽頁面點擊「Create World」正式建立世界後,才能看到任務對話框並進行實測。
範例情境
一個經典的任務流程為例:
範例情境:尋找方塊大作戰
- 觸發任務:玩家進入特定區域,跳出任務對話框。
- 第一階段 (Check):點擊一個「紅色方塊」完成第一項任務。
- 第二階段 (Progress):點擊四個「綠色方塊」來累積進度。
- 懲罰機制 (Reset):若點擊到「藍色方塊」,任務將重置並需要重新啟動。
設定任務操作步驟
第一步:設定任務資訊
首先,我們需要在專案層級定義任務的名稱與內容。
- 點擊 Viverse Scene Settings 按鈕。
- Quest name:輸入任務名稱(例如:
Find the boxes!)。 - Quest description:輸入任務描述(例如:點擊指定顏色的方塊)。
- 設定 Task 1 (點擊單一目標):
- 描述:
Click on the red box. - Task type:選擇 check。
- 描述:
- 設定 Task 2 (累積進度目標):
- 描述:
Click on the green boxes. - Task type:選擇 progressBar。
- Progress Steps:設定為
4(代表需點擊 4 次)。
- 描述:
第二步:建立啟動任務的觸發區域
我們需要一個實體(Entity)來偵測玩家何時開啟任務。
- 建立一個 3D Box,並加上 Collision 組件。
- 點擊 Edit Viverse Extension。
- 在插件下拉選單選擇 TriggerAndAction。
- 新增 Trigger:選擇
EntitySubscribeTriggerEnter。- 在 tags to filter 欄位填入
local-player(確保只有玩家觸發)。
- 在 tags to filter 欄位填入
- 新增 Action:選擇
Quest。- selected quest:選擇刚才建立的
Find the boxes!。 - quest response:選擇
startQuest。
- selected quest:選擇刚才建立的
第三步:實作任務互動目標
現在我們要設定紅色、綠色及藍色方塊的互動邏輯。
完成第一項任務(紅色方塊)
- 建立 3D 物件並賦予紅色材質。
- 開啟 VIVERSE Extension 並新增 Trigger:
NotificationCenterSubscribeEntityPicking(偵測點擊)。 - 新增 Action:
Quest。- quest response:
completeTask。 - selected task:
Click on the red box.
- quest response:
累積任務進度(綠色方塊)
- 建立 4 個綠色方塊,重複以下設定:
- Trigger:
NotificationCenterSubscribeEntityPicking。 - Action:
Quest。
任務重置陷阱(藍色方塊)
- 建立藍色方塊。
- Trigger:
NotificationCenterSubscribeEntityPicking。 - Action:
Quest。
相關文章
PlayCanvas & Viverse World
| 類型 | 文章 |
|---|---|
| 相關文件 | Viverse Docs.PlayCanvas Docs |
| 基礎操作 | Viverse World.Claude Playcanvas Editor MCP Server.Viverse PlayCanvas Extension (安裝.觸發.媒體.撿拾.坐下) |
| 開發者工具 | 登入與身分驗證.排行榜 |
| 開發筆記 | 滿版畫面.場景切換.密碼面板.模組化迷宮.科技感效果.對話框.碰撞計分.碰撞計分+遊戲重生.子彈閃避 |


![[PlayCanvas 筆記 01] 前置作業-環境與帳號 [PlayCanvas 筆記 01] 前置作業-環境與帳號](https://i1.wp.com/img.jfsblog.com/2026/01/20260112000122_0_4eee0a.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233)
![[PlayCanvas 筆記 02] Claude MCP Server 設定教學 [PlayCanvas 筆記 02] Claude MCP Server 設定教學](https://i1.wp.com/img.jfsblog.com/2025/11/20251206160632_0_7ed12c.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233)

![[PlayCanvas 筆記 03] 如何為瀏覽器安裝 VIVERSE Extension 外掛 [PlayCanvas 筆記 03] 如何為瀏覽器安裝 VIVERSE Extension 外掛](https://i1.wp.com/img.jfsblog.com/2026/01/20260112005243_0_efac5b.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233)
![[PlayCanvas] 滿版畫面設計 (VIVERSE World) [PlayCanvas] 滿版畫面設計 (VIVERSE World)](https://i2.wp.com/img.jfsblog.com/2026/01/20260111173300_0_7739d6.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233)


![[PlayCanvas 筆記 06] VIVERSE Extension 使用方法-觸發效果 (Trigger & Actions) [PlayCanvas 筆記 06] VIVERSE Extension 使用方法-觸發效果 (Trigger & Actions)](https://i2.wp.com/img.jfsblog.com/2026/01/20260112232515_0_67f013.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233)
![[PlayCanvas 筆記 04] VIVERSE Extension 使用方法-發布專案 (Publish) [PlayCanvas 筆記 04] VIVERSE Extension 使用方法-發布專案 (Publish)](https://i2.wp.com/img.jfsblog.com/2026/01/20260112232253_0_0b5cd1.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233)