使用SDL2显示一张图片,SDL2上手贴

SDL全名Simple DirectMedia Layer,是一个跨平台的底层音频、视频、键盘、鼠标操作库,操作实际通过更底层的OpenGL/Direct3D完成,在保留跨平台的兼容性之外提供了非常高的效率,所以广泛的应用在多种游戏和对速度敏感的应用中,比如鼎鼎大名的steam平台/ffmpeg/qemu/模拟器等,当前的版本是2.0。更详细的资料可以访问官网:https://www.libsdl.org/。 SDL2的编程理念清晰易用,代码简洁高效,这里用显式一副图片的最简代码来作为入门的示例,正式的教学可以搜索很多国内的教学网站。 老办法,让代码自己来说话:

#include <stdio.h>
//引入SDL头文件
#include <SDL.h>        
//显式bmp之外的图片需要用到sdl_image库,需要单独引入头文件
#include <SDL_image.h>

#define bool int
#define false 0
#define true (!false)

int main(int argc, char ** argv)
{
    bool quit = false;
    SDL_Event event;

     //SDL初始化,这里只显示图片,所以只初始化VIDEO系统,更多的支持查看官方文档
    SDL_Init(SDL_INIT_VIDEO);
    //为了显示png图片,额外使用了图片库,所以要单独初始化
    IMG_Init(IMG_INIT_JPG); 

    //建立SDL窗口
    SDL_Window * window = SDL_CreateWindow("SDL2 Displaying Image",
                SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, 0);
    //渲染层
    SDL_Renderer * renderer = SDL_CreateRenderer(window, -1, 0);
    //如果只是显示一张bmp图片,使用sdl内置的功能即可
    //SDL_Surface * image = SDL_LoadBMP("only_support_BMP.bmp");
    //因为要显示png图片,所以使用了外部库,sdl_image库当前支持jpg/png/webp/tiff图片格式
    SDL_Surface * image = IMG_Load("/Users/andrew/Downloads/webFavorite/3481980_orig.png");
    //载入的图片生成SDL贴图材质
    SDL_Texture * texture = SDL_CreateTextureFromSurface(renderer, image);
 
    while (!quit)
    {//主消息循环
        SDL_WaitEvent(&event);
 
        switch (event.type)
        {   //用户从菜单要求退出程序
            case SDL_QUIT:
                quit = true;
                break;
        }
 
       //如果指定显示位置使用下面注释起来的两句
        //SDL_Rect dstrect = { 5, 5, 320, 240 };
        //SDL_RenderCopy(renderer, texture, NULL, &dstrect);
        //把贴图材质复制到渲染器
        SDL_RenderCopy(renderer, texture, NULL, NULL);
        //显示出来
        SDL_RenderPresent(renderer);
    }
     //典型的三明治结构,清理各项资源
    SDL_DestroyTexture(texture);
    SDL_FreeSurface(image);
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    //退出image库
    IMG_Quit();
    //退出SDL
    SDL_Quit();
 
    return 0;
}

代码中基本算是逐句注释,所以读起来应当很清晰。主要需要说明的有两点,但其实跟这段代码并没有直接关系,而是有关在众多的绘图技术、架构、方案中,SDL处于一个什么位置: 1.首先是绘图哲学,使用过OpenGL及Direct3D的看这些代码应当不陌生,但这里要单独给传统GUI绘图的同学多说两句。通常使用GUI绘图,大概是这样一个逻辑,请看伪代码:

准备画板();

画一个点(x,y);
画一条线(x1,y1,x2,y2,c);
画一个圆(x,y,r,c);
贴一张图(x,y,w,h,bmp);

结束绘图();

在伪代码的过程中,每执行一条命令,比如画了线,在屏幕上就会看到结果,然后那条线也会一直存在,直到程序清掉它或者其它屏幕元素遮住它。 而SDL所使用的模式用伪代码表示大致是这样的逻辑:

准备工作();
主循环 {
    游戏逻辑处理();
    界面元素1进场();
    界面元素2进场();
    界面元素n进场();
    渲染();
    是否退出判断();
}

比较主要的区别是,每一个界面元素,或者说屏上的元素进场,并非真正的绘图,只是像拍电影一样准备一个场景。等到所有屏幕元素都到齐,场景完全准备好,再一次性渲染,这时候是真正的绘制到屏幕上。更形象的比喻就好像演员都准备好了,相机快门按下,才真正成像。这个成像称为一帧,随后循环起来,一次次的准备好场景、渲染成像,就形成了连续不断的帧从而形成了帧动画,也就是我们熟悉的屏幕游戏画面。这里面每一秒钟能够进行多少次循环,就成为了游戏玩家熟悉的帧率,追求高帧率是大多游戏玩家对电脑的要求。 这两种绘图的方式,各有优劣,但依据特征,有不同的应用方向。前者多用于打印、绘图输出相关的办公、平面设计等场合,传统软件的界面也多用这种方式,还有比如我们都熟悉的上网浏览器页面也是采用这种渲染方式。这种方式对速度不敏感,虽然有可能硬件加速,但实际上大多工作是由CPU完成的。 后者也就是SDL所采用的方式,则在游戏、视频、3D动画、VR、AR等领域大放异彩,我们耳熟能详的OpenGL、Direct3D也都采用这种方式,这种方式的流程逻辑,也更适合把大量的数据和素材交给GPU去完成更耗时的计算。 显而易见,从绘图哲学的角度看,SDL/OpenGL/Direct3D所采用的绘图方式,显然更适合3D类绘图、动画的加速,那么这种技术对平面绘图,比如就是单纯的视频播放,是如何加速的呢?其实很简单,我们知道所有的3D绘图都包括至少两个主要的部分,一是3D物体的构造模型,比如是一个球体还是一个圆柱体;另一部分则是这个3D物体表面看起来是什么样子的,比如是一个石膏的球体还是一个毛绒玩具的球体。这第二部分就需要用到材质,材质实际上主要是由三维物体的表面积在二维展开的图片。所以3D绘图对二维的加速实际上就是在屏幕上绘制一个全屏幕的平面,然后把二维图像当做材质贴图上去的结果。你看上面SDL代码中载入的png图片,实际最后就是当做一副材质(texture)来使用了。 2.SDL/OpenGL/Direct3D同GTK/MFC/QT/Cocoa是什么关系? 刚才其实比较清楚的讲了SDL/OpenGL/Direct3D在绘图上的作用,其实它们就是一套绘图的体系。 GTK/MFC/QT/Cocoa也是显示相关这没错,但是它们主要是提供用户程序的界面管理、显示及事件处理。更具体一点说,比如你看到屏幕上的菜单、窗口、对话框、按钮、文字,几乎都是这些界面管理器来实现的,我们点了一个按钮、拖动一个窗口,都会产生事件,这些事件会由这些界面管理器收集、分类、排序,调用响应用户响应函数做出最后的处理。所以平常我们所见的应用程序,其实都是基于这一类软件库完成的。而重要的是,这些界面管理库,实际上最终也是经由OpenGL/Direct3D或者类似功能更底层一些的显示绘图库来完成界面部分的绘制功能。但是这些显示系统往往太庞大、臃肿了,对于对速度极为敏感的游戏、视频类应用而言,通常我们见到的这些界面所占比重又比较小,所以游戏类的应用,往往不采用或者较少部分采用这些传统的界面管理库。 这两类系统往往不是独立存在的,比如举例说一个视频播放器,播放器的窗口界面、菜单、文件打开等界面和操作,都是由界面管理器比如Windows上的MFC或者Mac上的Cocoa来完成的,到真正视频播放的环节,在窗口中给定的区域,则是由SDL、OpenGL、Direct3D出马,完成视频的逐帧绘制的功能。

