Isometric Game 及譯法漫談

作者按：本文探討了 Isometric Game 相關的背景知識。為了避免讀者感覺枯燥（除了遊戲之外的有些概念確實枯燥），作者儘量採取“用圖說話”的方式，文字儘量簡短，圖解儘量簡明。而且，文字風格也儘量避免單純地說理分析，講求一些故事性。目的只有一個，吸引你把這篇不長不短的文章讀完。最後，本文還探討了 Isometric Game 的譯法，並給出了一些等軸測投影的應用示例。

1.神祕的 Isometric Game

Making Isometric Social Real-Time Games with HTML5, CSS3, and Javascript ^[注1]是專門討論 Isometric Game 開發的一本小冊子。很多人，特別是非專業人士看到 Isometric 這個詞，一般都會有點丈二和尚摸不著頭腦。實際上，儘管很多人曾經或正在沉迷於這種遊戲，但你要問他什麼是 Isometric Game？保證他腦袋搖得跟波浪鼓似的。

如果你告訴他，下面這些都是 Isometric Game，你猜他會有什麼反應？

enter image description here

哈哈～我知道，他的反應跟你的反應一樣……唉，看來我們得從“機械製圖”談起啦（因為我是在學《機械製圖》這門課時才第一次接觸 isometric 這個詞兒；而這事兒我也是最近才知道的——畢竟，當時的課本只談到“等軸測投影法”）。

2.機械製圖

學過機械製圖的同學，對等軸測投影（isometric projection）這個概念應該多少還有點印象。實際上，Isometric Game 中的 isometric，指的正是機械製圖中，以等軸測投影法在投影平面上繪製三維物體平面圖的一種測繪方法。

什麼？你從來都沒有聽說過機械製圖？……好吧，你聽說過“天宮一號”吧，在電視直播裡見過“神舟八號”與“天宮一號”對接的場景嗎（參考下圖）——別告訴我沒見過，那可是上個月的事兒！

enter image description here

萬一你看轉播的時候沒注意聽呢，現在“重播”一個細節——中國載人航天工程女發言人武平表示：

對接裝置中的幾百個感測器、幾千個齒輪和幾萬個元件，都是……由中國自主開發和製造的。

好的，我的問題是：如果讓你負責設計其中一個齒輪，你怎麼把自己的想法告訴負責製造的工程師？

沒錯，你得畫出個模型圖來。我不知道你會怎麼畫這個齒輪，但我們受過專業訓練的人，當初都過一門《機械製圖》課，畫過很多裝置和零件圖。下面這段話能幫你理解學這門課有什麼用，它摘自某《機械製圖》課程的課本：

機械製圖是用圖樣確切表示機械的結構形狀、尺寸大小、工作原理和技術要求的學科。在現代工業中，無論是機器、儀器、化工裝置，還是工程建築物的設計、製造、研究和施工都離不開圖樣。設計者通過圖樣表達設計物件，製造者通過圖樣來了解設計要求和製造設計物件。

沒錯，機械製圖其實是工程師們溝通設計思路必須掌握的一門最直觀的“語言”。而“天宮一號”的設計師們無疑個個精通這門語言。

當然，本文無意講解機械製圖，只想告訴你一個基本的概念（唉，誰讓我當初學《機械製圖》時得了優呢！）。下面就是“天宮一號”對接裝置中一個關鍵零件的圖樣（開個玩笑，實際上這是從“機械製圖網”上摘來的）：

enter image description here

圖中上面有3幅圖，分別是這個零件的俯檢視、側檢視和正檢視（視零件的複雜程度，有時候還要畫仰檢視和後檢視——怎麼樣，專業吧？）。你一定在想：下面那兩個零件示意圖看起來更形象啊！沒錯，下面這段話（摘自“互動百科”）可以解釋清楚這張圖：

工程上一般採用正投影法繪製物體的投影圖，即多面正投影圖，它能完整、準確地反映物體的形狀和大小，且質量性好，作圖簡單，但立體感不強，只有具備一定讀圖能力的人才看得懂。有時工程上還需採用一種立體感較強的圖來表達物體，即軸測圖。軸測圖是用軸測投影的方法畫出來的富有立體感的圖形，他接近人們的視覺習慣，但不能確切地反映物體真實的形狀和大小，並且作圖較正投影複雜，因而在生產中它作為輔助圖樣，用來幫助人們讀懂正投影檢視。

