当前课程知识点:Python 交互式程序设计导论 > 第3周 > A 课程视频(画布绘图) > 图片和音效
返回《Python 交互式程序设计导论》慕课在线视频课程列表
同学们,大家好,欢迎来到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本身存在一些缺陷,我们在开发程序的过程中要注意一下
修改,好了
这一讲,给大家介绍到这里,在我们的游戏当中使用图片还有音乐来改善游戏的效果
好,谢谢大家,我们下次再见
-课程简介
--课程简介
-A 课程视频(算数操作符及表达式)
--绪论
-B 课程视频(变量及赋值)
--变量
--项目提交
-C 辅助视频(计算机结构、Python开发环境安装)
-D 辅助视频(如何提交项目)
--项目提交
-第0周--小测验
-本周项目:"我喜欢Python"
--游戏说明
--程序说明
--编码步骤
--评分标准
--项目模板
--项目提交
-A 课程视频(函数)
--函数
--其它操作符
--随机函数
-B 课程视频(逻辑及表达式)
--逻辑值和比较
--条件
--编程技巧
-第1周--小测验
-本周项目:“老虎杠子鸡虫”游戏
--游戏说明
--程序说明
--编码步骤
--评分标准
--项目模板
-A 课程视频(Python交互式应用)
--事件驱动编程
--按钮
-B 课程视频(输入框、全局变量)
--输入框
--编程技巧
-第2周--小测验A
-第2周--小测验B
-本周项目:猫咪藏在哪个房间
--游戏说明
--程序说明
--编码步骤
--评分标准
--项目模板
-A 课程视频(画布绘图)
--画布和图形绘制
--字符串处理
--图片和音效
-B 课程视频(计时器)
--计时器
--交互式绘图
--“神奇时钟”游戏
--编程技巧
-第3周--小测验A
-第3周--小测验B
-本周项目:“神奇时钟”
--游戏说明
--程序说明
--编码步骤
--评分标准
--项目模板
-A 课程视频(列表)
--列表
--键盘输入
--碰撞和反射
-B 课程视频(键盘控制)
--速度控制
--运动
--编程技巧
--“桌上冰球”游戏
-第4周--小测验A
-第4周--小测验B
-本周项目:“桌上冰球”游戏
--游戏说明
--程序说明
--编码步骤
--评分标准
--项目模板
-A 课程视频(鼠标输入、列表进阶)
--鼠标输入
--Video
--Video
--Video
-B 课程视频(字典和图片)
--Video
--Video
--Video
--Video
-第5周--小测验A
-第5周--小测验B
-本周项目:“世界杯八强连连看”
--游戏说明
--程序说明
--编码步骤
--评分标准
--项目模板
-A 课程视频(类)
--华容道中的类
-B 课程视频(平铺图片)
--平铺图片
--理解对象
--编程技巧
--“华容道”游戏
-第6周--小测验A
-第6周--小测验B
-本周项目:“华容道”游戏
--游戏说明
--程序说明
--编码步骤
--评分标准
--项目模板
-A 课程视频(类进阶及文件操作)
--集合
--文件操作
--文字块类
--处理停止的文字块
-B 课程视频(游戏状态控制)
--游戏记分规则
--编程技巧
-第7周--小测验A
-第7周--小测验B
-本周项目:决战三字经
--游戏说明
--程序说明
--编程步骤
--评分标准
--项目模板
-A、课程视屏(精灵集合)
--Video
--精灵类
--战士类
--编程技巧
-B、课程视屏(动画)
--精灵碰撞
--精灵动画
--编程技巧
--保卫家园游戏
-第8周--小测验
-本周项目:守卫家园
--游戏说明
--程序说明
--编程步骤
--评分标准
--项目模板