Three participants gather around a tablet beneath the banyan trees during a real playtest. A generatively retouched video still with the title Echoes of the Lost.
← All work← 全部作品
XTDesign · AR game · 2023XTDesign · AR 擴增實境遊戲 · 2023
Prototype原型

Echoes of the Lost 榕易迷路榕易迷路

Echoes of the Lost brings an AR maze onto the real lawn of NCKU’s Banyan Garden. Players move through the garden to explore a campus ghost story. I led development, carried out AEIOU fieldwork and integrated the code, working with the team to refine the game through internal playtests.《榕易迷路》將 AR 迷宮放進成大榕園的真實草坪,讓玩家在行走之間探索校園怪談。我負責開發統籌、AEIOU 田野調查與程式整合,和團隊透過組內實測與討論,逐步調整遊戲。

My role角色
Concept proposal, development coordination, AEIOU fieldwork and code integration.概念提案、開發統籌、AEIOU 田野調查與程式整合。
Methods方法
AEIOU field observations, Unity prototyping and internal playtesting at development milestones.以 AEIOU 觀察場域,透過 Unity 製作原型,並在開發的各個階段進行組內實測。
Outcome結果
A Unity AR prototype, played on site in Banyan Garden and presented at the end-of-term showcase.完成 Unity AR 原型,於榕園實地試玩並在期末成果展展出。
01 · Place01 · 場所

Where the story begins.故事的起點

Banyan Garden sits on NCKU’s Guangfu campus, ringed by old banyan trees and red-brick barracks left from the Japanese colonial period. Every NCKU student holds some memory of it, and on weekends families come to sit on the grass. The place also carries a ghost story from those same colonial years: Japanese soldiers who never made it home still wander under the trees after dark, or so people say.榕園位於成大光復校區,四周環繞老榕樹與日治時期留下的紅磚營舍,是成大人的共同回憶,也是家庭週末休憩的場所。這裡流傳著日治時期的校園怪談。據說未能返鄉的日本兵,入夜後仍徘徊在這片林蔭下。

NCKU Banyan Garden on a summer day. A wide green lawn stretches across the frame; old banyan trees with broad canopies sit on either side; the red-brick arched buildings of the former Japanese colonial barracks line the far edge under a blue sky with scattered clouds.
Banyan Garden, NCKU Guangfu campus · photo from the NCKU campus image archive成大光復校區榕園 · 圖片來自 成大素材網
02 · Field study02 · 田野調查

A weekend AEIOU picnic.週末的 AEIOU 野餐

Early in development, the team spent a Saturday afternoon watching the garden. We recorded what we saw with the AEIOU framework (Activities, Environments, Interactions, Objects, Users), and those notes became reference material for the game design:開發初期,團隊選在週六午後到榕園進行田野觀察。我們運用 AEIOU 架構記錄現場資訊,作為遊戲設計的輔助資料。

Observation-notebook sketch: a runner mid-stride on the banyan-garden grass perimeter, with a child reaching for a ball in the soft background.
AA
Activities活動

After three, children began throwing a ball around. Some people rested on the grass; most were still active.午後三點,孩子們開始傳接球。有些人躺在草皮上休息,多數人仍在活動。

Observation-notebook sketch: an old wide-spreading banyan tree on the grass beside the red-brick perimeter wall, no people, cloudy afternoon.
EE
Environments環境

Cloudy, with a light breeze across the grass. Old banyans and red-brick buildings gave the garden a quiet, unhurried, slightly mysterious atmosphere.多雲,微風吹過草地。老榕樹與紅磚老舍營造出安靜、緩慢而略帶神祕的氛圍。

Observation-notebook sketch: three friends on a picnic mat leaning into conversation, no devices visible.
II
Interactions互動

Mostly family outings. Children played together while adults chatted nearby.多為家庭出遊。孩子成群嬉戲,大人則在旁聊天。

Observation-notebook still life on grass: a folded picnic mat, a frisbee, a small bag, an apple, an open notebook with pencil.
OO
Objects物件

Picnic mats, small tents, balls, frisbees, kites. A few bags left lying on the grass.野餐墊、小帳棚、球、飛盤與風箏。有些包包放在草地上。

Observation-notebook sketch: four banyan-garden visitors in a loose group — a student with backpack, a parent and child, a jogger, and an older neighbor on a bench.
UU
Users使用者

Students, families with young children, runners, and older relatives on the benches watching their children and grandchildren.在校學生、親子家庭、跑者,以及坐在長椅上看著兒孫的長輩。

