多終端數字皮影交互系統的設計與實現

蔡森

（北京工業大學北京100124）

多終端數字皮影交互系統的設計與實現

蔡森

（北京工業大學北京100124）

為拯救皮影這門傳統藝術，筆者將自己已有研究成果，與市場上幾款廣受年輕人喜愛的手機應用相結合，設計開發了多終端數字皮影交互系統；此系統運用Adobe AIR跨平臺技術，采用ActionScript3.0以及Java程序設計語言進行客戶端與服務器端開發；分控端運行在Android或iOS操作系統的移動終端之上，主控端運行在PC或筆記本電腦之上；分控端通過無線網絡控制主控端場景中的人物，實現了跨平臺多設備聯合皮影表演的可能。

數字皮影；跨平臺；移動互聯；人機交互；多點觸控

皮影是中國的一種傳統藝術，擁有近千年的歷史，是古代中國的一種表演形式。皮影戲于2006年入選中國非物質文化遺產名錄，于2011年入選世界非物質文化遺產名錄［1］。

然而現如今，隨著科技的發展，比起畫面絢麗的網絡游戲、極具視覺與心靈沖擊力的電影以及各類霓虹燈照射下的舞臺，傳統的皮影表演已經無法給人以太多的娛樂享受，皮影必須要融入現代科技元素，才能擁有更加長遠的傳承與發展［2_3］。

數字藝術與皮影結合，可以讓皮影重新煥發自己的活力［4］。近些年，隨著數字藝術與計算機圖形學領域的進一步發展，在計算機上制作皮影，并制作動態的交互已不再是難題。近年來，社會上也出現了如《桃花源記》、《梁山伯與祝英臺》等等優秀的數字皮影作品。

但是，目前數字皮影還沒有像曾經的傳統皮影那樣受到廣大人民的歡迎，皮影的制作、動作的錄制等方面還沒有形成自己的一套體系。而且大多數作品擁有空間的限制，無法充分利用現在發達的互聯網系統，這些都是有待解決的問題［5_6］。

1　系統概述

本系統硬件總體架構設計如圖1所示，用戶只需在手機或平板中安裝此系統的分控端應用，并通過無線網絡連接到筆記本電腦之上，即可用手指在手機或平板之上，控制筆記本電腦上的皮影人物，進而控制幕布上的皮影人物進行表演。

系統的主控設備由一臺筆記本電腦控制，組網設備由一臺路由器擔任，分控設備由手機或平板終端擔任，可使用Android或iOS操作系統，投影設備由投影儀或任意高清輸出設備擔任，并由高清視頻輸出線與電腦連接。

圖1　系統總體架構圖

1.1客戶端架構

本系統客戶端分為主控端與分控端兩部分，兩部分設備各自安裝不同的軟件，并對相同的IP地址與端口進行監聽。

主控端軟件主要進行實時表演的呈現、錄制和回放，包括歡迎界面、網絡配置界面、場景選擇界面以及實時表演界面。

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

1.2服務器端架構

服務器端的設計使用的是Java程序設計語言。服務器共包括一個窗口，兩個按鈕，一個文本框。架構中，窗口由JFrame控件實現，負責承載整個服務器界面，是按鈕與文本框的載體。按鈕將使用JBttton實現，通過點擊按鈕可以執行不同的事件。在此服務器中，其中一個按鈕為啟動服務器選項，另一個為停止服務器選項，分別控制服務器的啟動和停止；顯示文字的標簽將使用JLabe1實現，用于標注服務器當前的運行狀態。

2　系統客戶端設計與實現

系統客戶端將使用Adobe AIR跨平臺工具，在Windows上運用F1ash Professiona1 CS6進行美術素材與界面布局的設計，使用ActionScript3.0腳本語言，將設計好的各類素材組合在一起，并針對主控端和分控端的不同需求，對網絡連接、界面切換等功能進行編程開發。開發完畢后發布的應用可在Windows、Android、iOS操作系統下運行。

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

圖2　系統硬件結構圖

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

下面就對此應用系統所使用的關鍵技術，分模塊進行一一闡釋。

3　關鍵技術的實現

此系統在客戶端共分為3大模塊，每一模塊均由F1ash中的美術素材，配合ActionScript3.0腳本語言配合進行開發，現一一詳述如下：

3.1基本概念介紹

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

F1ash中的時間軸指的是隨著時間變化的一組美術素材序列，每一個時間點單位成為“幀”，每一幀的美術素材可相同，也可不同。整個時間軸所有幀的美術素材，共同構成了一個影片剪輯。

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

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

3.2自由定制模塊實現

自由定制模塊是本皮影系統的一大創新點，它包括快速選擇界面與自由定制界面，快速選擇界面可以由用戶選定自己喜愛的特定人物，自由定制界面可以由用戶將多個人物的各部分進行混搭。

