基于HTML5的3D多人网页游戏实现方案

摘  要： HTML5标准增强了网页在图形绘制、媒体播放、消息传送等方面的能力，为提高网页游戏性能创造了条件。基于该标准开发出一个3D多人网页游戏。介绍了其实现方案，测试了其相关性能，分析了该技术的可行性。
关键词： HTML5； WebGL； WebSocket； THREE.js；JavaScript

　中国网游产业已走过了11年，文化部发布的《2011中国网络游戏市场年度报告》显示，2011年中国网游市场规模为468.5亿元[1]。近年来，网页游戏（页游）因其方便省时等优点受到玩家青睐，正不断占领市场。2011年开始，3D页游的出现又使页游品质大幅提升。可以预测，高品质页游将在未来网游市场中占据一席之地。本文以自主研发的基于HTML5的3D多人网页游戏BillyRun为例，介绍了其实现方案，分析了其程序性能并展望了技术前景。

HTML5面向多媒体的互联网提供了新的标签进行支持:视频:Video,音频:audio,拖放:Drag,Drop,绘图:canvas,定位:Geolocation,Web存储:localStorage,sessionStorage,应用缓存:Application Cache,离线浏览,速度,减少服务器负载.

 

1 核心技术分析
1.1 以HTML5标准中Canvas元素为载体呈现游戏图像
　HTML5是最新的网页标准。广义论及HTML5实际是指包括HTML、CSS和JavaScript在内的一套技术组合，其目的在于减少浏览器对插件的依赖性和丰富网页的表现形式[2-3]。Canvas元素是HTML5中新增的页面元素，该元素是一个图形绘制容器，拥有一个基于JavaScript的API，可由脚本动态绘制图像[4]。BillyRun中的Canvas元素用于两个方面：一是呈现和更新3D游戏画面，二是绘制游戏中的部分2D画面。目前，IE、FireFox、Chrome、Opera等主流浏览器均支持Canvas元素。
1.2 基于WebGL的游戏画面渲染
　WebGL是一种3D绘图标准，该标准通过增加OpenGL ES 2.0的一个JavaScript绑定，为网页中Canvas元素提供硬件3D加速渲染，使网页3D程序能够流畅运行[5]，无需浏览器插件。游戏中场景创建和渲染使用了THREE.js。THREE.js是一个JavaScript开源3D库，能创建包括摄像机、灯光、材质、模型在内的三维场景，并由WebGLRenderer模块以WebGL标准渲染[6]。目前FireFox、Chrome、Opera、Safari等主流浏览器均支持WebGL标准。
1.3 基于NodeJS的服务端程序
    NodeJS是基于Google V8引擎由JavaScript实现的服务器端可扩展程序，可作为编写高效网络服务程序的平台[7]。NodeJS消除了服务器端程序与客户端程序的语言差异，使代码可以复用，方便了页游开发。BillyRun服务器端由NodeJS搭建，其中定义了游戏信息，并通过Socket.IO模块与各客户端实时通信完成更新。服务器端连接了MySQL数据库，用于保存用户账号信息。目前服务器端在Linux、Windows 7和Windows Server 2003下均可运行。
1.4 基于WebSocket技术的网页实时通信
　WebSocket是HTML5提供的浏览器与服务器间全双工通信技术，主要用于实时通信服务。WebSocket十分高效，只须浏览器和服务器进行一次握手，便可双向传递数据。Socket.IO是Node.JS的一个开源模块，它对WebSocket进行了封装，提供了建立连接和消息推送的接口。BillyRun中基于此模块在服务器端建立了Socket服务，与每个客户端相连，完成信息更新和消息处理工作。目前，IE、FireFox、Chrome、Opera等主流浏览器均支持该技术。
1.5 Audio以及基于Web Audio API的3D音效
　Audio元素是HTML5中新增的元素，可实现音频文件播放等基本功能，支持HTML5的浏览器都能良好实现。Web Audio API由谷歌提出，是一套用于网页音频处理的JavaScript API[8]，其功能强大，尤其是3D定位和音锥技术，可根据声源与玩家的位置关系，控制左右声道实现立体音效。该技术能大大提高游戏品质，但目前只有Chrome浏览器能够支持。BillyRun中分别实现了这两套音效方案，兼顾了游戏品质和兼容性问题。
2 具体实现方案
2.1 游戏内容设计
BillyRun是一个空中对战射击游戏，游戏场景包括地面、天空和建筑物，每个玩家操作一架直升机在场景中飞行，可与其他玩家展开攻击或防御，已有多种游戏模式判定胜负。
2.2 程序整体结构
　BillyRun由服务器端程序和客户端程序两部分组成。服务器端程序实现了数据库交互、玩家事件处理、界面跳转等功能；客户端程序实现了界面显示、音效播放、游戏主循环等功能，运行在客户浏览器上。BillyRun功能结构图如图1所示。

2.3 程序执行流程
2.3.1 程序整体流程
　程序由客户端和服务器端组成，两端通过通信保持同步，其整体流程图如图2所示。

2.3.2 客户端程序流程
　客户端包含界面、加载、主循环、消息处理和输入系统5部分。
　（1）游戏有5个div元素封装的界面。玩家先后进入登录界面、游戏大厅界面、游戏房间界面、加载界面和最后的游戏界面，每局游戏结束时返回游戏大厅界面。
　（2）游戏的加载系统包括4部分：①场景模型和音频文件。为固定游戏资源，加载后保存在程序中，仅进行一次；②游戏信息。加载在每局游戏开始前执行，更新客户端信息；③玩家模型。加载在每局开始前执行；④加载本局游戏所需的玩家模型，使用如图3所示的动态加载方法，避免了重复加载，提高了程序效率。