VR – OpenGL 2D

大綱

image 、 pixel 和 color 基本概念OpenGL 2D functions繪圖流程和相關 Library遊戲和輸入控制參考資料Demo

image、 pixel 和 color

基本概念

Pixel and Color

Pixel: picture element 即圖上的一點

顏色 : 可由 (Red, Green, Blue) 三原色組合，每個顏色 1 Byte ，組成全彩

(0, 0, 0) 表示黑色 (255, 0, 0) 表示紅色 (255, 255, 255) 表示白色

BMP image

Image ：可看成一維 Pixel Array ， 每個 Pixel 由 RGB 組成，共 24bit

Pixel 的其他表示法 lookup table

OpenGL 2D function

glRasterPos3f( x, y, z ) raster position transformed like geometry 若超過 viewport 的邊界 會被忽略

may need to fine tuneviewport for desiredresults

Raster Position

Positioning Image Primitives

X ->

draw

copy

read

framebuffer

memory

glReadPixels(); glCopyPixels(); glDrawPixels()

OpenGL raster display

glDrawPixels( width, height, format, type, pixels )

render pixels with lower left ofimage at current raster position

numerous formats and data typesfor specifying storage in memory best performance by using format and type

that matches hardware

Rendering Images

glReadPixels( x, y, width, height, format, type, pixels )

read pixels from specified (x,y) position in framebuffer

pixels automatically converted from framebuffer format into requested format and type

Framebuffer pixel copyglCopyPixels( x, y, width, height, type )

copy pixels in the frame buffer to current raster position

Reading Pixels

放大縮小 glPixelZoom()

glPixelZoom( 水平軸倍數 , 垂直軸倍數 )

Ex:glPixelZoom(1.0, 1.0); // 不變

glPixelZoom(2.0, 2.0); // 放大兩倍 glPixelZoom(0.5, 0.5); // 縮小 glPixelZoom(-1.0, 1.0); // 水平反轉

繪圖流程和相關 Library

RGBpixmap.h

#include "RGBpixmap.h“RGBpixmap pic; // 宣告一張背景圖// 讀檔pic.readBMPFile(“background.bmp”);

讀取的必須是 24bit 的 bmp 檔pic.nRows //int 列數pic.nCols //int 行數pic.draw() // 繪圖

繪圖基本流程void myDisplay(void)

{glClear(GL_COLOR_BUFFER_BIT);

glRasterPos2i(0, 0); // 繪圖的左下角 pic.draw(); // 繪圖

glutSwapBuffers();}

透明圖 RGBApixmap

Alpha: 透明色

RGBApixmap pic; // 宣告一張具透明色圖片pic.setChromaKey(232, 248, 248); // 將圖片中的某個顏色設為透明

Pic.blend(); // 透明圖的繪圖函式

(232, 248, 248)

字型設定 font.hGLFONT *Font; // 宣告GLFONT

*FontCreate(HDC hdc, const char *typeface, int height, int weight, DWORD italic); typeface 字形名稱 height 字形高度 weight 粗體設定 italic 斜體設定

Ex:Font = FontCreate(wglGetCurrentDC(), "Times", 32, 0, 1);

字型顯示 font.h#include <string.h> //for sprintf();在 display() 內

char mss[30];sprintf(mss, "Score %d", Gamescore);

glColor3f(1.0, 0.0, 0.0); // 設定字型顏色glRasterPos2i(10, 450); // 設定字型左下角起點FontPrintf(Font, 1, mss);

遊戲和輸入控制

Game 互動性

玩家藉由鍵盤或搖桿輸入，畫面會因此做反應。

目的 ? 分數 ?

好不好玩 ?

利用鍵盤輸入使圖片移動

在 Speckeyfunc()switch(key) {

case GLUT_KEY_LEFT:picX -= 5;break;

case GLUT_KEY_RIGHT:picX += 5;break;

……..}glutPostRedisplay();

RGBApixmap pic[3];

在 Display()glRasterPos2i(picX, picY);pic[whichPic].blend();

換圖在 Speckeyfunc()

case GLUT_KEY_LEFT:picX -= 5;if (whichPic==0) whichPic=1;else whichPic=0;break;

case GLUT_KEY_RIGHT:picX += 5;if (whichPic==0) whichPic=1;else whichPic=0;break;

0 1

轉方向 int DirectState=0; 在 Speckeyfunc()

case GLUT_KEY_LEFT:picX -= 5;if (whichPic==0) whichPic=1;else whichPic=0;DirectState=1;break;

case GLUT_KEY_RIGHT: ……

DirectState=0;break;

在 Display() if(DirectState==0) {

glPixelZoom(1.0, 1.0);glRasterPos2i(picX, picY);

}else {glPixelZoom(-1.0, 1.0);glRasterPos2i(picX+pic[whic

hPic].nCols, picY);}

pic[whichPic].blend();

glutTimerFunc()

glutTimerFunc(int msecs, (*func)(int value), int value);

登記一個 func ，在經過 msecs 毫秒後呼叫，並將value 值設給 func

Func 的宣告 void jump(int i);

How to use time funtionvoid jump(int i){ whichPic=2; // 切換到 jump 圖片

if (i<5) picY+=4; // 前五次向上移 else picY-=4; // 後幾次向下移

if(i<10) {i++; glutTimerFunc( 100, jump, i); // 呼叫 time fution

}else { whichPic=0; // 回復原先狀態jumpState=0;

}glutPostRedisplay();

}

2

Jump-keyfuntion

case 'm': if(jumpState==0) {

jumpState=1;Gamescore++;

jump(0); }

break;

全螢幕和 Gamemode

切換至全螢幕 和目前解析度一樣 glutFullScreen();

切換全螢幕 可自行設解析度 寫在 case GLUT_KEY_F1:

參考資料

GLUT 使用說明 用 google查 glut game第一個連結

OpenGL 超級手冊 Ch7OpenGL Programming Guide Ch8

http://ask.ii.uib.no/ebt-bin/nph-dweb/dynaweb/SGI_Developer/OpenGL_PG

OpenGL官方網站 Http://www.opengl.org