電腦遊戲製作開發設計論壇

[satanupup]

作者 : ma_hty(白老鼠(Gary))
所謂透明色, 是除了 紅 綠 藍 之外的我們會用到的顏色, 最簡單的應用就是去除背景, 就是在設計網頁時常會用到的 透明背景 gif 圖檔一般.

當我們討論色彩質數時, 只有 紅 綠 藍 三色 而每個顏色也用 8bit 來表達的話, 因為 紅 綠 藍 三色都用 8 bit, 這麼就總共 24 bit 了, 我們會叫這樣定義的顏色作 24 bit color, 在 紅 綠 藍 三色 之上再多加 8bit 的透明色, 我們會叫作 32 bit color.

在開始介紹程式碼之先, 你要先準備有透明底色的圖檔. 但是, 要找這個會有點難, 因為常用的圖檔格式許多也沒有照顧到 透明色, 就算照顧到 透明色 的 圖檔格式, 也不容易找到軟體支援它, 為了簡化這個問題, 我們會退而求其次, 就是, 改為使用單色背景的 bmp 圖檔, 在讀取圖檔之後, 再由我們的程式填寫 透明色.
這個, 會用到
"glut 教學 - 把我的圖放到視窗上!!"
請先看畢這個教學, 才開始這個.

還有, 你需要準備一個 單色背景的 bmp 圖檔.

這次教學, 我們會多加一個 class, GBmp32, 這個, 基本上就是 GBmp, 只是, 每 pixel 的資料由 24 bit 改為 32 bit, 而且還會根據特定顏色填寫透明色.


"準備好了嗎?"

"都準備好了"

"嗯, 好好好..., 我們開始了"
-------------------------------------------------------------------------------
/////////////////////////
// g_bmp32.h
//
// Created by Gary Ho, ma_hty@hotmail.com, 2005
//

#ifndef G_BMP32_H
#define G_BMP32_H

class GBmp32
{
public:
int w,h;
unsigned char *rgba;

GBmp32();
~GBmp32();
void load( const char *spath, unsigned char r=255, unsigned char g=0, unsigned char b=255 );

};

#endif
---------------------------------------
/////////////////////////
// g_bmp32.cpp
//
// Created by Gary Ho, ma_hty@hotmail.com, 2005
//

#include <stdio.h>
#include <stdlib.h>
#include <memory.h>

#include "g_bmp.h"

#include "g_bmp32.h"

GBmp32::GBmp32()
{
memset( this, 0, sizeof(GBmp32) );
}

void GBmp32::load( const char *spath, unsigned char r, unsigned char g, unsigned char b )
{
if(rgba) free(rgba);
GBmp bm;
bm.load( spath );

w = bm.w;
h = bm.h;
rgba = (unsigned char*) malloc( w*h*4*sizeof(unsigned char) );

int i,j;
for( j=0; j<h; j++ )
for( i=0; i<w; i++ )
{
memcpy( &rgba[(j*w+i)*4], &bm.rgb[(j*w+i)*3], 3*sizeof(unsigned char) );

if(
bm.rgb[(j*w+i)*3 ] == r &&
bm.rgb[(j*w+i)*3+1] == g &&
bm.rgb[(j*w+i)*3+2] == b
){
rgba[(j*w+i)*4+3] = 0;
}else
{
rgba[(j*w+i)*4+3] = 1;
}
}
}

GBmp32::~GBmp32()
{
if(rgba) free(rgba);
}
---------------------------------------------------
/////////////////////////
// glutTest05.cpp
//
// Created by Gary Ho, ma_hty@hotmail.com, 2005
//


#include <stdio.h>

#include "glut.h"
#include "g_bmp32.h" // 更改了

GBmp32 bm0; // 更改了

void display()
{
glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );

glRasterPos2f( -bm0.w/640.0, -bm0.h/640.0 );
glDrawPixels( bm0.w, bm0.h, GL_RGBA, GL_UNSIGNED_BYTE, bm0.rgba ); // 更改了

glutSwapBuffers();
}

void main()
{
glutInitDisplayMode( GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA ); // 更改了
glutInitWindowSize( 640, 640 );
glutCreateWindow( "hihi" );
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

glutDisplayFunc(display);

glEnable( GL_ALPHA_TEST ); // 更改了
glAlphaFunc( GL_GREATER , 0 ); // 更改了
bm0.load( "a.bmp", 0,0,0 ); // 更改了

glutMainLoop();
}
---------------------------------------------------
glutInitDisplayMode( GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA ); // 更改了

首先, 我們要先設定好 display mode, 因為要使用透明色, 因此, 本來的 GLUT_RGB 就要改成 GLUT_RGBA .
-----------
glEnable( GL_ALPHA_TEST );
glAlphaFunc( GL_GREATER , 0 );

這是說, 我們現在要使用 alpha test, alpha 值大於零的, 才畫出來.
-------------------------
glDrawPixels( bm0.w, bm0.h, GL_RGBA, GL_UNSIGNED_BYTE, bm0.rgba ); // 更改了

當然, 把 memory block 交給 glDrawPixels, 資料格式也要由 GL_RGB 改成 GL_RGBA 呀.
--------------------------
最後, 就是 GBmp32 的應用, 這個是我寫的小工具, 功能就是讀取 bmp 檔, 然後把特定的顏色的 alpha 值設成 0, 其餘的則設成 1.

bm0.load( "a.bmp", 0,0,0 );

這裡的 0,0,0 是背景色的 r g b.
-------------------------
除了做透明背景, 透明色還有其他更有趣的應用的, 例如, 你可以應用 GL_BLEND 來輕鬆的做出半透明 甚至 漸變透明 等等... ...

好了, 現在, 做一個功課吧, 就是, 用 GBmp32 讀取三個以上的 單色背景 bmp 圖檔, 然後把它們重疊顯示, 好讓人們看出背景是透明的.