Isometric Game 及譯法漫談

原文地址：點擊開啟連結

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

神秘的 Isometirc Game

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

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

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

機械製圖

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

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

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

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

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

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

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

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

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

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

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

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

投影基礎

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

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

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

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

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

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

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

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

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

軸測投影

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

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

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

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

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

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

Isometric Game

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

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

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

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

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

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

這幅圖來自 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）。除了是世界上第一款使用等軸測視圖的遊戲，它也是世界上第一款顯示陰影的遊戲，還是第一次通過電視打廣告的電子遊戲。

怎麼樣，是菱形吧。假如你用尺子量過構成草皮的菱形塊，還會發現它的寬高比是2:1——哎呀，穿幫了，漏餡了，說走了嘴啦，這是個秘密啊！

秘密

既然都說了，乾脆告訴你吧：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。從下面這幅電視機的像素藝術圖可以看出近似等軸視圖與真正等軸視圖的差別：

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

等軸投影與等軸繪圖

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

關於術語的討論

知道了 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個小時了。儘管查閱資料和寫作過程中，不時對照“等軸遊戲”這種叫法，並沒有覺得不好理解——特別在真正理解了等軸測投影之後，但還是要跟小胖及其他遊戲方面的專家商榷，希望最終有一個更能被業界廣為接受的方案。

擴充

雖然 Isometric Game 到底該如何翻譯的問題沒有徹底解決，但這篇文章已經快結尾了。為兌現前面的承諾，最後本文再給出另外一些等軸測投影的應用樣本，其實也是查閱資料的額外收穫。

• 明朝（15世紀）《三國演義》繪本中的插圖（看地磚 :)）
  

• 1822年英國光學研磨機（Optical-grinding engine）模型（按30度等軸測投影繪製）
  

• 等軸測投影的局限性：圖中紅、藍兩個球，只看局部，看不出高低不一樣來
  

• 彭羅斯階梯，在此階梯上永遠無法找到最高的一點或者最低的一點

還有，比如《清明上河圖》等，看這篇文章
Axonometric projections。（本文完）

其他參考來源：

• “互動百科-軸測圖”
• “互動百科-機械製圖”
• Wikepeida-Isometric_projection
• Wikepeida-Zaxxon
• Wikepeida-Historyofcomputer_games

[注1] 本書是O'Reilly公司“Real Time”系列的一本小冊子，將與另一本小冊子 HTML5 Geolocation 合二為一，作為《深入HTML5應用開發（上）》出版。