多終端數(shù)字皮影交互系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

蔡森

（北京工業(yè)大學(xué)北京100124）

多終端數(shù)字皮影交互系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

蔡森

（北京工業(yè)大學(xué)北京100124）

為拯救皮影這門傳統(tǒng)藝術(shù)，筆者將自己已有研究成果，與市場(chǎng)上幾款廣受年輕人喜愛的手機(jī)應(yīng)用相結(jié)合，設(shè)計(jì)開發(fā)了多終端數(shù)字皮影交互系統(tǒng)；此系統(tǒng)運(yùn)用Adobe AIR跨平臺(tái)技術(shù)，采用ActionScript3.0以及Java程序設(shè)計(jì)語(yǔ)言進(jìn)行客戶端與服務(wù)器端開發(fā)；分控端運(yùn)行在Android或iOS操作系統(tǒng)的移動(dòng)終端之上，主控端運(yùn)行在PC或筆記本電腦之上；分控端通過(guò)無(wú)線網(wǎng)絡(luò)控制主控端場(chǎng)景中的人物，實(shí)現(xiàn)了跨平臺(tái)多設(shè)備聯(lián)合皮影表演的可能。

數(shù)字皮影；跨平臺(tái)；移動(dòng)互聯(lián)；人機(jī)交互；多點(diǎn)觸控

皮影是中國(guó)的一種傳統(tǒng)藝術(shù)，擁有近千年的歷史，是古代中國(guó)的一種表演形式。皮影戲于2006年入選中國(guó)非物質(zhì)文化遺產(chǎn)名錄，于2011年入選世界非物質(zhì)文化遺產(chǎn)名錄［1］。

然而現(xiàn)如今，隨著科技的發(fā)展，比起畫面絢麗的網(wǎng)絡(luò)游戲、極具視覺與心靈沖擊力的電影以及各類霓虹燈照射下的舞臺(tái)，傳統(tǒng)的皮影表演已經(jīng)無(wú)法給人以太多的娛樂(lè)享受，皮影必須要融入現(xiàn)代科技元素，才能擁有更加長(zhǎng)遠(yuǎn)的傳承與發(fā)展［2_3］。

數(shù)字藝術(shù)與皮影結(jié)合，可以讓皮影重新煥發(fā)自己的活力［4］。近些年，隨著數(shù)字藝術(shù)與計(jì)算機(jī)圖形學(xué)領(lǐng)域的進(jìn)一步發(fā)展，在計(jì)算機(jī)上制作皮影，并制作動(dòng)態(tài)的交互已不再是難題。近年來(lái)，社會(huì)上也出現(xiàn)了如《桃花源記》、《梁山伯與祝英臺(tái)》等等優(yōu)秀的數(shù)字皮影作品。

但是，目前數(shù)字皮影還沒有像曾經(jīng)的傳統(tǒng)皮影那樣受到廣大人民的歡迎，皮影的制作、動(dòng)作的錄制等方面還沒有形成自己的一套體系。而且大多數(shù)作品擁有空間的限制，無(wú)法充分利用現(xiàn)在發(fā)達(dá)的互聯(lián)網(wǎng)系統(tǒng)，這些都是有待解決的問(wèn)題［5_6］。

1　系統(tǒng)概述

本系統(tǒng)硬件總體架構(gòu)設(shè)計(jì)如圖1所示，用戶只需在手機(jī)或平板中安裝此系統(tǒng)的分控端應(yīng)用，并通過(guò)無(wú)線網(wǎng)絡(luò)連接到筆記本電腦之上，即可用手指在手機(jī)或平板之上，控制筆記本電腦上的皮影人物，進(jìn)而控制幕布上的皮影人物進(jìn)行表演。

系統(tǒng)的主控設(shè)備由一臺(tái)筆記本電腦控制，組網(wǎng)設(shè)備由一臺(tái)路由器擔(dān)任，分控設(shè)備由手機(jī)或平板終端擔(dān)任，可使用Android或iOS操作系統(tǒng)，投影設(shè)備由投影儀或任意高清輸出設(shè)備擔(dān)任，并由高清視頻輸出線與電腦連接。

