呂呂

（華南理工大學(xué) 軟件學(xué)院，廣東 廣州 510006）

立體化校園交互平臺研究與開發(fā)

呂呂

（華南理工大學(xué) 軟件學(xué)院，廣東 廣州 510006）

針對傳統(tǒng)B/S Web應(yīng)用程序的交互能力差、復(fù)用度低、展現(xiàn)能力不盡人意等問題，提出一種基于虛擬校園的多人在線交互的應(yīng)用模式。通過WCF服務(wù)框架與Silverlight技術(shù)的有效結(jié)合，來解決傳統(tǒng)Web應(yīng)用中的不足。前端展示由Silverlight完成，后臺邏輯由C#.NET實現(xiàn)，WCF服務(wù)實現(xiàn)系統(tǒng)與服務(wù)端連接，打造支持多人在線、集資源共享、SNS社區(qū)、校園應(yīng)用等多功能于一體的立體化校園交互平臺。該平臺，以現(xiàn)實中的校園為背景，以多媒體的形式展現(xiàn)各種信息元素，促進(jìn)學(xué)校對外宣傳，師生交流，豐富校園生活和實現(xiàn)數(shù)字化校園。

虛擬校園；SNS社區(qū)；WCF；Silverlight

隨著計算機(jī)和互聯(lián)網(wǎng)在高校校園中的普及，數(shù)字化校園建設(shè)突飛猛進(jìn)，信息科技對管理、教學(xué)和校園生活的滲透與影響日漸深入，基于信息技術(shù)而構(gòu)建的數(shù)字校園已不斷浮現(xiàn)，日益成為在校師生交流、信息獲取、資源發(fā)布和社會交往的重要媒介。

然而目前各種數(shù)字化校園應(yīng)用主要是以網(wǎng)頁為表現(xiàn)形式，這些應(yīng)用有一個明顯的缺點就是只能提供靜態(tài)的、不全面的信息，但虛擬應(yīng)用程序只提供預(yù)置的靜態(tài)信息，靜態(tài)的信息無法滿足動態(tài)的需求。隨著用戶對網(wǎng)絡(luò)應(yīng)用的交互性體驗要求越來越高，現(xiàn)在的網(wǎng)頁展現(xiàn)技術(shù)已經(jīng)難以滿足當(dāng)前的需求。

1 平臺研究的意義及創(chuàng)新點

1.1 平臺研究開發(fā)的意義

在背景的綜合考慮下，我們提出一種基于虛擬校園的支持人與人交互的應(yīng)用模式，使用Silverlight技術(shù)以及WCF數(shù)據(jù)通信應(yīng)用程序開發(fā)接口，突破傳統(tǒng)網(wǎng)頁呈現(xiàn)技術(shù)的交互平臺系統(tǒng)，將SNS社區(qū)（Social Networking Services，即社會性網(wǎng)絡(luò)服務(wù)）與三維立體化虛擬校園相結(jié)合，打造一個具有絢麗視覺效果的交互式體驗界面，支持多人同時在線的，集資源共享、SNS社區(qū)、校園應(yīng)用等多種功能于一身的立體化校園交互平臺。

1.2 平臺研究開發(fā)的創(chuàng)新點

立體化虛擬校園是數(shù)字校園的重要組成部分，以網(wǎng)頁形式展現(xiàn)校園環(huán)境實景。通過WCF服務(wù)架構(gòu)與Silverlight技術(shù)兩者有效的結(jié)合，充分利用WCF本身所整合的多種分布式技術(shù)和將復(fù)用等級提高到業(yè)務(wù)層次的面向服務(wù)編程能力［1］，提高開發(fā)效率，來解決傳統(tǒng)Web應(yīng)用中的不足。目前，國內(nèi)很多高校都建立了自己的虛擬校園，甚至基于此虛擬校園建立各種應(yīng)用，用戶可以利用這些虛擬的應(yīng)用了解學(xué)校更多的信息。因此，此交互平臺具有如下創(chuàng)新點：

1）立體化校園互動平臺以現(xiàn)實中的校園為背景，模擬仿真校園環(huán)境，讓外校人士及新生方便的瀏覽校園場景，了解相關(guān)專業(yè)信息、課程安排和師資力量，促進(jìn)學(xué)校的對外宣傳工作。

