c/c++游戏编程之Easyx图形库基础(一) EasyX基础
c/c++游戏编程之Easyx图形库基础(二) 绘制图片
c/c++游戏编程之Easyx图形库基础(三) 用Easyx封装按钮
书接上回!上一节我们在移动图片时看到了“闪烁”现象,那是因为窗口重绘时会用背景色清空窗口,所以一旦重绘比较密集(不信你可以将Sleep的值改小,看看闪烁是不是更加厉害),就更容易看到“闪烁”。为了解决这个问题我们需要用到双缓冲技术。先简单介绍一下什么是双缓冲,以及它的作用。
程序在绘制内容时,会先把内容绘制到一个内存缓冲区上,然后显示器再读取内存缓冲区的内容并将颜色信息显示出来,但实际情况比较复杂,大体来说就是:
如果只有一个内存缓冲区,就可以理解为是单缓冲,且这个缓冲区是直接关联显示设备的。
如果有两个内存缓冲区,一个作为前台缓冲区,一个作为后台缓冲区,那么情况就不一样了。处理器会在后台缓冲区进行绘制,而显示设备读取前台缓冲区,互不干扰,新的一帧在后台缓冲区绘制完了,再使用交换技术将前台缓冲区和后台缓冲区交换,举个例子就是:以前我的名字叫张三,是个医生,你的名字叫李四,是个律师。现在咱俩交换,我叫李四,你叫张三,我来做律师,你来当医生。这个交换的方法一般是 交换缓冲区指针的值。
双缓冲使我们看不到绘制的过程,即看不到清屏时的"闪烁"。双缓冲还有其他优点,比如充分发挥硬件性能,这里不再介绍。
Easyx使用双缓冲的三个函数:
//这个函数用于开始批量绘图。执行后,任何绘图操作都将暂时不输出到绘图窗口上,
//直到执行 FlushBatchDraw 或 EndBatchDraw 才将之前的绘图输出。
void BeginBatchDraw();
// 执行未完成的绘制任务
void FlushBatchDraw();
// 执行指定区域内未完成的绘制任务
void FlushBatchDraw(
int left,
int top,
int right,
int bottom
);
// 结束批量绘制,并执行未完成的绘制任务
void EndBatchDraw();
// 结束批量绘制,并执行指定区域内未完成的绘制任务
void EndBatchDraw(
int left,
int top,
int right,
int bottom
);
为我们之前的代码加上这三个函数:
#include <Windows.h>
#include <graphics.h>
#include <conio.h>
int g_imgPosx = 0; //图像x坐标
int g_imgPosy = 0; //图像y坐标
//获取并处理键盘输入
void GetKeyInput();
int main() {
initgraph(640, 480, EW_SHOWCONSOLE); //初始化窗口
IMAGE img; //创建图像对象
loadimage(&img, _T("images/zombie.png")); //加载图像
BeginBatchDraw();
while (1) {
GetKeyInput();
putimage(g_imgPosx, g_imgPosy, &img); //在起始坐标为(0, 0)的位置绘制图像img
FlushBatchDraw();
Sleep(100); //程序休眠16毫秒
cleardevice(); //16毫秒后清空窗口中的内容
}
EndBatchDraw();
_getch();
closegraph(); //关闭窗口
return 0;
}
void GetKeyInput() {
if (GetAsyncKeyState(VK_LEFT) & 0x8000) {
g_imgPosx--;
}
if (GetAsyncKeyState(VK_RIGHT) & 0x8000) {
g_imgPosx++;
}
if (GetAsyncKeyState(VK_UP) & 0x8000) {
g_imgPosy--;
}
if (GetAsyncKeyState(VK_DOWN) & 0x8000) {
g_imgPosy++;
}
}
运行就会发现,“闪烁”消失了。
图片中僵尸的周围有白色的背景,这显然不是我们想要的效果,我们可以选择贴掩码图和利用三元光栅操作来达到透明背景的效果。
我们先用图像处理软件(如photoshop)将原图处理成掩码图,并将其放在images文件夹里:
分别加载两张图像:
IMAGE img; //创建图像对象:源图
IMAGE imgMask; //创建图像对象:掩码图
loadimage(&img, _T("images/zombie.png")); //加载图像
loadimage(&imgMask, _T("images/zombie_.png")); //加载图像
在while里将两张图贴在同一位置:
putimage(g_imgPosx, g_imgPosy, &img, SRCPAINT); //SRCPAINT: 目标图像 = 目标图像 OR 源图像
putimage(g_imgPosx, g_imgPosy, &imgMask, SRCAND); //SRCAND:目标图像 = 目标图像 AND 源图像
其中SRCPAINT和SRCAND是三元光栅操作码,详情见Easyx文档。
什么都不贴,窗口是黑的(你可以理解为屏幕就是目标图像,众所周知纯黑的RGB(0, 0, 0)):
无论这个像素是什么颜色,与0做OR(位或)运算,其运算结果依然是这个颜色(即便这个像素是黑色,0位或0还是0),我们只执行这一句:
putimage(g_imgPosx, g_imgPosy, &img, SRCPAINT);
现在的 目标图像(屏幕) 不全是黑色了,因为之前 SRCPAINT: 目标图像 = 目标图像 OR 源图像 ,再用这个 新的目标图像(屏幕) 与下一个 源图(掩码图) 进行AND(位与)操作,即再执行这一句:
putimage(g_imgPosx, g_imgPosy, &imgMask, SRCAND);
最终背景是透明的了。
绘制每个图像元素需要加载两张图片(原图和掩码图),致使耗费更多内存,耗费美术资源,在游戏编程中这种贴图方法一般不会被采用。那么我们可以直接使用透明背景的图片吗?答案是可以的。
我们先用win10自带的画图3D制作一张透明背景图heart.png,老规矩,把它放在images文件夹!
再定义透明贴图函数:
//函数声明
void DrawTransparentImage(
IMAGE* pImage, //图像对象指针
INT32 posx, //x坐标
INT32 posy, //y坐标
INT32 transparency = 255 //透明度,默认为不透明
);
//函数定义
void DrawTransparentImage(IMAGE* pImage, INT32 posx, INT32 posy, INT32 transparency) {
HDC imgDC = GetImageHDC(pImage); //获取图像设备上下文句柄
INT32 w = pImage->getwidth(); //获取图像的宽
INT32 h = pImage->getheight(); //获取图像的高
// 结构体的第三个成员表示额外的透明度,0 表示全透明,255 表示不透明。
BLENDFUNCTION bf = { AC_SRC_OVER, 0, transparency, AC_SRC_ALPHA };
// 使用 Windows GDI 函数实现半透明位图
AlphaBlend(GetImageHDC(NULL), posx, posy, w, h, imgDC, 0, 0, w, h, bf);
}
使用AlphaBlend函数需要链接库文件:
#pragma comment(lib, "MSIMG32.LIB")
函数DrawTransparentImage的封装屏蔽了一些AlphaBlend的参数,需要扩展功能的同学可以移步MSDN了解AlphaBlend的用法。
创建图像对象imgHeart:
IMAGE imgHeart;
分别以透明度255和透明度120绘制图像heart.png:
DrawTransparentImage(&imgHeart, 100, 100); //透明度默认为255
DrawTransparentImage(&imgHeart, 300, 100, 120); //透明度为120
全部代码:
#include <Windows.h>
#include <graphics.h>
#include <conio.h>
#pragma comment(lib, "MSIMG32.LIB") //for GDI函数 AlphaBlend
int g_imgPosx = 0; //图像x坐标
int g_imgPosy = 0; //图像y坐标
//获取并处理键盘输入
void GetKeyInput();
//透明贴图
void DrawTransparentImage(
IMAGE* pImage, //图像对象指针
INT32 posx, //x坐标
INT32 posy, //y坐标
INT32 transparency = 255 //透明度,默认为不透明
);
int main() {
initgraph(640, 480, EW_SHOWCONSOLE); //初始化窗口
IMAGE img; //创建图像对象:原图
IMAGE imgMask; //创建图像对象:掩码图
IMAGE imgHeart;
loadimage(&img, _T("images/zombie.png")); //加载图像
loadimage(&imgMask, _T("images/zombie_.png")); //加载图像
loadimage(&imgHeart, _T("images/heart.png")); //加载图像
BeginBatchDraw();
while (1) {
GetKeyInput();
//使用三元光栅操作码进行透明贴图
putimage(g_imgPosx, g_imgPosy, &img, SRCPAINT); //SRCPAINT: 目标图像 = 目标图像 OR 源图像
putimage(g_imgPosx, g_imgPosy, &imgMask, SRCAND); //SRCAND:目标图像 = 目标图像 AND 源图像
DrawTransparentImage(&imgHeart, 100, 100);
DrawTransparentImage(&imgHeart, 300, 100, 120); //透明度为120
FlushBatchDraw();
Sleep(16); //程序休眠16毫秒
cleardevice(); //16毫秒后清空窗口中的内容
}
EndBatchDraw();
_getch();
closegraph(); //关闭窗口
return 0;
}
void GetKeyInput() {
if (GetAsyncKeyState(VK_LEFT) & 0x8000) {
g_imgPosx--;
}
if (GetAsyncKeyState(VK_RIGHT) & 0x8000) {
g_imgPosx++;
}
if (GetAsyncKeyState(VK_UP) & 0x8000) {
g_imgPosy--;
}
if (GetAsyncKeyState(VK_DOWN) & 0x8000) {
g_imgPosy++;
}
}
void DrawTransparentImage(IMAGE* pImage, INT32 posx, INT32 posy, INT32 transparency) {
HDC imgDC = GetImageHDC(pImage); //获取图像设备上下文句柄
INT32 w = pImage->getwidth(); //获取图像的宽
INT32 h = pImage->getheight(); //获取图像的高
// 结构体的第三个成员表示额外的透明度,0 表示全透明,255 表示不透明。
BLENDFUNCTION bf = { AC_SRC_OVER, 0, transparency, AC_SRC_ALPHA };
// 使用 Windows GDI 函数实现半透明位图
AlphaBlend(GetImageHDC(NULL), posx, posy, w, h, imgDC, 0, 0, w, h, bf);
}
运行效果:
左边的红心是透明度为255的图像,右边的红心是透明度为120的图像。
参考文献:Easyx文档
文章持续更新中!
求点赞、收藏!欢迎在评论区留言,有问必答!
作者水平有限,如果有误,欢迎指正!
编译环境:Visual Studio 2019、Easyx_20220116