基于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