VR – OpenGL 2D.

Presentation on theme: "VR – OpenGL 2D."— Presentation transcript:

1 VR – OpenGL 2D

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

3 image、pixel和color 基本概念

4 Pixel and Color Pixel: picture element即圖上的一點
顏色:可由(Red, Green, Blue)三原色組合，每個顏色1 Byte，組成全彩 (0, 0, 0) 表示黑色 (255, 0, 0) 表示紅色 (255, 255, 255) 表示白色

5 BMP image Image：可看成一維Pixel Array， 每個Pixel由RGB組成，共24bit Pixel的其他表示法
lookup table

6 OpenGL 2D function

7 Positioning Image Primitives
glRasterPos3f( x, y, z ) raster position transformed like geometry 若超過viewport的邊界 會被忽略 may need to fine tune viewport for desired results Raster Position X ->

8 OpenGL raster display glReadPixels(); glCopyPixels(); glDrawPixels()
framebuffer memory glReadPixels(); glCopyPixels(); glDrawPixels()

9 glDrawPixels( width, height, format, type, pixels )
Rendering Images glDrawPixels( width, height, format, type, pixels ) render pixels with lower left of image at current raster position numerous formats and data types for specifying storage in memory best performance by using format and type that matches hardware

10 Reading Pixels Framebuffer pixel copy
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 copy glCopyPixels( x, y, width, height, type ) copy pixels in the frame buffer to current raster position

11 放大縮小 glPixelZoom() glPixelZoom(水平軸倍數, 垂直軸倍數) Ex:

12 繪圖流程和相關Library

13 RGBpixmap.h #include "RGBpixmap.h“ RGBpixmap pic; //宣告一張背景圖 //讀檔
pic.readBMPFile(“background.bmp”); 讀取的必須是24bit的bmp檔 pic.nRows //int 列數 pic.nCols //int 行數 pic.draw() //繪圖

14 繪圖基本流程 void myDisplay(void) { glClear(GL_COLOR_BUFFER_BIT);
glRasterPos2i(0, 0); //繪圖的左下角 pic.draw(); //繪圖 glutSwapBuffers(); }

15 透明圖 RGBApixmap Alpha: 透明色 RGBApixmap pic; //宣告一張具透明色圖片
(232, 248, 248) Alpha: 透明色 RGBApixmap pic; //宣告一張具透明色圖片 pic.setChromaKey(232, 248, 248); //將圖片中的某個顏色設為透明 Pic.blend(); //透明圖的繪圖函式

16 字型設定 font.h GLFONT *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);

17 字型顯示 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);

18 遊戲和輸入控制

19 Game 互動性 玩家藉由鍵盤或搖桿輸入，畫面會因此做反應。 目的?分數? 好不好玩?

20 利用鍵盤輸入使圖片移動 在Speckeyfunc() RGBApixmap pic[3]; 在Display()
switch(key) { case GLUT_KEY_LEFT: picX -= 5; break; case GLUT_KEY_RIGHT: picX += 5; …….. } glutPostRedisplay(); RGBApixmap pic[3]; 在Display() glRasterPos2i(picX, picY); pic[whichPic].blend();

21 換圖 在Speckeyfunc() case GLUT_KEY_LEFT: picX -= 5;
if (whichPic==0) whichPic=1; else whichPic=0; break; case GLUT_KEY_RIGHT: picX += 5; 1

22 轉方向 int DirectState=0; 在Speckeyfunc() 在Display() if(DirectState==0) {
case GLUT_KEY_LEFT: picX -= 5; if (whichPic==0) whichPic=1; else whichPic=0; DirectState=1; break; case GLUT_KEY_RIGHT: …… DirectState=0; 在Display() if(DirectState==0) { glPixelZoom(1.0, 1.0); glRasterPos2i(picX, picY); }else { glPixelZoom(-1.0, 1.0); glRasterPos2i(picX+pic[whichPic].nCols, picY); } pic[whichPic].blend();

23 glutTimerFunc() glutTimerFunc(int msecs, (*func)(int value),
登記一個func，在經過msecs毫秒後呼叫，並將value值設給func Func的宣告 void jump(int i);

24 How to use time funtion 2 void 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

25 Jump-keyfuntion case 'm': if(jumpState==0) { jumpState=1;
Gamescore++; jump(0); } break;

26 全螢幕和Gamemode 切換至全螢幕 和目前解析度一樣 glutFullScreen(); 切換全螢幕 可自行設解析度
切換至全螢幕 和目前解析度一樣 glutFullScreen(); 切換全螢幕 可自行設解析度 寫在case GLUT_KEY_F1:

27 參考資料 GLUT 使用說明 用google查glut game第一個連結 OpenGL 超級手冊 Ch7
OpenGL Programming Guide Ch8 OpenGL官方網站