基于Unity3D的交互式動(dòng)態(tài)漫畫實(shí)現(xiàn)

原 湉

（北京郵電大學(xué) 北京 100876）

基于Unity3D的交互式動(dòng)態(tài)漫畫實(shí)現(xiàn)

原 湉

（北京郵電大學(xué) 北京 100876）

簡述了使用開發(fā)引擎Unity3D實(shí)現(xiàn)交互式動(dòng)態(tài)漫畫的過程，一些功能的實(shí)現(xiàn)方法，以及過程中遇到的問題和相應(yīng)的解決方法。

Unity3D；交互；動(dòng)態(tài)漫畫

很多人都看過漫畫，小時(shí)候看紙質(zhì)漫畫，現(xiàn)在智能移動(dòng)終端普及之后，越來越多的人通過一些手機(jī)的App看漫畫。但是作為智能手機(jī)，如果光是用來看傳統(tǒng)的靜態(tài)漫畫，未免也太浪費(fèi)“智能”二字了。所以我們決定發(fā)揮智能手機(jī)的長處，做“可以動(dòng)的漫畫”。現(xiàn)在有的App上也有動(dòng)態(tài)漫畫的版塊，但是里面的動(dòng)態(tài)漫畫都是相對死板的，無非是觀眾滑到某個(gè)位置，然后播放聲音和動(dòng)畫，交互感比較弱。我們在此基礎(chǔ)上添加了多種交互方式，增加了讀者的參與感，這種形式將有機(jī)會成為未來漫畫發(fā)展的新方向。

交互式動(dòng)態(tài)漫畫基本介紹：

交互式動(dòng)態(tài)漫畫是目前最新穎的漫畫產(chǎn)品。它結(jié)合了漫畫和動(dòng)畫，避免了漫畫在動(dòng)作表現(xiàn)上的不足和動(dòng)畫在文戲方面的拖沓，同時(shí)讀者可以在閱讀過程中通過點(diǎn)擊、滑動(dòng)和重力感應(yīng)等方式進(jìn)行交互，提高用戶體驗(yàn)。

1.各種功能的實(shí)現(xiàn)

1.1 條漫基本功能

我們使用的是Unity3D來進(jìn)行交互式動(dòng)態(tài)漫畫的搭建。Unity3D是由Unity Technology開發(fā)的一款引擎。另外，我們還用到了一個(gè)叫做NGUI的插件，簡單的滑屏，翻頁都是通過這個(gè)插件做的。我們將圖片素材擺成像條漫一樣的一長條，然后將不同的組件(比如音源、動(dòng)畫)添加到圖片上，這樣就完成了漫畫的搭建。

1.2 動(dòng)畫實(shí)現(xiàn)

我們采取的是序列幀的方式實(shí)現(xiàn)動(dòng)畫。Unity3D中有幾種可以實(shí)現(xiàn)播放動(dòng)畫的方式，有的只能全屏播放，有的不支持移動(dòng)端，所以我們選擇了序列幀。序列幀存在的問題是，大量圖片導(dǎo)入U(xiǎn)nity3D中，會導(dǎo)致導(dǎo)出的安裝包非常大。關(guān)于安裝包壓縮的問題我們將在后文中予以討論。

將序列幀全選拖入scene視圖中，就可以自動(dòng)生成動(dòng)畫控制器和動(dòng)畫片段。動(dòng)畫控制器(AnimatorController)是用來控制某個(gè)物體(比如一張圖片)的各個(gè)動(dòng)畫之間的過渡。我們通過這個(gè)來控制動(dòng)畫的播放、停止和重播。各個(gè)動(dòng)畫片段之間可以設(shè)置過渡條件，當(dāng)某些條件(比如某個(gè)按鈕被點(diǎn)擊、屏幕滑到某個(gè)位置)被滿足的時(shí)候，圖片會由一個(gè)靜止?fàn)顟B(tài)轉(zhuǎn)換到播放狀態(tài)。

1.3 聲音播放

聲音分兩種，一種是背景音樂，另外一種是音效。Unity3D中有一個(gè)AudioSource的組件，可以通過控制這個(gè)組件中的參數(shù)來實(shí)現(xiàn)對音樂的控制。

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

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

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

這三個(gè)函數(shù)可以控制音樂的播放、暫停和停止，在腳本中，只要在某些條件被滿足之后，執(zhí)行這三條語句，就可以實(shí)現(xiàn)對聲音的控制了。

1.4 重力感應(yīng)

在這里提到一個(gè)input類，這個(gè)類里包括了設(shè)備可以獲取的幾乎所有輸入，包括電腦鍵盤、鼠標(biāo)輸入、手機(jī)觸屏輸入以及陀螺儀的重力感應(yīng)輸入等等。我們用重力感應(yīng)實(shí)現(xiàn)了搖晃手機(jī)可以改變?nèi)宋镆暯?，手機(jī)轉(zhuǎn)動(dòng)的時(shí)候，讀者面前的景色也會跟著轉(zhuǎn)動(dòng)。

