游戏编程开发《球球大作战》源码解析:服务器与客户端架构



鉴于agar.io类型游戏的火爆场面,一些公司纷纷效仿,一时间出现各种《XX大作战》类型的游戏。出于学习的目的,亦是做些技术和方案储备,接下来会有大概10篇文章,分析下面这款使用nodejs编写的开源“球球大作战”。由于该游戏采用服务端运算、客户端显示的方式,服务端的逻辑处理是该源码的重点,故而系列文章主要针对服务端。通过这套源码,可以学习到“一种基于nodejs的简单服务器实现方法”“一种简单的服务端物理逻辑的实现方式”“一种基于redis pub/sub的跨服设计思想”“nodejs语法、框架及其使用方式”等内容。

系列文章将会分析huytd/agar.io-clone的源码,这是一套简约而不简单的Agar.IO实现。该项目使用NodeJS开发,使用socket.IO作为网络通信,使用HTML5实现客户端。


一、运行起来

下图为游戏运行画面,游戏规则如下。

1、玩家可以移动鼠标控制小球

2、当小球吞食场景中的食物或其他玩家控制的小球时,玩家控制的小球会变大

3、小球越大,移动速度越慢

4、小球的质量代表它的大小,质量为它吞食的食物或其他玩家的质量之和

5、游戏目标是尽可能的吞食其他玩家,使小球变大

6、玩家刚出生时会有无敌属性,直到它吞食食物

7、每当有玩家进入游戏,场景中会生成3个食物

8、每当吞食食物时,场景中亦会生成一个新的食物


第一步便是要让游戏运行起来,只有运行起来了,才谈得上后续的源码分析。为了“从零开始”,笔者购买Ubuntu系统的腾讯云,新的系统几乎没有安装额外软件,一步一步安装所需的软件,然后将游戏运行起来吧。笔者选用了最低一档配置的服务器,花费近50大洋(此处是不是应该发个求赞助的链接?)配置如下图所示。


1、安装nodeJs

游戏使用nodejs开发,那就必须要安装nodejs,可以有两种方法安装。

方法1:输入sudo apt install nodejs,这是最简单的安装方法了。不过使用该方式安装的程序名叫为nodejs,而不是普遍使用的node。可以使用sudo ln-s/usr/bin/nodejs/usr/bin/node建立名为node的连接,以解决这个问题。

方法2:下载源码、编译、安装。具体可以参考这篇文章在Ubuntu下安装Node.JS的不同方式-技术◆学习|Linux.中国-开源社区(文章里使用的node-v6.9.5要改为最新版的)

完成后,可以使用node-v查看nodejs版本号,以验证是否成功安装。

2、上传代码文件

从github上下载源码,然后上传到linux服务器上。如下图所示,笔者将源码上传到/home/ubuntu/agar.io-clone-master目录下


3、安装npm

npm(node package manager)是nodejs的包管理和分发工具,一般安装nodejs后都需要安装该软件,可以使用以下命令安装:sudo apt install npm

4、安装gulp

项目使用到了gulp,需要安装它。gulp是一个前端构建工具,开发者可以使用它在项目开发过程中自动执行常见任务,比如复制文件,比如替换文件中某些字符。进入源码目录,执行sudo npm install-g gulp即可安装。

5、安装项目所需的包文件

进入源码目录,执行npm install即可安装项目所需包文件。npm install会检查当前目录下的package.json文件,文件包含了项目所需的模块,npm根据该文件的描述下载这些文件并把模块放到./node_modules目录下。关于package.json的格式可以参考这篇文章package.json for NPM文件详解

6、运行服务器

在源码目录下执行gulp run,可以看到服务器启动的提示信息。

7、运行客户端

运行浏览器,输入地址即可,笔者的腾讯云ip为139.199.179.39,由于默认配置了3000端口,所以要输入http://139.199.179.39:3000/,即可看到如下的游戏界面。


