图片和音效在线视频

同学们，大家好，欢迎来到Python交互式程序设计MOOC课堂

这一讲，我们向大家介绍，如何在游戏程序中使用图像图片，还有音乐，来添加音效

为什么在游戏中要使用图像和音效呢，这是因为图像添加在游戏当中添加图像因素 还有声音因素

可以使得我们的游戏画面更加丰富，音响效果更加震撼，让它声容并茂，使得游戏更引人入胜

好的，要在我们的游戏程序当中使用图像和声音，首先，我们要准备图片资源，还有音乐资源

simpleguitk支持的图片资源主要是png格式，还有jpg格式 它支持的音乐格式主要有wav格式还有ogg格式

实际上simpleguitk提供的接口当中，非常简单的一些函数能够完成对图像图片的操作

首先，要使用图片，我们要用load_image这个函数（方法），加载图片

它可以从网络上加载图片，也可以从本地加载图片

然后，我们用draw_image（方法）可以对已经加载的图片进行处理，能够把它绘制在画板上

当然，我们可以绘制原始图像的一部分，也可以绘制整个图像，我们可以在画板的任何 位置来绘制我们的图像，我们可以按原来的大小绘制图形，也可以对原来的图像进行缩放

同时，我们也可以按原来的方位绘制图像，也可以让这个图像发生旋转以后再把它绘制出来

一样，对于声音文件，我们首先也要加载它，用load_sound这个函数（方法）可以加载声音文件 它也可以从网络上加载声音文件，也可以从本地加载声音文件

加载成功以后，我们可以用set_volume（方法）指定音量的大小，我们还可以用rewind函数（方法）从头播放 我们还可以用pause函数（方法）把播放的音乐停止

我们当然可以用play这个函数（方法）让音乐开始播放

好了，下面，我们通过演示来看看在程序中，具体来如何使用声音和图像这两个资源

使得我们的游戏更加丰富多彩

好，首先打开pycharm，可以看看我们游戏程序的框架，已经有了

要导入simpleguitk，我们可以通过网络加载图片资源，可以通过本地加载图片资源 也可以通过网络加载音乐资源，可以通过本地加载音乐资源

紧接着，我们会创建一个窗口框架或者我们的舞台，然后，我们为它们添加一个屏幕刷新函数 注册这个函数，然后，让这个舞台启动起来

好，下面看看，如何通过网络来加载图片资源

用gui.load_image可以加载图片

注意，给的参数是一个url ，就是网络上的一个链接

下面这个也一样，要想让这个函数正确的执行，首先这个url必须是存在的

我们可以在浏览器当中进行测试

把这个网络地址拷贝下来，打开浏览器，输入刚才我们拷贝下来的地址，打回车 这时候，可以看到浏览器显示一幅图片

并且告诉我们这个图片的格式png格式，大小是1024*768，说明这个图片在网络上确实存在的

一样，第二幅图片，我们也可以看看，拷贝下来，把它放在浏览器，添加到一个新的标签打开，可以看到，这幅图片也是存在的，这是本人的照片

只有保证网络上这个资源是存在的，我们加载它才可以成功

好了，下面，看看如何把它们绘制在屏幕上，绘制到我们画板当中

好，在这个函数里面，这是我们的屏幕刷新事件处理函数当中，我们要添加代码来绘制刚才添加的两个图像

好了，第一个图像，它的大小，注意看一下，也是1024*768，而我们的画板大小也是1024*768

这样 我们可以把它作为画板的一个背景图像让它来显示出来

怎么让它显示出来呢，好，canvas.draw_image这个函数（方法），首先第一个参数是，图片的对象

好，这里有我们加载过来的图片，赋到background

好，这就是我们的图片对象

第二个参数是原始图片它的中心位置

也就是说，我们绘制原始图片的哪一部分，从哪个点开始，多大，绘制多大

这是它的中心位置，因为我们知道这个图像的大小是1024*768，所以，它的正中央是512*384

紧接着是原始图片的大小，这个图片的大小，我们不改变图片的大小，不准备对它进行缩放（裁剪）

第三个参数是我们要在画板什么的位置，作为中心点来画这幅图像，也是画板的正中间

因为宽度除以2，1024除以2，512，768除以2，384，也是在画板的正中间

在画板上画多大这个图像，我们给的是1024*768，说明我们对这个图像不进行缩放

好，现在来执行，看看它的效果，注意看

这副图片，完完整整的显示在这个画板的上面，好，紧接着把第二幅也给画上去

注意，在画它的时候，我们看一下，这副照片它的大小，1080*720，这是这副图片原始的大小

现在，我们绘制它的时候，注意，这是原始图像的大小，没有进行任何处理（不裁剪）

这是原始图像的中心点，宽度除以2，高度除以2，就是它的中心点