圖1　系統(tǒng)總體架構(gòu)圖

1.1客戶端架構(gòu)

本系統(tǒng)客戶端分為主控端與分控端兩部分，兩部分設(shè)備各自安裝不同的軟件，并對(duì)相同的IP地址與端口進(jìn)行監(jiān)聽。

主控端軟件主要進(jìn)行實(shí)時(shí)表演的呈現(xiàn)、錄制和回放，包括歡迎界面、網(wǎng)絡(luò)配置界面、場(chǎng)景選擇界面以及實(shí)時(shí)表演界面。

分控端軟件主要進(jìn)行皮影背景知識(shí)的介紹、影人的自由定制、快速選擇，包括歡迎界面、主菜單界面、自由定制界面、快速選擇界面、幫助界面、服務(wù)器連接界面以及表演界面。

1.2服務(wù)器端架構(gòu)

服務(wù)器端的設(shè)計(jì)使用的是Java程序設(shè)計(jì)語(yǔ)言。服務(wù)器共包括一個(gè)窗口，兩個(gè)按鈕，一個(gè)文本框。架構(gòu)中，窗口由JFrame控件實(shí)現(xiàn)，負(fù)責(zé)承載整個(gè)服務(wù)器界面，是按鈕與文本框的載體。按鈕將使用JBttton實(shí)現(xiàn)，通過(guò)點(diǎn)擊按鈕可以執(zhí)行不同的事件。在此服務(wù)器中，其中一個(gè)按鈕為啟動(dòng)服務(wù)器選項(xiàng)，另一個(gè)為停止服務(wù)器選項(xiàng)，分別控制服務(wù)器的啟動(dòng)和停止；顯示文字的標(biāo)簽將使用JLabe1實(shí)現(xiàn)，用于標(biāo)注服務(wù)器當(dāng)前的運(yùn)行狀態(tài)。

2　系統(tǒng)客戶端設(shè)計(jì)與實(shí)現(xiàn)

系統(tǒng)客戶端將使用Adobe AIR跨平臺(tái)工具，在Windows上運(yùn)用F1ash Professiona1 CS6進(jìn)行美術(shù)素材與界面布局的設(shè)計(jì)，使用ActionScript3.0腳本語(yǔ)言，將設(shè)計(jì)好的各類素材組合在一起，并針對(duì)主控端和分控端的不同需求，對(duì)網(wǎng)絡(luò)連接、界面切換等功能進(jìn)行編程開發(fā)。開發(fā)完畢后發(fā)布的應(yīng)用可在Windows、Android、iOS操作系統(tǒng)下運(yùn)行。

客戶端整體設(shè)計(jì)圖2所示，圖中，系統(tǒng)客戶端被分成主控端與分控端兩部分，自由定制模塊為分控端獨(dú)有模塊，錄制回放模塊為主控端獨(dú)有模塊，實(shí)時(shí)表演模塊為兩端共有模塊，但功能各不相同。

圖2　系統(tǒng)硬件結(jié)構(gòu)圖

下方的7個(gè)界面中，有4個(gè)界面分屬于以上3大模塊，分別具有各自的功能，而另外3個(gè)沒有直線連接的界面為輔助界面，將3大核心功能串聯(lián)起來(lái)形成一個(gè)完整的應(yīng)用軟件。

下面就對(duì)此應(yīng)用系統(tǒng)所使用的關(guān)鍵技術(shù)，分模塊進(jìn)行一一闡釋。

3　關(guān)鍵技術(shù)的實(shí)現(xiàn)

此系統(tǒng)在客戶端共分為3大模塊，每一模塊均由F1ash中的美術(shù)素材，配合ActionScript3.0腳本語(yǔ)言配合進(jìn)行開發(fā)，現(xiàn)一一詳述如下：

3.1基本概念介紹

為便于讀者理解，在介紹具體實(shí)現(xiàn)方法之前，筆者需要介紹F1ash中特有的一些基本概念：時(shí)間軸、影片剪輯和骨骼。