2）通過此平臺，讓校園內(nèi)的各種信息與校園應(yīng)用變得立體化，使得同學(xué)之間、學(xué)院班級之間的互動交流、資源共享以及信息傳播變得更加高效，讓同學(xué)們隨時隨地了解各種校園活動、知識講座等相關(guān)消息，方便同學(xué)們的大學(xué)生活和學(xué)習(xí)。

3）平臺內(nèi)置豐富校園應(yīng)用如瀏覽公告，觀看視頻資源，交友聊天等。給用戶一種身臨校園的同時，體驗豐富的多媒體應(yīng)用，包括文字、圖像、聲音、影片等。

2 系統(tǒng)總體設(shè)計

2.1 系統(tǒng)架構(gòu)設(shè)計

立體化校園交互平臺的架構(gòu)由客戶端Silverlight應(yīng)用程序和控制數(shù)據(jù)訪問的Server服務(wù)器端兩大部分組成。本項目采用WCF服務(wù)來實現(xiàn)系統(tǒng)架構(gòu)的服務(wù)端，WCF服務(wù)層接口作為Silverlight和服務(wù)器端傳輸數(shù)據(jù)的媒介，以完成對象序列化，傳輸安全性，傳輸準(zhǔn)確性，會話狀態(tài)保持，連接保持，通訊格式等功能［2］。系統(tǒng)架構(gòu)如圖1。

圖1 系統(tǒng)總體架構(gòu)圖Fig.1 The system architecture diagram

2.2 功能模塊設(shè)計

系統(tǒng)為達(dá)到預(yù)期功能，所需功能模塊如圖 2以及表1。

圖2 平臺功能模塊結(jié)構(gòu)圖Fig.2 The structure diagram of platform's function modules

表1 平臺功能模塊簡介Tab.1 Introduction to the platform function modules

3 系統(tǒng)實現(xiàn)

由于立體化校園交互平臺的所有功能應(yīng)用實現(xiàn)均建立在校園場景和虛擬角色實現(xiàn)的基礎(chǔ)上，而校園場景和虛擬角色的實現(xiàn)是通過地圖模塊與人物模塊，所以地圖模塊和人物模塊是立體化校園交互平臺開發(fā)的關(guān)鍵模塊，故在此進(jìn)行詳細(xì)討論，其余模塊將對關(guān)鍵部分進(jìn)行討論。

3.1 人物模塊：實現(xiàn)人物動畫及鼠標(biāo)控制移動人物行走動畫是通過逐張切換播放多幅連續(xù)的圖片實現(xiàn)的，而且人物不同的狀態(tài)將呈現(xiàn)不同的人物動畫。由于人物動畫順序以及各個方向具有規(guī)律性，規(guī)定人物動畫圖片文件的命名規(guī)范為，動作代號-方向代號-圖片序號，這樣的文件命名規(guī)范符合動畫的規(guī)律，按順序?qū)D片進(jìn)行編號，根據(jù)方向進(jìn)行編號，便于實現(xiàn)圖片的切換，如切換方向時只需要根據(jù)需要改變文件名中間的方向代號。

3.2 地圖模塊：地圖的顯示、移動等邏輯實現(xiàn)

通過Image控件顯示地圖，然后把地圖設(shè)置為整個系統(tǒng)的背景。另外為了使得系統(tǒng)更像現(xiàn)實，要模擬現(xiàn)實中只能在道路上行走而不能橫跨建筑物，地圖移動使用主位式移動模式，具體實現(xiàn)原理如下。

3.2.1 地圖顯示實現(xiàn)

在場景的加載或切換時（修改場景的 Code值），首先下載該場景的xml配置文件并解析其中的相關(guān)參數(shù)信息賦值到具體屬性。由于實際地圖未進(jìn)行分割再使用貼片方式加載，所以實際地圖文件比較大，加載時間比較久，所以設(shè)計了一個地圖加載模式，在真實地圖加載之前，先下載該代號場景的縮略地圖（Mini Map），縮略地圖加載完畢后以Fill的形式模糊填充滿整個背景，接著再下載實際地圖圖片 （Real Map），實際地圖加載完成后把縮略地圖替換掉，進(jìn)行呈現(xiàn)。

3.2.2 地圖遮罩層的實現(xiàn)