重力感應(yīng)輸入分為3個(gè)軸X，Y，Z，取值分別為-1.0～1.0。我們來看一下這三個(gè)軸是如何取值的：

X軸：home按鍵在下手機(jī)面朝天向右旋轉(zhuǎn)90度重力分量為+1.0 向左旋轉(zhuǎn)90度重力分量為-1.0。

Y軸：home按鍵在上手機(jī)背朝自己重力分量為+1.0 home按鍵在下手機(jī)面朝自己重力分量為-1.0。

Z軸：手機(jī)面朝地面重力分量為+1.0 手機(jī)面朝天空重力分量為-1.0。

也就是說，當(dāng)你正視手機(jī)屏幕的時(shí)候，X軸始終是從手機(jī)左邊指向手機(jī)右的，Y軸始終是從手機(jī)底部指向手機(jī)頂部的，Z軸始終是垂直于手機(jī)屏幕指向外面的。三條軸的輸入即求重力在這三個(gè)方向上的分量。

Input.acceleration.x

Input.acceleration.y

Input.acceleration.z

這三個(gè)值可以分別表示XYZ軸的輸入。根據(jù)這幾個(gè)值就可以確定手機(jī)現(xiàn)在的狀態(tài)，從而調(diào)整手機(jī)中顯示的畫面。我們將我們的畫面按遠(yuǎn)近分成了幾層圖片，當(dāng)讀者轉(zhuǎn)動(dòng)手機(jī)的時(shí)候，所有的圖片圍繞著攝像機(jī)旋轉(zhuǎn)，這樣子就可以做出一種，讀者轉(zhuǎn)動(dòng)手機(jī)，就可以改變?nèi)宋镆暯堑母杏X。

2.應(yīng)用優(yōu)化

2.1 安裝包大小壓縮

Unity3D的圖片壓縮特別需要技巧。如果處理圖片的時(shí)候不注意技巧，導(dǎo)出來的安裝包將會特別大，但是如果在一些細(xì)節(jié)方面多加注意，就可以在壓縮圖片的同時(shí)保持比較好的視覺效果。這個(gè)技巧就是將圖片的寬高通通調(diào)整成2的N次冪。

我們看一個(gè)例子，一張大小為720*1551的圖片，導(dǎo)入U(xiǎn)nity3D之后，會被自動(dòng)調(diào)整為1024*2048，可以看作，Unity3D自動(dòng)將一張寬高非2的N次冪的圖片放入了一個(gè)寬高為2的N次冪的容器中。這樣做的代價(jià)就是，這張圖片的加載速度會變慢，同時(shí)所占的存儲空間會變大。在Unity3D的Inspector視圖里我們可以看到這張圖片的大小是4.3M。

但是如果我們手動(dòng)對圖片進(jìn)行這樣的預(yù)處理，替Unity3D省掉一部分工作呢？我們在Photoshop中創(chuàng)建一張512*2048的圖片作為“容器”，背景涂成白色。再將我們的720*1551的圖片經(jīng)過等比例地縮放放到容器中。將這樣一張圖片導(dǎo)入U(xiǎn)nity3D中，我們從Inspector視圖看這張圖片，那里顯示這張圖片的大小變?yōu)榱?.7M。

這樣做的效果很顯著，一張圖片經(jīng)過預(yù)處理之后大小就變成了原來的1/6左右。我們的動(dòng)態(tài)漫畫程序App最多的部分就是圖片，這樣的處理將會大大提高圖片的讀取速度，縮小壓縮包的大小。

Unity3D對寬高滿足2的N次冪的圖片的支持相當(dāng)好。所以不管是在做什么，只要是在用Unity3D，都建議將圖片的寬高都調(diào)整為2的N次冪。

2.2 序列幀動(dòng)畫的調(diào)整

動(dòng)畫有一個(gè)問題，視頻的話會有相鄰的幀是一樣的，到序列幀就會有相鄰的兩張圖片是完全一樣的。這樣子也造成了資源的浪費(fèi)。手繪動(dòng)畫往往一張圖片需要用上好幾幀，如果將手繪的圖片做成動(dòng)畫，再將動(dòng)畫導(dǎo)成序列幀，造成的結(jié)果必然是有大量重復(fù)的圖片。其實(shí)在Unity3D中有一個(gè)Animation面板，在這個(gè)面板中可以對動(dòng)畫中每張圖片連續(xù)使用的幀數(shù)進(jìn)行調(diào)整，即如果相鄰的兩張圖片是一模一樣的，我們就干脆讓這張圖片連續(xù)顯示兩幀。這樣做的話，每一個(gè)序列幀動(dòng)畫的圖片量就大大減少了。

3.結(jié)語

Unity3D是一款十分優(yōu)秀的開發(fā)引擎，它有著各種各樣插件的支持，可以為整個(gè)開發(fā)提供便利。交互式動(dòng)態(tài)漫畫是未來漫畫形態(tài)發(fā)展的趨勢，我們要搶先投入到這種新的形態(tài)中，把握這個(gè)新潮流。

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