多终端数字皮影交互系统的设计与实现

蔡森

（北京工业大学北京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—），男，北京人，硕士研究生。研究方向：数字媒体技术、信息与服务工程。