立体化校园交互平台研究与开发

吕吕

（华南理工大学 软件学院，广东 广州 510006）

立体化校园交互平台研究与开发

吕吕

（华南理工大学 软件学院，广东 广州 510006）

针对传统B/S Web应用程序的交互能力差、复用度低、展现能力不尽人意等问题，提出一种基于虚拟校园的多人在线交互的应用模式。通过WCF服务框架与Silverlight技术的有效结合，来解决传统Web应用中的不足。前端展示由Silverlight完成，后台逻辑由C#.NET实现，WCF服务实现系统与服务端连接，打造支持多人在线、集资源共享、SNS社区、校园应用等多功能于一体的立体化校园交互平台。该平台，以现实中的校园为背景，以多媒体的形式展现各种信息元素，促进学校对外宣传，师生交流，丰富校园生活和实现数字化校园。

虚拟校园；SNS社区；WCF；Silverlight

随着计算机和互联网在高校校园中的普及，数字化校园建设突飞猛进，信息科技对管理、教学和校园生活的渗透与影响日渐深入，基于信息技术而构建的数字校园已不断浮现，日益成为在校师生交流、信息获取、资源发布和社会交往的重要媒介。

然而目前各种数字化校园应用主要是以网页为表现形式，这些应用有一个明显的缺点就是只能提供静态的、不全面的信息，但虚拟应用程序只提供预置的静态信息，静态的信息无法满足动态的需求。随着用户对网络应用的交互性体验要求越来越高，现在的网页展现技术已经难以满足当前的需求。

1 平台研究的意义及创新点

1.1 平台研究开发的意义

在背景的综合考虑下，我们提出一种基于虚拟校园的支持人与人交互的应用模式，使用Silverlight技术以及WCF数据通信应用程序开发接口，突破传统网页呈现技术的交互平台系统，将SNS社区（Social Networking Services，即社会性网络服务）与三维立体化虚拟校园相结合，打造一个具有绚丽视觉效果的交互式体验界面，支持多人同时在线的，集资源共享、SNS社区、校园应用等多种功能于一身的立体化校园交互平台。

1.2 平台研究开发的创新点

立体化虚拟校园是数字校园的重要组成部分，以网页形式展现校园环境实景。通过WCF服务架构与Silverlight技术两者有效的结合，充分利用WCF本身所整合的多种分布式技术和将复用等级提高到业务层次的面向服务编程能力［1］，提高开发效率，来解决传统Web应用中的不足。目前，国内很多高校都建立了自己的虚拟校园，甚至基于此虚拟校园建立各种应用，用户可以利用这些虚拟的应用了解学校更多的信息。因此，此交互平台具有如下创新点：

1）立体化校园互动平台以现实中的校园为背景，模拟仿真校园环境，让外校人士及新生方便的浏览校园场景，了解相关专业信息、课程安排和师资力量，促进学校的对外宣传工作。

2）通过此平台，让校园内的各种信息与校园应用变得立体化，使得同学之间、学院班级之间的互动交流、资源共享以及信息传播变得更加高效，让同学们随时随地了解各种校园活动、知识讲座等相关消息，方便同学们的大学生活和学习。

3）平台内置丰富校园应用如浏览公告，观看视频资源，交友聊天等。给用户一种身临校园的同时，体验丰富的多媒体应用，包括文字、图像、声音、影片等。

2 系统总体设计

2.1 系统架构设计

立体化校园交互平台的架构由客户端Silverlight应用程序和控制数据访问的Server服务器端两大部分组成。本项目采用WCF服务来实现系统架构的服务端，WCF服务层接口作为Silverlight和服务器端传输数据的媒介，以完成对象序列化，传输安全性，传输准确性，会话状态保持，连接保持，通讯格式等功能［2］。系统架构如图1。

图1 系统总体架构图Fig.1 The system architecture diagram

2.2 功能模块设计

系统为达到预期功能，所需功能模块如图 2以及表1。

图2 平台功能模块结构图Fig.2 The structure diagram of platform's function modules

表1 平台功能模块简介Tab.1 Introduction to the platform function modules

3 系统实现

由于立体化校园交互平台的所有功能应用实现均建立在校园场景和虚拟角色实现的基础上，而校园场景和虚拟角色的实现是通过地图模块与人物模块，所以地图模块和人物模块是立体化校园交互平台开发的关键模块，故在此进行详细讨论，其余模块将对关键部分进行讨论。

3.1 人物模块：实现人物动画及鼠标控制移动人物行走动画是通过逐张切换播放多幅连续的图片实现的，而且人物不同的状态将呈现不同的人物动画。由于人物动画顺序以及各个方向具有规律性，规定人物动画图片文件的命名规范为，动作代号-方向代号-图片序号，这样的文件命名规范符合动画的规律，按顺序对图片进行编号，根据方向进行编号，便于实现图片的切换，如切换方向时只需要根据需要改变文件名中间的方向代号。

3.2 地图模块：地图的显示、移动等逻辑实现

通过Image控件显示地图，然后把地图设置为整个系统的背景。另外为了使得系统更像现实，要模拟现实中只能在道路上行走而不能横跨建筑物，地图移动使用主位式移动模式，具体实现原理如下。

3.2.1 地图显示实现

