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

呂呂

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

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

呂呂

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1 系統(tǒng)架構設計

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

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

2.2 功能模塊設計

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

圖2 平臺功能模塊結構圖Fig.2 The structure diagram of platform's function modules

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

3 系統(tǒng)實現

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

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

3.2 地圖模塊：地圖的顯示、移動等邏輯實現

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

3.2.1 地圖顯示實現

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

3.2.2 地圖遮罩層的實現

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

3.2.3 實現主位式地圖移動模式

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

3.2.4 地圖尋徑算法實現

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

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

3.3 場景切換實現

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

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

3.4 登錄模塊實現

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

3.5 系統(tǒng)應用

3.5.1 聊天應用

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

3.5.2 音樂模塊

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

3.5.3 導航模塊

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

4 結 論

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

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

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

［1］譚淇.基于WCF服務框架與Silverlight的Web應用研究［J］.計算機與現代化，2011（1）:79-81.

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

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

［4］萬常選，劉喜平.xml數據庫技術［M］.2版.北京：清華大學出版社，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—），男，安徽六安人，碩士研究生，中級網絡工程師。 研究方向：軟件工程與并行計算。