F1ash中的時(shí)間軸指的是隨著時(shí)間變化的一組美術(shù)素材序列，每一個(gè)時(shí)間點(diǎn)單位成為“幀”，每一幀的美術(shù)素材可相同，也可不同。整個(gè)時(shí)間軸所有幀的美術(shù)素材，共同構(gòu)成了一個(gè)影片剪輯。

F1ash中的影片剪輯英文稱為MovieC1ip，指的是一個(gè)內(nèi)部包含時(shí)間軸，可具有多幀美術(shù)素材資源。此資源可進(jìn)行命名操作，程序可通過(guò)影片剪輯的名稱對(duì)其進(jìn)行控制。在本系統(tǒng)中，自由定制與快速選擇功能的實(shí)現(xiàn)，就是利用了這些特性，使用程序動(dòng)態(tài)控制素材切換到特定幀，以達(dá)到不同的顯示效果。

F1ash中的骨骼是在CS4版本及之后版本新加入的特定功能，它可以使多個(gè)影片剪輯按照某個(gè)特定的骨架綁定在一起。被綁定的骨架的平移量與旋轉(zhuǎn)角度都會(huì)受到骨骼工具的限制，從而達(dá)到模擬人體或動(dòng)物骨骼運(yùn)動(dòng)的效果。

3.2自由定制模塊實(shí)現(xiàn)

自由定制模塊是本皮影系統(tǒng)的一大創(chuàng)新點(diǎn)，它包括快速選擇界面與自由定制界面，快速選擇界面可以由用戶選定自己喜愛的特定人物，自由定制界面可以由用戶將多個(gè)人物的各部分進(jìn)行混搭。

首先介紹快速選擇界面的功能實(shí)現(xiàn)：快速選擇界面如圖3所示，紅框?yàn)槠聊伙@示區(qū)域，下方圖片為紅色框內(nèi)圖像放大顯示的效果。皮影人物為上方圖層，共包含9個(gè)影片剪輯。背景以及文字介紹為下方圖層，為一個(gè)長(zhǎng)條形影片剪輯。下方有兩個(gè)按鈕分別控制介紹文字的左右卷動(dòng)與影人的切換，具體實(shí)現(xiàn)方式如下：

圖3　快速選擇界面

1）將皮影頭、上身、下身、左上臂、左下臂、右上臂、右下臂、左腳和右腳的影片剪輯分別命名為zskin1_zskin9，為背景與文字所在的影片剪輯命名為midCore，左下方按鈕命名為pre_page，右下方按鈕命名為next_page以便在程序中調(diào)用。

2）在進(jìn)入當(dāng)前幀后，定義一個(gè)數(shù)組，并將zskin1_zskin9共9個(gè)影片剪輯放入數(shù)組中，代碼如下：

var zSkinArray：Array=new Array（）j//定義數(shù)組

//將9個(gè)元素放入數(shù)組

zSkinArray.push（zskin1，zskin2，zskin3，zskin4，zskin5，zskin6，zskin7，zskin8，zskin9）j

3）為pre_page、next_page兩個(gè)按鈕加入單擊事件，以實(shí)現(xiàn)左右換頁(yè)以及選擇人物的功能，pre_page單擊事件核心代碼實(shí)現(xiàn)如下：

此代碼使用TweenLite.to函數(shù)執(zhí)行緩動(dòng)操作，將圖3中的背景圖層像左側(cè)移動(dòng)，這里使用一個(gè)cur_page變量標(biāo)記當(dāng)前頁(yè)數(shù)，在移動(dòng)到第一頁(yè)時(shí)，用戶若再次點(diǎn)擊pre_page按鈕，應(yīng)鎖定在第一頁(yè)不再翻動(dòng)，next_page按鈕的實(shí)現(xiàn)與pre_page在思想上大體一致，只是實(shí)現(xiàn)細(xì)節(jié)略有不同，這里不再贅述。