項目場景中光有地圖背景還不行，需要加上一定程度上的遮擋物配上傾斜的鏡頭跟隨視角實現(xiàn)偽3D效果（也稱為2.5D），使游戲效果更加接近真實的場景效果。

3.2.3 實現(xiàn)主位式地圖移動模式

主位式地圖移動模式，即以主角為中心，它的移動帶動著所有對象包括地圖、物體對象、其他玩家等等的相對移動，這些對象的移動都是以主角為參照物的。主角始終在中間區(qū)域，當(dāng)主角進(jìn)入其他區(qū)域時地圖及其他對象則作相對移動。由于地圖已經(jīng)移動至接近邊緣時，如果繼續(xù)移動地圖將會造成出現(xiàn)空白的地方，所以此時不再繼續(xù)移動地圖以及其他對象，而是移動人物讓其靠近地圖邊緣。

3.2.4 地圖尋徑算法實現(xiàn)

要完美模擬現(xiàn)實中的場景，在實現(xiàn)地圖遮罩層的基礎(chǔ)上，還需要對現(xiàn)實中人不能跨越各種障礙物進(jìn)行模擬。角色從A點出發(fā)移動至B點，尋徑算法使用A*尋徑算法［3］，人物將會自動繞過建筑物，這樣就模擬了現(xiàn)實中人物只能在道路上行走而不能橫跨建筑物的效果。

要實現(xiàn)人物角色按照地圖上所描述的地形走動：比方說前面一旦遇到障礙則繞行，碰到河流不能通過等；就必須建立一個關(guān)于該地圖地形的網(wǎng)格結(jié)構(gòu)，將人物角色的坐標(biāo)與地形障礙物坐標(biāo)以統(tǒng)一的規(guī)格布局到該網(wǎng)格中，最終通過在網(wǎng)格里模擬坐標(biāo)的移動來完成真實的人物角色移動，然后可使用一個數(shù)組來描述地形信息。

3.3 場景切換實現(xiàn)

地圖的圖片文件的文件較大，加載時暫用資源和時間，所以必須將校園的整體地圖按照一定的規(guī)則劃定范圍，如按照生活區(qū)、教學(xué)區(qū)等自然劃分，將單張地圖分割為多張地圖，而進(jìn)入系統(tǒng)時只加載其中一張地圖。此時，則需要實現(xiàn)不同校園場景之間的切換。

而場景入口是通過XML文件進(jìn)行配置的，要添加場景入口只需在相應(yīng)的配置文件進(jìn)行編輯即可［4］，還可以根據(jù)校園地圖分割的情況設(shè)置多個場景切換入口，不同入口通向的場景根據(jù)平臺的需求進(jìn)行入口的配置而決定，不一定是按照實際地圖的情況。

3.4 登錄模塊實現(xiàn)

用戶通過瀏覽器進(jìn)入立體化校園應(yīng)用平臺時，將彈出登錄注冊界面，未注冊用戶可以選擇試用或者注冊用戶再登錄，如果使用者選擇試用，那么在進(jìn)入到平臺后將以匿名登錄游客的身份使用平臺中的部分功能。而已注冊用戶則通過直接通過輸入賬號密碼，然后點擊登錄，驗證賬號密碼正確則正式進(jìn)入本平臺中，使用平臺中的功能。

3.5 系統(tǒng)應(yīng)用

3.5.1 聊天應(yīng)用

聊天系統(tǒng)主要提供平臺中用戶之間聊天的功能，左邊是聊天消息發(fā)送框，輸入要發(fā)送的消息，然后點擊發(fā)送即可。而右邊則是點擊發(fā)送后的效果，在角色的頭頂上將會出現(xiàn)一個文本框，文本框中顯示的內(nèi)容就是在消息發(fā)送框中輸入的內(nèi)容。消息傳遞采用UDP協(xié)議來實現(xiàn)，利用C#.NET內(nèi)置的套接字編程接口來完成用戶間的通訊。

3.5.2 音樂模塊

在登入平臺中自由活動和使用功能時將會有旋律美妙的音樂陪伴，而音樂模塊是通過Silverlight內(nèi)置的音樂播放控件來實現(xiàn)，后臺邏輯代碼則有C#.NET來完成。用于播放平臺背景音樂和用戶在線音樂點播。

3.5.3 導(dǎo)航模塊

