3.2 孔明锁结构组装交互设计
在交互设计过程中,主要通过UI界面和控件的相关设置,来实现组装动画的交互设计过程,为了确保画面的质量和效果,在导入到初始场景的模型中时,可以先在物体的材质面板,调节物体烘焙后的材质颜色属性和效果,其中需为Plane001和Plane002两个地面材质打开动态光照效果,在第一层贴图下进行色彩调整,调节比例、亮度、对比和Gamma参数;其他物体在第一层贴图下进行色彩调整,调节比例、亮度、对比和Gamma参数,使得贴图在场景中的显示效果达到一个较为和谐的效果(图3-14)。
图3-14 材质色彩调整
3.2.1 UI界面设计
(1)定点观察相机的创建 在进行UI界面设计之前,为了能够得到一个更好的交互动画展示效果,可以在场景中按照动画的组装顺序,依次创建6个定点观察相机(图3-15),然后在定点观察属性中,选择跟踪物体,分别将相机的视角绑定到对应的物体对象上,这样为后期展示动画的观察可提供了全方位的视角。
图3-15 定点观察相机的位置和参数
(2)图片按钮的创建 创建好定点观察相机后,便可以进入到高级界面的控件面板中,利用图片按钮依次在视图中创建6个,利用工具栏中的对齐工具,将图标进行水平位置等尺寸的排列,然后在图片按钮的属性中,将位置尺寸下的“根据窗口比例缩放控件”的选择框进行勾选(图3-16),这样在视图缩放过程中,图片按钮的位置和大小可以根据窗口比例进行自动适配缩放。
图3-16 根据窗口比例缩放控件
(3)图片按钮的贴图设置 在控件属性中,分别设置图片的普通状态、鼠标经过和按下状态(图3-17),在场景运行的时候,鼠标对于控件的操控显示状态会有不同的显示效果,这样可以增加视觉识别效果和操作交互体验。
图3-17 图片状态设置效果
(4)滑杆控件的创建 利用滑杆工具创建一个可以拖动的滚动条(图3-18),方便在后期交互设计中,通过拖动滑杆可以操控动画的组装过程,对交互设计的细节进行更为全面的展示说明。
图3-18 利用滑杆工具创建滚动条
3.2.2 脚本交互设计
(1)图片按钮的脚本设计 在脚本交互设计过程中,单击视图中的任一个按钮,主要实现三个功能,一是视角会自动切换到对应物体的相机,二是实现对应物体动画的播放功能(动画的播放功能可正向/反向切换),三是可以控制动画的播放时间段,播放动画的时间段是与3ds Max中动画设置的时间长度相对应的。具体实现的过程是:点击图片按钮右侧的脚本属性,在鼠标单击事件中通过相机操作和动画命令的相关设置,进行“天”(图3-19)、“东”(图3-20)、“西”(图3-21)、“南”(图3-22)、“北”(图3-23)、“地”(图3-24)的脚本设置,从而实现以上三个功能。
图3-19 “天”脚本设置
图3-20 “东”脚本设置
图3-21 “西”脚本设置
图3-22 “南”脚本设置
图3-23 “北”脚本设置
图3-24 “地”脚本设置
(2)滑杆控件的参数设置 对于拖动滑杆控制条控制动画组装的动画也可以通过脚本来实现,首先确定滑杆位于图片按钮的上方,这样就确保在运行的时候可以拖动滚动条。在控件属性面板中,设置滚动条的MIN为0,MAX为325(图3-25),跟3ds Max中设置的动画时间长度一样,这样可以为后期的脚本编写提供更为直观的操控。
图3-25 滑杆控件属性
(3)滑杆控件的脚本设计 为了实现拖动滑块可以操控动画实现的效果,在“用户拖动”上点击鼠标左键,弹出脚本编辑器,在系统函数中新建一个初始化函数,然后定义两个变量,变量名称可以根据需要自由命名,变量值为0(图3-26)。然后在自定义函数中,首先获取滑杆值,然后添加“变量赋值”脚本,变量的值是上一次的返回值<last_output>,由于拖动时间滑块,数值是随着时间的变化而实时变化的,需要定义另外一个变量来实现其过程,通过“字符串相加”和“变量赋值”的命令,来实现把随时变化的数值保存在变量当中,最后设置播放刚体动画的方式和时间,完成脚本的设置工作(图3-27),按F5运行测试一下,可以实时预览动画效果。
图3-26 滑杆定义变量
图3-27 滑杆自定义函数
(4)场景背景音乐的添加 最后一个环节是为场景中添加背景音乐,在初始化函数中,设置音乐的播放路径和播放方式(图3-28),这样在运行场景的时候,就会有音乐的效果。
图3-28 背景音乐的添加
3.2.3 编译与输出
打开项目设置窗口,进行启动窗口(图3-29)和运行窗口(图3-30)的设置。启动窗口标题文字和运行窗口标题文字设置为孔明锁结构组装三维动画交互设计,在界面图片中选择制作好的登录Logo界面(图3-31),然后点击“开始编译”(图3-32),进行程序的编译过程(图3-33),这样在编译好的程序在运行的时候就会在启动界面显示设置的Logo界面和运行窗口中显示设置的标题文本。
图3-29 启动窗口设置
图3-30 运行窗口设置
图3-31 登录Logo界面
图3-32 编译界面
图3-33 编译过程