4）單擊下方兩個(gè)按鈕除翻頁(yè)外，zSkinArray中的元素也需要發(fā)生相應(yīng)變化，向用戶展示不同的皮影人物。zSkinArray中的每個(gè)元素都包含9幀不同的圖像，以skin1為例，其一個(gè)影片剪輯包含9個(gè)圖像，在點(diǎn)擊pre_page或next_page時(shí)，zskin1會(huì)利用gotoAndStop函數(shù)跳至其中一幀，而zskin2_ zskin9也會(huì)進(jìn)行以上操作，其核心代碼如下：

在這里，num會(huì)根據(jù)用戶的選擇而賦值為1_9，G1oba1Var.ShadowNumber為一個(gè)擁有9個(gè)元素的數(shù)組，其每一個(gè)元素代表每一個(gè)zskin影片剪輯的當(dāng)前幀，這9個(gè)元素也會(huì)形成一個(gè)序號(hào)來(lái)唯一確定用戶的當(dāng)前選擇，例如孫悟空為9個(gè)1，豬八戒為9個(gè)2……在自由定制界面，也會(huì)用到此數(shù)組，只不過(guò)9個(gè)元素的數(shù)值會(huì)不完全向相同。

接下來(lái)介紹自由定制界面的實(shí)現(xiàn)方式，自由定制界面圖如圖4所示。

圖4　自由定制界面

自由定制界面中，用戶可以點(diǎn)擊右側(cè)影人的各身體部分，之后從左側(cè)的9個(gè)方格中選定其他樣式的相應(yīng)部位，以達(dá)到右側(cè)所示的混搭效果；在功能的實(shí)現(xiàn)上，此界面與上面介紹的快速選擇界面有著較大的相似之處：

1）將左側(cè)影片剪輯命名為k1—k9，k1—k9每個(gè)影片剪輯中包含9個(gè)不同人物的同一部分，k1—k9下方的按鈕命名為sc1—sc9，右側(cè)人物的部分命名為skin1—skin9，在用戶點(diǎn)擊右側(cè)人物的某一部分時(shí)，左側(cè)k1_k9會(huì)跳至相應(yīng)的幀，核心代碼如下：kIndex=parseInt（e.target.name.charAt（4）j//獲取當(dāng)前部位索引所在的幀

for（var k：int=0jk＜kArray.1engthjk++）

｛//將所有左側(cè)影片剪輯跳至當(dāng)前部位索引所在的幀

（kArray［k］as MovieC1ip）.gotoAndStop（kIndex）j

｝

2）當(dāng)用戶點(diǎn)擊左側(cè)9個(gè)方格中的其中一個(gè)時(shí)，右側(cè)skin1—skin9中的某個(gè)對(duì)應(yīng)影片剪輯也應(yīng)進(jìn)行相應(yīng)的變化，其核心代碼如下：

//獲取當(dāng)前點(diǎn)擊目標(biāo)名稱

skinArray［skinIndex］.gotoAndStop（tmpNum）j//右側(cè)部位影片剪輯跳至相應(yīng)的幀

G1oba1Var.ShadowNumber［skinIndex］=tmpNumj//將當(dāng)前影人信息寫入全局?jǐn)?shù)組

這里再次出現(xiàn)了前面提到的G1oba1Var.ShadowNumber數(shù)組，自由定制界面中，由于用戶的隨意性較強(qiáng)，9個(gè)元素的數(shù)值大多數(shù)情況下都不會(huì)完全相同，比如圖中的影人信息，在數(shù)組中的表示序列即為：2、9、4、1、3、1、6、1、1。依據(jù)乘法原理，此皮影各部位具有99=387 420 489種組合可供用戶選擇。

3.3實(shí)時(shí)表演模塊的實(shí)現(xiàn)

實(shí)時(shí)表演模塊為主控端與分控端共有模塊，其功能各不相同，表演界面分別如圖5的上半部分與下半部分所示。實(shí)時(shí)表演功能主要完成主控端與分控端人物坐標(biāo)、音樂(lè)、特效、朝向以及當(dāng)前場(chǎng)景數(shù)據(jù)的同步。用戶在分控端使用移動(dòng)設(shè)備發(fā)出的數(shù)據(jù)，需要一個(gè)服務(wù)器接收并轉(zhuǎn)發(fā)到主控端；此系統(tǒng)中，數(shù)據(jù)的通信主要依靠一個(gè)Java Socket服務(wù)器進(jìn)行，其接收讀取客戶端傳輸來(lái)的數(shù)據(jù)并轉(zhuǎn)發(fā)給主控端。