回到今天的主题。上面的代码在编译的时候,因为使用了SDL2/SDL_image两个额外的附加库,所以在编译、执行代码之前,首先要安装这两个软件库。在mac电脑上安装这两个库的命令是:brew install sdl2 sdl2_image。 编译代码使用:

gcc -o sdlpng sdlpng.c $(pkg-config --cflags --libs sdl2_image)

后面$(pkg-config --cflags --libs sdl2_image)的意思是,将sdl2_image代码库及其依赖库(这里当然就是sdl2库)的编译参数和引用库参数全部显示出来,作为字符串加入到编译命令中去。这个功能是由pkg-config这个包管理器完成的。如果不需要处理png图片,只是bmp图片,则不需要使用sdl2_image库,仅适用sdl2库即可。这个时候可以使用$(pkg-config --cflags --libs sdl2)。sdl2也提供了自己的包参数工具sdl2-config可以完成类似的功能,但仅对自己有效,所以为了通用起见,我们还是使用pkg-config更方便一些。 谈到附加包的编译参数,我们也经常看到一些教科书上写成类似:`pkg-config --cflags --libs sdl2`这样的形式,这是因为在bash下面,反单引号`就是用来执行命令、并将结果当做字符串返回的功能。但是这种方式在别的shell,比如fish中是不起作用的,但是$( ... )这样的方式就有了更好的通用性。

参考链接: http://gigi.nullneuron.net/gigilabs/loading-images-in-sdl2-with-sdl_image/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coding迪斯尼

VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发

994
来自专栏生信技能树

【Python版】 极简单方式实现 Circos

很高兴再次见到生信技能树的粉丝们,我是技能树VIP小编tsznxx,目前在安德森肿瘤医院工作,记忆力好的小朋友应该对我之前的教程有印象: 用GenePred注释...

33610
来自专栏Crossin的编程教室

用程序帮你炒股

最近在知乎上看到一个问题:如何使用 Python 抓取雪球网页? 雪球是国内一个人气很高的股票财经类网站,上面有个投资组合功能,很多民间股神在上面设定自己的投资...

2927
来自专栏不二小段

【一起学Python】STEAM游戏评测爬虫

别催更,越催越懒得写。催更只接受赞赏…可惜我的微信还没有赞赏的功能… 今天刚接的需求&新鲜的代码… 有个大佬昨天跟我说 来给我爬一下Steam的游戏评测吧,我...

6106
来自专栏Android机动车

Material Design 在 Android 中的应用

我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当...

812
来自专栏数据小魔方

Xcelsius(水晶仪表)系列5——统计图综合运用

今天继续跟大家分享水晶仪表系列的第5篇——统计图的综合运用。 本例是一个通过展现某银行前八年的存款储蓄以及贷款数据,通过预计后两年的存款储蓄增长率、贷款增长率等...

32011
来自专栏知晓程序

你的微信输入速度超过全国 99.9% 的好友 | 晓技巧

955
来自专栏机器学习和数学

[编程经验] 我是如何半自动抓取素材公社图片的

网络爬虫是一件比较繁琐的事情,特别考验人的耐心。但又是非常令人着迷的一件事,因为当你从网络上爬到了自己的想要的数据,满满的成就感油然而生。但是我对爬虫掌握的并不...

3235
来自专栏华章科技

Excel技巧篇:嘿!别说你会复制粘贴

有时,我们用函数公式计算出了某个结果,把结果复制到表格其它地方后,却发现数据变成错误值了。。。把公式结果粘贴成数值,立马搞定这个问题。

723
来自专栏数据小魔方

一言不合就爬虫系列之——爬取小姐姐的秒拍MV

大连的盛夏实在是热的让人心烦(对于我这种既怕热又怕冷的真的没地呆了)。 再加上令人头疼的毕业论文,这种日子怎能缺少MV来解暑呢。 既然要听,怎么只听一首呢,既然...

3055

扫码关注云+社区