真有意思呀，還想接著瞭解？沒了。關於機械製圖只能講這麼多了，篇幅有限，我們得加快進度。上面引用的這段話提到了一個“輔助圖樣”（英文是 pictorial），也就是你覺得“更形象”而實際上是更有“立體感”的那兩幅圖，它們與我們今天要討論的 Isometric Game 可是有莫大的關係——都是（或基於）軸測圖。

3.投影基礎

如前所述，軸測圖就是用軸測投影的方法畫出來的有立體感的圖。那什麼是軸測投影呢？這個概念要從投影說起。噢，不行，得從光源說起——咳，不管是投影，還是光源，其實都是一碼事兒，只是角度不同。就從投影說起吧。

為了把三維世界的物體呈現在二維平面上，有兩種基本的投影方法：

透視投影（perspective projection）
平行投影（parallel projection）

（此圖摘自Projections and Viewing Transformations，推薦至少瀏覽一下其中的圖。）

簡單地說，前者假設光來自一個點，而後者假設光線是平行的。這就不用多說了，大家都知道。我們只關注平行投影。平行投影又可以簡單地分成兩種情況：

正投影（orthographic projection）
軸測投影（axonometric projection）

enter image description here

正投影，顧名思義，就是光線與物體表面以及投影平面垂直，而且物體的其中兩個軸和某一個平面與投影平面平行。上一節中那個零件的俯檢視、側檢視和正檢視，就是用正投影法畫出來的。

軸測投影稍微複雜一點，即投影時，物體要圍繞它在3D空間中的一個或多個座標軸，相對於投影平面旋轉一定的角度。所謂“軸測”，意思就是“沿著軸來測量”，凡是與座標軸平行的線段，都可以沿軸向進行作圖和測量。

軸測投影下形成的物體影像，就好像從某個斜角觀察物體一樣，能讓人在一個畫面（投影平面）中看到物體的不止一個側面。在軸測投影中，繪製出來的物體的軸或平面與投影平面並不是平行關係。剛才說了，上一節中那個零件圖中的“輔助圖樣”就是按照軸測投影畫出來的。

4.軸測投影

軸測投影可以分為以下三種基本的情況：

等軸測投影（isometric projection）；
正二測投影（兩等角投影，dimetirc projection）；
正三測投影（trimetric projection）。

等軸測投影，即按照透視法縮短的三個座標軸的縮放係數是相等的，而且任意兩個座標軸之間的角度都是120度。

enter image description here

正二測投影（兩等角投影），即物體座標軸中有兩個座標軸與投影平面的角度相等（或座標軸構成的三個角中有兩個角相等）。

enter image description here

正三測投影，即物體座標軸與投影平面的角度各不相同（或座標軸構成的三個角的角度各不相等）。

enter image description here

好了，從機械製圖到投影基礎再到軸測投影，圖文並茂、繪聲繪色地介紹了這麼半天，你明白了嗎？——反正我明白了。（如果真沒有看明白，也沒有關係——因為這些背景知識都不是最重要的——最重要的是不能錯過最後一個概念“Isometric Game”。）

5.Isometric Game

前面，我們簡單介紹了把3D影像轉換成2D影像必備的一些知識。無論你是否真正理解，現在我們真正要討論的主角上場了——Isometric Game。

怎麼樣，心有靈犀了吧——不然前面給出那麼多背景知識就白瞎了。沒錯，你猜著了。

Isometric Game，就是基於等軸測投影原理，把所有遊戲介面元素沿座標軸旋轉一定角度製作並繪製到平面（螢幕）上，讓玩家能夠看到物體的多個側面，從而產成3D效果的一種遊戲。業內人士常常也把這種遊戲稱為“斜45度視角（或3/4視角）”、“2.5D”或“偽3D”遊戲。

有讀者可能會問：既然如此，為什麼不乾脆把 Isometric Game 翻譯“等軸檢視遊戲”？這裡還有點小糾結，請恕我在下一節再解釋。我們暫時還只說 Isometric Game。

