java-教案.doc

Flash网页游戏“碰撞检测与处理”技术教 学 设 计所属学科：工 学所属专业：计算机科学与技术课程名称：网络游戏项目开发实战训练适用对象：计算机科学与技术（网络游戏）专业 本科生授课教师：赵瑛，马涛所在单位：北京联合大学师范学院教学目标：（1） 理解游戏中碰撞检测的基本原理；（2） 掌握Flash碰撞检测的实现方式；（3） 掌握Flash常用的碰撞处理方法；（4） 能够在Flash网页游戏开发中熟练运用碰撞检测与处理技术实现相应的游戏效果；（5） 培养学生的自主实践能力和团队合作精神。教学环境： 多媒体网络教室教学思想： 充分利用多媒体网络教室，构建信息化的教学环境，开展“以教师为主导、学生为主体”的实验教学，把教师和学生两方面的积极性、主动性和创造性都发挥出来，提高实验教学的效果和效率； 并且通过分组实践和小组成员之间的交流合作，培养学生的自主实践能力和团队精神。教学实施步骤：课前复习新课导入理论讲解实例剖析分组实践课堂总结教学策略与方法： 任务驱动式案例教学；多媒体演示、集体讲授、分组实践；注重教师的主导作用和发挥学生的主体性。教学过程设计：教学实施步 骤教 学行 为具体教学过程和教学内容1、课前复习提问 赵老师：同学们好，上次课我们一起学习了关于“网页游戏”的基础理论知识。下面我想请一位同学回答一下 “什么是网页游戏？网页游戏的主要特征是什么？”A同学你来回答一下。 A同学：网页游戏是网络游戏的重要形式之一，它是基于Web浏览器的网络在线多人游戏，又称无端网游或Web游戏。与单机游戏相比，网页游戏多了人与人之间的互动，与大型网络游戏相比，网页游戏更加方便快捷，它无需游戏客户端，玩家只需打开Web浏览器，即可进行游戏。 赵老师：回答得非常好。谢谢！请坐。2、新课导入讲授 赵老师： 网页游戏的最大特点就是方便、轻松。它的这种轻松、方便的娱乐特性非常适合上班族和上学族的需求。所以呢，目前，国内已有不少开发商在从事网页游戏的研发。那么网页游戏的开发技术主要有哪些呢？目前，占据网页游戏开发技术主流的无外乎两大类：Flash和Java。而且，Flash技术正以其强大的多媒体表现能力，受到越来越多开发者的关注。从这节课开始，我们将用几次课的时间一起来学习Flash网页游戏开发技术。今天的主要学习内容是 “碰撞检测与处理技术”。学习的方式是“先进行理论讲解、然后进行实例剖析，最后大家分组实践”。3、理论讲解讲 授屏幕广播板 书赵老师：首先我们进行理论讲解碰撞检测的基本原理 （赵老师边讲解边手指黑板上的板书）。几乎所有的游戏都要用到碰撞检测技术。很多人都玩过CS（Counter-Strike，中文叫“反教学实施步 骤教 学行 为具体教学过程和教学内容3、理论讲解讲 授屏幕广播板 书恐精英”）。大家想一想，在CS游戏中，游戏人物为什么不会穿墙而过？玩家发出的子弹为什么会打中敌人，敌人中弹就会倒下呢？这些都运用了碰撞检测与处理技术。 在现实世界中，碰撞是一种常见的动力学现象。其特点是在一个非常短暂的时间内，两个相互碰撞的实体之间产生相当大的冲击力，使实体发生形变或在一定程度上改变实体的运动状态。例如：在一个伸手不见五指的夜晚，我看不见前面是不是有墙，我径直走过去，结果 哎哟， 好痛好痛！ 这就是现实世界中的碰撞。 但是游戏是一个虚拟的世界。在这个虚拟世界中碰撞是怎么检测的呢？一般是通过检测两个实体所占的几何空间是否相交来判断是否发生了碰撞。我们都知道在现实世界中，每个实体都占有一定的几何空间，而且一般不可能出现两个实体相互穿透的离奇现象。例如：人不能穿墙而过。同样，在虚拟世界中，我们知道游戏是一个人造的虚拟世界，在这个虚拟世界中，如果两个实体所占的几何空间发生了相互穿透，即相交的情况，我们就认为这两个实体发生了碰撞。Flash就是利用这一原理来实现碰撞检测的，具体实现方式是：先将需要进行碰撞检测的两个实体封装成影片剪辑（MovieClip），然后利用MovieClip类的hitTest（）方法来检测。hitTest()方法的常用格式如下（老师边讲解边手指黑板上的板书）：影片剪辑1.hitTest（影片剪辑2）如果这个方法调用后，返回true，则说明这两个影片剪辑中实体发生了碰撞，接着就可以让程序做出各种各样的碰撞处理；如果返回false则说明没有发生碰撞。理论讲解就到这里，下面我们进入实例剖析环节。教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书赵老师：一起来看个游戏实例。先请我们的实践指导老师马涛老师给大家演示一下这个小游戏的玩法。马老师：我将要向大家演示的是一款用Flash开发的赛车游戏。游戏主要是挑战玩家反应灵敏度、手脑协调能力。绿色的赛车是玩家的，玩家可以通过键盘上的左、右方向键控制自己赛车；绿车在行进过程中会不断超过黄车，黄车是由系统控制的；在超车过程中，玩家应尽可能避免和系统的赛车相撞，若相撞了，玩家赛车的能源值就会减少。当能源值减为0时，游戏就会失败。下面请赵老师给大家做这个游戏的技术剖析。图1 实例的最终效果赵老师：制作这个小游戏的关键技术就是碰撞检测与处理。制作素材是两幅汽车图片、一个汽车相撞的背景音乐和一段扣人心弦的背景音乐。当我们进入综合实践环节时，这些图片素材和音乐素材就是由艺术设计专业和音乐学专业的学生负责创作的。我们计算机专业的学生主要负责技术实现工作。下教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书面我就给大家剖析一下这个小游戏的技术实现过程。请大家仔细观察，当没有相撞时，两车处在平稳行驶的状态；一旦相撞，两车就会颠簸摇晃一下然后恢复到平稳状态，同时发出碰撞声并且能源值减少。（1）首先要把汽车相撞前、相撞时、相撞后的一系列状态用动画表现出来。新建一个影片剪辑“行进中的黄车”，然后用逐帧动画来表现黄车的运动状态。第1帧是平稳状态，第24帧是颠簸摇晃状态，第5帧又是一个平稳状态。并且在第1帧和最后一帧都添加了使播放头停止的代码。这样，这个影片剪辑的初始状态就是黄车车平稳行驶；当发生碰撞时，我们就可以用代码指挥这个影片剪辑将播放头跳到第2帧开始往后播放，然后播放到最后一帧停止，这样就产生了颠簸摇晃直至停止的动画效果。图2 影片剪辑“行进中的黄车”时间线效果教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书用同样的方法，我们可以制作另一个影片剪辑“行进中的绿车”，用来表现绿车平稳行驶、颠簸摇晃直至平稳的动画效果。（2）接着就要是实现玩家对赛车的控制。在这个小游戏中，绿色的赛车是玩家的，玩家可以用键盘上的左、右方向键控制自己的赛车向左或向右运动。将影片剪辑元件“行进中的绿车”拖放到舞台上，并将实例名称改为“greenCar”。然后给“greenCar”编写如下代码：图3 影片剪辑greenCar的代码这段代码通过改变“greenCar”的x、y坐标值，来实现左右运动。编完代码之后，玩家的赛车就可以向左或向右移动了。（3）再要制作的就是黄车不断在远处出现并逐渐被绿车超越的游戏效果。新建一个影片剪辑“不断出现的黄车”，从库中将影片剪辑元件“行进中的黄车”拖放到舞台上，并将实例名称改为“yellowCar”，便于我们在后面用代码来控制它；然后运用补间动画制作出“黄车不断在远处出现，逐渐进入玩家视野，最后被玩家赛车超越”的游戏效果。把影片剪辑“不断出现的黄车”拖放到舞台上，并将实例名称改为“movingYellowCar”，看一下运行效果。大家仔细看，绿车和黄车相撞了。哎ing ，两车相撞怎么没有任何反应呢？既没有颠簸摇晃、也没有音效，能量值也没有减少。哦，原来我们还没有进行碰撞检测和相应的处理呢！教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书引发注意（4）这个游戏的关键技术环节绿车与黄车的碰撞检测与处理。请大家看我的演示。在“场景1”中新建一个“代码”图层，然后在该图层的第1帧中输入如下碰撞检测与处理代码。图4 “场景1”“代码”图层第1帧的初始代码(有待修改)在这段代码中，hitTest()方法用来检测黄车和绿车两个影片剪辑是否相撞了，然后进行相应的处理。看一下运行效果。赵老师：仔细听！两车相撞的碰撞声清楚吗？学生回答：“不清楚！”赵老师：两车相撞的碰撞声怎么会不清楚呢？在绿车和黄车的一次相撞过程中，碰撞声似乎连续发出了好几次，有重叠感，不真实！对不对？为什么会出现这种情况呢？这就要从onEnterFrame( )这个事件处理方法的执行机制说起。onEnterFrame( )方法是被系统自动调用执行的，而且是以swf文件的帧频重复调用执行的（在我们这个游戏中，采用的是默认帧频12帧/秒）。也就是说只要播放头停留在该帧上，该事件处理方法在一秒钟内将被调用执行12次。仔细看一下绿车与黄车的相撞的分解动作，从绿车车头碰到黄车，到车身与黄车相交，再到绿车车尾与黄车相交，最后两车完全分离。在这一次完整的相撞过程中，onEnterFrame( )方法被系统调用执行了多次，而且在两车完全分离之前，if语句中的条件表达式 教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书设 问this.greenCar.hitTest(this.movingYellowCar)=true永远是成立的，于是if语句体中的事件处理代码也就被执行了多次，声音也就被加载和播放了好多次。难怪相撞时的音效重叠感那么强，一点也不真实！ 赵老师：怎么办呢？有什么办法能让一次完整的碰撞过程只执行一次相撞事件处理代码呢？也就是说让一次相撞只发出一碰撞声，产生比较真实的游戏效果呢？办法是有的。而且不只一种。在这里我向大家介绍一种设标记的办法。请大家看我的演示。图5 第一次完善“场景1”“代码”图层第1帧的代码在程序中设立一个碰撞处理标记hitProcessed,并初始化为false，表示本次碰撞未被处理。然后修改if语句中条件：如果绿车和黄车发生了碰撞，并且本次碰撞还未进行处理，即hitProcessed=false，那么就执行碰撞处理代码。碰撞处理完成后，将hitProcessed标记值改为true，表示本次碰撞已被处理过了。等本次碰撞完全完成之后，即绿车和黄车完全分离之后，再将hitProcessed标记复位。这样就确保了“一次完整的碰撞过程只执行一次相撞事件处理代码”。查看运行效果，碰撞音效真实多了。教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书引发注意用同样的处理方法，我们可以实现两车相撞时颠簸摇晃，然后又平稳的游戏效果，以增强游戏的真实感。在if语句体内增加如下两行处理代码；图6 第二次完善“场景1”“代码”图层第1帧的代码根据之前的制作，我们知道greenCar这个影片剪辑从第24帧是颠簸摇晃的效果，第5帧是平稳状态，而且在第5帧位置有一个使播放头停止的代码。执行gotoAndPlay(2)这句语句就会让该影片剪辑的播放头从以到第2帧上，然后从哪里开始往后播放，直到遇到stop()语句。这样就产生了绿车先颠簸摇晃，然后又回复到平稳状态的游戏效果。用同样的方法，可以让黄车也产生同样的游戏效果。只是这里要注意的是要使嵌套在“movingYellowCar”中的影片剪辑“yellowCar”从第2帧开始播放。因为“movingYellowCar”是黄车的移动动画；“yellowCar”才是黄车的颠簸摇晃动画。看一下运行效果。两车相撞的动画效果和音效都已经出来了。好，我撞我撞，我的能量值不会减少，我是超级无敌赛车！永远不会死的！”。可能吗？（学生大笑，活跃课堂气氛！）教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书我们需要制作撞车后能量值减少的游戏效果。首先制作一个影片剪辑元件“变化的能量值”，用逐帧动画实现能量值不断减少的动画效果，并且添加一个代码图层，在每一帧上都添加一个使播放头停止的代码。图7 影片剪辑“变化的能量值”的时间线效果然后将影片剪辑元件“变化的能量值”拖放到舞台上，将其实例名称改为“energyValue”。在再if语句中添加如下代码，使每次碰撞之后能量值都有减少。观看运行效果。每撞一次，能量值就会相应地减少。教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书图8 第三次完善“场景1”“代码”图层第1帧的代码（5）游戏结束效果的制作。当能量值减为0时，游戏应该结束：出现游戏结束的提示语并使舞台上的所有实体元素复位。先制作游戏结束的提示语。新建一个影片剪辑元件“游戏失败”。然后制作一个提示语丛屏幕中部弹出的动画。图9 影片剪辑“游戏失败”的时间线效果教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书然后把该影片剪辑元件拖放到舞台上，并将实例名称改为“gameOver”，然后再补充相应的代码。图10 第四次完善“场景1”“代码”图层第1帧的代码同样，为了防止游戏结束的处理代码被反复执行，我们也设立一个游戏结束处理标记failProcessed，并初始化为false，表示未对游戏失败做出处理。然后用_currentframe属性获得energyValue这个影片剪辑播放头所停留的帧位置，如果5，就说明能量值还未减为0，因为从教学实施步 骤教 学行 为具体教学过程和教学内容4、实例剖析讲 解示 范屏幕广播板 书刚才的制作可以知道，我们一共用5帧来制作了能量值逐渐减少的动画，当到达第5帧时能量值减为0。所以如果播放头还没有到达第5帧，则表明能量值还未减为0，就应该进行赛车的碰撞检测与处理。如果energyValue这个影片剪辑的播放头到达了第5帧的位置，则表明能量值已经减为0游戏失败。这时要播放gameOver这个影片剪辑，出现游戏结束的提示语，并让舞台上的各实体复位。之后，将failProcessed标记复位为 true，表示已对本次游戏失败做出了处理。最后加上一个动态的游戏场景和扣人心弦的背景音乐，整个游戏效果就出来了（如图1所示）。5、分组实践分组指导刚才我们通过理论讲解使大家明白了碰撞检测的基本原理；然后又通过实例剖析，让大家知道了在Flash网页游戏中是怎样进行碰撞检测和处理的。接下来是分组实践环节。请同学们自愿组合，分成三个小组，通过小组合作的方式，分别完成 “射星星”、“跳跳龙”、和“星际大战”3个游戏的制作。先让马老师给大家演示一个这三个小游戏的玩法，并给出游戏的改进意见。图11 “射星星”游戏的效果教学实施步 骤教 学行 为具体教学过程和教学内容5、分组实践分组指导图12 “跳跳龙”游戏的效果图13 “星际大战”游戏的效果马老师演示完毕之后，赵老师把3个小游戏的最终运行效果和素材发给大家，然后大家自愿组合，分成三个小组，一个小组负责一个小游戏的制作；小组成员之间可以充分交流，共同探讨；大家在制作过程中，如果出现了小组内解决不了的问题，可以问赵老师，也可以问实践指导老师马老师。教学实施步 骤教 学行 为具体教学过程和教学内容6、课堂总结总 结为新课埋伏笔赵老师：通过这节课的学习和实践，大家知道了游戏中碰撞检测的基本原理，理解并掌握了Flash网页游戏中碰撞检测及相应的处理相关技术。不知道大家发现没有，在这节课的4个游戏实例中，敌人的运动方式都很呆板。就拿这个小赛车游戏来说吧，黄车的运动方式是由计算机预先设定好的，很呆板。玩家是在跟计算机博弈。如果黄车的运动方式是由另一个玩家控制的，那么这款游戏的博弈难度就会增加，游戏的可玩性也就增强了。如果游戏中有多辆赛车，且分别由不同的玩家控制，那么，很显然，游戏就更具有挑战性和可玩性，更能吸引玩家。这种由多个玩家参与控制的游戏才是多人在线网络游戏。在Flash网页游戏中，怎么让多个玩家参与进来并进行控制和博弈呢？这将是我们后续几节课的主要学习内容。这节课就上到这里，谢谢大家。再见！板书设计：Flash网页游戏“碰撞检测与处理”技术1、 碰撞检测的基本原理2、 碰撞检测的实现方式(1) 影片剪辑(2) hitTest( ) 方法影片剪辑1. hitTest ( 影片剪辑2 )3、 碰撞处理(1) onEnterFrame( )方法的执行机制(2)