在笔者的试验中,该页面报错,点击按钮没有反应。原因是src/client中的index.html最后面有这么一句,,该语句用于加载jquery的,而http://code.jquery.com/jquery-2.2.0.min.js无法访问(或国内网络访问速度慢),导致报错。只要换个文件地址即可,例如改成下面这样:



运行游戏,服务端也会打印出相应的信息,如下图所示。


把游戏运行起来后,下一步就要分析下游戏的流程了。

二、程序流程

在解析源码之前,需要先了解该项目的程序流程,了解客户端和服务端是如何运行和通信的。本文是wiki文档Game Architecture的翻译,以帮助读者从大方向上了解《球球大作战》。

程序架构

游戏程序使用NodeJs编写,服务端通过http://Socket.IO创建WebSocket服务并默认监听3000号端口。程序还使用ExpressJS建立一个简单的HTTP服务器,它负责html页面的显示。index.html是游戏主页面,它通过Canvas渲染游戏,通过Javascript脚本和服务端通信。


目录结构该项目由3部分组成:

1、配置文件,如package.json,config.json等等

2、客户端程序

3、服务端程序

配置文件package.json列出了项目所需的库文件,读者只需在项目目录下执行“npm install”即可自动安装这些文件。package.json的格式可以参考下面的文章:

npm package.json属性详解

游戏客户端

client文件夹里包含了客户端所需的代码,它是一个简单的HTML文件,该文件会通过canvas绘制游戏场景、聊天框等元素。


js/app.js是客户端的逻辑代码,它实现了画面渲染、网络延迟检测、观战模式、聊天等功能,处理了鼠标输入、服务端通信等事项。游戏采用服务端运算模式,客户端只是负责将服务端发来的数据显示到屏幕上,以及接收鼠标事件。

客户端程序使用了requestAnimationFrame程序渲染循环,而不是使用setInterval,这让游戏有着更好的渲染性能。你可以试着修改代码,调用setInterval方法,看看低效率的渲染是个啥样子。
(function animloop(){
  requestAnimFrame(animloop);
  gameLoop();
})();

to

setInterval(gameLoop, 16);


游戏服务端

server/server.js包含了服务端的配置和逻辑处理,配置了诸如食物质量、移动速度、无敌状态的最大质量,处理了食物颜色计算、碰撞检测、玩家移动处理等等事项。


所有的游戏逻辑都在服务端处理,服务端和客户端的通信有着下面几个要点。

1、服务端使用list保存玩家列表,而不是使用array,使用list保存食物列表,而不是使用array。服务端保存着socket列表,用于记录所有客户端连接。

2、之前的版本设置了一个定时器,每隔几秒钟就产生一些食物,但这种方法的效率不高,会延迟服务端处理速度。所有在此版本中使用了一种新的方式来产生食物,当一个玩家进入游戏时,程序会随机产生3个食物(可以修改配置文件的newFoodPerPlayervariable改变该数值),当玩家吃掉一个食物时,程序会产生另外一个食物(可以修改配置文件的respawnFoodPerPlayer改变该数值)。如果场景中的食物数量大于50(配置文件的maxFoodCount),服务端会停止产生新食物。

客户端服务端通信

客户端与服务端通信可以分为两个部分,分别是登录认证和游戏内通信。

登陆认证


当一个玩家打开游戏网页,他先会看到一个输入用户名的对话框,点击“Play”按钮后,客户端发起socket连接,服务端accept连接后发出welcome协议,并把该客户端的UserID附带在协议中。

当客户端收到welcome协议,它会返回附带用户名的gotit协议。

当服务端收到gotit协议,它会其它的已连接玩家广播playerJoin协议,告诉他们有新的玩家加入。其它玩家收到该协议后,会在屏幕上绘制这个新加入的角色。

此时,对于新加入的玩家来说,游戏刚刚开始。

游戏内通信

游戏内通信分为3个部分,分别是游戏逻辑、聊天和Ping(测试网络延迟)。

游戏逻辑

