第三章 坐标系统以及帧延迟循环.doc

闽江学院教案校际选修课 课程名称Flash游戏编程 任课老师： 肖刚第三章 坐标系统以及延迟循环模式教学提要Flash中的坐标系统可视化设计和编程的结合延迟循环模式利用剪辑嵌套改进了的延迟循环模式重点与难点重点是如何将可视化设计与编程结合，并善于利用帧跳转实现游戏逻辑中的循环。教学内容：一、 Flash中的坐标系统任何可视对象都有一个坐标值（x，y），它的含义是相对于坐标原点来说，它的中心点在什么位置。通过读取这个坐标值就可以知道对象的坐标，而通过改变对象的坐标值，也就可以改变它在屏幕上的位置。注意：计算机的坐标原点为左上角，并且向下为y轴增长的方向。如下图所示：对象的坐标中心点默认情况下，是在对象外接矩形的左上角。一个五角星的坐标中心点如下图所示：坐标中心点要与几何中心点、变形中心点以及信息中心点区别开来。坐标中心点：对象的x，y坐标点，默认为左上角，不可调整，但是可以通过移动对象内部的可视对象使中心位于对象的任何位置。方法：双击进入对象内部，几何中心点：对象的几何中心点。变形中心点：对象进行放大、缩小、旋转能变形时的参考中心点，默认为几何中心，可以调整使之位于对象的任何位置。如下图所示，在使用自由变形工具时，对象内部的一个空心圆即为其变形中心，可以用鼠标拖动这个中心点。信息中心点：在信息面板中显示对象的坐标，可以以坐标中心为依据，也可以以几何中心为依据。如下图所示：以坐标中心为信息中心以几何中心为信息中心另外，属性栏中的坐标值总是以坐标中心为准。如下图所示：属性栏中的坐标显示程序总是以坐标中心点作为对象的中心点。坐标原点分为两种情况：1、 如果可视对象直接放置在舞台上，则以舞台的左上角作为坐标原点。2、 如果可视对象嵌套在某可视对象内，则以某可视对象的坐标中心点作为坐标原点。也就是说，对象的坐标值是相对的概念。指相对于它的上层对象的中心点，它的坐标值是多少。可视对象层次结构中的坐标具有嵌套的特点。事实上，不仅仅是坐标，像角度、透明度等可视对象属性都具有嵌套的特点。假设对象a中嵌套着对象b，则b的属性与a的嵌套关系如下表所示：属性嵌套关系不透明度（alpha）全局不透明度=a.alpha*b.alpha活动状态（enable）全局活动状态=（a.enable&b.enable）高度（height）全局高度=a. scaleY *b.height角度（rotation）全局角度a.rotation+b.rotation可见性（visible）全局可见性=（a.visible&b.visible）宽度（width）全局宽度=a. scaleX *b.widthx坐标（x）全局x坐标=a.x+b.x*a. scaleXy坐标（y）全局y坐标=a.y+b.y*a. scaleY鼠标x坐标（mouseX）全局root. mouseX =a.x+(b.x+b. mouseX) *a. scaleX鼠标y坐标（mouseY）全局root. mouseY =a.y+(b.y+b. mouseY) *a. scaleYx缩放（scaleX）全局x缩放=a. scaleX *b. scaleXy缩放（scaleY）全局y缩放=a. scaleY *b. scaleY理解这一嵌套关系，对Flash游戏编程人员来说非常重要。二、 可视化设计和编程的结合Flash将动画和程序完美地集成在一起，可以先在Flash中设计游戏画面、角色动画、特效等，然后在脚本中控制它们，轻松地实现精美的游戏。就让我们看看，是如何在可视化环境下设计的动画中使用ActionScript吧！举例：花瓶和桌子程序描述：房间里有一张桌子，桌子上放着一个花瓶。拖动桌子时桌子和花瓶一起移动，拖动花瓶时只有花瓶移动，而且只能在桌子的宽度范围内水平移动。松开鼠标的时候，输出桌子和花瓶的坐标值。这个例子里，我们可以将花瓶和桌子分别做成剪辑。然后将它们嵌套在一个大的剪辑内是一种不错的做法。这样当拖动桌子时让大剪辑移动，而拖动花瓶的时候，让花瓶剪辑移动，此时可以直接参考桌子的坐标系统，轻松达到限制花瓶移动范围的目的。即使用如下的显示对象层次结构：制作步骤如下：1) 新建Flash文件，绘制房间内景、桌子和花瓶元素。也可以直接打开“花瓶和桌子1.fla”文件，里面已经绘制好场景了。场景如下图所示：花瓶和桌子原始场景2) 选中桌子，按F8，将元件名称改为desk，类型为影片剪辑，中心为左上角，然后按确定。如下图所示：桌子剪辑的定义3) 选中花瓶，按F8将花瓶转化为影片剪辑。名称改为vase，中心为下方中间，然后按确定。如下图所示：花瓶剪辑的定义4) 调整花瓶和桌子的相对位置，然后选中花瓶剪辑，按Shift键的同时点击桌子剪辑，将桌子也选中，然后按F8，转化为影片剪辑，名称为deskvase。中心为几何中心。5) 为了能在脚本中控制这些元件，必须给在场景中的元件实例起一个实例名称。选中包含桌子和花瓶的大剪辑，在属性面板中设置实例名称为deskvase。同样的，双击进入deskvase剪辑内部，选中花瓶剪辑，在属性面板中设置它的实例名称为vase。设置桌子剪辑的实例名称为desk。如下图所示：定义实例名称注意：实例名称与元件名称是两个不同的概念。实例名称是对舞台上剪辑实例的引用，而元件名称是元件库中剪辑的名称。可以理解为前者是类实例名，而后者是类名。ActionScript中用实例名称引用舞台上的剪辑对象，所以需要手动设置其实例名称之后才能编程控制它。实例名称和元件名称相同并不冲突，如本例所示。6) 双击deskvase剪辑进入剪辑内部，点击新建图层，双击图层的名字，将图层名称改为“action”，这个图层专门用来存放deskvase剪辑内部的脚本。如下图所示：专用的action图层虽然这一步不是必要的，但是把图层的名称改成与图层内容相对应的名字可以提高程序的可维护性，把脚本放在一个单独的图层中目的也是一样。7) 在action图层的第1帧中输入以下代码：/仅适用于ActionScript3.0import flash.geom.Rectangle;/这个自定义函数用来输出每个对象所在的位置。function showPosition() trace(花瓶的位置是：+int(vase.x)+,+int(vase.y);trace(桌子的位置是：+int(desk.x)+,+int(desk.y);trace(桌子和花瓶的位置是：+int(x)+,+int(y);function dragVase(evt:MouseEvent) /定义一个矩形区域，四个参数分别为x，y，宽度，高度var rect:Rectangle=new Rectangle(desk.x+vase.width/2,desk.y,desk.width-vase.width,0);vase.startDrag(false,rect);function dropVase(evt:MouseEvent) vase.stopDrag();showPosition();function dragBoth(evt:MouseEvent) this.startDrag();function dropBoth(evt:MouseEvent) parent. deskvase.stopDrag();showPosition();vase.addEventListener(MouseEvent.MOUSE_DOWN,dragVase);vase.addEventListener(MouseEvent.MOUSE_UP,dropVase);desk.addEventListener(MouseEvent.MOUSE_DOWN,dragBoth);desk.addEventListener(MouseEvent.MOUSE_UP,dropBoth);8) 按CtrlS保存文件，并按Ctrl+Enter测试代码，然后尝试拖动桌子或者花瓶，看看有什么效果。代码解释：由于这段代码放在deskvase实例的时间轴上， this指针指代当前对象，也就是deskvase，this指针可以省略，如代码中this.x、this.y被省略为x、y。rect对象用来创建一个矩形区域， 作为startDrag函数的参数，用来限定对象被拖动的范围。当拖动deskvase时，由于desk和vase都是它的子项目，所以被一起拖动了。parent属性指代当前显示对象的上一层级对象，如本例中使用parent指代deskvase的上一层对象，也就是主时间轴剪辑。本例中的parent. deskvase即为deskvase对象本身。主时间轴剪辑也可以用root关键字指代。三、 延迟循环模式Flash程序的一些关键代码往往要求间隔一段时间后被重新执行。例如角色走路，它需要根据速度参数的值，每过一个时间间隔往某个方向移动某个距离，直到完成为止。再比如一个人机对战的例子里，电脑控制的角色为了知道玩家控制的角色目前在什么位置，它必须每过一个时间间隔检测一下玩家的方位。ActionScript提供了多种获得时间延迟的方法，现介绍其中最常用的一种方法：帧跳转。这也是最简单的循环模式，典型的是三帧模式和四帧模式。其帧结构如下图所示：初始化关键代码跳转结果 1 2 3 4 帧循环模式第1帧是初始化，用来定义需要使用到的变量并且赋初始值，以及定义各种函数。第2帧是被重复执行的代码，第3帧有一条跳转语句，跳回第2帧并播放（gotoAndPlay(2)），这样第2帧的代码又被执行。如果这段代码有结束的需要，则在满足结束条件的时候让它跳到第4帧并停止（gotoAndStop(4)）。正常情况下，帧之间跳转的时间间隔是帧频率数分之一秒。例如帧频率设置为50fps，那么上图的关键代码，因为每次跳转之间间隔2帧的时间，所以将每间隔0.04秒就被执行一遍。示例程序：弹球帧循环的一个典型例子是弹球游戏。这里先提取它的弹球运动部分进行讲解，并将其扩展为物理运动现象的模拟，就是让弹球模拟现实中的运动，它有重力、空气阻尼以及碰撞损失等现象。程序描述：屏幕上有一个弹球，它能够在屏幕内作弹跳运动，它会根据给定的参数如重力、空气阻尼、碰撞损失等表现出相应的运动方式，还可以通过鼠标点击并抛甩小球的方式给小球一个初始的运动状态。 关键部分讲解：这个程序的关键点是两个：1） 如何实现运动现象模拟2） 如何实现鼠标抛甩来获得初始运动状态而这两个问题，都是巧妙地应用帧跳转技术实现的。将Flash文档的帧频率设定为50fps，采用三帧循环模式，则每过0.04秒，关键代码就被执行一遍。在关键代码中，包含如下两个部分的代码：1） 当弹球处于弹跳运动状态时，我们先以0.04秒为时间间隔，计算出经过秒之后弹球的位移，公式为，然后根据计算结果设置弹球坐标。如果考虑重力因素，则公式为：，如果考虑空气阻尼，则公式为：，其中为阻尼系数。同理，如果要模拟风、摩擦力下的运动、简谐振动等等，都有公式可循，这些公式用ActionScript编程实现是非常容易的事情。碰撞后弹球将反弹，实现反弹效果的方法非常简单，只要在满足边界条件的情况下，改变速度的方向即可。例如当小球碰到屏幕的下方时，其y坐标满足边界条件，那么只要使用公式即可（如果计算碰撞损失，则公式应做相应的调整），根据新的运动，自然就表现为反弹了。2） 当弹球处于被拖动状态时，也就是用户用鼠标按住弹球并抛甩。在这个状态下，每隔记录当前小球的坐标，获得每隔时间，弹球的坐标差异为。则瞬时速度为。直到用户松开鼠标时，将这个最新的瞬时速度作为弹跳运动状态下的初始速度，弹球进入弹跳运动状态。设为单位时间，则理想弹跳运动的公式可以简化：现在，我们在Flash中具体实现这个弹球运动，步骤如下：1） 新建Flash文档（AS3），设置文档尺寸为800600，背景为黑色，帧频率为50。点击“确定”按钮。2） 将图层1改名为“弹球”，然后在弹球图层绘制一个小球。选中小球，设置小球的宽高都为40，然后按F8，将其转化为元件，类型为影片剪辑，中心位置为几何中心。选中这个弹球，在属性面板中设置实例名称为ball。点击弹球第3帧，然后按F5插入非关键帧。这样ball对象在三帧内都有效。3） 新建图层，改名为action。然后在其第1帧输入如下代码：var dragging:Boolean=false;/状态参数，指明是否正在被拖动var g:Number=0.1;/重力参数var zuni:Number=0.998;/空气阻尼系数var pzss=0.1;/碰撞损失参数var speedx=0;/x方向的速度var speedy=0;/y方向的速度var newx=ball.x;/当前时刻的坐标var newy=ball.y;var oldx=newx;/前一时刻的坐标var oldy=newy;var stageHeight=600,stageWidth=800;/屏幕的尺寸var radio=ball.width/2;/小圆的半径ball.addEventListener(MouseEvent.MOUSE_DOWN,dragBall);ball.addEventListener(MouseEvent.MOUSE_UP,dropBall);function dragBall(evt:MouseEvent) dragging = true;evt.target.startDrag();function dropBall(evt:MouseEvent) dragging=false;evt.target.stopDrag();这段代码起初始化和定义事件处理函数之用。4） 点击action图层的第2帧，按F6插入关键帧，然后输入以下代码：if (dragging) newx = ball.x;newy = ball.y;speedx = newx-oldx;speedy = newy-oldy;oldx = newx;oldy = newy; else speedy=(speedy+g)*( zuni);speedx=speedx*(zuni);newx =ball.x+speedx;newy = ball.y+speedy;if (newxstageWidth-radio) speedx = -speedx*(1-pzss); else ball.x = newx;if (newystageHeight-radio) speedy = -speedy*(1-pzss); else ball.y = newy;这段代码就是重复执行的那部分代码。当在拖动状态下，通过前后时刻的坐标计算当前的速度。当在非拖动状态下，则根据加速度修改速度、根据速度计算下一时刻坐标，根据坐标位置进行反弹、碰撞损失等计算，然后将坐标赋值给ball对象。5） 点击action图层的第3帧，按F6插入关键帧，然后输入如下的代码：gotoAndPlay(2);这段代码让时间轴播放头跳回第2帧，于是形成典型的三帧循环。调试程序，直到达到原定效果。尝试修改各个运动参数，看有什么效果。四、 利用剪辑嵌套改进了的延迟循环模式继续上面弹球的例子，当时我们将循环的