03 · Insight03 · 洞見

Three findings, three design decisions.三個發現與決策

The fieldwork led us to three priorities: match the garden’s unhurried pace, encourage physical movement, and keep the game approachable.田野觀察讓我們把重點放在三件事:配合榕園的慢步調、鼓勵實際走動,以及降低操作門檻。

A slow pace步調緩慢
People sit here, walk here, picnic here. Time slows down on its own.人們在此坐著、走著、野餐,時間感彷彿自動放慢。
→→
Match the pace of the place配合現場節奏
A ten-minute mission gives players time to explore without demanding quick reactions.任務時間設定為十分鐘,讓玩家有充足時間慢慢探索,不必急著反應。
Objects in a supporting role器物為輔
Balls, frisbees, and picnic mats were part of how the lawn came alive. The objects guided the activity; they were never the point of it.球、飛盤和野餐墊是草地活動的一部分,負責引導活動,並非主角。
→→
Get people walking鼓勵實體走動
Players explore the garden by actually walking through it.玩家要在榕園裡實際走動探索。
A mixed crowd客群多元
Students, children, runners, and older adults, most of them there as families or in pairs.涵蓋學生、孩童、跑者與長輩,且多為家庭或伴侶。
→→
Lower the difficulty降低挑戰門檻
Keep the challenge approachable so family members of different ages can take part.降低挑戰門檻,希望不同年齡的家庭成員都能參與。
04 · Opening04 · 開場

Where the story opens.故事由此展開

Before the maze opens, the player reads the legend behind it and then gets a message from Cheng-Kang, the NPC asking for help. The story sets the mood. It also spells out the goal and the task before the search starts.玩家在進入迷宮前會先閱讀背景傳說,接著收到 NPC「誠鋼」的求助訊息。透過故事營造氣氛,也讓玩家在探索前知道遊戲目標與任務。

榕易迷路 splash screen — a giant banyan tree above a glowing maze under a moonlit sky, with 開始 (Start) and 榕園故事 / 開發團隊 buttons at the bottom of the phone.
Start screen開始畫面
榕園故事 legend page — a parchment scroll on a dark cloudy background, holding the long campus-legend text in vertical Chinese.
Legend page傳說頁
誠鋼 the NPC stands in a misty wooded scene, a hand reaching forward, dialogue bubble above reading 同學同學!可以幫我一下嗎?(classmate, classmate, can you help me?).
Cheng-Kang’s call for help誠鋼的求助
05 · Flow05 · 流程

Beat it, or become part of it.攻略它,或成為它的一部分

We made the garden’s ghost story part of the mission. In the legend, Japanese soldiers who never returned home continue their drills after dark. In the game, Cheng-Kang asks for help finding his missing friend Chia-Hao. The player enters the maze to find him and bring him back to the exit.我們把榕園的鬼故事編入通關任務。傳聞中,未能返鄉的日本兵入夜後仍沿著生前路線操練;遊戲裡,玩家收到誠鋼的求助,走進迷宮尋找失蹤的家豪,再將他帶回出口。

誠鋼 the NPC reaches a hand forward in a misty wooded scene, dialogue 同學同學!可以幫我一下嗎?
The call for help求助
Inside the AR hedge maze: tall green walls flank a corridor of real grass, with faint ghost orbs in the distance.
The corridor廊道
家豪 stands in front of the hedge wall, dialogue reads 終於有人來救我了!我叫家豪,我跟你走。
Chia-Hao rescued救出家豪
Victory screen: three friends hugging, caption 恭喜你成功救出受困的家豪。
Victory獲勝
Game Over screen: a twisted figure intertwined with dark tree branches, caption 你已成為成大榕園的一部分。
Game OverGame Over
STEP 1步驟 1 STEP 2步驟 2 STEP 3步驟 3 STEP 4步驟 4 Walk into走進 Banyan Garden榕園 Cheng-Kang asks誠鋼 for help開口求助 Enter the AR maze在真實草地上 on the real lawn進入 AR 迷宮 Find Chia-Hao找到家豪 (more ghosts near)(愈近鬼愈多) Lead to exit帶他到出口 Victory過關 Wall × 2 or time-out碰牆 2 次或超時 Game Over遊戲結束
  1. Walk into Banyan Garden. Lawn, brick wall, and a legend that was already here.走進榕園。 草坪、磚牆,傳說本來就在那裡。
  2. Cheng-Kang asks for help. His classmate walked in and never walked out.誠鋼求助。 他的同學走了進去,一直沒有出來。
  3. Enter the AR maze. Anchored to the real grass, 1:1.進入 AR 迷宮。 1:1 錨定在真實的草地上。
  4. Find Chia-Hao. The closer you get, the more ghosts.找到家豪。 愈靠近,鬼愈多。
  5. Lead him to an exit.把他帶到出口。 Victory.
    Two wall touches, or time runs out.碰牆兩次或時間到。 Game Over.