玩家在游戏中会有移动、吞食食物、吞食其他玩家三种行为,这些逻辑全部由服务端运算,客户端只是根据运算结果将图像显示在对应的位置上。

移动


当玩家移动鼠标,小球会朝着鼠标的位置移动。客户端会发送附带了目的地坐标的playerSendTarget协议。服务端收到协议后会更新小球的运动状态,然后向该客户端回复serverTellPlayerMove协议,然后发送serverUpdateAllPlayers给其他客户端,让全部客户端更新所有玩家的坐标。

小球移动期间,服务端还会检测小球是否吞食了食物,或者吞食了其他玩家。

吞食食物


服务端维持了users列表和food列表来保存所有的小球和食物的信息,如果小球碰到食物,服务端会执行相应的逻辑,增加小球质量、删除列表里的食物、产生新的食物。然后服务端广播serverUpdateAllPlayers和serverUpdateAllFoods协议,让客户的更新玩家和食物。

吞食其他玩家


如果小球吞食了其他玩家的小球,服务端会比较两者的质量和距离,质量小的被吞食。服务端会发送RIP协议告诉质量下的玩家他死掉了,然后断开与该玩家的连接,同时在users列表里删除他。还会广播serverUpdateAllPlayers协议通知客户端。

聊天

聊天的流程如下图所示

当玩家在聊天框中输入信息并按下回车键时,客户端向服务端发送playerChat协议,服务端收到协议后广播serverSendPlayerChat协议。


当客户端收到serverSendPlayerChat协议时,它会解析该协议,将聊天内容显示到屏幕上。

Ping(延迟检测)

网络游戏都会实现ping机制来检测客户端和服务端之间的延迟,而它的实现也很简单。


检测开始时,客户端会保存当前的开始时间,然后发送ping协议给服务端,服务端收到后,会返回pong协议。客户端收到pong协议会计算时间差,如果时间差很大,说明网络延迟很严重。

愿这份文档能够协助读者理解agar.io-clone这个项目,你还可以继续完善这款游戏,将它做得更好。也希望各位能够在项目wiki中分享心得。

三、gulp工具

运行游戏使用的命令是gulp run,agar.io-clones使用了nodejs开发,gulp是基于nodejs的一个工具,它能够批量的做一些文件操作。gulp run意思是执行目录下gulpfile.js下的run任务,那么源码中使用了gulp的哪些功能呢?这篇文章将会做个简单介绍。

gulp能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并检测文件变化。在实现上,gulp鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入。

关于gulp入门,可以参考下面的文章:

一点|gulp详细入门教程

入门指南-gulp.js中文文档
一个最简单的示例

要使用gulp根据,当然得先安装它,有两种方式安装,对应于不同的命令参数。

全局安装gulp:npm install--global gulp

作为项目的开发依赖(devDependencies)安装:npm install--save-dev gulp

现在新建一个目录并创建一个名为gulpfile.js的文件,在里面编写如下代码

