chapter7二维游戏动画合成.pptx

第七章 二维游戏动画合成 浙江大学软件学院 梁秀波 Email： 计算机动画概述 常见计算机动画技术 Cocos2d-x中的动作类 Cocos2d-x中的动画 游戏动画实例侠客行 本章目录 动画 把动态物体的运动过程人为地制作成静态画面 以逐格摄影、逐帧录制、存储的形式记录 利用人眼视觉特点，以一定速度连续播放 计算机动画 采用图形图像处理技术，借助于编程或动画制作 软件生成一系列动态连续图像 计算机动画概述 常见计算机动画技术 基本动画 技术 脚本驱动 动画技术 骨骼动画 技术 基本动画技术 逐帧动画 将组成动画所需的一系列画面存放在不同帧中，一帧 一帧顺序播放 关键帧动画 动画师从连续动作的画面中，选出少数几帧画面作为 关键帧，在关键帧的基础上，使用计算机自动生成期 望帧序列 常见计算机动画技术 脚本驱动的动画技术 指定人物如何运动 指定场景与人物的交互方式 控制具体的运动任务 规划动画人物的运动路径 运动过程避开障碍 动画人物的运动协调 常见计算机动画技术 骨骼动画技术 与人体运动方式相似，把角色各部分身体部件图 片绑定到互相连接作用的“骨头”上，通过骨骼 的位置变化而生成动画 只需少量图像资源，骨骼动画数据保存在Json文 件中，占用空间小 常见计算机动画技术 Flash 3ds Max Maya 常见动画制作软件 Action：动作特效。引擎内部封装了很多Action的子类 ，它们分别实现了各种各样的特效，如移动、旋转、跳 动、缩放、闪烁等等。每一个Node都可以通过 runAction(Action* action)来播放一个特效。 动作特效代码示例： /创建一个精灵 auto sprite = Sprite:create(“fish.png”); /创建一个移动的动作特效 auto moveAction = MoveTo:create(2, Point(0, 0); /让精灵执行这个动作 sprite-runAction(moveAction); Cocos2d-x的动作类 Cocos2d-x的动作类 Object Action FiniteTimeAction ActionInstantActionInterval FollowSpeed 有限次动作执行类 ，就是按时间顺序 执行一系列动作， 执行完后动作结束 ； 瞬时动作的 基类:动作瞬 间完成 延时动作的基类 ： 动作执行需要一 定时间 调整节点的 执行速度 可以使节点跟 随指定的另一 个节点移动。 延时动作 /参数: 持续时间，移动到的坐标 auto actionTo = MoveTo:create(2, Point(80,80); /参数: 持续时间，移动的位移 auto actionBy = MoveBy:create(2, Point(80,80); MoveTo/MoveBy：移动动作。继承自ActionInterval 延时动作 RotateTo/RotateBy：旋转动作。继承自ActionInterval。 /参数: 持续时间，x和y轴上旋转到的角度 auto actionTo = RotateTo:create( 2, 45); /参数: 持续时间，x和y轴上旋转的角度 auto actionBy = RotateBy:create(2 , 360); /创建一个由actionBy特效逆转的动作 auto actionByBack = actionBy-reverse(); 延时动作 ScaleTo/ScaleBy：缩放特效。继承自ActionInterval。 /参数: 持续时间，缩放到的倍数 auto actionTo = ScaleTo:create(2.0f, 0.5f); /参数: 持续时间，缩放的倍数 auto actionBy = ScaleBy:create(2.0f, 1.0f, 10.0f); 延时动作 SkewTo/SkewBy：倾斜动作。继承自ActionInterval。 /参数: 持续时间，x轴上倾斜到的角度，y轴上倾斜到的角度 auto actionTo = SkewTo:create(2, 37.2f, -37.2f); /参数: 持续时间，x轴上倾斜的角度，y轴上倾斜的角度 auto actionBy = SkewBy:create(2, 0.0f, -90.0f); 延时动作 JumpTo/JumpBy：弹跳动作。继承自ActionInterval。 /参数: 持续时间，跳跃的目的坐标，跳跃的高度，跳跃的次数 auto actionTo = JumpTo:create(2, Point(300,300), 50, 4); /参数: 持续时间，跳跃的位移，跳跃的高度，跳跃的次数 auto actionBy = JumpBy:create(2, Point(300,0), 50, 4); 延时动作 BezierTo/BezierBy：贝塞尔曲线动作。继承自ActionInterval。 /参数: 获得当前屏幕大小 auto s = Director:getInstance()-getWinSize(); /新建一个贝塞尔曲线，定义它的控制点和结束点 ccBezierConfig bezier; bezier.controlPoint_1 = Point(0, s.height/2); bezier.controlPoint_2 = Point(300, -s.height/2); bezier.endPosition = Point(300,100); /创建一个贝塞尔曲线特效，参数：持续的时间，贝塞尔曲线 auto bezierForward = BezierBy:create(3, bezier); 延时动作 /参数: 持续时间，闪烁次数 auto action1 = Blink:create(2, 10); Blink：闪烁特效。继承自ActionInterval。 延时动作 FadeIn/FadeOut：淡入淡出特效。继承自ActionInterval。 /参数: 淡入淡出持续时间 auto action1 = FadeIn:create(1.0f); auto action2 = FadeOut:create(1.0f); 延时动作 /参数: 着色时间，红色、绿色、蓝色的着色目的值 auto action1 = TintTo:create(2, 255, 0, 255); /参数: 着色时间，红色、绿色、蓝色的着色改变值 auto action2 = TintBy:create(2, -127, -255, -127); TintTo/TintBy：染色特效。继承自ActionInterval。 延时动作 DelayTime：延迟特效。继承自ActionInterval。 /参数: 延迟的持续时间 DelayTime:create(2.0f); 组合动作 Spawn：同时进行。继承自ActionInterval。 /创建一个组合特效，使这些特效同时进行，执行时间以最长的特效为准 /参数: FiniteTimeAction类的动作1， FiniteTimeAction类的动作2 FiniteTimeAction类的动作N，NULL auto action = Spawn:create(JumpBy:create(2, Point(300,0), 50, 4), RotateBy:create( 2, 720), NULL); 组合动作 Sequence：顺序执行动作序列。继承自ActionInterval。 /创建一个组合特效，使这些特效顺序进行 /参数: 动作特效1，动作特效2动作特效N，NULL auto action = Sequence:create(MoveBy:create( 2, Point(240,0), RotateBy:create( 2, 540), NULL); 组合动作 Repeat/RepeatForever：重复和永久重复特效。继承自 ActionInterval。 auto act1 = RotateTo:create(1, 90); auto act2 = RotateTo:create(1, 0); auto seq = Sequence:create(act1, act2, NULL); /参数: 需要永久重复执行的ActionInterval动作特效 auto rep1 = RepeatForever:create(seq); /参数: 需要重复执行的ActionInterval动作特效，重复执行的次数 auto rep2 = Repeat:create( seq-clone(), 10); 速度指定动作 Speed：线性变速动作。继承自Action。用于线性的改变某个动作的速度。 参考ActionEaseTest。 /参数: 要改变速度的ActionInterval类的目标动作，改变的速度倍率 auto action = Speed:create(RepeatForever:create(spawn), 1.0f); Cocos2d-x的动作类 ActionE ase 指数缓 冲 回震缓 冲 跳跃缓 冲 Sine缓 冲 弹性缓 冲 ActionEase：曲线变速缓冲动作。继承自ActionInterval。可以实现动作的 由快到慢、速随时间改变的变速运动。ActionEase共有5类动作如下图所示，每 类动作又有3个不同时期的变换：In、Out和InOut。示例参考ActionEaseTest。 曲线变速缓冲动作 EaseExponentialIn：指数缓冲动作。继承自Action。用于指数曲线 （如下图）的变换某个动作的速度。参考ActionEaseTest。 /参数: 要改变速度的ActionInterval类的目标动作 auto move_ease_in = EaseExponentialIn:create(move-clone(); auto move_ease_out = EaseExponentialOut:create(move-clone(); auto move_ease = EaseExponentialInOut:create(move-clone() ); 横轴代表实际 动画时间，竖 轴代表变换后 的动画时间。 EaseExponentialInEaseExponentialOutEaseExponentialInOut 曲线变速缓冲动作 EaseSineInOut：正弦缓冲。继承自Action。用于Sine曲线（如下图）的 改变某个动作的速度。参考ActionEaseTest。 /参数: 要改变速度的ActionInterval类的目标动作 auto move_ease_in = EaseSineIn:create(move-clone() ); auto move_ease_out = EaseSineOut:create(move-clone() ); auto move_ease = EaseSineInOut:create(move-clone() ); EaseSineIn EaseSineOutEaseSineInOut 曲线变速缓冲动作 EaseElasticInOut：弹性缓冲。继承自Action。用于弹性曲线（如下图） 的改变某个动作的速度。参考ActionEaseTest。 /参数: 要改变速度的ActionInterval类的目标动作 auto move_ease_in = EaseElasticIn:create(move-clone() ); auto move_ease_out = EaseElasticOut:create(move-clone() ); auto move_ease_inout1 = EaseElasticInOut:create(move-clone(), 0.3f); EaseElasticInEaseElasticOutEaseElasticInOut 曲线变速缓冲动作 EaseBounceInOut：跳跃缓冲。继承自Action。用于跳跃曲线（如下图 ）的改变某个动作的速度。参考ActionEaseTest。 /参数: 要改变速度的ActionInterval类的目标动作 auto move_ease_in = EaseBounceIn:create(move-clone() ); auto move_ease_out = EaseBounceOut:create(move-clone() ); auto move_ease = EaseBounceInOut:create(move-clone() ); EaseBounceIn EaseBounceOutEaseBounceInOut 曲线变速缓冲动作 EaseBackInOut：回震缓冲。继承自Action。用于回震曲线（如下图）的 改变某个动作的速度。参考ActionEaseTest。 /参数: 要改变速度的ActionInterval类的目标动作 auto move_ease_in = EaseBackIn:create(move-clone(); auto move_ease_out = EaseBackOut:create( move-clone(); auto move_ease = EaseBackInOut:create(move-clone() ); EaseBackInEaseBackOutEaseBackInOut Cocos2d-x的动画相关类 Animation Frame Animation Animation Cache Animate AnimationFrame 动画帧，新版本中表示动画帧对象，在新版本中 使用AinmationFrame来表示动画帧对象，而旧 版本中的SpriteFrame（精灵帧）则被看做是一 个精灵对象的属性。 AnimationCache 动画帧缓冲。用于缓存所有的动画和动画帧，是 一个单例类。其实就是一个存放动画帧对象的缓 冲池，与一般缓冲池一样，其目的就是提升动画 渲染的性能。 Cocos2d-x的动画相关类 Animation 动画，封装了一系列动画帧及动画帧的播放间隔 auto animation=Animation:create(); animation-addSpriteFrameWithFile(“1.png”); animation-setDelayPerUnit(3.0f/20.0f); Animate 动画呈现，专门用来呈现动画的持续动作类 auto animate=Animate:create(animation); sprite -runAction(animate); Cocos2d-x的动画相关类 CocosStudio 动画编辑器 角色动画、特效动画、场景动画资源 关键帧动画、序列帧动画、骨骼动画方式 UI编辑器 数据编辑器 场景编辑器 Cocos2d-x的动画编辑器 1.创建项目 下载安装CocosStudio，打开 Cocos2d-x的动画编辑器 1.创建项目 Animation Editor-文件-新建，创建新项目 Cocos2d-x的动画编辑器 2.导入资源 资源面板导入图片button.png Cocos2d-x的动画编辑器 3.编辑动画 在时间轴上在15帧和30帧处添加关键帧 Cocos2d-x的动画编辑器 4.导出动画 选择文件-导