06 · Mechanics06 · 機制

Making the maze respond to real movement讓虛擬迷宮回應真實移動

The project runs on Unity. Here are the core features we built.專案使用 Unity 引擎開發,核心實作功能如下。

Plane anchoring平面錨定

The camera feed finds the real ground. Once the player is in position, the system sets the virtual maze onto that plane at 1:1 scale.透過相機畫面偵測真實地面。玩家就定位後,系統會將一比一比例的虛擬迷宮放置於該平面上。

Vuforia.PlaneFinderBehaviourVuforia.PlaneFinderBehaviour

AI followAI 跟隨

When the player comes within two meters of Chia-Hao, he begins following them. A NavMeshAgent works out the path, and an Animator swaps between idle and walk depending on the distance.玩家走到家豪兩公尺內時,家豪便會開始跟隨玩家。NavMeshAgent 負責計算路徑,Animator 則依據距離切換待機與行走的動畫。

followAI.cs · NavMeshAgentfollowAI.cs · NavMeshAgent

Event triggers事件觸發

Boolean checks between GameObjects fire the game events. Chia-Hao reaching an exit and touching an invisible trigger zone wins the game; too long in contact with a ghost loses it.遊戲事件由多個 GameObject 間的布林運算觸發。家豪走到出口碰觸隱形判定區即獲勝;與鬼魂接觸過久則觸發失敗。

DistanceChecker.cs · ImageVisibility.csDistanceChecker.cs · ImageVisibility.cs

Anti-cheat防作弊機制

Players will try to walk straight through a wall, and a parent may be steering with a child in tow, so the system allows a three-second margin. Two seconds against a wall raises a warning. At the third second, the game ends.為防止玩家直接穿牆,並考量家長可能帶著孩子操作,系統提供三秒的容錯機制。持續接觸牆體超過兩秒會發出警告,第三秒則直接判定遊戲結束。

WallCollision.csWallCollision.cs
Unity 2022 editor open on a laptop showing the 3D hedge maze scene with green walls and a player-camera ARCamera preview.
Unity editor · building the maze at 1:1 scaleUnity 編輯器 · 建置 1:1 的迷宮
A phone held in hand showing the AR scene anchored on the classroom floor, a humanoid companion model standing in front of a wall.
Vuforia anchoring · a companion in real spaceVuforia 錨定 · 真實空間裡的同伴
A team member presenting the project in a classroom, audience listening, the Unity editor visible on a monitor in the background.
Classroom demo · explaining this build課堂展示 · 說明這個版本
07 · Future development07 · 未來展望

Ideas beyond the final build.這個版本尚未完成的構想

The team completed an MVP that could be anchored on site and played from start to finish. The features below were planned but could not be finished within the course schedule, so I have gathered them here as future development.團隊完成了能在實地定位、走完流程的 MVP。以下功能在規劃之中,但未能在課程期限內完成,因此我將它們整理為未來展望。

Interactive sound互動音效

The build has one background track and nothing more. Next would be whispers or footsteps that shift with distance, to pull the player further inside.目前僅有單一背景音樂,未來計畫加入隨距離變化的低語或腳步聲,提升沉浸感。

Co-op multiplayer多人協作

The field study showed that people come to the garden with company. A shared mode would put several players in the same maze, able to see each other and split the search between them.觀察到使用者多結伴而行,希望能開發多人共遊模式,讓多名玩家在同一座迷宮中看見彼此並分工解謎。

Tied to the site場所綁定

With GPS, a task would unlock only when the player stands under a particular tree or beside a particular building in the garden. This connects the game more closely to the physical space.結合 GPS 定位,要求玩家必須走到榕園特定的樹下或建物旁才能解鎖任務,強化遊戲與實體空間的連結。

Random generation隨機生成

Instead of one fixed layout, the maze would generate a different route each time inside a set boundary, so every visit to the garden is a new challenge.捨棄固定配置,改為在既定範圍內自動生成不同路線,讓玩家每次造訪榕園都有全新的挑戰。

08 · Playtest08 · 試玩

