基于Unity3D的交互式动态漫画实现

原 湉

（北京邮电大学 北京 100876）

基于Unity3D的交互式动态漫画实现

原 湉

（北京邮电大学 北京 100876）

简述了使用开发引擎Unity3D实现交互式动态漫画的过程，一些功能的实现方法，以及过程中遇到的问题和相应的解决方法。

Unity3D；交互；动态漫画

很多人都看过漫画，小时候看纸质漫画，现在智能移动终端普及之后，越来越多的人通过一些手机的App看漫画。但是作为智能手机，如果光是用来看传统的静态漫画，未免也太浪费“智能”二字了。所以我们决定发挥智能手机的长处，做“可以动的漫画”。现在有的App上也有动态漫画的版块，但是里面的动态漫画都是相对死板的，无非是观众滑到某个位置，然后播放声音和动画，交互感比较弱。我们在此基础上添加了多种交互方式，增加了读者的参与感，这种形式将有机会成为未来漫画发展的新方向。

交互式动态漫画基本介绍：

交互式动态漫画是目前最新颖的漫画产品。它结合了漫画和动画，避免了漫画在动作表现上的不足和动画在文戏方面的拖沓，同时读者可以在阅读过程中通过点击、滑动和重力感应等方式进行交互，提高用户体验。

1.各种功能的实现

1.1 条漫基本功能

我们使用的是Unity3D来进行交互式动态漫画的搭建。Unity3D是由Unity Technology开发的一款引擎。另外，我们还用到了一个叫做NGUI的插件，简单的滑屏，翻页都是通过这个插件做的。我们将图片素材摆成像条漫一样的一长条，然后将不同的组件(比如音源、动画)添加到图片上，这样就完成了漫画的搭建。

1.2 动画实现

我们采取的是序列帧的方式实现动画。Unity3D中有几种可以实现播放动画的方式，有的只能全屏播放，有的不支持移动端，所以我们选择了序列帧。序列帧存在的问题是，大量图片导入Unity3D中，会导致导出的安装包非常大。关于安装包压缩的问题我们将在后文中予以讨论。

将序列帧全选拖入scene视图中，就可以自动生成动画控制器和动画片段。动画控制器(AnimatorController)是用来控制某个物体(比如一张图片)的各个动画之间的过渡。我们通过这个来控制动画的播放、停止和重播。各个动画片段之间可以设置过渡条件，当某些条件(比如某个按钮被点击、屏幕滑到某个位置)被满足的时候，图片会由一个静止状态转换到播放状态。

1.3 声音播放

声音分两种，一种是背景音乐，另外一种是音效。Unity3D中有一个AudioSource的组件，可以通过控制这个组件中的参数来实现对音乐的控制。

gameObject.GetComponent＜AudioSource＞().paly()

gameObject.GetComponent＜AudioSource＞().pause()

gameObject.GetComponent＜AudioSource＞().stop()

这三个函数可以控制音乐的播放、暂停和停止，在脚本中，只要在某些条件被满足之后，执行这三条语句，就可以实现对声音的控制了。

1.4 重力感应

在这里提到一个input类，这个类里包括了设备可以获取的几乎所有输入，包括电脑键盘、鼠标输入、手机触屏输入以及陀螺仪的重力感应输入等等。我们用重力感应实现了摇晃手机可以改变人物视角，手机转动的时候，读者面前的景色也会跟着转动。

重力感应输入分为3个轴X，Y，Z，取值分别为-1.0～1.0。我们来看一下这三个轴是如何取值的：

X轴：home按键在下手机面朝天向右旋转90度重力分量为+1.0 向左旋转90度重力分量为-1.0。

Y轴：home按键在上手机背朝自己重力分量为+1.0 home按键在下手机面朝自己重力分量为-1.0。

Z轴：手机面朝地面重力分量为+1.0 手机面朝天空重力分量为-1.0。

也就是说，当你正视手机屏幕的时候，X轴始终是从手机左边指向手机右的，Y轴始终是从手机底部指向手机顶部的，Z轴始终是垂直于手机屏幕指向外面的。三条轴的输入即求重力在这三个方向上的分量。

Input.acceleration.x

Input.acceleration.y

Input.acceleration.z

这三个值可以分别表示XYZ轴的输入。根据这几个值就可以确定手机现在的状态，从而调整手机中显示的画面。我们将我们的画面按远近分成了几层图片，当读者转动手机的时候，所有的图片围绕着摄像机旋转，这样子就可以做出一种，读者转动手机，就可以改变人物视角的感觉。

2.应用优化

2.1 安装包大小压缩

Unity3D的图片压缩特别需要技巧。如果处理图片的时候不注意技巧，导出来的安装包将会特别大，但是如果在一些细节方面多加注意，就可以在压缩图片的同时保持比较好的视觉效果。这个技巧就是将图片的宽高通通调整成2的N次幂。

我们看一个例子，一张大小为720*1551的图片，导入Unity3D之后，会被自动调整为1024*2048，可以看作，Unity3D自动将一张宽高非2的N次幂的图片放入了一个宽高为2的N次幂的容器中。这样做的代价就是，这张图片的加载速度会变慢，同时所占的存储空间会变大。在Unity3D的Inspector视图里我们可以看到这张图片的大小是4.3M。

但是如果我们手动对图片进行这样的预处理，替Unity3D省掉一部分工作呢？我们在Photoshop中创建一张512*2048的图片作为“容器”，背景涂成白色。再将我们的720*1551的图片经过等比例地缩放放到容器中。将这样一张图片导入Unity3D中，我们从Inspector视图看这张图片，那里显示这张图片的大小变为了0.7M。

这样做的效果很显著，一张图片经过预处理之后大小就变成了原来的1/6左右。我们的动态漫画程序App最多的部分就是图片，这样的处理将会大大提高图片的读取速度，缩小压缩包的大小。

Unity3D对宽高满足2的N次幂的图片的支持相当好。所以不管是在做什么，只要是在用Unity3D，都建议将图片的宽高都调整为2的N次幂。

2.2 序列帧动画的调整

动画有一个问题，视频的话会有相邻的帧是一样的，到序列帧就会有相邻的两张图片是完全一样的。这样子也造成了资源的浪费。手绘动画往往一张图片需要用上好几帧，如果将手绘的图片做成动画，再将动画导成序列帧，造成的结果必然是有大量重复的图片。其实在Unity3D中有一个Animation面板，在这个面板中可以对动画中每张图片连续使用的帧数进行调整，即如果相邻的两张图片是一模一样的，我们就干脆让这张图片连续显示两帧。这样做的话，每一个序列帧动画的图片量就大大减少了。

3.结语

Unity3D是一款十分优秀的开发引擎，它有着各种各样插件的支持，可以为整个开发提供便利。交互式动态漫画是未来漫画形态发展的趋势，我们要抢先投入到这种新的形态中，把握这个新潮流。

Implementation of interactive dynamic cartoon based on Unity3D

YUAN Tian. Beijing University of Posts and Telecommunications, Beijing 100876, China

This paper describes the development of engine Unity 3D interactive dynamic cartoon, the process of the realization of the function of some methods, as well as the problems in the process and the corresponding solutions.

The Unity 3D, Interactive, Dynamic cartoon

J218.2

A

1009-5624-（2016）03-0049-02