AI 等角遊戲產生器 — 在瀏覽器裡打造能走進去的 2.5D 世界
做出你自己的 AI 等角遊戲產生器
描述一個等角世界，馬上就能玩——菱形網格、深度排序、點擊移動，全部在瀏覽器裡跑。不用寫程式、不用匯出。免費。
AI 等角遊戲產生器吃進一段文字場景描述，還你一個能玩的 2.5D 世界：菱形圖磚網格、固定在 45 度偏航角的攝影機、由後往前排序的佈景物件，以及一個點一下就派去任何位置的角色。Neta Studio 直接在瀏覽器裡做這件事。你打完那句話，composer 把地形和佈景放上網格，你按下 Play。不用安裝引擎、不用匯出、也沒有建置流程。
平常會吃掉你一整個週末的那些部分，都已經接好了：2:1 投影、深度排序，還有點擊移動背後那套螢幕座標轉圖磚的反向變換。你真正能控制的是佈局、圖磚組、角色、移動規則，以及攝影機可以跑多遠。
一句話 → 一個等角世界
composer 是第一個畫面。一個文字欄位、以圖磚計的地圖尺寸、圖磚尺寸。你用對關卡設計師講話的方式描述場景，按下生成，然後直接進到編輯器，菱形網格世界已經組好在那裡。預設是 64 × 64 格圖磚、每格 64 × 32 像素，等於把一整個畫面的世界塞進一台正交攝影機裡，完全不需要縮放。
回來的是四層。Ground 每一格存一個地形 id，最後合併成單一網格，不是一格一個網格。Props 掛在已註冊的佔地上：1x1 的木桶、3x3 的房子、2x4 且必須碰到水邊的碼頭。Entities 跟 props 分開，因為它們會移動，需要尋路資料。Lighting 和 fog 疊在最上層，不影響排序。
相機設為 45 度 yaw，pitch 精確對上 2:1 菱形，也就是 atan(0.5)，約 26.57 度，不是大多數教學寫的 30 度。投影用正交，所以沒有透視除法，地圖最遠邊的一格和最近邊的一格佔一樣多的像素。還沒按 Play，深度排序就已經生效。
composer 會幫你決定什麼
它挑地形分佈、每個生物群系的 prop 密度，以及一套全在同一張圖集內的調色盤。更重要的是它會註冊佔地，這正是之後遮蔽能正確的關鍵。你寫港口小鎮，它會給你碼頭、木箱、水邊，但除非你明講，它不會知道碼頭必須碰到水。
你還是得自己放什麼
用筆刷重畫地形、從素材庫拖 prop、設定出生點。任何帶規則的東西，例如必須跨越河流的橋，都自己放。composer 給你的是起始佈局，不是完成品關卡。
01
在 composer 欄位寫下場景描述。
02
設定地圖大小與格子大小。可走動的地圖預設是 64x64 格、每格 64x32 像素。
03
生成世界，從固定的等角相機看它。
04
重畫地形、移動 prop。每個 prop 放下的當下就註冊它的佔地。
05
把角色丟到可走動的格子上，按 Play 測試點擊移動。
菱形網格與深度排序，幫你處理好
等角的一格，是把正方形轉 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) 的角色，算出來的 key 都是 8。排序回傳哪個先，哪個就畫在上面，而排序若不穩定，順序會逐帧翻轉，兩者在接縫處閃爍。第二個破口是高度。以中心為錨點的精靈圖用中間那個像素排序，所以 96 像素的燈籠會蓋過站在它底座前面的角色。錨點要放在精靈圖底部中央，也就是物件所在的那一格上。
第三個破口出在尺寸。把一棟 3x3 的建築當成單一物件、排序鍵設為 20，它就會蓋過位在 (9, 12)、排序鍵 21 的角色，即使那個角色明明站在建築左側那一列的前面。引擎讀取註冊的佔地範圍，並把任何大於 1x1 的東西切成逐列的條帶，所以角色會在這一列前面、下一列後面。長牆不能只用一張精靈，也是同一個原因。
- 排序鍵主鍵是 tileX + tileY。次鍵是佔地邊緣，第三鍵是穩定的實體 id，這樣排序鍵相同時，影格之間也不會互換。
- 佔地註冊每個佈景物件在放置時都要宣告自己的圖磚佔地。除非你刻意允許，否則 2x2 的佈景物件不會和 1x1 的路徑圖磚重疊。
- 逐列切分寬度超過一個圖磚的佈景物件會切成條帶，並以條帶為單位排序。代價是多幾次繪製呼叫，換來不會再發生角色被錯誤遮擋的穿幫。
- 錨點放在腳底精靈的軸心在底部中央。軸心放中心的話，只要高度超過一個圖磚，遮擋就會出錯。
- 合併地面地面圖磚會依地形 id 合併或實例化。一張 4096 格的地圖，每個地形只會有一次繪製呼叫，不是 4096 次。
在真正的圖磚格線上點擊移動
這要從投影的反函數開始。拿指標位置，減掉攝影機原點與任何黑邊偏移，算出 tileX = (sx / 32 + sy / 16) / 2 和 tileY = (sy / 16 - sx / 32) / 2，然後對兩者取 floor。第二項正負號弄錯，角色就會走到菱形中心另一側的鏡像圖磚。這個 bug 會讓你花掉一個下午。
如果攝影機能自由旋轉或移動，就不要快取那個反函數。從攝影機穿過指標投射一條射線，跟地面平面求交，再用同一組公式把世界座標命中點換算成圖磚。射線投射版本只有幾行，而且不管攝影機怎麼改都能用。
接著驗證。被點到的圖磚可能被佈景物件的佔地壓住、是水面、超出地圖，或根本走不到。把超出範圍的座標夾回範圍，檢查佔用網格，然後在 8 個鄰格上跑 A*，對角成本 1.414，而且兩個被阻擋的圖磚之間不能切角。移動速度用每秒幾格，不要用每秒幾像素，這樣改圖磚尺寸時速度才會維持一致。沿著平滑樣條曲線穿過圖磚中心，抵達半徑設大約 0.05 格，否則角色會在每個路徑點抖一下。
01
用反轉換把指標位置換算成圖磚座標；若是相機會旋轉的情況，就對地面平面做射線投射。
02
限制在地圖邊界內，並查詢佔用網格，取得道具、水域與不可通行地形。
03
從角色目前所在的圖磚到目標圖磚跑 A*。
04
沿路徑以每秒圖磚數移動，搭配平滑 spline 與一小段抵達半徑。
05
在新點擊發生時重新尋路，並取消舊路徑，而不是把兩條都排進佇列。
你可以做出的等角類型
四種類型涵蓋了大多數等角專案，它們的差別在於佔用規則與時間處理，不在投影方式。城市建造遊戲靠的是多圖磚佔地、必須連通的道路網路，以及放置前先預覽佔地的建造模式。戰棋是回合制，所以尋路會同時對多個單位執行，範圍高亮直接畫在菱形網格上。地城探索用小地圖與狹窄走廊，這裡逐欄的牆面切片最關鍵，因為相機不會移動。動作 RPG 是即時的，所以轉向、攻擊狀態與動畫混合比尋路是否優雅更重要。
這四者始終不變的部分：2:1 菱形、排序鍵、腳底錨點，以及點擊時的反轉換。專案中途換類型，改變的是佔用規則與更新迴圈，不是渲染器。
| 類型 | 會變的部分 | 不變的部分 |
|---|---|---|
| 城市建造 | 多圖磚佔地、道路連通性、建造預覽與旋轉 | 菱形網格、排序鍵、點擊放置的反轉換 |
| 戰棋 | 回合佇列、射程與視線疊層、各單位的路徑預覽 | 菱形網格、逐欄切片、腳底錨點 |
| 地城探索 | 小地圖、牆柱、迷霧與視線 | 2:1 投影、深度排序、磚格換算螢幕座標的公式 |
| 動作 RPG | 即時轉向、攻擊狀態、動畫混合 | 網格、佔用網格、以點擊移動作為觸控的備援 |
現在就能玩 — 在瀏覽器裡
這裡每個世界都直接在瀏覽器裡跑，不用安裝，也不用匯出。場景圖是 Three.js，渲染器是 WebGL2，並保留 WebGL1 的退路；地圖載入時是合併過的地面幾何，加上實例化的道具。按下 Play，你人就在裡面走了。把世界分享出去，別人會在自己的機器上走進同一個世界，偏航角一樣是 45 度。
手機上同一條點擊路徑走的是 pointer events，所以點一下就是一次點擊。點擊目標是磚格，意思是你點在 1 格的物件上稍微偏了一點，還是會落在正確的磚格。寬度不到 32 格的地圖預設關掉雙指縮放，因為 2:1 菱形在手機寬度下本來就看得清楚。如果影格率掉下來，先減道具數量，不要先砍地圖大小；實例化的幫助比刪地形大。
Mini World
Mini World 是小地圖的那個案例：一座緊實的菱形小島、幾個道具、一個角色，用點擊移動走遍全圖。要看地面合併和逐磚排序實際怎麼跑，這是最快的方式，因為整張地圖一眼看完，排序鍵寫壞也沒地方躲。
The Cyclops' Island
The Cyclops' Island 正是遮蔽真正有用的案例：高大的道具、牆柱，還有一個會走到它們後面的角色。盯著建築的轉角，看角色經過。前面的條帶畫在角色之上，後面的條帶畫在角色之下，角色任何一刻都不會穿牆冒出來。
Agent Sprite Forge
Agent Sprite Forge 產生的角色精靈表是照等角視角畫的，軸心已經落在底部中央，影格高度也對齊你的圖磚高度。相機維持在預設偏航角，一張精靈表就夠。一旦開啟相機旋轉，每個偏航角級距都要各自一張精靈表，因為照 45 度畫的精靈，轉到 90 度看就是錯的。
走進它所屬的那個世界
精靈是沒有地方站的角色。最後這一步是別人沒給的：把你剛做好的精靈表放進一個有人能走進去逛的世界——一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界，都是從一段文字描述做出來，再發佈成一個能玩的頁面。
常見問題
在這裡做等角遊戲需要寫程式嗎？+
不用。你描述世界、重畫圖磚、擺道具和角色，然後按 Play。只有在自訂規則時才會碰到腳本，例如拉下拉桿後橋會崩塌。
兩個物件佔同一列時，深度排序怎麼處理？+
主鍵是 tileX + tileY，再加上穩定的決勝條件，讓鍵值相等時不會在影格之間互換。大於一格的道具會切成逐列的條帶，所以角色可以走過某一列的前面、下一列的後面。
角色該用精靈還是 3D 網格？+
兩者都畫得出來，但行為不同。精靈便宜、能維持 2:1 的比例感，而且被鎖在繪製時的偏航角。3D 網格會跟著相機自由旋轉，但因為要算蒙皮和光照，每個角色的成本更高。
相機可以旋轉嗎？+
可以，預設以 45 度為一個固定偏航級距。自由旋轉配 3D 道具沒問題，但會弄壞精靈角色，因為每個偏航級距都需要各自一張精靈表。排序鍵會依新的偏航角重新計算。
手機上能跑嗎？+
可以。點觸會當成點擊來判定，尋路和排序走的是同一條程式路徑，畫布也會跟著視窗縮放。舊手機上把物件數量控制在適中就好，要取捨的話先減物件，別先縮地圖。
可以把世界匯出到別的引擎嗎？ +
沒有匯出這一步。世界直接在瀏覽器裡跑，用一條連結分享出去。要在別的地方重做，就是把圖磚地圖重建一次，再把精靈表重新匯出。
圖磚尺寸該用多大？ +
預設是 64 x 32 像素，桌機和手機上都看得清楚。大型策略地圖想在同一畫面塞進更多圖磚，就降到 32 x 16；要做細節多的地城探索，就改用 128 x 64。不管選哪個，點擊的計算都用 tileW/2 和 tileH/2，所以只要改一個地方。
回到 3D Game Builder
31 個完成的 3D 世界、遊戲和場景全放在同一頁——每一個都能實際玩。