Walking around things that were not there.可見的與不可見的

Feedback during open play was positive. The build stayed the same from that session through the final showcase; the adjustments had happened earlier during internal testing.開放試玩時,參與者的回饋正面。從這次試玩到期末發表,作品沒有再修改;開發中的微調主要是在先前的組內實測完成。

During on-site playtests, I saw players hold their breath and turn sideways to avoid virtual walls. The walls existed only on screen, but their bodies were already responding. The scene reminded me of Merleau-Ponty’s phenomenology of perception, and that insight became the starting point of my later research on Bow Mind.實地試玩時,我看見玩家為了避開虛擬牆壁會屏息、側身閃躲。牆只存在於畫面裡,身體卻已經做出反應。這個場景讓我想起了梅洛龐蒂的知覺現象學。這份啟發成為我後來投入《Bow Mind》研究的起點。

Three testers gathered around a tablet under the banyan canopy, looking at the AR maze together. A tester from behind, holding a tablet that shows the AR maze; he stands on the real grass with banyan in the background. Tester in red jacket holding a phone, looking down at the screen on the grass.
09 · Teammates09 · 隊友

How the work was divided.團隊分工

Each of our four team members proposed a concept. The team chose my AR maze idea, and I led the development schedule and coordinated code integration. At playable MVP milestones, we tested as a team and agreed on small adjustments. Before the final showcase, I checked that the maze, characters and events worked together. Each member’s technical, visual and narrative contributions are listed below.四位組員各自提案後,團隊選擇了我的 AR 迷宮構想,後續由我持續帶領開發進度,並負責程式整合。原型推進到可試玩的 MVP 階段時,我們會進行組內實測,依照討論後的共識微調。成果展前,我再確認迷宮、角色與事件能一起運作。各成員負責的技術、美術與敘事如下。

顧文宇Wenyu Ku · Dev LeadWenyu Ku

Dev lead · concept development · maze design · code integration開發統籌(Dev Lead)、概念發想、迷宮設計、程式整合

林翊麒Yi-Chi LinYi-Chi Lin

Vuforia research · story writing · character animationVuforia 技術研究、故事編劇、角色動畫

郭亭妤Ting-Yu KuoTing-Yu Kuo

Ghost animation · game art · campus-legend research and source material鬼魂動畫、遊戲美術、校園怪談考據與素材

莊凱硯Kai-Yan ChuangKai-Yan Chuang

NavMesh AI research · all graphic design (UI, poster, promo film)NavMesh AI 技術研究、UI、海報與宣傳片等所有平面設計

With sincere thanks.由衷感謝

Four students standing in front of the 榕易迷路 exhibition poster, smiling with thumbs up. One holds a tablet showing the app.
December 20232023 年 12 月

Thank you to the teammates who made this project with me. This photograph marks the day we finished the showcase.謝謝一起完成專案的夥伴。這張照片留下了我們完成成果展的那一天。

10 · Behind the scenes10 · 花絮

Kai-Yan Juang’s passion.莊凱硯的熱情

Kai-Yan’s showcase poster remains an important record of the project. On his own initiative, he also edited a two-minute promotional film that helped us present the project more fully.凱硯設計的成果展海報成為回顧專案的重要紀錄。他更主動剪輯了一支兩分鐘的宣傳影片,讓團隊能更完整地向外界介紹這項專案。

榕易迷路 exhibition poster — A1 vertical print with the game title at the top, a ghost-face central illustration, six phone-frame UI screenshots, six testing photos, and QR codes for video and APK download.
「榕易迷路」 · NCKU XTDesign year-end showcase, 2023「榕易迷路」 · 成大 XTDesign 年度成果展,2023
Promotional film · 2:14宣傳影片 · 2:14

See more of Kai-Yan’s work →看更多凱硯的作品 →

11 · Web port11 · 網頁移植

The 2026 browser remake.2026 年瀏覽器重製版

The 2023 Unity AR build needed real physical space, which put it out of reach for most people. In 2026 I rebuilt it for the browser with Three.js. The story and the way it plays stayed the same. Now you can meet the Banyan Garden maze and its ghost story without standing on the lawn.2023 年的 Unity AR 版本受限於實體空間要求,體驗門檻較高。我在 2026 年使用 Three.js 開發了瀏覽器版本,保留核心故事與玩法,讓更多人無須到場也能體驗榕園的迷宮怪談。

Open the web version →開啟網頁版 →

Mouse and keyboard only for now.目前僅支援鼠鍵控制。