在场景的加载或切换时（修改场景的 Code值），首先下载该场景的xml配置文件并解析其中的相关参数信息赋值到具体属性。由于实际地图未进行分割再使用贴片方式加载，所以实际地图文件比较大，加载时间比较久，所以设计了一个地图加载模式，在真实地图加载之前，先下载该代号场景的缩略地图（Mini Map），缩略地图加载完毕后以Fill的形式模糊填充满整个背景，接着再下载实际地图图片 （Real Map），实际地图加载完成后把缩略地图替换掉，进行呈现。

3.2.2 地图遮罩层的实现

项目场景中光有地图背景还不行，需要加上一定程度上的遮挡物配上倾斜的镜头跟随视角实现伪3D效果（也称为2.5D），使游戏效果更加接近真实的场景效果。

3.2.3 实现主位式地图移动模式

主位式地图移动模式，即以主角为中心，它的移动带动着所有对象包括地图、物体对象、其他玩家等等的相对移动，这些对象的移动都是以主角为参照物的。主角始终在中间区域，当主角进入其他区域时地图及其他对象则作相对移动。由于地图已经移动至接近边缘时，如果继续移动地图将会造成出现空白的地方，所以此时不再继续移动地图以及其他对象，而是移动人物让其靠近地图边缘。

3.2.4 地图寻径算法实现

要完美模拟现实中的场景，在实现地图遮罩层的基础上，还需要对现实中人不能跨越各种障碍物进行模拟。角色从A点出发移动至B点，寻径算法使用A*寻径算法［3］，人物将会自动绕过建筑物，这样就模拟了现实中人物只能在道路上行走而不能横跨建筑物的效果。

要实现人物角色按照地图上所描述的地形走动：比方说前面一旦遇到障碍则绕行，碰到河流不能通过等；就必须建立一个关于该地图地形的网格结构，将人物角色的坐标与地形障碍物坐标以统一的规格布局到该网格中，最终通过在网格里模拟坐标的移动来完成真实的人物角色移动，然后可使用一个数组来描述地形信息。

3.3 场景切换实现

地图的图片文件的文件较大，加载时暂用资源和时间，所以必须将校园的整体地图按照一定的规则划定范围，如按照生活区、教学区等自然划分，将单张地图分割为多张地图，而进入系统时只加载其中一张地图。此时，则需要实现不同校园场景之间的切换。

而场景入口是通过XML文件进行配置的，要添加场景入口只需在相应的配置文件进行编辑即可［4］，还可以根据校园地图分割的情况设置多个场景切换入口，不同入口通向的场景根据平台的需求进行入口的配置而决定，不一定是按照实际地图的情况。

3.4 登录模块实现

用户通过浏览器进入立体化校园应用平台时，将弹出登录注册界面，未注册用户可以选择试用或者注册用户再登录，如果使用者选择试用，那么在进入到平台后将以匿名登录游客的身份使用平台中的部分功能。而已注册用户则通过直接通过输入账号密码，然后点击登录，验证账号密码正确则正式进入本平台中，使用平台中的功能。

3.5 系统应用

3.5.1 聊天应用

聊天系统主要提供平台中用户之间聊天的功能，左边是聊天消息发送框，输入要发送的消息，然后点击发送即可。而右边则是点击发送后的效果，在角色的头顶上将会出现一个文本框，文本框中显示的内容就是在消息发送框中输入的内容。消息传递采用UDP协议来实现，利用C#.NET内置的套接字编程接口来完成用户间的通讯。

3.5.2 音乐模块

在登入平台中自由活动和使用功能时将会有旋律美妙的音乐陪伴，而音乐模块是通过Silverlight内置的音乐播放控件来实现，后台逻辑代码则有C#.NET来完成。用于播放平台背景音乐和用户在线音乐点播。

3.5.3 导航模块

导航模块中包括的功能有校园建筑物介绍，学校宣传视频点播，校园电影在线观看，食堂美食介绍，校园公告，休闲游戏等，丰富了用户体验，最大可能的将学校展现给用户。各种应用窗体主体由Silverlight的UserControl控件实现，其中视频播放则由视频播放控件MediaElement完成，图片播放可以由按钮控制，其动画效果则由Blend for Visual Studio工具设计完成［5］，利用了Silverlight提供的Storyboard故事版动画来完成。

4 结 论

随着计算机与网络技术的发展，“数字地球”、“数字中国”、“数字城市”等概念的提出和逐步实现，立体化校园的设计己成为当前大学研究的热点之一。而为适应时代的发展要求，富客户端技术的出现增加了网页的交互性，提高了用户的体验。使用Silverlight这项新技术开发建立立体化校园，正是适应了时代的发展，其中各种互动体验很好的让用户融入校园社区，亦增强了学校的宣传效果。

本文在开头部分对本课题研究的意义及创新点进行了简单的介绍，后续内容着重介绍了立体化校园交互平台的系统设计以及各个核心功能模块的开发过程，通过上文可以清晰地了解平台整体架构的组成部分及其功能的实现方式。

本课题通过将WCF与Silverlight相结合，使得Web应用可以充分利用客户端机器资源［6］，实现界面无刷新，分布式处理，拥有丰富的互操作能力以及复用度高等特点，显著提高了程序开发效率和用户的体验性，因而在当前的互联网应用中具有很好的实用价值和研究意义。

［1］谭淇.基于WCF服务框架与Silverlight的Web应用研究［J］.计算机与现代化，2011（1）:79-81.

［2］谢厚亮.虚拟校园系统的设计与实现［D］.成都：电子科技大学，2010.

［3］深蓝色右手-博客园.Silverlight MMORPG网页游戏开发课程［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—），男，安徽六安人，硕士研究生，中级网络工程师。 研究方向：软件工程与并行计算。