不管你是否真正玩過 Isometric Game，只要看一看本文第一幅插圖，就很容易會發現這些遊戲的畫面都是由眾多“菱形”的等軸測檢視構成的：《城市農場》中的街區、《微城市》中的菜地、《QQ餐廳》中的地磚……當然，要說谷歌地圖你肯定知道，因為基於Ajax的幾乎所有網頁地圖都是由無數個地圖切片（tile）這麼無縫地拼接而成的。而在 Isometric Game 中，只不過遊戲畫面的切片都變成了菱形，而不是正方形。

沒看出菱形來？……嗯，好吧，上圖：

enter image description here

這幅圖來自 Making Isometric Social Real-Time Games with HTML5, CSS3, and Javascript 中討論的一個類似“經營城市”的遊戲示例。上半部分是生成遊戲介面所需的精靈圖（sprite sheet），下半部分是遊戲的介面（注意飄浮的白雲）。

世界上第一款 Isometric Game

世嘉在1982年釋出的《Zaxxon》是一款駕駛飛船攻擊敵人的遊戲。《Zaxxon》最大的特色就是第一次利用了軸測投影（axonometric projection）——就是後來所說的等軸測投影（isometric projection）。事實上，這款遊戲的名字就借用了軸測投影的名字（AXONometric projection 中的 AXXON）。除了是世界上第一款使用等軸測檢視的遊戲，它也是世界上第一款顯示陰影的遊戲，還是第一次通過電視打廣告的電子遊戲。

怎麼樣，是菱形吧。提到菱形，你一定會想到英文裡怎麼稱呼它呢——diamond？這個主意倒不錯，可惜的是它在英文裡有另一個奇怪的名字：Tile。我聽見了，你在心裡不由自主地問：介是為啥泥？

6.貼瓷磚

回答這個問題並不難。你在裝修房子的時候見過貼瓷磚嗎？事實上，tile這個詞就是“瓷磚”的意思。

關於 Tile 的翻譯 雖然 tile 這個詞是“瓷磚”的意思，而且我也聽到遊戲業內的人這麼叫它（比如@大城小胖），但根據國家科技名詞委的解釋，tile在地理資訊系統中譯為“塊”。在遊戲開發中，這個詞我們一般翻譯成“切片”、“圖塊”。

enter image description here

對，看樣子瓷磚這個詞還是挺貼切的。因為 Isometric Game 的介面，主要就是用這些“瓷磚”一塊一塊拼起來的———當然啦，拼的時候不用人工加膠水，只要通過程式碼迴圈（至少是一個巢狀迴圈）呼叫一個叫做draw()的方法（或者其他類似不管什麼名字的方法），瞬間就能把所有景物、角色繪製到位。繪製的時候，每一塊“瓷磚”都要精確到畫素，貼到介面中不可見的一張大網格中。

說起來簡單，實際上這個“貼瓷磚”的任務，可是任何 Isometric Game 遊戲的核心所在。

想象一下，如果你在遊戲中開著一輛保時捷，正準備利用前面的彎道，突然加速從內圈切過去，一舉超過位居第一的選手。而正在你猛地加油時，遊戲突然“卡”了1秒鐘——介面突然停了一小下。就在這短短的1秒鐘之後，你發現自己駕駛的賽車已經衝出彎道，在賽道外側的草皮上打轉兒呢……好好好，我理解，非常理解你此時此刻的心情，因為前面9圈的完美表現就在這1秒鐘全都化為了泡影。我明白，可現實就是麼殘酷。不管事後你是摔手柄，還是砸鍵盤，或者扔滑鼠——估計你捨不得扔掉新買的30英寸IPS皮膚的液晶顯示器，但有一點可以肯定，遊戲的效能在此時決定了你的“使用者體驗”。

