AI 等角遊戲製作器 — 在瀏覽器中打造可漫步的 2.5D 世界
打造你自己的 AI 等角遊戲製作器
描述一個等角世界，立刻遊玩 — 菱形網格、深度排序與點擊移動，全都在瀏覽器中。無需程式碼、無需匯出。免費。
AI 等角遊戲製作器會接收一段文字場景描述，並回傳一個可遊玩的 2.5D 世界：菱形圖塊網格、鎖定在 45 度偏航角的攝影機、由後往前排序的道具，以及一個你能用點擊派往任何地方的角色。Neta Studio 在瀏覽器中完成這一切。你輸入句子，組合器便會在網格上放置地形與道具，而你按下「遊玩」。無需安裝引擎、沒有匯出步驟、沒有建置流程。
那些通常會吃掉一整個週末的部分，都已經接好了：2:1 投影、深度排序，以及點擊移動背後由螢幕到圖塊的反向轉換。你真正掌控的是版面配置、圖塊集、角色、移動規則，以及攝影機能移動到多遠。
一句話 → 一個等角世界
組合器是第一個畫面。一個文字欄位、以圖塊為單位的地圖尺寸，以及圖塊尺寸。你像對關卡設計師描述那樣描述場景，生成，然後帶著一個已經組裝好的菱形網格世界進入編輯器。預設是 64 × 64 個圖塊、每個圖塊 64 × 32 像素，這會在一個正交攝影機內放入滿螢幕的世界，無須縮放。
回傳的是四個圖層。地面為每個圖塊儲存一個地形編號，並合併成單一網格，而不是每個圖塊一個網格。道具位於已登錄的占地範圍上：1×1 的木桶、3×3 的房屋、2×4 且必須緊鄰水岸的碼頭。實體與道具分開保存，因為它們會移動，需要尋路資料。光照與霧位於最上層，且不影響排序順序。
攝影機設定為 45 度偏航角，以及一個與 2:1 菱形完全吻合的俯仰角，也就是 atan(0.5)，約 26.57 度，而不是大多數教學所說的 30 度。投影是正交的，因此沒有透視除法，地圖遠端邊緣的圖塊與近端邊緣的圖塊像素大小相同。在你按下「遊玩」之前，深度排序就已經啟動。
組合器替你決定的事
它會挑選地形分布、每個生物群落的道具密度，以及一組維持在單一圖集內的調色盤。更重要的是，它會登錄占地範圍，這正是日後維持遮蔽正確的關鍵。如果你要求一座港鎮，你會得到碼頭、木箱與水岸，但除非你明講，它不會知道碼頭必須緊鄰水域。
你仍需親手放置的部分
用筆刷重繪地形、從素材庫拖曳道具，並設定出生點。任何帶有規則的東西，例如必須橫跨河流的橋樑，都由你自己放置。組合器給你的是起始版面，而不是完成的關卡。
01
在組合器欄位中寫下場景描述。
02
設定地圖尺寸與圖塊尺寸。64×64 個圖塊、每塊 64×32 像素，是可行走地圖的預設值。
03
生成世界，並從固定等角攝影機觀看它。
04
重繪地形並移動道具。每個道具在放置時都會登錄它的占地範圍。
05
把角色放到一個可行走的圖塊上，然後按下「遊玩」來測試點擊移動。
菱形網格與深度排序，已為你處理好
一個等角圖塊是一個旋轉 45 度、並壓縮至一半高度的正方形。當 tileW = 64、tileH = 32 時，世界到螢幕的轉換是 sx = (x - y) × 32、sy = (x + y) × 16。這就是整個投影。它並不是真正的等角投影，而是約 26.57 度的二測投影，這正是為什麼 2:1 菱形會落在整數像素上，而真正的 30 度等角網格不會。選擇 2:1 比例，是因為它對兩軸做等量縮短，並讓每個精靈圖都只需為單一攝影機角度繪製。
在此投影下的深度順序就是畫家演算法：先繪製 tileX + tileY 較小的物件。這在兩個物件共用同一條對角線之前都成立。位於 (5, 3) 的柵欄與位於 (4, 4) 的角色都會產生鍵值 8。排序回傳哪個順序，哪個就繪製在上層；而如果排序不穩定，順序會在影格之間翻轉，這一對物件就會在接縫處閃爍。第二個破綻是高度。以中心為錨點的精靈圖會依其中間像素排序，因此一個 96 像素高的燈籠會繪製在站在它底座前方的角色之上。錨點應該位於精靈圖的底部中央，也就是物件所占據的那個圖塊上。
第三個破綻是尺寸。一棟以單一物件排序、鍵值為 20 的 3×3 建築，會繪製在位於 (9, 12)、鍵值為 21 的角色之上，即使那個角色是站在建築左側那一列的前方。引擎會讀取已登錄的占地範圍，並把任何大於 1×1 的東西切成逐列的條帶，因此角色會從某一列的前方經過、再從下一列的後方經過。這正是長牆不能是單一精靈圖的原因。
- 排序鍵主要鍵是 tileX + tileY。次要鍵是占地範圍邊緣，第三鍵是穩定的實體編號，因此相同的鍵永遠不會在影格之間對調。
- 占地範圍登錄每個道具在放置時都會宣告它的圖塊占地範圍。除非你允許，否則一個 2×2 的道具不會與 1×1 的路徑圖塊重疊。
- 逐列切分寬度超過一個圖塊的道具會被切成條帶，並逐條排序。多出幾次繪製呼叫，換來不會有走到後方的破圖。
- 錨點位於腳部精靈圖以底部中央為軸心。中心軸心會讓任何高於一個圖塊的東西破壞遮蔽。
- 合併地面地面圖塊會依地形編號合併或實例化。一張 4096 個圖塊的地圖，每種地形只要一次繪製呼叫，而不是 4096 次。
在真正的圖塊網格上點擊移動
這要從投影的反向運算開始。取得指標位置，減去攝影機原點與任何黑邊偏移，然後計算 tileX = (sx / 32 + sy / 16) / 2 與 tileY = (sy / 16 - sx / 32) / 2，再對兩者取整。如果第二項的正負號弄錯，角色就會走到菱形中心對面的鏡像圖塊。那就是你會花上一個下午的錯誤。
如果攝影機可以自由旋轉或移動，就不要快取那個反向運算。從攝影機穿過指標投射一條射線，與地平面相交，再用同樣的公式把世界命中點轉換成圖塊。射線投射版本只有幾行程式，且能安然度過每一次攝影機變動。
接著驗證。被點擊的圖塊可能帶有道具占地範圍、是水域、位於地圖之外，或無法抵達。把超出範圍的座標夾限回界內，檢查佔用網格，並以對角成本 1.414、且不得在兩個被阻擋的圖塊之間切角的方式，對 8 個相鄰格執行 A*。以每秒圖塊數而非每秒像素數移動，這樣當你改變圖塊尺寸時，速度才會保持不變。沿著一條平滑樣條曲線穿過圖塊中心，抵達半徑約 0.05 個圖塊，否則角色會在每個路徑點卡頓。
01
用反向轉換把指標轉成圖塊座標，或在攝影機旋轉時對地平面做射線投射。
02
夾限到地圖邊界，並查詢佔用網格中的道具、水域與被阻擋的地形。
03
從角色目前所在的圖塊到目標圖塊執行 A*。
04
以每秒圖塊數沿著路徑移動，使用平滑樣條曲線與一個小的抵達半徑。
05
在新的點擊時重新尋路，並取消舊路徑，而不是把兩者都排入佇列。
你能打造的等角類型
四種類型涵蓋了大多數等角專案，而它們的差異在於佔用規則與時間，而不是投影。城市建造遊戲建立在多重圖塊的占地範圍上，需要一套必須相連的道路網路，以及一個在放置前預覽占地範圍的建造模式。戰術遊戲是回合制，因此尋路會同時為多個單位執行，而範圍標示會直接繪製在菱形網格上。地牢探索遊戲使用小地圖與狹窄走廊，此時逐列牆面切分最為重要，因為攝影機從不移動。動作角色扮演遊戲是即時的，因此轉向、攻擊狀態與動畫混合，比尋路的優雅更為重要。
這四者完全相同的地方是：2:1 菱形、排序鍵、腳部錨點，以及點擊時的反向轉換。在專案中途切換類型，改變的是佔用規則與更新迴圈，而不是算繪器。
| 類型 | 改變的是什麼 | 維持不變的是什麼 |
|---|---|---|
| 城市建造 | 多重圖塊占地範圍、道路連通性、建造預覽與旋轉 | 菱形網格、排序鍵、點擊放置的反向轉換 |
| 戰術 | 回合佇列、範圍與視線覆疊、逐單位的路徑預覽 | 菱形網格、逐列切分、腳部錨點 |
| 地牢探索 | 小地圖、牆面列、霧與視線 | 2:1 投影、深度排序、圖塊到螢幕的公式 |
| 動作角色扮演 | 即時轉向、攻擊狀態、動畫混合 | 網格、佔用網格、以點擊移動作為觸控備援 |
立即遊玩 — 就在瀏覽器中
這裡的每個世界都在瀏覽器中執行，無需安裝、無需匯出。場景圖是 Three.js，算繪器是 WebGL2，並以 WebGL1 作為備援，而地圖會以合併的地面幾何加上實例化的道具載入。你按下「遊玩」，就開始走動。分享這個世界，別人就能在他們自己的機器上、以同樣的 45 度偏航角在其中走動。
在手機上，同樣的點擊路徑會透過指標事件執行，因此輕觸就是點擊。輕觸目標是圖塊，這表示對一個單一圖塊道具稍微不精準的輕觸，仍會判定到正確的圖塊。在寬度小於 32 個圖塊的地圖上，雙指縮放預設為關閉，因為 2:1 菱形在手機寬度下已經足夠清晰。如果影格率下降，先減少道具數量再減少地圖尺寸；實例化的幫助比刪除地形更大。
Mini World
Mini World 是小地圖的案例：一座精巧的菱形島嶼、少量道具、一個角色，點擊移動就能橫越整座島。這是觀察地面合併與逐圖塊排序行為最快的方式，因為你一次就能看見整張地圖，糟糕的排序鍵無所遁形。
The Cyclops' Island
The Cyclops' Island 是遮蔽真正重要的案例：高大的道具、牆面列，以及一個會走到它們後方的角色。當角色經過建築轉角時仔細觀察。前方的條帶會繪製在角色之上，後方的條帶會繪製在角色之下，而角色在任何時候都不會穿透牆面。
Agent Sprite Forge
Agent Sprite Forge 會產生為等角角度繪製的角色圖集，軸心已經位於底部中央，影格高度也與你的圖塊高度相符。把攝影機保持在預設偏航角，一張圖集就足夠。一旦啟用攝影機旋轉，你就需要每個偏航階段各一張圖集，因為為 45 度繪製的精靈圖在 90 度下看起來會不對。
走進它所屬的世界
精靈圖是一個無處可站的角色。最後一步是其他人都沒提供的那一步：把你剛做好的圖集放進一個有人能四處走動的世界 — 一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界，都是由一段文字描述製作而成，並發布為一個你能遊玩的頁面。
FAQ
我需要在這裡寫程式碼才能製作等角遊戲嗎？ +
不用。你描述世界、重繪圖塊、放置道具與角色，然後按下「遊玩」。只有在自訂規則時才會用到腳本，例如拉動拉桿時會崩塌的橋樑。
當兩個物件位於同一列時，深度排序如何處理？ +
主要鍵是 tileX + tileY，並以穩定的方式打破平手，因此相同的鍵永遠不會在影格之間對調。大於一個圖塊的道具會被切成逐列的條帶，因此角色可以從某一列的前方經過、再從下一列的後方經過。
我該用精靈圖角色還是 3D 網格？ +
兩者都能算繪，但行為不同。精靈圖成本低、能維持 2:1 的外觀，而且會鎖定在繪製時的偏航角。3D 網格會隨攝影機自由旋轉，且因為骨骼蒙皮與光照，每個角色的成本更高。
攝影機可以旋轉嗎？ +
可以，預設以 45 度的固定偏航階段旋轉。自由旋轉適用於 3D 道具，但會破壞精靈圖角色，因為它們需要每個偏航階段各一張圖集。排序鍵會依新的偏航角重新計算。
它在行動裝置上能用嗎？ +
可以。輕觸會判定為點擊，尋路與排序執行同一條程式路徑，而畫布會縮放至視埠。在較舊的手機上請把道具數量控制在適中，並先減少道具再減少地圖尺寸。
我可以把世界匯出到其他引擎嗎？ +
沒有匯出步驟。世界在瀏覽器中執行，並以連結分享。要在別處重建它，就意味著重新建立圖塊地圖，並重新匯出精靈圖集。
我該用多大的圖塊尺寸？ +
64 × 32 像素是預設值，在桌機與手機上都清晰易讀。對於想在螢幕上容納更多圖塊的大型策略地圖，可降到 32 × 16；若想製作道具細節豐富的地牢探索遊戲，則可提高到 128 × 64。無論你選哪個，點擊運算都使用 tileW/2 與 tileH/2，因此只需在一個地方修改。
返回 3D 遊戲建構器
全部 31 個完成的 3D 世界、遊戲和場景都在同一頁面上——每一個都能實際遊玩。