圖5　實(shí)時(shí)表演模塊界面

分控端在表演過(guò)程中，會(huì)將影人的表演信息作為一個(gè)數(shù)據(jù)包發(fā)送給主控端，其核心代碼如下：

圖5所示的分控端每秒會(huì)執(zhí)行40次上述代碼，向主控端發(fā)送40個(gè)數(shù)據(jù)包，每一個(gè)數(shù)據(jù)包中包含9個(gè)小數(shù)據(jù)包，分別表示影人身體9部位的當(dāng)前信息，每個(gè)小數(shù)據(jù)包內(nèi)有3個(gè)數(shù)值：第一位表示當(dāng)前控制的哪個(gè)角色（范圍1_5），第二位與第三位是當(dāng)前部位骨骼的坐標(biāo)信息（x坐標(biāo)與y坐標(biāo)）。

服務(wù)器接收后，會(huì)轉(zhuǎn)發(fā)至主控端，主控端會(huì)根據(jù)角色信息進(jìn)行解析，以調(diào)用不同的影人進(jìn)行坐標(biāo)同步。

3.4錄制回放模塊的實(shí)現(xiàn)

錄制回放本質(zhì)是一個(gè)當(dāng)前數(shù)據(jù)的存儲(chǔ)與讀取的過(guò)程，將皮影表演時(shí)的所有信息存入一個(gè)文件，在回放時(shí)讀取已保存的文件，根據(jù)特定數(shù)據(jù)還原表演時(shí)的狀態(tài)即可。

需要錄制回放的各類數(shù)據(jù)信息如表1所示。

表1　需要錄制的各類數(shù)據(jù)

錄制回放模塊在界面中，主要表現(xiàn)為圖5下圖右下角的文本輸入框和3個(gè)按鈕，文本輸入框用于輸入錄制的文件名，其程序中命名為editFi1eName，輸入框右側(cè)前3個(gè)按鈕依次為：開始錄制按鈕、回放按鈕、打開按鈕，其程序中命名分別為btn_record、btn_rep1ay、btn_open。

表1表示的是每一幀需要寫入文件的信息，共包括142 個(gè)int類型的變量，分別記錄當(dāng)前場(chǎng)景、特效、音樂(lè)、皮膚、朝向以及各骨骼節(jié)點(diǎn)的坐標(biāo)。

當(dāng)用戶點(diǎn)擊錄制按鈕btn_record之后，程序會(huì)將會(huì)獲取上圖中的所有信息，將其存入一個(gè)叫做recordSaveArray數(shù)組之中。其核心代碼如下：

在坐標(biāo)存入數(shù)組后，使用Fi1eStream類的writeInt函數(shù)將recordSaveArray數(shù)組的所有元素寫入文件即可進(jìn)行錄像的保存。

用戶點(diǎn)擊btn_open按鈕可使用對(duì)話框打開特定的錄像文件，打開完畢后，點(diǎn)擊btn_rep1ay按鈕后，便會(huì)使用fi1eStream.readInt（）函數(shù)讀取之前存入的數(shù)值，然后對(duì)于不同數(shù)值進(jìn)行以下操作。

對(duì)于表1中的第1位——場(chǎng)景信息，回放時(shí)會(huì)根據(jù)數(shù)值不同，使用主控端背景影片剪輯的gotoAndStop（）函數(shù)跳至相應(yīng)的幀；對(duì)于第2位——特效或音樂(lè)信息，回放時(shí)會(huì)根據(jù)不同的數(shù)值創(chuàng)作一個(gè)播放特定音樂(lè)或特效的Event事件，之后使用dispatchEvent（event）命令將事件發(fā)出，以起到播放音樂(lè)或者特效的作用；對(duì)于3—47位的皮膚信息，以及48—52位的朝向信息，回放時(shí)與場(chǎng)景信息類似，使用gotoAndStop（）函數(shù)將特定影片剪輯跳轉(zhuǎn)至特定幀；對(duì)于53—142位的骨骼坐標(biāo)信息，回放時(shí)使用BoneArray［i］.Move（x，y）操作即可還原表演時(shí)每一人物每一幀的坐標(biāo)信息。