假設遊戲重新整理頻率每秒30幀，那就是大約每33毫秒就要重新貼一遍“瓷磚”，專業的叫法是“重繪”。每一次重繪，都要更新移動了的角色位置、旋轉了的場景角度，更新玩家的生命值和金幣數量。因為即使1秒鐘內介面上沒有任何變化，也要重繪30次，這就會帶來效能上的損失（也是計算機資源的浪費）。為了提高遊戲效能，開發人員已經想了很多辦法，比如通過改進演算法做到只重繪當前使用者可見區域（螢幕大小），而不是重繪整個世界地圖。對於一些螢幕上隨時可能會有物體移動的動態性更強的視訊遊戲而言，這種做法無可厚非。但在一些實時策略遊戲中，螢幕上的大多數物體一般都是靜態的，因此這樣做同樣不夠理想。

20世紀90年代，約翰•卡馬克（John Carmack）在id Software公司開發過一款遊戲叫《指揮官基恩》（Commander Keen），這是面向PC平臺釋出的第一款滾動卷軸遊戲。當時，他也遇到了與上述類似的問題。為了解決這個問題，他發明了一種叫ATR（Adaptive Tile Refresh，切片適配更新）的技術，只重新繪製發生變化的區域。於是，遊戲效能就得以大幅提升。ATR至今仍然是開發 Isometric Game 的關鍵技術。

好了，不瞎白話了，來點實戰的。下面這張圖是盛大研究院研究員李正林老師 @flashlizi 友情提供的 Tile 精靈圖（鳴謝，而且這一節也是他提醒我補寫上的）：

enter image description here

這一組“熱氣騰騰”的 Tile 擺在眼前，你有什麼感想？我都忍不住了，想偷偷地暗示你：你用尺子量一量前兩塊 Tile，會發現它的寬高比是2:1——哎呀，我怎麼把這個祕密給公開啦！

7.祕密

既然都說了，乾脆告訴你吧：Isometric Game 其實並不是真正的等軸測投影（isometric projection），而是正二測投影（dimetirc projection）。先看以下兩段文字（摘自本文所討論的書的第2章）：

為什麼大多數遊戲開發人員都選擇以2:1的比例來顯示切片呢？這是由於光柵圖形的一個獨有的問題決定的，如果你懂得計算機顯示器的工作原理，就可以理解這個問題。顯示器，無論它是CRT、TFT/LCD、LED還是OLED的，都以類似我們遊戲中的網格顯示畫素，能夠非常完美地顯示垂直和水平的線條。然而，如果想要顯示一條角度介於0°和90°之間的線，麻煩就來了。下圖展示了這個問題。

（圖注：繪製某個角度（如30°）的直線會產生缺口）

雖然90°、45°和0°的直線都能呈現正規的圖樣，而且兩條平行線能夠“嚴絲合縫”，但30°的直線就不行——兩條線中間有缺口。但是，如果我們使用2:1的寬高比，換算成角度就是1/2的反正切（arctan）等於26.5650°，能得到如下圖所示的結果。

（圖注：繪製角度為26.5650°的直線能得到整潔的結果）

簡單地說，如果是等軸測投影——三個軸兩兩之間的夾角都為120°——的話，那麼就要按照30°角來繪製菱形，可這樣會導致畫素線條出現缺口。而繪製角度為26.5650°的直線恰好沒有瑕疵，但此時三個軸之間的角度分別為：116.565°、116.565°、126.87°。根據前面“軸測投影”一節中的介紹，兩個角相等那就是正二測投影（兩等角投影）了。

或許大家先入為主地認為正二測投影可以看成等軸投影的一個變體，或許是因為等軸測投影的應用最為廣泛（本文最後還會給出另外一些等軸測投影的應用示例），遊戲業內仍然把在2:1的菱形切片基礎上構建的遊戲稱為 Isomentric Game。從下面這幅電視機的畫素藝術圖可以看出近似等軸檢視與真正等軸檢視的差別：

enter image description here

（前兩段中的資料及圖片來自維基百科。）

等軸投影與等軸繪圖

實際上，把近似等軸投影說成等軸投影的情況還不止於此。等軸投影（isometric projection）與等軸繪圖（isometric drawing）也是兩個容易混淆的概念。對於真正的等軸投影，物體圖樣在每個軸上的長度是其實際長度的 0.816 倍。而等軸繪圖則是根據等軸投影原理，按物體每個軸實際長度1:1比例繪製的圖樣。因此，對於同一個三維物體，等軸繪圖結果是等軸投影結果的1.224倍。（參見這裡。）

