对于SDL我也只是一个初学的菜鸟,接下来和大家分享一个我自己写的拖动开关点亮灯泡的一个C++程序。
如果你同样是一个SDL的初学者,那么推荐给你一个连接:http://adolfans.github.io/sdltutorialcn/blog/2013/01/25/sdl-2-dot-0-tutorial-index/,这里面有一些关于SDL库使用的简单介绍,是我初学时在网上搜索到的,感觉很不错,推荐给大家。
那么废话不多说,下面我们进入正题:
首先,为了更好的解决问题,我们首先得把程序要实现的主要功能说清楚了,下面看一张图:
突然发现csdn好流氓啊,这是我的一张程序运行的截图啊,里面就被它打上了自己的标签。。。
从上面的图片我们可以看出,这个程序实现的功能是,当你将鼠标放到那个灰白色的按钮上时,按钮要变色(作为一种交互的表现),当你用鼠标按下按钮时,按钮会显现出凹下去的形态,然后在你拖动按钮往左滑动后灯泡点亮,这就是我们程序实现的简单功能。
下面我们先不谈程序,我们先来一起头脑风暴一下,简单想想我们怎么做、需要什么:
其实我们大家都知道,动画就是一帧一帧的图片叠加的效果,我们要实现这个程序,就需要把图片准备好,那么我们来看一下需要哪些图片
1、首先,从灯泡看起,灯要实现亮起来的要求,那么我们就需要至少两张图,一张是灯没亮时的图片,另一张是灯亮了的图片
2、其次,从按钮看,我们需要的图就更多了,首先将底层的off和on这个显示做成一张图,然后上面用于滑动的按钮要单独分离出做出三张效果图,一张是正常状态下的灰白色,一张是鼠标触碰到按钮后按钮变色,最后一张是鼠标按下去后按钮要显现出凹下去的形态
3、最后,准备一张白色的背景图,这个就比较简单了。
这些图我都已经准备好了,如下图:
素材是已经准备好了,那么下面我们进入到程序方面的讨论:
1、首先,我们得给整个画面做一个初始化,也就是哪些东西是程序一运行我们就要展现出来的,我们可以看出,我上面展示的那张图就是初始化的界面图,要做到这我们需要好好了解一下SDL的工作方式。在SDL中,图片是画在渲染器上的,然后在将渲染器“推到“窗口上显示(这些初始化的东西可以在我文章开头提供的链接里了解到的)。
2、其次,我们得管理好鼠标和界面间的交互。在这个程序中,我们要处理的交互还是很多的,鼠标触碰到滑动按钮时按钮需要变色(作为一种交互形式,当然也可以自己设计如何表现),当我们用鼠标点击滑动按钮时,按钮要有凹陷的感觉,当我们鼠标拖动滑动按钮时,按钮要能随鼠标一起移动,当按钮到达边界时灯要亮起来,做到这些就需要我们处理好事件的响应工作。
当然,这些工作我会在代码中用注释的形式进行解释,这样才更利于理解。
首先得声明,要看懂这些代码,一定要了解SDL的简单操作(可以自己查找资料也可以使用我提供的链接)。
对于代码,先声明一句,由于是初学SDL,所以就想到哪写到哪了,没有用类进行处理,多以main函数中比较冗长,如果有机会的话,我后边会做出改进,希望大家见谅。
下面直接上代码:
#include<iostream>
#include<SDL/SDL.h>
#include <string>
using namespace std;
const int SCREEN_WIDTH = 640;
const int SCREEN_HEIGHT = 480;
SDL_Window *window = nullptr;
SDL_Renderer *renderer = nullptr;
//此函数用于加载图像
SDL_Texture* LoadImage(std::string file);
//此函数用于将纹理画到渲染器上
void ApplySurface(int x, int y, SDL_Texture *tex, SDL_Renderer *rend);
//此函数用于显示将要展示的画面,将各个图片画在渲染器上并展示出来
void PresentImage(SDL_Renderer *rend,SDL_Texture *background,SDL_Texture *light,int light_x,int light_y,SDL_Texture *baseButton,
int baseButton_x,int baseButton_y,SDL_Texture *button,int button_x,int button_y);
int main(int argc, char** argv)
{
if (SDL_Init(SDL_INIT_EVERYTHING) == -1){
std::cout << SDL_GetError() << std::endl;
return 1;
}
window = SDL_CreateWindow("LightDemo", SDL_WINDOWPOS_CENTERED,
SDL_WINDOWPOS_CENTERED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN); //创建一个绘制图片的窗口
if (window == nullptr){
std::cout << SDL_GetError() << std::endl;
return 2;
}
renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED
| SDL_RENDERER_PRESENTVSYNC); //创建一个指定到窗口的渲染器
if (renderer == nullptr){
std::cout << SDL_GetError() << std::endl;
return 3;
}
//定义我们程序需要用到的图片并加载它们
SDL_Texture *background = nullptr, *light_off = nullptr,*baseButton=nullptr,*initButton,*onButton,
*downButton,*light_on;
background = LoadImage("bg.bmp");
light_off = LoadImage("light_off.bmp");
light_on=LoadImage("light_on.bmp");
baseButton=LoadImage("base_button.bmp");
initButton=LoadImage("init_button.bmp");
onButton=LoadImage("on_button.bmp");
downButton=LoadImage("down_button.bmp");
//判断图片是否加载成功
if (background == nullptr || light_off == nullptr||light_on==nullptr||initButton==nullptr||
onButton==nullptr||baseButton==nullptr||downButton==nullptr)
return 4;
SDL_RenderClear(renderer); //清空屏幕
//设置背景图片的放置
int bW, bH;
SDL_QueryTexture(background, NULL, NULL, &bW, &bH);
ApplySurface(0, 0, background, renderer);
//设置熄灭的灯的放置位置
int iW, iH;
SDL_QueryTexture(light_off, NULL, NULL, &iW, &iH);
int light_x = SCREEN_WIDTH / 2 - iW / 2;
int light_y = SCREEN_HEIGHT / 3 - iH / 2;
ApplySurface(light_x, light_y, light_off, renderer);
//设置基础开关的位置
int buttonW,buttonH;
SDL_QueryTexture(baseButton,NULL,NULL,&buttonW,&buttonH);
int baseButton_x=SCREEN_WIDTH/2-buttonW/2;
int baseButton_y=SCREEN_WIDTH/3*2-2*buttonH;
ApplySurface(baseButton_x,baseButton_y,baseButton,renderer);
//设置开关滑动按钮的位置
int initButtonW,initButtonH;
SDL_QueryTexture(initButton,NULL,NULL,&initButtonW,&initButtonH);
//滑动按钮右边界的坐标
int moveToRight_x=baseButton_x+0.75*buttonW-initButtonW/2;
int moveToRight_y=baseButton_y+buttonH/2-initButtonH/2;
//滑动按钮左边界的坐标
int moveToLeft_x=baseButton_x+0.25*buttonW-initButtonW/2;
int moveToLeft_y=baseButton_y+buttonH/2-initButtonH/2;
ApplySurface(moveToRight_x,moveToRight_y,initButton,renderer);
SDL_RenderPresent(renderer);
// SDL_Delay(10000);
SDL_Event e;
bool quit=false; //用于标记用户是否想退出程序
int preMouseX,preMouseY;
int mouse_x,mouse_y;
bool mouseDown=false; //此变量用于指示鼠标是否一直按着没有松开
bool moveTo=false; //此变量用于表示滑动按钮可以移动的方向,false代表向左移动,true代表向右移动
int curButton_x=moveToRight_x; //此变量代表滑动按钮X轴方向的坐标
int curButton_y=moveToRight_y;
while(!quit)
{
while(SDL_PollEvent(&e))
{
switch(e.type)
{
//此种情况是退出程序用的,当你点击窗口的红X时就会关闭界面
case SDL_QUIT:
quit=true;
break;
//此处处理的是鼠标按下事件
case SDL_MOUSEBUTTONDOWN:
mouseDown=true;
preMouseX=e.button.x;
preMouseY=e.button.y;
//当鼠标在当前按钮的区域中时,此if语句得到执行
if(preMouseX>=curButton_x&&preMouseX<=curButton_x+initButtonW&&preMouseY>=curButton_y&&preMouseY<=curButton_y+initButtonH)
{
//当按钮位于最左面时,灯亮
if(curButton_x==moveToLeft_x)
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
}
else //当按钮不在最左面时,画灯不亮的图
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
}
}
break;
//鼠标弹起操作
case SDL_MOUSEBUTTONUP:
mouseDown=false; //表示用户鼠标点击已经松开了
break;
//鼠标移动操作
case SDL_MOUSEMOTION:
//记录鼠标移动时的坐标
mouse_x=e.motion.x;
mouse_y=e.motion.y;
if(!mouseDown) //此时处理的是鼠标有可能放到滑动按钮上的情况
{
if(curButton_x==moveToRight_x)
{
//此if语句在鼠标在按钮区域内且点击了按钮时执行,此时会刷新窗口,将按钮换成变色的按钮
if(mouse_x>=moveToRight_x&&mouse_x<=moveToRight_x+initButtonW&&mouse_y>=moveToRight_y&&mouse_y<=moveToRight_y+initButtonH)
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,onButton,
curButton_x,moveToRight_y);
}
else //此时表示鼠标点击在了空白区域,并不对它做出什么反应,将初始化的按钮画在窗口
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,moveToRight_y);
}
}
//此if语句执行的操作和上一个相似
if(curButton_x==moveToLeft_x)
{
if(mouse_x>=moveToLeft_x&&mouse_x<=moveToLeft_x+initButtonW&&mouse_y>=moveToLeft_y&&mouse_y<=moveToLeft_y+initButtonH)
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,onButton,
curButton_x,moveToLeft_y);
}
else
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,moveToLeft_y);
}
}
}
else //此处处理的是鼠标拖动情况
{
if(!moveTo) //当moveTo为false时执行,此时表示滑动按钮向左移动的操作
{
//当鼠标位于滑动按钮区域时
if(mouse_x>=curButton_x&&mouse_x<=curButton_x+initButtonW&&mouse_y>=curButton_y&&mouse_y<=curButton_y+initButtonH)
{
if(mouse_x>=preMouseX) //当鼠标往反方向移动时,不做操作
break;
curButton_x+=mouse_x-preMouseX; //移动后的button的x坐标位置
if(curButton_x<moveToLeft_x) //当鼠标移动后的距离超过了滑动按钮可移动的位置,便不再改变其位置
{
moveTo=true; //滑动按钮已经移动到最左端,将移动设置为可以向右移动
curButton_x=moveToLeft_x; //将滑动按钮的位置设置为边界值
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,curButton_y);
}
else //滑动按钮在鼠标拖动下的实时移动
{
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
SDL_Delay(80); //使滑动按钮的滑动速度慢些
}
}
}
else //滑动按钮向右移动的操作
{
if(mouse_x>=curButton_x&&mouse_x<=curButton_x+initButtonW&&mouse_y>=curButton_y&&mouse_y<=curButton_y+initButtonH)
{
SDL_RenderClear(renderer);
if(mouse_x<=preMouseX)
break;
curButton_x+=mouse_x-preMouseX; //移动后的button的x坐标位置
if(curButton_x>moveToRight_x) //当鼠标移动后的距离超过了滑动按钮可移动的位置,便不再改变其位置
{
moveTo=false; //滑动按钮已经移动到最右端,将移动设置为可以向左移动
curButton_x=moveToRight_x; //将滑动按钮的位置设置为边界值
PresentImage(renderer,background,light_off,light_x,light_y,baseButton,baseButton_x,baseButton_y,initButton,
curButton_x,curButton_y);
}
else //滑动按钮在鼠标拖动下的实时移动
{
PresentImage(renderer,background,light_on,light_x,light_y,baseButton,baseButton_x,baseButton_y,downButton,
curButton_x,curButton_y);
SDL_Delay(50); //使滑动按钮的滑动速度慢些
}
}
}
}
break;
default:
break;
}
}
}
//做好善后工作,释放掉资源
SDL_DestroyTexture(background);
SDL_DestroyTexture(light_off);
SDL_DestroyTexture(light_on);
SDL_DestroyTexture(baseButton);
SDL_DestroyTexture(initButton);
SDL_DestroyTexture(onButton);
SDL_DestroyTexture(downButton);
SDL_DestroyRenderer(renderer);
SDL_DestroyWindow(window);
SDL_Quit();
return 0;
}
SDL_Texture* LoadImage(std::string file)
{
SDL_Surface *loadedImage = nullptr;
SDL_Texture *texture = nullptr;
loadedImage = SDL_LoadBMP(file.c_str()); //加载图层
if (loadedImage != nullptr)
{
texture = SDL_CreateTextureFromSurface(renderer, loadedImage); //将图层转化为纹理
SDL_FreeSurface(loadedImage); //释放掉图层
}
else
std::cout << SDL_GetError() << std::endl;
return texture;
}
//此函数用于将纹理画到渲染器上
void ApplySurface(int x, int y, SDL_Texture *tex, SDL_Renderer *rend)
{
SDL_Rect pos;
//x,y是图片左上角的坐标
pos.x = x;
pos.y = y;
SDL_QueryTexture(tex, NULL, NULL, &pos.w, &pos.h);
SDL_RenderCopy(rend, tex, NULL, &pos); //将纹理tex画到渲染器rend
}
void PresentImage(SDL_Renderer *rend,SDL_Texture *background,SDL_Texture *light,int light_x,int light_y,SDL_Texture *baseButton,
int baseButton_x,int baseButton_y,SDL_Texture *button,int button_x,int button_y)
{
SDL_RenderClear(renderer); //清空屏幕
ApplySurface(0, 0, background, renderer);
ApplySurface(light_x, light_y, light, renderer);
ApplySurface(baseButton_x,baseButton_y,baseButton,renderer);
ApplySurface(button_x,button_y,button,renderer);
SDL_RenderPresent(renderer);
}
最后附上这个程序的源代码和图片资源的一个压缩包,可以在百度云盘提取,网址为:http://pan.baidu.com/s/1c87xBS。