如何理解游戲：圖片是怎么畫到屏幕上的

簡體傳統

　　文/ 林博昱　授權GameRes游資網發布。林博昱，游戲制作人，大約三四年的從業經驗。兩年前牽頭成立了一個創業團隊，致力于休閑游戲的開發。

　　喜歡玩游戲的人很多，但游戲作為一門復雜的藝術形式，它的生產原理并不被廣大玩家們所理解；而游戲開發團隊里的設計、美術、運營等非技術類的從業者，很多時候也會對游戲開發的原理產生疑問。

　　我常常為上述第二件事感到苦惱，因為這是一個看似正常實則對游戲最終品質有很大影響的狀況。為了解決這個苦惱，我給這些非技術類的同事們講了幾節課，試圖用比較淺顯的語言和更加具象化的表述來講述技術上的來龍去脈。積累了一段時間后，就有了這個系列的幾篇短文。每篇短文針對游戲開發中的某個特定主題，做一個淺顯的介紹。

如何理解游戲：圖片是怎么畫到屏幕上的 ...

　　在之前談游戲和動畫有什么不同的中，提到過這么一個說法：游戲的狀態決定了游戲的畫面，這篇文章將繼續討論一下「具體怎么畫」這個事情。

　　我們知道iPhone5的分辨率是1136x640，如果把顯示屏上的每個像素都想象成一個格子，那么整個顯示屏就像是一個巨大的圍棋盤。棋盤上的每一個格子都有自己的顏色。

　　什么是顏色呢？人類眼睛的視網膜上有許許多多的視錐細胞，這些視錐細胞可以分成三類，分別對紅、綠、藍三種顏色的光分外敏感。當一抹紅色的光射到視網膜上時，對紅色光敏感的這些細胞會被刺激到，并向大腦傳遞紅色信號。這意味著，不管我們看到什么顏色的光，我們的大腦只知道紅色光有多少，綠色光有多少，藍色光有多少。因此我們就用三個數字來表示一種顏色：R表示這個顏色有多紅、G表示它有多綠、B表示它有多藍。例如（1, 0,0）表示純正的紅色，（1,1,0）表示紅綠各半的顏色，也就是黃色，（0.5, 0.5, 0）表示比較暗的黃色。棋盤上每個格子都有自己的顏色，就是說每個格子都有自己的三個數字。（剛才在搜索資料的時候...

　　ok，現在假設你正在開發《涂鴉跳躍》這個游戲。你在PhotoShop里把那個綠色的主角畫出來后，你就得到一個圖片文件叫「主角.png」。這是一張100x100的圖片。跟剛才一樣，我們把這張圖片想象成一個棋盤，棋盤上每個格子同樣也有自己的顏色。如果你用取色器去點主角身上的某個格子，你可以看見這個格子的顏色是（0,1,0）。

　　游戲運行的時候，它會不斷改變主角的參數，如果某一幀它計算出主角的當前位置是（10,20），那么它該怎么把「主角.png」畫到這個位置上呢？

　　首先，從iPhone屏幕左下角開始，往右數10格，再往上數20格，找到目標格子；然后，用一個釘子把圖片釘在這個目標格子上并挪正，這時圖片的格子和屏幕的格子之間就形成一個對應關系；接著，它會把圖片上每個格子的顏色值抄一份給屏幕上與之對應的格子，等所有格子都抄完，這幅圖片就被畫到屏幕上去了。

　　圖片上那個被釘子穿透了的格子，叫做圖片的錨點。錨點可以是圖片上的任何一個格子，這取決于你的方便。很顯然，同一個位置，不同的錨點，圖片是會被畫在屏幕上的不同地方的。

　　每次游戲計算完當前的狀態后，都會得到一個新的位置，然后根據這個位置，按照上面的方法，把圖片畫到屏幕上去。這樣，我們就看到一個動來動去的主角了。

　　實際情形當然比這個要復雜很多，除了移動以外，圖片還可能做各種變換，例如旋轉縮放等，此外還得處理圖片的透明度，至于3D模型的渲染，則涉及更復雜的變換，但不管如何，我們都可以把iPhone畫圖（渲染）的過程，看做是給屏幕上每個格子賦顏色值的過程。格子們根據這個顏色值，發出不同頻率、不同強度的光。

　　順便說說前不久剛被Facebook收購的Oculus VR。這家公司研發的顯示設備Rift能讓穿戴者置身于無邊框的虛擬世界中。盡管在分辨率、渲染效率等方面還不夠完美，但Rift已能給人們帶來及其震撼的視覺感受，很難想象在不久的將來這類設備會在多大程度上提升人們玩游戲、看電影時的體驗。試想一下，你通過體感設備輸入信息，游戲通過虛擬現實設備反饋狀態，別說《極品飛車》，就算是《神廟逃亡》也會玩你一身汗吧。