8.關於術語的討論

知道了 Isometric Game 背後這麼多的故事，接下來該聊一聊 Isometric 怎麼翻譯了（事實上，這才我寫這篇文章的最終目的——悲劇呀）。

昨天晚上睡覺前，在廁所“釋放一天的壓力”，同時用 iPad 看最後幾眼微博。發現遊戲開發專家 @大城小胖轉發雲帆軟體創始人、六安論壇CTO @雲帆Yvan 的平安夜問候“平安夜你們在幹嗎？”，小胖答曰：

晚上在想辦法改良和優化很久以前寫的isometric地圖模組……

前面好像說過吧， Making Isometric Social Real-Time Games with HTML5, CSS3, and Javascript 是專門討論 Isometric Game 開發的一本小冊子，是我翻譯的（那你怎麼翻譯 Isometric 的？別急，稍後我一定說）。看小胖正在優化isometric地圖模組，於是就忍不住問了一句：

小胖，isometric 你覺得“等軸”、“等角”哪個貼切，或者還有別的叫法？

今天一早，看到小胖回覆並@我說：

我看到的說法都是“等視距”

isometric我覺得叫“等視距”蠻貼切的，因為它是一種“雖然有立體感，但沒有近大遠小的透視效果” 的畫面，等視距可以很好的描述這個特點

當時我想，也是那麼回事兒。結果，就轉發並評論：

的確是那樣

這次轉發引來圖靈的一位譯者 @ghawkgu 和杭州電子科技大學一位同學 @06wj 加入了討論。@ghawkgu 說:

我倒覺得不太貼切，“視距”有visual range的意思，比如“超視距空戰”，而投影幾何中的“等軸測”基本大家都能明白，就算不明白，字典也能查到。創造一個新名詞反而容易產生歧義。另外，日語裡面是叫“等角”的。

@06wj 似乎是從座標軸的角度也跟小胖討論了幾個回合。

下面摘錄小胖給上述兩位的回覆：

等軸和等角的問題是在iso地圖裡，你很難向人解釋清楚明明y軸是x軸的一半，為什麼還要叫等軸？左右角和上下角明明不等，為什麼叫等角？為了解釋清楚，你必須費勁口舌拿出各種幾何概念。//@ghawkgu:好吧，作為小眾，我保留意見。

另外有時候“簡單易懂”比“科學嚴謹”更重要。這也是為什麼“斜45度視角”和2.5d這種極其錯誤的說法反而流傳最廣。建議@李鬆峰老師不管怎麼翻譯，都要在括號裡保留英文並註明“俗稱的斜45度視角或2.5d”//@ghawkgu:作為小眾，我保留意見。

回覆 @06wj:等視角也比等角好。因為如果不引入視這個字，很容易讓人誤解為是地圖上的某些角相等，而不是地圖的點到人眼睛（視點）的角度都相等，等距的問題也是如此，這也是我推崇等視距的原因。 //@06wj:等角地圖的說法比較常見吧 //@大城小胖:等視距不是新詞且已被大眾接受

小胖的確很有實踐力，他主要擔心“等軸”、“等角”會引起人們誤解。實際上，正如前面介紹過的，“等軸”指物體在三維空間中的座標軸的縮放係數相等，而“等角”指三個座標軸之間的夾角相等（120°）。

事實上，我在書裡的翻譯就是簡單的“等軸遊戲”，“等軸”來自“等軸測投影”。如果沿用這種思路，或許“等軸測遊戲”更準確一些，不過更準確似乎還是“等軸測檢視遊戲”（或“等軸檢視遊戲”），而這作為術語又長了點。所以就選用了“等軸遊戲”，因為簡單、好說。

從早上起床到現在（21：55），除了吃飯和翻譯了1000多字的書，就一直在查資料、做圖、寫作和重新組織這篇文章，差不多坐在電腦前12個小時了。儘管查閱資料和寫作過程中，不時對照“等軸遊戲”這種叫法，並沒有覺得不好理解——特別在真正理解了等軸測投影之後，但還是要跟小胖及其他遊戲方面的專家商榷，希望最終有一個更能被業界廣為接受的方案。