虚拟现实交互设计
上QQ阅读APP看书,第一时间看更新

5.1 手机触屏三维动画设计

随着时代的发展和科技的进步,手机已成为人们日常生活和工作的主要信息交流工具之一,因此对于手机的概念设计和交互设计,也至关重要。如何寻找一种新的人机交互方式,也成为一种新的表现形式和创意需求,本案例主要通过手机触屏体验艺术交互设计的过程来展示未来手机交互可能会发展到的趋势——隔空成像。

所谓隔空成像,是指手机内部的应用程序,通过触发按钮,可以将屏幕内部的显示效果拖动到手机外面,在外面的时空中呈现一幅画面,并通过触动,实现虚拟交互的过程。其实质就是能够控制光的传输距离,控制光在空间中的传输速度,只要达到这个条件,本案例的构思在现实世界中就可以得到实现。随着增强现实技术和全息交互技术的发展,未来数字科技的创新和突破,本案例的创意构思有望变成现实。

5.1.1 手机模型与贴图设计

(1)手机模型设计 手机主体模型采用倒角长方体制作,然后转换为可编辑多边形。在边的层级下,利用添加线分段的命令,分割出手机屏幕的区域,切换到面的层级下,将其分离为独立的物体,这样就可以在后期进行独立的操作和设置。然后将屏幕区域分割为6等份,如图5-1主屏白色1、2、3、4、5、6所示,为后期UI图标的加载做准备。利用分割出屏幕的平面物体,分别往手机主体模型的前、后、左、右复制2个平面物体,如图5-1分屏红色1、2、3、4、5、6及黄色A、B所示,为后期隔空成像的贴图和动画做准备。利用倒角长方体,分别对手机的锁屏按钮、主屏按钮和一侧控制音量的两个按键进行制作,然后在场景中心位置利用平面物体创建一个地面,如图5-1地面C所示,这时场景的建模设计就基本搭建完成了(图5-1)。

图5-1 手机场景建模设计

(2)手机模型贴图设计 在渲染菜单下打开材质编辑器,利用材质类型中的标准材质,在场景中创建9个材质球,然后分别为贴图的漫反射颜色通道添加一张文件贴图(图5-2)。选择主屏6个无缝拼接的平面物体,为其添加一张主屏UI贴图,通过UVW贴图坐标修改器,设置贴图方式为平面,使模型贴图在物体表面对应的位置正确显示,其他物体的材质在指定材质后,也可以调整UVW贴图坐标为平面方式,这样贴图就可以在模型表面得到正确显示。场景中外围6个平面物体的材质为了能够双面显示,在明暗器基本参数中勾选双面显示。选择场景中对应的模型,将制作好的材质赋予到场景中的物体,通过以上的设置,即可完成手机触屏场景的材质设计(图5-3)。

图5-2 场景材质设计一览表

图5-3 材质在视图中的显示效果

5.1.2 手机触屏动画设计

(1)动画时间配置 手机触屏动画设计主要针对于浮动的UI菜单进行设计,由于按键后的动画时间应该比较短暂,动画速率较快,因此动画的时间长度可以短一些。在时间轴面板中,点击“时间配置”按钮,设置帧速率为PAL模式,动画的长度为25帧(图5-4)。

图5-4 时间配置参数设置

(2)UI菜单动画逆向设计 动画设计的思路是按下键盘上对应的按钮,会弹出二级菜单到手机屏幕的外面,位置恰好是建模场景的初始位置,要想实现其动画效果,采用常规的动画设计方法来实现比较困难。本案例采用逆向动画的设计方法,打开设置关键帧动画按钮,在第25帧的位置,分别记录6个UI弹出菜单的位置状态(图5-5),然后拖动时间滑块到第0帧的位置,利用移动、旋转、缩放和对齐工具,分别将6个菜单的位置调整到对应UI界面的中心位置,整体缩放值可以调节为1%。在此注意的是,若将缩放值调节到0%为不可见的状态,命名的刚体动画在后期导出到VRP中时则不会被识别,因此缩放的比例调到大约看不到的状态即可,然后点击“记录关键帧”按钮,把当前调整好的状态位置进行保存记录(图5-6),这样中间的动画效果就会利用计算机差值的计算方式自动计算出来(图5-7),这时UI菜单的弹出动画就准确地制作完成了。

图5-5 第25帧的位置状态

图5-6 第0帧的位置状态

图5-7 第13帧差值动画自动计算效果

(3)刚体动画命名与导出设置 为了让后期软件识别在3ds Max中制作的动画,需要为每个物体创建刚体动画集合,前缀为vrp_rigid,后面的字符可以根据物体名称和功能进行命名(图5-8)。后期手机材质在VRP中调节,因此可以不用烘焙渲染场景,在实用程序面板下,点击[*VRPlatform*]按钮,利用导出工具(图5-9),将场景中的模型、材质和动画一起导出到VRP软件中,在弹出的导出对话框中,可以识别场景的状态和信息(图5-10),点击“调入VRP编辑器”按钮,就可以把当前场景导出到VRP软件中进行后期的动画交互设计了。

图5-8 刚体动画集合

图5-9 导出界面

图5-10 VRP导出对话框