1. 程式人生 > >使用opengl es編寫2d遊戲的一些說明和技巧

使用opengl es編寫2d遊戲的一些說明和技巧

  即使是製作2d遊戲,在移動裝置上也往往使用opengl es繪圖介面,來達到較高的繪製效率。這裡記錄一下我學習opengl es 2d繪圖過程中逐漸明白的一些原理與技巧。

  opengl 3d貼圖的基本流程是:

a.使用3d座標指定一些描述物體空間位置的頂點(例如一個立方體,或者平面上的一個三角形,指定它們的頂點)

b.給每一個位置座標指定一個紋理座標,表示紋理圖上的哪個點對應這個位置座標

c.位置座標和紋理座標都提交後,opengl根據這些資訊,使用插值、縮放等方式,將紋理圖貼到物體上

  如果是2d遊戲貼圖,上述流程不變,只是3d位置座標變為2d位置座標,並且2d位置座標描述的平面圖像往往是兩個三角形拼成的正方形。這個正方形的四個頂點,再對應到一張矩形的2d遊戲素材圖片的四個角上。

  基本的流程清楚了,剩下的就是一些細節,以及一些2d圖形操作技巧在opengl上的對應實現方法。目前我想到的有以下幾點

1、座標系轉換 2、貼圖問題 3、顏色表 4、緩衝區操作

1、座標系轉換

這個座標系轉換指的是如何從opengl座標系轉換到2d遊戲常用的左上角為原點的座標系 opengl從提交位置頂點到在視窗上渲染出畫素,使用的座標系有:物體座標、視點座標、裁剪座標、正規化裝置座標、視窗座標   a.提交頂點時,使用的是物體座標。   b.使用glTranslate\glRotate等函式,可以對物體進行平移和旋轉,從物體座標轉換為視點座標。(2d遊戲不涉及旋轉的部分,常常直接給物體設定世界座標,可以說跳過了這一步)。
  c.使用glOrtho\glFrustum等投影變換函式時,從座標系變換上來說,先根據這兩個函式規定的剪下區域及透視方法,進行了剪下透視變換,將3d世界變換到一個矩形管道觀察體內。然後再進行正規化,使座標在3個軸內的範圍是(-1,1)   d.使用glViewPort函式進行視口變換。這步變換中,上一步的正規化座標(Xn、Yn、Zn),其中Xn、Yn根據glViewPort的引數,可以得到一個相應的螢幕座標(Xw、Yw)(這個螢幕座標,opengl規定原點在左下角,向上向右為正方向),Zn座標則用來進行深度檢測相關操作。   詳細來看一下glViewPort函式
void glViewport
(
GLint   x,
GLint   y,
GLsizei   width,
GLsizei   height);
這個函式的數學表示式為 Xw = (Xn + 1) * width/2 + x Yw = (Yn + 1) * height 2 + y   從這個表達上可以看出,如果x、y取為0,width、height取為視窗寬高,規範化裝置座標(-1,-1)會被轉換到(0,0)點,即視窗左下角。規範化座標(1,1)會被轉換到(width,height),即視窗右上角(注意原點為左下角,y向上為正)。換句話說,這樣的設定,就是規範化矩形被平行的對映到視窗上去了。   這裡還有一個細節,就是規範化座標和我們提交頂點時使用的座標是什麼關係。如何保證我們慣用的2d繪圖座標(原點在左上角),在使用opengl繪圖介面時保持正常?   那就需要詳細看一下投影變換函式glOrtho void glOrtho(GLdouble  left, GLdouble  right, GLdouble  bottom, GLdouble  top, GLdouble  nearVal, GLdouble  farVal);
  我們只要把這個函式的引數bottom設為視窗高度height,引數top設為0,即可正常使用慣用的2d座標系了(原點在左上角)。從bottom和top的字面意義上來講,要想使繪圖座標的y軸向下為正,確實應該這樣設定(反之,設定bottom=0,top=height,就是opengl視窗座標那樣的y軸向上座標系了)。從原理上講,這個函式只是設定了一個座標變換矩形,這個變換矩形的各個係數是根據我們呼叫glOrtho函式時設定的引數算出的。感興趣的同學可以去看看opengl關於這個函式的官方文件,自己計算一下。 關於座標變換,opengl官網網站的一個faq網頁解釋的比較清楚