var gulp = require('gulp');gulp.task('default', function() {  // 将你的默认的任务代码放在这});
在目录下执行gulp,此时程序会搜寻目录下gulpfile.js文件中的默认(default)任务,也就是上面代码中“//将你的默认的任务代码放在这”处的代码去执行。“gulp run”即表示执行名为run的任务,相关代码可以在项目文件夹下的gulpfile.js中看到。相关代码如下

gulp.task('run', ['build'], function () {
    nodemon({
        delay: 10,
        script: './server/server.js',
        cwd: "./bin/",
        args: ["config.json"],
        ext: 'html js css'
    })
    .on('restart', function () {
        util.log('server restarted!');
    });
});

代码解析

要看懂上面的代码,必须要了解gulp的一些API,知道“nodemon”等单词到底是什么意思,实现什么功能,gulp的api可以参考下面的文章:

一点|gulp教程之gulp中文API

依赖

上面代码中的“gulp.task('run',['build'],function(){}”意为run依赖于build,当执行gulp run时,程序会先执行build任务,再执行run任务。

nodemon

先看看nodemon,详细的解释可以参考gulp-nodemon。

nodemon是一个工具,用于项目代码发生变化时可以自动重启,nodemon本意时检测项目变化的,对项目做监控的。重启只是它的一个功能。在上面的代码中,相当于执行./server/server.js这个文件。而这个文件其实是build任务中生成的。

build任务

接下来看看build任务是什么样子的,会发现build任务依赖于build-client、build-server、test、todo这4个任务,也就是说,需要按顺序先执行这4个任务,才会执行build。此时我们会发现,代码的执行流程是build-client、build-server、test、todo、run

gulp.task('build',['build-client','build-server','test','todo']);

build-client任务

build-client处理了客户端代码的创建,它用到了uglify、webpack和babel。

其中uglify表示压缩javascript文件,减小文件大小(参见一点|gulp教程之gulp-uglify)

webpack表示模块打包,它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件(参考《nodejs+gulp+webpack基础实战篇》课程笔记(三)--webpack篇-亡命小卒-博客园)

babel是一个JavaScript转换编译器,它可以将ES6(下一代JavaScript规范,添加了一些新的特性和语法)转换成ES5(可以在浏览器中运行的代码)。这就意味你可以在一些暂时还不支持某些ES6特性的浏览器引擎中,使用ES6的这些特性。比如说,class和箭头方法。

pipe表示管道,下面的代码是指将源文件(.src)“src/client/js/app.js”通过uglify方法压缩,然后将压缩后的结果通过webpack打包,然后通过babel做兼容性,最后通过将文件存入dest指定的目录下“bin/client/js/”

gulp.task('build-client', ['lint', 'move-client'], function () {  return gulp.src(['src/client/js/app.js'])    .pipe(uglify())    .pipe(webpack(require('./webpack.config.js')))    .pipe(babel({      presets: [        ['es2015', { 'modules': false }]      ]    }))    .pipe(gulp.dest('bin/client/js/'));});
webpack()方法的参数是“require('./webpack.config.js') ”“ ./webpack.config.js”,该文件的内容如下,它是打包的配置文件。

module.exports = {
    entry: "./src/client/js/app.js",
    output: {
        path: require("path").resolve("./src/bin/client/js"),
        library: "app",
        filename: "app.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            }
        ]
    }
};

“build-client”依赖于“lint”和“move-client”,先要完成这两个任务,程序才会执行“build-client”任务。

lint任务

“lint”任务如下所示,它使用了jshint方法。jshint是用来检测javascript的语法错误的。如果有错误,就报告fail。

gulp.task('lint', function () {
  return gulp.src(['**/*.js', '!node_modules/**/*.js', '!bin/**/*.js'])
    .pipe(jshint({
          esnext: true
      }))
    .pipe(jshint.reporter('default', { verbose: true}))
    .pipe(jshint.reporter('fail'));
});

move-client任务

“build-client”还依赖于“move-client”代码如下,它只是移动一些文件

gulp.task('move-client', function () {
  return gulp.src(['src/client/**/*.*', '!client/js/*.js'])
    .pipe(gulp.dest('./bin/client/'));
});

build-server任务

build-server任务比较简单,它也是复制下文件

gulp.task('build-server', ['lint'], function () {
  return gulp.src(['src/server/**/*.*', 'src/server/**/*.js'])
    .pipe(babel())
    .pipe(gulp.dest('bin/server/'));
});

test任务

build任务依赖于build-client、build-server、test和todo任务,在建了客户端和服务端文件后,自然需要对它测试一下,test任务调用了mocha方法,它是一个测试方法。

gulp.task('test', ['lint'], function () {
    gulp.src(['test/**/*.js'])
        .pipe(mocha());
});

todo任务

todo任务调用了todo方法,该方法会收集符合“src/**/*js”匹配符的文件信息,生成一个名为TODO.md的文件。

gulp.task('todo', ['lint'], function() {  gulp.src('src/**/*.js')      .pipe(todo())      .pipe(gulp.dest('./'));});
生成的TODO.md如下图所示。


由于实际运行的文件在是bin/目录下,如果修改了源文件,需要重新执行gulp run才能生效。

四、Websocket

运行服务端后,玩家只要打开浏览器,输入地址和端口,就可以看到游戏画面。这就意味着,游戏服务端开了个http服务器。Node.js标准库提供了http模块,其中封装了一个高效的HTTP服务器和一个简易的HTTP客户端。http.Server是一个基于事件的HTTP服务器,它的核心由Node.js下层C++部分实现,而接口由JavaScript封装,兼顾了高性能与简易性。http.request则是一个HTTP客户端工具,用于向HTTP服务器发起请求。关于http服务端的入门,可以参考下面教程。

Node.js学习(11)----HTTP服务器与客户端-推酷

安装http包

使用http模块,必须先安装它,执行npm install http命令安装即可。

显示Html文本

新建一个js文件,然后输入如下的代码。通过require('http').Server创建一个http服务器,“http.listen”表示开启监听,如下代码是监听3001端口,监听成功后会在屏幕中打印出“[DEBUG]Listening”。http.on('request'function(){……})表示当服务端收到客户端的请求时做出怎样的处理,这里向客户端返回html信息。

var http = require('http').Server()

http.on('request',function(req,res){
        console.log('[DEBUG] on request ' );
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write('

Node.js

');
        res.end('

HelloWorld

');
});

http.listen(3001, function() {
    console.log('[DEBUG] Listening ' );
});

运行脚本,然后用浏览器打开3001端口,即可看到html文本。


用express显示Html文件

Express是一个基于Node.js平台的web应用开发框架,可以使用它指定要显示的网页文件。在使用之前需要使用npm install express命令安装express。

新建js文件填入下面的代码,除了创建http服务器外,还使用express指定了网页目录“__dirname+'/'”,即代码文件的同一目录下。

var express = require('express');
var app = express();
var http = require('http').Server(app)
var io = require('socket.io')(http);
app.use(express.static(__dirname + '/'));

console.log("hehe");


http.listen(3001, function() {
    console.log('[DEBUG] Listening ' );
});

在同一目录下新建index.html,输入下面的文本。



    Ssocket



       

测试






运行服务端,用浏览器打开页面,将会看到如下网页。


WebSocket介绍

谈到Web实时推送,就不得不说WebSocket。在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方式,一种是长轮询机制,一种称为流技术,这两种方式实际上是对轮询技术的改进,这些方案带来很明显的缺点,需要由浏览器对服务器发出HTTP request,大量消耗服务器带宽和资源。面对这种状况,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并实现真正意义上的实时推送。

WebSocket协议本质上是一个基于TCP的协议,它由通信协议和编程API组成,WebSocket能够在浏览器和服务器之间建立双向连接,以基于事件的方式,赋予浏览器实时通信能力。既然是双向通信,就意味着服务器端和客户端可以同时发送并响应请求,而不再像HTTP的请求和响应。

具体可以参考下面的文章

使用Node.js+Socket.IO搭建WebSocket实时应用-OPEN开发经验库

WebSocket简单实例

下面通过一个简单的例子介绍WebSocket的使用方法,在安装WebSocket后编写如下的代码和html文件。当客户端发起连接(connection)后,它会打印出“A user connected!”

var express = require('express');
var app = express();
var http = require('http').Server(app)
var io = require('socket.io')(http);
app.use(express.static(__dirname + '/'));

console.log("hehe");

io.on('connection', function (socket) {
    console.log('A user connected!', socket.handshake.query.type);
})

http.listen(3001, function() {
    console.log('[DEBUG] Listening ' );
});

html代码如下所示,页面中会有一个按钮,当点击按钮时,会通过io.connect连接服务端



    Ssocket
        http://139.199.179.39:3001/socket.io/socket.io.js">   



       

测试


       
       




运行程序,点击客户端上的按钮,服务端会显示“A user connected!”

收发信息

客户端和服务端可要相互通信,在下面的例子中,网页上有connect和send两个按钮,点击send按钮后,会发送login协议,服务端收到login协议后,会打印客户端传来的信息。

var express = require('express');
var app = express();
var http = require('http').Server(app)
var io = require('socket.io')(http);
app.use(express.static(__dirname + '/'));

console.log("hehe");

io.on('connection', function (socket) {
    console.log('A user connected!', socket.handshake.query.type);
       
        socket.on('login', function (data) {
      console.log(data);
    });
})

http.listen(3001, function() {
    console.log('[DEBUG] Listening ' );
});


    Socket
        http://139.199.179.39:3001/socket.io/socket.io.js">   



       

测试


       
       
       




运行程序,点击按钮,服务端将会显示客户端login协议传入的用户名“LPY”,如下图所示。

客户端


服务端


客户端回显

在下面的代码中,服务端收到客户端的login协议后会恢复客户端loginBack协议,客户端收到loginBack协议后会弹出对话框。

var express = require('express');
var app = express();
var http = require('http').Server(app)
var io = require('socket.io')(http);
app.use(express.static(__dirname + '/'));

console.log("hehe");

io.on('connection', function (socket) {
    console.log('A user connected!', socket.handshake.query.type);
       
        socket.on('login', function (data) {
                console.log(data);
                socket.emit('loginBack', { result: 'success' });
    });
})

http.listen(3001, function() {
    console.log('[DEBUG] Listening ' );
});



    Socket
        http://139.199.179.39:3001/socket.io/socket.io.js">   



       

测试


       
       
       



运行程序,结果如下图所示。


还是放个广告吧,笔者出版的一本书《Unity3D网络游戏实战》充分的讲解怎样开发一款网络游戏,特别对网络框架设计、网络协议、数据处理等方面都有详细的描述,相信会是一本好书的。


知乎专栏:https://zhuanlan.zhihu.com/pyluo


游戏编程开发《球球大作战》源码解析:服务器与客户端架构

鉴于agar.io类型游戏的火爆场面,一些公司纷纷效仿,一时间出现各种《大作战》类型的游戏。出于学习的目的,亦是做些技术和方案储备,接下来会有大概篇文章,分析下面这款使用nodejs编写的开源“球球大作战”。由于该游戏采用服务端运算、客户端显示的方式,服务

手机端战争迷雾的实现

作者:/yx日音/hanx先展示效果:最早是在war看到战争迷雾,当时觉得真牛逼。到现在技术基本已经成熟,自己也就抽空做一个。思路还是定在用tile来实现,毕竟从性能优化角度说,tile可以预先烘焙数据,比实时计算要快不少,这样的话手游也可以使用。先画一批

八位主角8个故事,SE日式RPG《八方旅人》的沿袭与创新

里收集信息,希望有一天能够找杀害她父亲的仇人。rimrose的超能力可以使她在战斗中招募与她和其他队友作战。她的舞蹈技能允许她对敌人造成黑暗元素伤害,并提高队友的属性和技能。可以说,萝丝更适合配合团队作战。猎人:’aanit游戏中猎人’aanit为了寻找失

VR游戏开发和普通游戏开发有什么区别?

输入是当前的主流方案,今后还将普及双持控制器,对玩法设计是革命性的改变. 交互操作是需要花很大精力去打磨的, 而国内的开发习惯都不太重视这一点, 一开始就把各种后期玩法往里堆, 手感巨差Character: 玩家自身在VR中是怎么样的呈现方式?通常需要同步

【AR研究】为增强现实做设计

外,从近来研究的资料中,我也总结了几点(如有问题请不吝指教):.从真实世界寻找设计依据和灵感前面我们提到,最重要的一个特点和评价维度就是其真实性,而真实性有包括了复合自然和直觉的交互、逼真的虚拟模型或场景等等。为了更好的进行虚实融合,在设计中就需要从真实世