1 / 63

第 10 章

第 10 章. Linux 的图形编程. 本章重点. 使用 SDL 图形开发库并及图形模式的初始化 基本绘图函数的应用 图片与文字的显示 动画 三维绘图 用 SDL 实现简单游戏设计. 10.1 Linux 的图形编程简介. 在 Linux 图形编程中，基于控制台的图形库主要有： SVGALib ： 是最早基于 Linux 的非 X 的图形支持库。 FrameBuffer ：出现在 Linux 2.2.x 内核当中的一种驱动程序接口。

atara
Download Presentation

第 10 章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 10 章 Linux的图形编程

  2. 本章重点 • 使用SDL图形开发库并及图形模式的初始化 • 基本绘图函数的应用 • 图片与文字的显示 • 动画 • 三维绘图 • 用SDL实现简单游戏设计

  3. 10.1 Linux的图形编程简介 在Linux 图形编程中，基于控制台的图形库主要有： • SVGALib： 是最早基于Linux的非X的图形支持库。 • FrameBuffer：出现在Linux 2.2.x内核当中的一种驱动程序接口。 • GGI：新一代的图形支持库。可在 FrameBuffer, SVGALib等设备上运行。在所有平台上提供了一致的输入设备接口, 采用共享库机制, 实现低层支持库的动态装载等 。 • OpenGL: 是个专业的3D程序接口，功能强大，调用方便的底层3D图形库。 • SDL：是一个跨平台的多媒体游戏支持库，包含了对图形、声音、游戏杆、线程等的支持。

  4. 10.2 安装和使用SDL图形开发库 • 系统安装时一般都已经默认安装了SDL库，如没安装，参见附录。 • SDL的基本库与附加库的库名与含义： • 使用SDL库需要包含头文件：#include "SDL.h" • 编译命令为：gcc –I/usr/include/SDL –lSDL 源程序名 –o 目标文件名 -lpthread • 如果程序中使用了图像库和混音库，在编译的时候还需要加上相应的编译参数，分别是-lSDL_image和-lSDL_mixer。

  5. 10.3 初始化图形模式 • 初始化图形模式中常用函数及功能 ： • 要加载和初始化SDL库需要调用SDL_Init()函数，该函数以一个参数来传递要激活的子系统的标记。 • SDL_Init()函数说明： • flags参数取值所对应的子系统对象 ：

  6. 10.3 初始化图形模式 • 例10.1 初始化视频子系统，设置显示模式为640×480大小。设置初始颜色为红色并对颜色值进行改变，使程序执行过程中背景色渐变。编写程序10-1.c，放在/home/cx/10-1目录下。 • 分析 用SDL_Init（SDL_INIT_VIDEO）初始化视频子系统，并用SDL_SetVideoMode()函数设置显示模式，最后用SDL_MapRGB()设置背景颜色。 • 流程图如图所示

  7. 10.3 初始化图形模式 • 步骤1 设计编辑源程序代码。 [root@localhost root]#mkdir /home/cx/10-1 root@localhost root]#cd /home/cx/10-1 [root@localhost 10-1]#gedit 10-1.c

  8. 10.3 初始化图形模式 • 步骤2 编写makefile工程文件 [root@localhost 10-1]#vi makefile CC = gcc AR = $(CC)ar CFLAGS= -I/usr/include/SDL -lSDL -lpthread 10-1:10-1.c $(CC) $(CFLAGS) $^ -o $@ clean: -rm -f $(EXEC) *.elf *.gdb *.o • 步骤3 执行make文件 [root@localhost 10-1]# make gcc -I/usr/include/SDL -lSDL -lpthread 10-1.c -o 10-1 • 步骤4 执行可执行文件 [root@localhost root]#./10-1 注意：gcc编译的时候要切换到文件所在目录下。如程序运行在Fedora Core 4环境，则不需要添加参数-lpthread。

  9. 10.3 初始化图形模式 • SDL_SetVideoMode函数说明

  10. 10.3 初始化图形模式 • SDL_Quit（）函数说明 • SDL_MapRGB函数说明

  11. 10.3 初始化图形模式 • SDL_FillRect函数说明

  12. 10.3 初始化图形模式 • SDL_UpdateRect函数说明

  13. 10.3 初始化图形模式 • SDL_Delay函数说明 • SDL使用中的一些数据类型： Uint8——相当于unsigned char Uint16——16位（2字节）unsigned integer Uint32——32位（4字节）unsigned integer Uint64——64位（8字节）unsigned integer

  14. 10.3 初始化图形模式 • 思考题： • 编写一个简单的SDL初始化程序：要求背景色为红色，让屏幕停留5秒。 • 编写一个简单的SDL初始化程序：要求背景色的红、绿、兰为随机显示值，让屏幕停留10秒。

  15. 10.4基本绘图函数的应用 • 本节主要应用SDL_draw函数库绘制点、线、圆等基本图形。 • 常用的基本绘图函数及功能：

  16. 10.4基本绘图函数的应用 • 例10.2 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，用Draw_Line函数画两条交叉的直线，一条直线起始点的坐标为（240，180），终止点的坐标为（400，300），另一条直线起始点的坐标为（400，180），终止点的坐标为（240，300）。再用Draw_Pixel函数绘制一条正弦曲线，程序名为10-2.c，存放在/home/cx/SDL_draw-1.2.11下。 • 步骤1 设计编辑源程序代码。 [root@localhost SDL_draw-1.2.11]#gedit 10-2.c

  17. 10.4 基本绘图函数的应用 • 步骤2 编写makefile工程文件 [root@localhost 10-3]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a 10-2: 10-2.c $(CC) -o 10-2 10-2.c $(CCFLAGS) • 步骤3 执行make文件 [root@localhost 10-2]# make gcc -o 10-2 10-2.c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a

  18. 10.4 基本绘图函数的应用 • 步骤4 编译成功后，执行可执行文件10-2，输入如下： [root@localhost 10-2]#./10-2

  19. 10.4 基本绘图函数的应用 • Draw_Line函数说明

  20. 10.4 基本绘图函数的应用 • Draw_Pixel函数说明

  21. 10.4 基本绘图函数的应用 • 思考题： • 编写一个简单的画线程序：要求设置背景色为红色，线条颜色为绿色，绘制一个边长为120的正三角形，同时让屏幕停留8秒。 • 线段长度无限短后就成为点，请用画线的方法画出正弦曲线。 • 能否用画线的方法实现动画。

  22. 10.4 基本绘图函数的应用 • 例10.3 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，画5个黄色的同心圆，圆心坐标为（320，240），最小的圆半径为5，其他圆的半径以15的大小递增，程序名为10-3.c，存放在/home/cx/SDL_draw-1.2.11下。 • 步骤1 设计编辑源程序代码。 [root@localhost SDL_draw-1.2.11]#gedit 10-3.c

  23. 10.4 基本绘图函数的应用 • 步骤2 编写makefile工程文件 [root@localhost 10-3]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a 10-3: 10-3.c $(CC) -o 10-3 10-3.c $(CCFLAGS) • 步骤3 执行make文件 [root@localhost 10-3]# make gcc -o 10-3 10-3.c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a • 步骤4 编译成功后，执行可执行文件10-3，输入如下： [root@localhost 10-3]#./10-3

  24. 10.4 基本绘图函数的应用 • Draw_Circle函数说明

  25. 10.4 基本绘图函数的应用 • 思考题： • 编写一个画圆的程序。要求设置背景色为黄色，线条颜色为蓝色，以正三角形的三个顶点为圆心，半径为60画三个圆，同时让屏幕停留8秒。 • 画一个半径渐渐增大、颜色随机变化的圆。 • 画一个圆，此圆沿着正弦曲线运动。 提示：请参考下列代码 for(i=0;i<120;i++,x=x+3,y=y+sin(x-80)) { Draw_Circle(screen,x,y, r, SDL_MapRGB(screen->format, 255,0,0)); SDL_Delay(100); Draw_Circle(screen,x,y, r, SDL_MapRGB(screen->format, 255,255,255)); Draw_Line(screen, x,y, x+3,y=y+sin(x-80),SDL_MapRGB(screen->format, 255,0,0)); SDL_UpdateRect(screen, 0, 0, 0, 0); /*更新整个屏幕*/ }

  26. 10.4 基本绘图函数的应用 • 10.4 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位。用Draw_Rect函数画两个矩形，一个矩形的左上角坐标是（80，180），宽和高分别是160和120，颜色为白色；另一个矩形的左上角坐标是（319，179），宽和高分别是242和122，颜色为黄色。用Draw_FillRect函数画一个矩形，其左上角坐标是（320，180），宽和高分别是240和120，颜色为红色。程序名为10-4.c，存放在/home/cx/SDL_draw-1.2.11下。 • 步骤1 设计编辑源程序代码。 [root@localhost SDL_draw-1.2.11]#gedit 10-4.c

  27. 10.4 基本绘图函数的应用 • 步骤2 编写makefile工程文件 [root@localhost 10-4]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a 10-4: 10-4.c $(CC) -o 10-4 10-4.c $(CCFLAGS) • 步骤3 执行make文件 [root@localhost 10-4]# make gcc -o 10-4 10-4.c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a • 步骤4 编译成功后，执行可执行文件10-4，输入如下： [root@localhost 10-4]#./10-4

  28. 10.4基本绘图函数的应用 • Draw_Rect函数说明 ： 思考题：编写一个画矩形的程序：实现五个矩形从大到小向屏幕中心依次缩小，每个矩形间隔20个单位，要求最里面即最小的矩形宽、高分别为80和60，同时让屏幕停留5秒。

  29. 10.4基本绘图函数的应用 • 例10.5 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640*480,表面的色深为16位，用Draw_HLine函数画一水平直线，起始点为（240，240），长度为160，颜色为白色；用Draw_VLine函数画一垂直直线，起始点为（320，180），长度为120，颜色为红色，用Draw_Ellipse函数画一椭圆，圆心（240，180），x轴径76，y轴径56，颜色为蓝色，用Draw_FillEllipse填充此椭圆，用Draw_Round画一圆角矩形，左上角坐标为（322，122），宽为156，高为116，圆角的半径为10，颜色为绿色，用Draw_FillRound填充此圆角矩形。 • 步骤1 设计编辑源程序代码。 [root@localhost SDL_draw-1.2.11]#gedit 10-5.c

  30. 10.4 基本绘图函数的应用 • 步骤2 编写makefile工程文件 [root@localhost 10-5]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a 10-5: 10-5.c $(CC) -o 10-5 10-5.c $(CCFLAGS) • 步骤3 执行make文件 [root@localhost 10-5]# make gcc -o 10-5 10-5.c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw-1.2.11/include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw-1.2.11/src/.libs/libSDL_draw.a • 步骤4 编译成功后，执行可执行文件10-5，输入如下： [root@localhost 10-5]#./10-5

  31. 10.4基本绘图函数的应用 • Draw_HLine函数说明： • Draw_VLine函数说明： • Draw_Ellipse函数说明： • Draw_Round函数说明：

  32. 10.5 图片与文字显示 • 常用的函数及功能 ：

  33. 10.5 图片与文字显示 • 例10.6 设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，加载位图b.bmp，并按照一定的顺序把位图排列显示。设程序名为10-6.c，存放在/home/cx/下，位图名为b.bmp也存放在该目录下。 • 分析 在程序中编写一个showBMP()函数，用来显示位图，在主函数中调用它。showBMP()函数中给位图分配一个surface，得到位图的大小。在主函数中先初始化视频系统，设置视频模式，指定第一张图片的位置，然后利用for循环显示图片。 • 步骤1 设计编辑源程序代码。 [root@localhost cx]#gedit 10-6.c

  34. 10.5 图片与文字显示 • 步骤2 编译程序。 切换到源程序所在目录下，用gcc进行编译，编译的时候加上-lSDL和-lpthread选项。 [root@localhost cx]# gcc -I/usr/include/SDL -lSDL -lpthread 10-6.c -o 10-6 或写成makefile文件,然后执行make命令。makefile文件代码如下： CC = gcc AR = $(CC)ar CFLAGS= -I/usr/include/SDL -lSDL -lpthread 10-6:10-6.c $(CC) $(CFLAGS) $^ -o $@ clean: -rm -f $(EXEC) *.elf *.gdb *.o • 步骤3 编译成功后，执行可执行文件10-6，输入如下： [root@localhost cx]#./10-6

  35. 10.5 图片与文字显示 • SDL_LoadBMP函数说明： • SDL_BlitSurface函数说明：

  36. 10.5 图片与文字显示 • 思考题：要求自行制作一张矩形位图，用位图实现屏幕左上角到屏幕右下角对角线连接（模拟图如下图所示），图片按照阶梯的形式在程序运行的时候显示出来，同时让屏幕停留5秒，在Linux下编辑、编译、运行。

  37. 10.5 图片与文字显示 • 例10.7 设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，使用SDL_ttf库在屏幕上显示“Linux下TrueType字体显示示例”，字体大小为38，颜色为红色。设程序名为10-7.c，存放在/home/cx/下。 • 分析 显示中文字体首先要打开字库文件，字库用的是simsun.ttc文件，视频子系统的初始化和设置都和之前一样，然后分配一个专门用来显示字体的surface，使用SDL_BlitSurface（）对象快速转换。 • 步骤1 准备工作。 • 把Windows下C:\WINDOWS\Fonts中的simsun.ttc文件拷贝到Linux下的/usr/share/fonts/下，用于显示中文。 • 步骤2 设计编辑源程序代码。 [root@localhost cx]#gedit 10-7.c

  38. 10.5 图片与文字显示 • 步骤3 编译程序。 • 切换到源程序所在目录，用gcc进行编译，在编译时需要添加-lSDL_ttf参数选项。 • [root@localhost cx]# gcc -I/usr/include/SDL -lSDL -lpthread 10-7.c -o 10-7 -lSDL_ttf 文件保存的时候请使用UTF8格式保存，才能正常显示中文字体。

  39. 10.5 图片与文字显示 • TTF_OpenFont函数说明 • TTF_SetFontStyle函数说明

  40. 10.5 图片与文字显示 • TTF_RenderUTF8_Blended函数说明

  41. 10.5 图片与文字显示 • TTF_Init函数说明 • TTF_CloseFont函数说明

  42. 10.5 图片与文字显示 • TTF_Quit函数说明 思考题：编写一个程序，主要实现粗体、斜体、下划线等字体效果，同时让屏幕停留5秒。

  43. 10.6 动画 • 动画的常用函数： • 例10.8 设计一个程序，实现矩形的运动，矩形是通过位图显示，当矩形碰到四边时，会自动反弹，按任意键退出。按程序名为10-8.c，存放在/home/cx/下，位图素材（b.bmp）也存放在该目录下。 • 分析 加载位图直接使用SDL_LoadBMP()函数。位图在xy方向上的坐标都以3个单位的移动量在一定的时间差内起规律性变化，向左直至键盘激发退出事件。

  44. 10.6 动画 流程图

  45. 10.6动画 • 步骤1 设计编辑源程序代码。 [root@localhost cx]#gedit 10-8.c

  46. 10.6动画 • 步骤2 编译程序。 • 切换到源程序所在目录下，用gcc进行编译，编译的时候加上-lSDL和-lpthread选项。 • [root@localhost cx]# gcc –I/usr/include/SDL –lSDL 10-8.c –o 10-8 –lpthread • 步骤3 编译成功后，执行可执行文件10-8，输入如下： [root@localhost cx]#./10-8

  47. 10.6 动画 • SDL_GetTicks函数说明 • SDL_Flip函数说明 思考题：编写一个程序，主要实现圆球运动效果，使用键盘事件，按下Esc键退出程序。

  48. 10.7 三维绘图 • 三维绘图的常用函数：

  49. 10.7 三维绘图 • 例10.9 设计一个程序，在屏幕上绘制一个立体矩形，并按照一定的角度和方向旋转。设程序名为10-9.c，存放在/home/cx/下。 • 分析 创建三维立体图形要先做一系列的初始化设置，要设置视觉角度、背景色、深度缓存、选择投影矩阵等，三维绘图中比较重要的就是矩阵的运用。具体到绘制的时候，是画一个个平面，同时要注意角度的选择和设置。其中，glTranslatef函数是用来指定具体的值来多元化矩阵，glRotatef函数让对象按照某个轴旋转，两者综合运用使得三维图形有不同的效果。 • 步骤1 设计编辑源程序代码。 [root@localhost cx]#gedit 10-9.c

  50. 10.7 三维绘图 • 步骤2 程序调试。 • 切换到源程序所在目录下，用gcc进行编译，编译的时候除了-lSDL和-lpthread选项，还需加上-lGL和-lGLU参数，因为在这程序中用到三维库的支持。 • [root@localhost cx]#gcc –I/usr/include/SDL –lSDL 10-9.c –o 10-9 –lpthread –lGL -lGLU • 步骤3 编译成功后，执行可执行文件10-9，输入如下： [root@localhost cx]#./10-9

More Related