2、紋理貼圖細節

a.影象出現白邊或者影象移動時產生閃爍

  如果使用縮放操作的話,一定要注意紋理環繞的設定。因為縮放操作導致螢幕上的畫素點和紋理圖片不是一一對應,就需要opengl來進行過濾取樣。在紋理過濾不是臨近點過濾時,對紋理邊緣的過濾就可能包含紋理影象外的點。紋理環繞決定了影象外部點如何取值,像GL_CLAMP就會採用一種可設定的固定邊界顏色。GL_CLAMP_TO_EDGE則忽略影象外部點。如果採用CL_CLAMP,在拼接紋理時,容易產生黑邊。詳細的解釋可以見這篇文章http://www.linuxgraphics.cn/opengl/texture_fix_seam.html   但因為2d遊戲紋理座標經常和畫素一一對應,如果不進行放大和縮放的話,就不會出現這種現象。   另外一種貼圖時產生縫隙的原因,是opengl習慣使用寬高是2的冪的紋理圖片,如果引擎對不符合要求的圖片進行了自動補齊的話,補足的畫素如果沒有正確初始化,也會在放大縮小的邊界線性過濾時產生縫隙,而且這時是與紋理環繞模式無關的。   我還碰到過影象閃爍的問題。那是在移動一副圖片並對圖片進行縮放時發生的。我猜測原因是圖片位置發生變化後,因為位置變化量和縮放倍數不一致(例如放大兩倍,但是一個畫素一個畫素的移動圖片),縮放過程中取樣點也相應變化。影象上某些畫素點一會取樣到紋理圖上的亮點,一會取樣到暗點,導致閃爍。 b.紋理壓縮   同樣規模的2d遊戲,使用的圖片量要遠大於3d遊戲(想象一個滾動的球體,2d的話需要球體滾動過程中每一幀的圖片,3d的話給一張球體整體紋理圖就好了)。一個效果出眾的移動裝置遊戲,記憶體往往容易拙荊見肘。這時可以採用低色深圖片,例如從RGBA8888轉為RGBA4444,圖片記憶體使用量輕鬆減了一半,效果上其實看不太出來區別。   如果想進一步榨取記憶體,使用opengl的硬體紋理壓縮是個好方法。這樣不僅可以減低記憶體使用,還可以加快渲染速度。如果是opengl完全版,只要提交紋理時,glTexImage2D的第三個引數internalformat使用GL_COMPRESSED_RGBA即可,opengl會負責在載入時壓縮紋理。這樣可以立刻看到壓縮的效果(在我的一個已使用RGBA4444圖片的專案中,100m的記憶體消耗,使用紋理壓縮後變為40m)。可惜的是,opengl es不支援載入時壓縮。關於預壓縮為PVR等紋理格式,Apple網站上有詳細介紹。