4　結(jié)論

該課題的各項(xiàng)研究，將皮影數(shù)字化與移動(dòng)互聯(lián)網(wǎng)技術(shù)進(jìn)行了融合，運(yùn)用跨平臺(tái)技術(shù)以及使得傳統(tǒng)的數(shù)字皮影表演，可以在現(xiàn)代智能手機(jī)與互聯(lián)網(wǎng)得以呈現(xiàn)，此平臺(tái)也針對(duì)當(dāng)今年輕人的喜好設(shè)計(jì)了4個(gè)核心功能點(diǎn)，目的是為了讓年輕人喜愛皮影，繼而能夠自覺自愿的加入當(dāng)傳承皮影的隊(duì)伍中來(lái)。本系統(tǒng)將皮影的制作、表演、動(dòng)作的錄制等方面進(jìn)行整合，形成了自己的一套體系，解決了多數(shù)相似產(chǎn)品中空間的限制的問(wèn)題，為皮影文化的傳承做出了一定貢獻(xiàn)。

［1］侯君奕.數(shù)字技術(shù)在非物質(zhì)文化遺產(chǎn)保護(hù)中的應(yīng)用——論陜西華縣皮影的數(shù)字化保護(hù)［J］.價(jià)值工程，2011，30（28）：130_ 131.

［2］達(dá)妮莎，姚遠(yuǎn).淺談皮影數(shù)字化保護(hù)中的數(shù)字符號(hào)庫(kù)構(gòu)建［J］.美術(shù)大觀，2011（2）：64.

［3］張澤，羅莎莎.數(shù)字動(dòng)畫對(duì)皮影藝術(shù)的傳承和發(fā)展［J］.中國(guó)科技財(cái)富，2009（22）：10_11.

［4］云浪生.數(shù)字技術(shù)推動(dòng)設(shè)計(jì)創(chuàng)新與時(shí)俱進(jìn)［J］.中國(guó)制造業(yè)信息化，2011（2）：51_52.

［5］楊方琦，羅維亮.陜西東府皮影戲數(shù)字化發(fā)展的思考［J］.價(jià)值工程，2010，29（35）：121_123.

［6］施蓓，黃融融.淺析傳統(tǒng)皮影藝術(shù)與現(xiàn)代數(shù)字動(dòng)畫的新結(jié)合［J］.青年文學(xué)家，2013（3）.

Research and reallzatlon of a multl termlnal dlgltal shadoW PuPPet lnteractlVe system

CAI Sen
（Beijing University of Technology，Beijing 100124，China）

In order to save the shadow of this traditiona1 art，based on the p1atform and combined what has achieved with some app1ications which are popu1ar in the young，the writer further designed mobi1e shadow puppet show system.The c1ient of system are deve1oped by Adobe AIR cross p1atform techno1ogy，which using ActionScript3.0 programming 1anguage.The servers are deve1oped with Java programming 1anguage and Socket techno1ogy.The sub termina1s of the system can run on mobi1e devices with Android or iOS operating system，and the main termina1 can run under the Windows operating system on the notebook.The sub termina1s can use wire1ess network to contro1 the puppets which are disp1ayed in the main termina1，and accomp1ish the cross p1atform mu1ti joint performance.

digita1 shadow puppet showjcross p1atformjmobi1e networkj human_machine interactionjmu1ti touch

TN919.82

A

1674_6236（2016）10_0187_04

2015_06_18稿件編號(hào)：201506192

蔡森（1992—），男，北京人，碩士研究生。研究方向：數(shù)字媒體技術(shù)、信息與服務(wù)工程。