首先介紹快速選擇界面的功能實現：快速選擇界面如圖3所示，紅框為屏幕顯示區域，下方圖片為紅色框內圖像放大顯示的效果。皮影人物為上方圖層，共包含9個影片剪輯。背景以及文字介紹為下方圖層，為一個長條形影片剪輯。下方有兩個按鈕分別控制介紹文字的左右卷動與影人的切換，具體實現方式如下：

圖3　快速選擇界面

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

2）在進入當前幀后，定義一個數組，并將zskin1_zskin9共9個影片剪輯放入數組中，代碼如下：

var zSkinArray：Array=new Array（）j//定義數組

//將9個元素放入數組

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

3）為pre_page、next_page兩個按鈕加入單擊事件，以實現左右換頁以及選擇人物的功能，pre_page單擊事件核心代碼實現如下：

此代碼使用TweenLite.to函數執行緩動操作，將圖3中的背景圖層像左側移動，這里使用一個cur_page變量標記當前頁數，在移動到第一頁時，用戶若再次點擊pre_page按鈕，應鎖定在第一頁不再翻動，next_page按鈕的實現與pre_page在思想上大體一致，只是實現細節略有不同，這里不再贅述。

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

在這里，num會根據用戶的選擇而賦值為1_9，G1oba1Var.ShadowNumber為一個擁有9個元素的數組，其每一個元素代表每一個zskin影片剪輯的當前幀，這9個元素也會形成一個序號來唯一確定用戶的當前選擇，例如孫悟空為9個1，豬八戒為9個2……在自由定制界面，也會用到此數組，只不過9個元素的數值會不完全向相同。

接下來介紹自由定制界面的實現方式，自由定制界面圖如圖4所示。

圖4　自由定制界面

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

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

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

｛//將所有左側影片剪輯跳至當前部位索引所在的幀

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

｝

2）當用戶點擊左側9個方格中的其中一個時，右側skin1—skin9中的某個對應影片剪輯也應進行相應的變化，其核心代碼如下：

//獲取當前點擊目標名稱

skinArray［skinIndex］.gotoAndStop（tmpNum）j//右側部位影片剪輯跳至相應的幀

G1oba1Var.ShadowNumber［skinIndex］=tmpNumj//將當前影人信息寫入全局數組

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

3.3實時表演模塊的實現

實時表演模塊為主控端與分控端共有模塊，其功能各不相同，表演界面分別如圖5的上半部分與下半部分所示。實時表演功能主要完成主控端與分控端人物坐標、音樂、特效、朝向以及當前場景數據的同步。用戶在分控端使用移動設備發出的數據，需要一個服務器接收并轉發到主控端；此系統中，數據的通信主要依靠一個Java Socket服務器進行，其接收讀取客戶端傳輸來的數據并轉發給主控端。

圖5　實時表演模塊界面

分控端在表演過程中，會將影人的表演信息作為一個數據包發送給主控端，其核心代碼如下：

圖5所示的分控端每秒會執行40次上述代碼，向主控端發送40個數據包，每一個數據包中包含9個小數據包，分別表示影人身體9部位的當前信息，每個小數據包內有3個數值：第一位表示當前控制的哪個角色（范圍1_5），第二位與第三位是當前部位骨骼的坐標信息（x坐標與y坐標）。

服務器接收后，會轉發至主控端，主控端會根據角色信息進行解析，以調用不同的影人進行坐標同步。

3.4錄制回放模塊的實現

錄制回放本質是一個當前數據的存儲與讀取的過程，將皮影表演時的所有信息存入一個文件，在回放時讀取已保存的文件，根據特定數據還原表演時的狀態即可。

需要錄制回放的各類數據信息如表1所示。

表1　需要錄制的各類數據

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

表1表示的是每一幀需要寫入文件的信息，共包括142 個int類型的變量，分別記錄當前場景、特效、音樂、皮膚、朝向以及各骨骼節點的坐標。

當用戶點擊錄制按鈕btn_record之后，程序會將會獲取上圖中的所有信息，將其存入一個叫做recordSaveArray數組之中。其核心代碼如下：

在坐標存入數組后，使用Fi1eStream類的writeInt函數將recordSaveArray數組的所有元素寫入文件即可進行錄像的保存。

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

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

4　結論

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

［1］侯君奕.數字技術在非物質文化遺產保護中的應用——論陜西華縣皮影的數字化保護［J］.價值工程，2011，30（28）：130_ 131.

［2］達妮莎，姚遠.淺談皮影數字化保護中的數字符號庫構建［J］.美術大觀，2011（2）：64.

［3］張澤，羅莎莎.數字動畫對皮影藝術的傳承和發展［J］.中國科技財富，2009（22）：10_11.

［4］云浪生.數字技術推動設計創新與時俱進［J］.中國制造業信息化，2011（2）：51_52.

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

［6］施蓓，黃融融.淺析傳統皮影藝術與現代數字動畫的新結合［J］.青年文學家，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稿件編號：201506192

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