现在，我把它绘制到哪个地方呢，这是我画板中心点，就是这副图像要出现的中心点

这是它的大小，现在看它绘制图像后的大小，是原来的一半，（长宽都）缩小了一半，1080的一半540，720的一半360

现在看一下这个参数，如果要想把它画在画板的正中央，如何来计算画板正中央

的坐标点呢，注意看，画板的宽度1024个像素，那它的正中央512 ，画板的高度768

那它的正中央768除以2，384，这就是画板中心的坐标点

注意看，正中央出现了我的照片，并且大小缩小了1倍（长宽都缩小了1倍）

没问题，注意看最后一个参数，是0，这个参数，表示图像要不要作旋转处理

0表示不旋转，如果我们想让它旋转90度，让这个图像旋转90度，注意，这里导入一下math这个数学包

我们这里让它旋转90度，这个参数是用弧度为单位来提供的

math.pi，pi是180度，除以2，是90度

好，现在来运行，注意看，我的照片旋转了90度，当然，也可以让它旋转180度

再来看，好，旋转了180度

如果这里是0呢，表示图像不旋转，原来它是什么样的位置关系就是什么样的位置关系

好了，这是如何在我们的画布上显示一副图片

现在，我们显示的是两幅图片

一个是背景，上面这副图片，我们原始大小是1080*720 ，但是，我们在显示的时候把它缩小了一倍

显示出来，是这样的效果

现在我们再看看更多的图片，把它们加载上来

这里有一些蝴蝶，我们看一看，蝴蝶的第一幅照片，第二幅照片，第三幅照片，第四幅照片，第五幅照片，一直到第十四副

如果你把它连续去播放，其实，就是蝴蝶飞舞的一个动画效果

好，我们把这些图片也加载进来

好，现在，我们希望这个蝴蝶呢，让它们飞舞起来

蝴蝶的大小是多大呢，我们放到浏览器里看一下

我们这个图片的大小，128*100，就是宽度128个像素，高度100个像素，格式当然是png

好，要让它动起来，总共14张图片，放到一个列表里面，这是第一件事情

然后，我们希望在画板上绘制图像

好了，这时候让我自己的照片显示到左上角

好， 看看，它是不是显示到左上角

对，左上角，大小还是缩小了1倍

我们要让蝴蝶的图片飞舞起来

就这几行代码，注意，这里有个frame，这还没有定义呢，我们在前面定义一下

然后在函数里对frame进行了修改，所以，要把它声明成全局变量

另外，这个蝴蝶，它的中心位置也是没有定义的， 我们可以在上面定义一下

我们假设这个蝴蝶从右下方向左上方飞行

右下方的坐标位置1024， 画板的宽度和画板的高度，画板的高度是768，这是定义中心位置，下面就可以对它进行处理

看看这些代码的含义，来给大家解释一下

我们知道，这个display函数是屏幕刷新事件的处理函数

它每秒钟会被调用60次，每调用一次，我们让frame增加1， frame就是屏幕显示的第几帧

从第0帧开始，每调用一次增加一帧，第一次调用帧数变成1，第二次调用帧数变成2， 以此类推

而我们要显示的图片总共14个，所以用frame和14相除

取它的余数，最终得到的结果是0到13之间的某个值

刚好和我们图片的下标0到13是对应的

然后，究竟应该显示哪个呢，就是由这个值来决定的

当它的值是0的时候，我们显示第0张的图片，当它的值是1的时候，我们显示第1张的图片

以此类推，最多到13，过了13它又会回来，从0开始

每次显示的时候，我们让蝴蝶的中心位置，开始是1024*768，让它各减1，向左上角开始移动它的中心位置

具体显示哪幅照片呢

哪幅蝴蝶的图片是由index这个下标来决定的

所以，每次调用函数的时候，可能显示不同的图片，刚好连起来，就会形成动画的效果

我们知道，这个蝴蝶,图片的大小是128*100，所以，它的中心位置是128除2，64，100除2，50

而蝴蝶图片的大小是128，100，没问题，中心点每次调用都发生改变

这样，就实现了移动的效果，而每次调用不同图片，就实现了动画的效果

本身，这个图片在画布上画多大呢，还是128*100，图片本身我们没有进行缩放

好了， 现在运行这个效果，注意看，这只蝴蝶从右下角开始向左上角移动， 并且，我们每次调用不同的图片

所以就有一个飞翔的动画的效果，除了位置发生变化，每次显示图片发生变化，就实现了动画的效果

好了，关于在我们的程序中如何使用图片，就给大家演示这么多，下面来来如何使用声音

一样，使用声音之前，我们首先要加载声音，看怎么来加载声音

音乐文件，要加载音乐文件和加载图片文件很相似

只不过，加载的图片文件的类型不一样，还有，注意一下， 两个用的函数（方法）不一样

