6.2.1小鲤鱼跃龙门框架搭建 (1).pptx

小鲤鱼跃龙门框架搭建

教学目标游戏中的交互动画通常比APP、网站的交互动画多。只要有合理的规划，AxureRP也可以制作出非常复杂的游戏原型。以小鲤鱼跃龙门为例，讲解如何规划、制作复杂的原型。

掌握小鲤鱼跃龙门框架搭建教学重点熟练应用开场制作熟练运用背景移动教学难点

原型规划结构规划游戏中交互动画比较多，所以原型应该用“动态面板”来实现，将不同的页面放在不同的状态中。游戏的开始页面、游戏页面、结束页面上的元素差别较小。所以，可以考虑在一个状态中，通过控制不同元件的隐藏和显示样式来表示页面的切换，这样能做出更细腻的转场效果。

原型规划动作规划游戏中，能“动”的元件很多，如果把动作放在一块，会带来不好理解的问题，而且难以修改。所以，应该把动作分散在各个元件中。小鲤鱼的动作就放在小鲤鱼元件中，地面、管道移动的动作也分别放在各自的元件里。

开场制作下面制作开场部分，包括游戏背景、开始按钮等。游戏的图片素材可以从本书附带的案例文件中获取。添加图片元件，将元件一起转换为动态面板，命名为“外框”。游戏中，管道、地面都会超出页面范围，“外框”面板是用来控制显示范围的。

开场制作图6-12转换为动态面板将页面上的元件各自转换为动态面板。随着开场动画，这些元件会消失或改变状态。将开始按钮命名为“开始”，将排名按钮命名为“排名”。

开场制作在“开始”按钮的“鼠标单击时”事件中添加动作“隐藏动作”，将“标题、排名、开始、记分牌”设为隐藏，如图所示。

背景移动让背景“向后”移动，可以创造出小鲤鱼“向前”游动的感觉。本例中的背景包括管道和地面。依照规划，下面将移动动作设置在管道和地面上。

背景移动先摆好素材。在面板上添加上、下管道图片，然后一起转换为动态面板，并命名为“管道”。注意上下管道之间的距离。本例中的距离设为200，大约为小鲤鱼的4倍身高。管道间距越短，越难以控制小鲤鱼通过，游戏难度越高。

背景移动延长“地面”的宽度，使其超过页面宽度。

背景移动在“管道”“地面”面板中复制状态，让两个面板都拥有相同的状态。

背景移动在“地面”面板的“状态改变时”事件中添加动作“移动”，如图6-16所示。移动分两步：第1步，将地面移动到初始位置。第2步，将地面移动到地面右边缘与页面右边缘重合的位置。这个移动动作要设置“线性”动画，让用户看清移动的过程。

背景移动在“开始”按钮的“鼠标单击时”事件中添加“设置面板状态”动作。将地面面板设为“下一个”状态，并且每500毫秒循环一次，即让地面每500毫秒切换一次状态。每次切换状态时都会执行上一步中设置的移动动作。这样就实现了地面面板不断向后移动的效果。

背景移动同样，在“开始”按钮的“鼠标单击时”事件中设置“管道”面板每500毫秒切换一次状态。注意这里可以勾选“首个状态延时500毫秒后切换”复选框。让地面先动，管道再出现，让动画变得更有层次。

背景移动在“管道”面板的“状态改变时”事件中添加两个动作，与“地面”面板类似，其中，一个移动动作控制移动动画的过程，另一个移动动作控制瞬间复位。

小鲤鱼跃龙门框架搭建