第6章动画与游戏V1.1.pptxVIP

第6章 动画与游戏哈尔滨工程大学 王向辉本章学习目标： 动画效果是游戏中不可缺少的内容，本章主要介绍画布（Canvas）和精灵（ImageSprite）的使用方法，以及一些高级的动画功能，如边缘检测、碰撞处理和精灵操纵等。掌握画布的使用方法 理解画布的坐标系统 掌握精灵的使用方法掌握球（Ball）的使用方法了解边缘检测和碰撞处理的原理6.1 画布6.1.1画布介绍 画布是一种可在其上绘制图像的控件，初始的画布像一张空白幻灯片，没有任何内容，用户可以在画布上绘制各种图形，也可以在画布上加载图片作为画布的背景，或是在画布上显示文字。画布是常用的控件，除了作为绘制图形的承载体以外，还经常作为游戏的背景画面。 画布是一个具有触控感应的二维平面图板，采用经典的二维坐标系，原点在画布的左上角。右图使用坐标点(X,Y)说明画布的坐标系，X表示坐标点距离左侧边缘的距离，Y表示坐标点距离上边缘的距离，且X和Y都取正值。6.1 画布6.1.2画布使用 在基本控件库中可以找到画布（Canvas），将画布拖拽到界面设计区后，画布仅仅显示为一个小图标，如下图所示。6.1 画布画布属性 除可使用宽度和高度属性控制画布的大小外，画布还支持更改背景颜色(BackgroundColor)和更改背景图片(BackgroundImage)、设置画笔的颜色(PaintColor）和宽度(Linewidth），以及画布是否可见（Visible）等属性。画布的全部属性如右图所示，属性说明参照下表。属性说明BackgroundColor背景颜色BackgroundImage背景图片FondSize字体大小Linewidth画笔宽度PaintColor画笔颜色TextAlignment文字排列方式Visible画布控件是否可见Width画布宽度Height画布高度6.1 画布画布事件 画布支持的事件有拖拽事件（Dragged）、触碰事件（Touched）、快速划动事件（Flung）、触碰按下事件（TouchDown）和触碰抬起事件（TouchUp），如下表所示。事件说明Dragged拖拽事件Flung快速划动事件TouchDown触碰按下事件TouchUp触碰抬起事件Touched触碰事件，由触碰按下动作和触碰抬起动作组成6.1 画布画布事件画布的Touched、TouchDown和TouchUp事件 以下图场景为例，说明画布事件的响应规律。此图演示手指从A点按下，缓慢的沿弧线，从B点滑动到C点，然后抬起手指的过程。 手指接触到A点时产生TouchDown事件；手指从A到B再到C的移动过程中，将多次产生Dragged事件；在手指离开C点时，产生TouchUp事件。TouchDown和TouchUp事件只在手指触碰到屏幕和离开屏幕时产生。如果手指的触碰点和抬起点是同一点，将引发Touched事件；如果手指在屏幕上移动了，则不会引发Touched事件。6.1 画布画布事件画布的Dragged事件 Dragged事件在手指移动过程中持续产生，主要用来跟踪手指的移动轨迹。该事件提供三个坐标，分别是移动开始坐标点（StartX和StartY）、事件产生时的当前坐标点（CurrentX和CurrentY）、前一个事件产生时的坐标点（PrevX和PrevY）。 以右图场景为例，如果从A点到C的过程中，只在B点和C点产生了Dragged事件，则在C点产生的事件中，移动开始节点是A，当前节点是C，前一个事件产生是在B点。6.1 画布画布事件画布的Flung事件 画布的Flung事件只有手指在屏幕上快速划动的时候才会产生。以右图场景为例，在从A经过B到C的过程中，如果手指在屏幕上移动的足够快，则当手指在C点抬起时，会产生Flung事件。Flung事件中会提供划动开始节点的坐标、划动方向、速度、速度在X轴和Y轴的分量。 逻辑编辑器中的画布事件如下图所示：6.1 画布画布控件示例CanvasEvent CanvasEvent示例说明画布的事件响应的时机和提供的数据。下图分别是在界面编辑器中的界面和手机运行时的界面。CanvasEvent示例中上方是画布控件，下方是各种事件数据的显示区域。在上方的画布上进行触碰操作或滑动操作，事件的响应结果便会显示在界面下部。6.1 画布画布控件示例CanvasEvent示例CanvasEvent逻辑控制模块如下：Flung事件和Dragged事件处理函数逻辑模块6.1 画布画布控件示例CanvasEventTouchDown事件和TouchUp事件处理函数逻辑模块Touched事件处理函数逻辑模块6.1 画布画布方法 CanvasEvent示例详细介绍了画布所支持的事件，以及事件的使用方法。下面具体介绍画布所支持的方法，如清空画布、绘制图形、画布保存等。画布所