加载图片是load_image，加载声音是load_sound

后面也是，我们通过网络加载音乐，url 就是网址，链接到的这个对应的文件

注意看，我们这里文件支持的格式是ogg或者是wav 这两种格式， 图片，我们前面有两种格式， 一种是png，一种是 jpg两种格式

好，一旦文件加载成功，文件加载成功以后，我们可以设置声音的大小

第一个文件声音大小，设成最大值0到1之间的一个值

当然，也可以为第二个音乐资源设置音量

一旦设置好以后 ，我们就可以来使用这些音乐资源

好了，我们希望通过按钮控制来播放音乐，或者停止音乐，这个做起来也很容易

首先为程序添加一个播放背景音乐的按钮，播放背景音乐按钮

开始显示“播放背景音乐” 一旦这个按钮被点下去，我们会调用这个函数

按钮本身的宽度是50个像素，这个函数background_music是不存在的，我们要定义它，定义这个函数

好，注意这个函数，我们首先要判断，音乐是不是正在播放，如果正在播放，那个按钮上就会显示“关闭背景音乐”

你一点，背景音乐就会停止，如果我们没有播放音乐，没有背景音乐，这时候，按钮上显示的是“播放背景音乐”

你点“播放背景音乐” 按钮，就会转换成“关闭背景音乐”

但是，开始播放背景音乐

好，这里头出现一个新的变量，play_music

我们需要在前面声明一下

一开始，是不播放音乐的，现在我们看看这个程序运行起来的效果

好，注意看，我们这里有一个“播放背景音乐”的按钮

点击下去，音乐开始播放，屏幕上变成 “关闭背景音乐”， 这时候，点下去

背景音乐停止，按钮又回来，变回成了“播放背景音乐 ”

我们再添加一个按钮，来播放游戏当中的特殊音效

比如说，射击这种效果，添加了这个按钮，按钮上显示的文字是，射击

当我们点击这个按钮，执行的函数是fire ，宽度也是 50个像素，我们把这个变量保存起来

一样，我们会定义fire这个函数，游戏玩家一旦点击“射击”这个按钮，就会播放我们

fire_sound从头开始，回到音乐的开头，然后播放，fire_sound在前面我们加载过，fire_sound加载的是这个文件

我们现在运行一下，好，看看出现“射击”这个按钮

我们点一下，非常震撼的播放出射击音效

好了，我们已经给大家演示了如何通过网络资源来加载图片，加载音乐

然后，如何在我们的程序当中绘制图片缩放图片旋转图片

同时，如何通过按钮来控制播放背景音乐，或者通过按钮来控制播放某种特殊的音效

好，下面看看如何从本地资源来加载这些图片

首先，本地资源在我们的项目文件夹下，我们要把这些声音文件先要保存下来

比如说，在这个项目当中，有一个子文件夹，叫image，下面放着我们所有的图片，还有个sounds，下面放着两个声音文件

实际上，它具体的位置在哪呢，在我们的计算机上这个项目保存的位置

这个项目，项目下面有这两个文件夹，文件夹下面放的是我们的图片和声音

这是放在我这台计算机，而不是放在网络，因此，又叫本地文件，如何通过本地来访问资源，把它变成我们游戏当中的效果，通过本地来加载图片

这样，我们这些代码就不需要了，通过网络加载就不需要了

这个要放在它后面，现在，把这些注释语句去掉， 这时候，通过本地加载图片，剩下的代码，我们不需要修改

好，运行看看，有什么效果

注意，发生了错误，这里错误提示，可能是英文，大家看起来有困难

大家，注意一下image的21行，这个错误，是本身由于simpleguitk它内部有bug，有缺陷

我们把它改一下，点击这个文件到21行，把open这个函数，再加一个参数rb，意思是，这是以二进制的方式去读这个文件

好，现在，我们再来运行，好，没问题， 图片也加载好了

注意，现在加载的这些图片，背景图片，本人照片，还有14个蝴蝶的图片，都是从这台计算机上，就是我这台正在使用的计算机上加载上来的，而不是通过网络加载上来的

好了，一样的，声音，我们也可以通过 本地来加载，这时候，这两行就不需要了 ，通过网络加载就不需要了

当然，设置音量大小，我们依然需要，我们放在后面，好，现在来运行，这时候 两个音效都是通过本地来加载的

运行，注意看，也有这样一个错误，sound.py21行，也有错误，原因是一样的

好，点击它，修改它，在这里，好，再来运行，好，播放，关闭，射击，好的， 大家看到了，两种方式加载音乐，这都是没问题的

但是simpleguitk本身存在一些缺陷，我们在开发程序的过程中要注意一下

修改，好了

这一讲，给大家介绍到这里，在我们的游戏当中使用图片还有音乐来改善游戏的效果

好，谢谢大家，我们下次再见