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
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