導(dǎo)航模塊中包括的功能有校園建筑物介紹，學(xué)校宣傳視頻點播，校園電影在線觀看，食堂美食介紹，校園公告，休閑游戲等，豐富了用戶體驗，最大可能的將學(xué)校展現(xiàn)給用戶。各種應(yīng)用窗體主體由Silverlight的UserControl控件實現(xiàn)，其中視頻播放則由視頻播放控件MediaElement完成，圖片播放可以由按鈕控制，其動畫效果則由Blend for Visual Studio工具設(shè)計完成［5］，利用了Silverlight提供的Storyboard故事版動畫來完成。

4 結(jié) 論

隨著計算機(jī)與網(wǎng)絡(luò)技術(shù)的發(fā)展，“數(shù)字地球”、“數(shù)字中國”、“數(shù)字城市”等概念的提出和逐步實現(xiàn)，立體化校園的設(shè)計己成為當(dāng)前大學(xué)研究的熱點之一。而為適應(yīng)時代的發(fā)展要求，富客戶端技術(shù)的出現(xiàn)增加了網(wǎng)頁的交互性，提高了用戶的體驗。使用Silverlight這項新技術(shù)開發(fā)建立立體化校園，正是適應(yīng)了時代的發(fā)展，其中各種互動體驗很好的讓用戶融入校園社區(qū)，亦增強(qiáng)了學(xué)校的宣傳效果。

本文在開頭部分對本課題研究的意義及創(chuàng)新點進(jìn)行了簡單的介紹，后續(xù)內(nèi)容著重介紹了立體化校園交互平臺的系統(tǒng)設(shè)計以及各個核心功能模塊的開發(fā)過程，通過上文可以清晰地了解平臺整體架構(gòu)的組成部分及其功能的實現(xiàn)方式。

本課題通過將WCF與Silverlight相結(jié)合，使得Web應(yīng)用可以充分利用客戶端機(jī)器資源［6］，實現(xiàn)界面無刷新，分布式處理，擁有豐富的互操作能力以及復(fù)用度高等特點，顯著提高了程序開發(fā)效率和用戶的體驗性，因而在當(dāng)前的互聯(lián)網(wǎng)應(yīng)用中具有很好的實用價值和研究意義。

［1］譚淇.基于WCF服務(wù)框架與Silverlight的Web應(yīng)用研究［J］.計算機(jī)與現(xiàn)代化，2011（1）:79-81.

［2］謝厚亮.虛擬校園系統(tǒng)的設(shè)計與實現(xiàn)［D］.成都：電子科技大學(xué)，2010.

［3］深藍(lán)色右手-博客園.Silverlight MMORPG網(wǎng)頁游戲開發(fā)課程［EB/OL］.http://www.cnblogs.com/alamiye010/.

［4］萬常選，劉喜平.xml數(shù)據(jù)庫技術(shù)［M］.2版.北京：清華大學(xué)出版社，2008.

［5］Pete Brown.Silverlight 5 in Action［M］.United States:Manning Publications，2012.

［6］Matthew MacDonald.Pro Silverlight 5 in C#［M］.United States:APress，2012.

Research and development of the three-dimensional campus interactive platform

LV Lv
（School of Software Engineering，South China University of Technology，Guangzhou 510006，China）

In order to solve the problems of traditional B/S Web application，such as poor interaction ability，low reuse degree，unsatisfactory show ability and many other issues，this article proposes a kind of application model based on the virtual campus with multiplayer online interaction.The effective combination of WCF service framework and Silverlight technology can solve the disadvantages of the traditional Web application.Based on the accomplish of front-end exhibit by Silverlight，backstage logic by C#.NET and WCF services connecting the system with the server，this article aims at making a three-dimensional campus interactive platform with functions of supporting peoples online，sharing resources，SNS community，campus applications and so on.Through this platform taking the real campus as background and multimedia forms to show all kinds of information，we can facilitate the school publicity，communication between teachers and students，enrich the campus life and realize the digital campus.

virtual campus；SNS community；WCF；silverlight

TN02

A

1674－6236（2016）04-0014-03

2015-03-28 稿件編號：201503399

呂 呂（1992—），男，安徽六安人，碩士研究生，中級網(wǎng)絡(luò)工程師。 研究方向：軟件工程與并行計算。