3.顏色表

  2d遊戲中經常使用索引色圖片,執行時動態改變調色版,來達到一些色彩變幻的效果。在opengl裡,這些效果應該如何實現? a.glColor*方法 glColor實際設定的是頂點的顏色,而頂點顏色決定幾何圖形顏色。一般採取的opengl紋理設定,是紋理顏色會與幾何圖形顏色相調製(即相乘)。用這種方法,可以達到動態減弱紋理中某個顏色通道(R\G\B\A)的效果。 b.顏色對映 顏色對映,可以將某個顏色對映為另外一種顏色。用於顏色緩衝區和外部影象資料轉移時使用,即在glDrawPixels/glReadPixels/glTexImage等API呼叫時發生。可以採用表格的方式,也可以採用color*scale+bias的計算公式。但是這種方式在進行對映時似乎只能是通道獨立的,,並不能將R\G\B結合起來對映 c.顏色矩陣和顏色表 屬於影象子集(opengl es不支援)。用於影象處理管線的各個過程中。顏色矩陣(glMatrixMode(GL_COLOR))即是RGBA色彩空間的矩陣運算,顏色表(glColorTable)類似上面的顏色對映 d.索引色紋理圖 Paletted textures,屬於一個擴充套件,這個應該就是指讓opengl在非索引色模式下支援索引色紋理圖。新硬體一般已經不支援。可以通過shaders達到同樣的功能。

4.緩衝區操作

未完待續

相關推薦

