canonical_url: https://bebechien.github.io/cozy-corner-future/posts/how-we-built-aiventure/
cover_image: https://bebechien.github.io/cozy-corner-future/images/how-we-built-aiventure.png
description: ''
published: true
tags:
- GameDev
- Gemini
- Gemma
-
AI
title: 我們如何打造 AIventure，一款 AI 驅動的復古地城遊戲先來吃一片清爽冰涼的西瓜吧（畢竟現在是東京的夏天，而我超愛西瓜！），然後讓我告訴你一個故事：我們這個小團隊，是如何把一個瘋狂的點子，變成一個活生生、會呼吸的網頁遊戲。
如果你這幾年有關注 Google I/O，可能會記得 Adventure——這是疫情期間支撐 Google 重要活動的虛擬會議技術。它規模龐大、插畫精美，也很適合協作。但它同時也很笨重、是一次性的，而且需要一大群真人主持人。
https://www.youtube.com/watch?v=hMjtFRqaTsI
幾個月前，我和 Tom 開始問自己一個問題：如果我們重新想像 Adventure 會怎樣？ 不再是一場一次性的會議，而是打造一個溫暖、復古、持久存在的世界，讓開發者不是透過枯燥的文件，而是透過 「vibe coding」 和遊戲玩法來學習生成式 AI 的原理？
這就是 AIventure 的靈感起點。以下就是我們實際把它做出來的故事。
第 1 步：在 Gemini Canvas 裡塗鴉與原型製作
每款好遊戲都從原型開始。對 AIventure 來說，我們並不是先寫複雜的引擎程式碼，而是先在 Gemini 裡玩各種概念。
我們知道自己想要一個分割式 UI 版面：用高品質的前端框架（Angular）來管理 UI 面板與版面配置，再包覆一個由 Phaser.js 驅動的復古畫布，作為實際的遊戲引擎。這和我們之前為 I/O 示範做的「Living Canvas」是同樣的做法。
一開始，我們先用各種風格做出一個簡單的教育型解謎遊戲。最後我們選定了俯視角復古地城的方向，因為這最符合我們想要的那種「氛圍」。就在這個時候，Tom 提出了很棒的點子：復活他先前專案「Adventure」的精神與美學，讓整個世界擁有更一致的身份感。
Gemini Canvas 中的初始原型截圖：Gemini Canvas
第 2 步：設計房間（Vibe Coding 與 Agentic Robots）
當我們確認基礎邏輯可行後，Tom 和我開始腦力激盪更進階的解謎機制。我們不希望 AI 只是扮演開鎖與解鎖的角色；我們更想展示現代 LLM 之所以迷人的原因。
這帶來了我們最喜歡的兩個設計：
- Vibe Coding 房間： 我們想讓玩家認識 AI 輔助 UI 設計的概念。在這個房間裡，遊戲會開啟一個 iFrame 分頁。玩家輸入像是 「幫雞做一個待辦事項 app，而且只有吃飯跟睡覺按鈕」 之類的提示詞。AI 會即時建立一個網頁，而玩家可以立刻在遊戲環境中看到自己的程式碼與更新結果。
- Agent Puzzle： 我們加入了一個小機器人 NPC 角色，它可以接收自然語言指令，並在 Phaser 格狀世界中執行。當玩家說出 「去把開關打開」 之類的指令時，模型會透過工具呼叫與推理，把指令拆解成具體、逐步的遊戲動作。
第 3 步：從 Gemini 走向 Gemma
在最初的開發與測試階段，我們依賴雲端端點——特別是透過 Gemini API 將提示詞請求送到 Gemini 模型，來處理玩家指令與程式碼生成。這套流程運作得非常順利，但我們想進一步挑戰現代網頁應用程式能做到的極限。我們希望這款遊戲能完全自包含，並且容易存取。
這時就輪到 Gemma 4 登場了。
我們開始使用 Gemma 4 模型測試這些謎題。我們嘗試了不同大小的模型（E2B 和 E4B）以及不同框架，包括 Ollama、LM Studio、Transformers 和 Vertex AI，並追蹤模型在函式呼叫與 Agentic 工作流程上的表現。
第 4 步：透過 MediaPipe 將一切帶進瀏覽器
最後一塊拼圖是部署。我們要怎麼在 Google Developers 網站上，把這款 AI 驅動的遊戲分享給數百萬名開發者，卻不用他們設定雲端後端架構或輸入私人 API 金鑰？
答案就在於：把模型 本機執行，直接跑在使用者的瀏覽器裡。
我們使用 MediaPipe 與 LiteRT 團隊提供的預先轉換格式，直接從網站介面託管並提供模型散發。透過用戶端網頁技術，整個體驗都會在你的機器上本地執行。當玩家對 NPC 下提示詞或在遊戲中撰寫程式碼時，推論完全在用戶端完成。前端會透過一個簡單的 Event Bus，直接把請求路由到瀏覽器載入的模型。
對於在家研究原始碼的開發者，我們也做了切換設定，讓你可以很輕鬆地把同一個遊戲迴圈指向本地架設的 LM Studio 端點，或是 Vertex AI！
還有一件事……
除了目前的謎題之外，我們也正在探索 Gemma 的多模態能力。雖然這項工作目前還在進行中，但你可以自行複製我們的 GitHub 儲存庫來體驗。
接下來你會創造什麼？
打造 AIventure 的旅程，是在連接傳統遊戲設計與現代用戶端 AI。看到一款復古遊戲，能與本地開放式 LLM 對話，並在地城謎題中進行 vibe coding，對我們來說依然像魔法一樣。
我們已經發布了這個 Demo，途中還包含可解鎖的開發者檔案徽章。如果你想查看解答、檢視完整架構，或深入了解我們的提示詞，可以直接前往官方頁面：
拿起你的劍，打開主控台，祝你開發愉快！🍉🎮
原文出處：https://dev.to/googleai/how-we-built-aiventure-an-ai-powered-retro-dungeon-2f54
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