使用opengl es編寫2d遊戲一些說明技巧

  即使是製作2d遊戲,在移動裝置上也往往使用opengl es繪圖介面,來達到較高的繪製效率。這裡記錄一下我學習opengl es 2d繪圖過程中逐漸明白的一些原理與技巧。   opengl 3d貼圖的基本流程是: a.使用3d座標指定一些描述物體空間位置的頂點(例如一

深度剖析OpenGL ES中的多執行緒多視窗渲染技術

移動裝置中的CPU和GPU已經變得很強大,到處都是配備一個或多個高解析度螢幕的裝置,需要使用帶有圖形驅動器的複雜互動也日益增加。在這篇部落格文章中,我將討論多執行緒和多視窗渲染對開發人員來講意味著什麼,同時我將介紹將這些技術應用您設計當中的條件和時機。 什麼是多執行緒渲

OpenGL ES 3.0 簡單的頂點片段著色器

char fShaderStr[] = 1、 "#version 300 es \n" 2、 "precision mediump float; \n" 3、 "out vec4 fragColor;

Android 中使用OpenGL ES進行2D開發(紋理Texture使用)

OpenGL紋理是一種點陣圖,可以把它貼上到OpenGL物體的表面上。比如可以獲取一張郵票的影象貼上到正方形中,使正方形看起來像一張郵票。要使郵票保持合適的方向,以便影象井然有序地排列,則必須獲得形狀的每個頂點並在正方形上標記出來,以便郵票和正方形的形狀保持一致。在Open

Jquery一些用法技巧

1,禁用頁面的右鍵選單 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2,輸入框文字輸入和失去焦

[轉]怎樣訓練一個GAN-一些提示技巧

怎樣訓練一個GAN?一些提示和技巧 轉自 How to Train a GAN? Tips and tricks to make GANs work While research in Generative Adversarial Networks (GAN

OpenGL ES平移矩陣旋轉矩陣的左乘與右乘效果

角度 style 位置 作用 span 坐標系 rotate 不同的 世界 OpenGL ES平移矩陣和旋轉矩陣的左乘與右乘 在OpenGL 、OpenGL ES中矩陣起著舉足輕重的作用,而矩陣之間的左乘與右乘在效果上是不同的。 一、先平移後旋轉 場景效果:人繞樹旋轉。 原

android平臺下OpenGL ES 3.0從矩形中看矩陣座標系

OpenGL ES 3.0學習實踐 android平臺下OpenGL ES 3.0從零開始 android平臺下OpenGL ES 3.0繪製純色背景 android平臺下OpenGL ES 3.0繪製圓點、直線和三角形 android平臺下OpenGL E

android平臺下OpenGL ES 3.0繪製圓點、直線三角形

OpenGL ES 3.0學習實踐 android平臺下OpenGL ES 3.0從零開始 android平臺下OpenGL ES 3.0繪製純色背景 android平臺下OpenGL ES 3.0繪製圓點、直線和三角形 android平臺下OpenGL E

android平臺下OpenGL ES 3.0例項詳解頂點緩衝區物件(VBO)頂點陣列物件(VAO)

OpenGL ES 3.0學習實踐 android平臺下OpenGL ES 3.0從零開始 android平臺下OpenGL ES 3.0繪製純色背景 android平臺下OpenGL ES 3.0繪製圓點、直線和三角形 android平臺下OpenGL E

OpenGLOpenGl ES簡介

OpenGL的基本認識: OpenGL是什麼?(開發的圖形庫) OpenGL可以來幹什麼?(應用領域:視訊 圖形 圖片處理,2D/3d遊戲引擎開發,科學視覺化,醫學軟體的開發,CAD(計算機輔助技術),虛擬實境(AR VR),AI人工智慧)等等。 一個用來渲染影象

android平臺下OpenGL ES 3.0實現2D紋理貼圖顯示bitmap

OpenGL ES 3.0學習實踐 android平臺下OpenGL ES 3.0從零開始 android平臺下OpenGL ES 3.0繪製純色背景 android平臺下OpenGL ES 3.0繪製圓點、直線和三角形 android平臺下OpenGL E

Android 為例編寫一個 OpenGL ES 3.0 例項,Native & Java 兩種實現

一、簡介 通過這個 Sample,你將瞭解到 Android 中是怎麼使用 OpenGL ES 通過繪製一個簡單的靜態三角形,來簡單入門和了解它大致的流程(類似於 HelloWorld 工程) 介紹使用 Native 層 和 Java 層 兩種方式來分別實現

OpenGL ES 多執行緒多屏渲染

“內容歸納” 應用程式和驅動程式之間的傳輸完成之前,阻塞型操作有: 1、上傳資料的圖形API呼叫; 2、顯示卡驅動程式中著色器編譯; 一、什麼情況下使用: 多執行緒渲染最適合於編譯著色器或上傳資料至顯示卡驅動器時CPU資源有限的應用程式。原因有2: 主執行緒

OpenGL ES (8): 使用投影檢視相機檢視

1.簡介 OpenGL ES允許你以接近於你眼睛看到的物理物件的方式來顯示你繪製的物件。物理檢視的模擬是通過對你繪製的物件的座標進行數學變換完成的: Projection — 這個變換是基於他們所顯示的GLSurfaceView的寬和高來調整繪製物件的座標的。沒有這個計算

OpenGL ES (10): 答疑解惑 -- 投影檢視矩陣相機檢視變換矩陣

1.介紹 之前的程式碼如下: private final float[] mMVPMatrix = new float[16]; private final float[] mProjectionMatrix = new float[16]; private final

OpenGL ES座標變換概述

https://juejin.im/post/59c7c8adf265da065a63cd3b   張鐵蕾 2017年09月24日閱讀 881 OpenGL ES和座標變換概述   相信做技術的同學,特別是做客戶端開發的同學,都聽說過OpenGL。要想對客

android遊戲開發(OpenGL ES繪製矩形平面)

接觸android將近一年了,以前學的應用開發,現在自學android遊戲開發,把自己學到的分享出來一下,(這也是我的第一篇部落格),不說廢話了,開始正文: GLRender類用於圖形的渲染工作,Util類用於glrender中的資料緩衝。 GLRender類: pack

遊戲行業入行10年一些思考總結

         從08年開始來上海,進入網路遊戲行業已經第10個年頭了,近期開始有點迷茫,原因可能來自比較多個方面:也許是年齡的慢慢增長,還有今年負責的專案到了生命週期後期業績的下降以及公司一些人事的變動,還有家庭的一些事情的牽掛,還有對於未來規劃的一些思考,基於以上一

OpenGL ES 3.0程式設計指南學習筆記 第6章 頂點屬性、頂點陣列緩衝區物件

1)vec2等為float型,也就是著色語言預設為float操作。float,vec2,vec3,vec4 2)矩陣以列優先順序儲存,也就是說矩陣可以看做是由幾個列向量組成,例如;mat3 myMat3 = mat3(1.0, 0.0, 0.0,//First column