论文总字数：20676字

摘 要

本文用开源cocos creator集成开发平台，研究开发了一款SLG手机游戏的pvp和pve模块。

主要运用Javascript语言编写客户端逻辑，基于cocos creator引擎进行 游戏PVP、PVE部分开发，包括斜角瓦片地图加载和资源的动态加载及刷新，通过WebSocket强连接和Http Request/Response弱连接通讯。编写玩家与玩家和玩家与游戏环境的战斗客户端逻辑，以及对整个大地图场景的不断优化，主要包括使用。objectPool对象池减少节点数量。使用预加载、延迟加载、伪异步等多种优化方式，处理卡顿与崩溃问题，简化代码逻辑，记录内存的开销和识别系统垃圾文件的回收。解决内存泄露的问题与并且优化缓存的管理，这样可以减少游戏内存的占用，并优化CPU占用，并主要使用黑盒测试的方法与服务器进行不断联调测试。

最后，完成了该款手机游戏pvp和pve模块的所有功能，并完成了测试与服务器的联调，确定没有问题。

关键词：pvp，pve，手机游戏，cocos creator，游戏地图，脚本编程

Design and implementation of PVP and PVE modules for mobile games

Abstract

In this paper, the open source cocos creator integrated development platform, research and development of a SLG mobile phone game PvP and PVE module.

The main writing client logic using Javascript language, PVP, cocos, creator game engine based on PVE development, including the dynamic loading angle of tile map loading and resource and refresh, by WebSocket and Http Request/Response strong connection weak link communication. Write battle client logic and game player and game player game player and game environment, and constantly optimize the whole map of the scene, including the use of Object Pool to reduce the number of nodes. The use of pre loading, delayed loading, pseudo asynchronous and other optimization methods to deal with the problem of Caton and collapse, simplifying the code logic, recording the cost of memory and identification of garbage collection system. To solve the memory leak and cache management, thereby reducing memory footprint, optimizing CPU occupancy, and the main use of white box, black box testing method and the server for constant testing.

Finally, the completion of the mobile phone game PvP and PVE modules of all the features, and the completion of the test and the transfer of the server, to determine no problem.

KEY WORDS: PVP, PVE, mobile game, Cocos creator, game map, script programming

目 录

一、 背景和意义 5

1. 开发平台介绍 5

2. SLG游戏全球纷争介绍 6

1) 养成系统 6

2) 战斗系统 6

3. pvp和pve设计制作的意义 6

二、 系统设计 7

1. 地图存储的选择 7

2. 地图如何搭建 7

3. 瓦片地图中核心概念 8

4. 45度角的斜角瓦片地图，坐标转换是一个问题。 9

三、 模块详细设计 10

1. 开发流程 10

2. pvp与pve战斗逻辑 11

3. 数据交互 11

4. 地图各种资源显示加载 11

1) 动态创建节点 11

2) 添加动画 14

3) 发射监听事件 16

4) JavaScript回调机制 16

5) 生命周期回调 18

6) 模块化脚本 18

5. 各种UI界面逻辑编写 19

1) 派遣出兵界面 19

2) 侦查界面 20

3) 角色详情 21

4) 技能条 22

5) pvp和pve模块包含大量界面的制作设计，譬如其他技能点学习界面等。 23

四、 模块测试 24

五、 优化游戏对战部分，提示流畅度。 25

1. 滑动地图时帧率下降 25

2. 游戏对战部分内存占用过高 26

3. 卡顿和崩溃 26

六、 总结和展望 29

1. 论文总结 29

2. 工作展望 29

背景和意义

开发平台介绍

我的项目是基于window7平台基于Cocos Creator集成开发平台，使用JavaScript编程语言的开发。

cocos creator包含了游戏引擎、资源管理、场景编辑、游戏预览和游戏开发发布等功能，所有功能和工具链都集成在一个统一的应用程序中[5]。

它是由数据和组件作为游戏开发的核心驱动，数据驱动，组件式开发，在Cocos引擎无缝集成的基础上成熟的JavaScript API系统，可以适应一系列的Cocos引擎开发者的用户习惯，另一方面，提供了前所未有的创作内容和即时预览帮助生产测试环境艺术规划人员进行游戏开发。

引擎与编辑器的结合，数据驱动和组件的功能开发，以及设计和程序两种人员的完美分工：设计师在场景编辑器中设置场景图像表现,程序员开发可以安装在场景中的任何对象的功能组件,设计师负责为需要显示特定行为的对象安装组件，并通过调试来改进参数，程序员开发游戏所需的数据结构和资源，设计师通过图形界面来配置数据和资源--（从简单到复杂，可以想象工作流可以实现）。

工作流作为开发的核心概念，使开发人员能够快速找到不同的功能，最大限度地发挥自己在工作中的作用，进入点，并能够与团队的其他成员进行沟通。

该编辑器提供了一个功能强大的完整工具链，包含各种开发中常用的组件，并提供了一个开放的插件架构，可以使用各种插件，开发者可以轻松扩展编辑器功能，通用技术为前端HTML JavaScript，主要使用javascript进行开发。自定义工作流。

是一个支持Windows和Mac平台运行的应用程序，双击开始运行。相比传统的Cocos2d-x工作流的配置开发环境的要求是完全豁免，可以立即开始游戏后游戏内容创作或功能的开发。

在工作流的数据驱动的基础上，创建和编辑成为一个场景的游戏开发中心，设计和功能的开发可以同时进行无缝合作，无论是艺术、设计或编程，可以在生产过程中的任何时候点击预览按钮，测试的游戏的最新状态，在浏览器和移动设备的实机模拟器或移动设备。

程序员和设计师现在可以实现各种合作，无论是建立场景，然后添加功能，或第一个生产功能模块和由设计师联合调试，Cocos Creator可以满足开发团队的需要。脚本中定义的属性可以在编辑器中以最合适的视觉体验呈现，为内容生产者提供方便。

在从外部资源内容的场景可以进口，如图片、声音、图片、动画等，此外我们继续提高生产资源的编辑能力，包括完成动画编辑器，设计者可以使用此工具来创建一个非常微妙的表情动画资源，并且可以看到动画场景中的预览。

最后，游戏的开发可以通过一个图形化的工具来完成发布一个关键平台，从设计到测试发布，Cocos Creator都做得到。

cocos creator的是一个以内容为创作核心的游戏开发工具的，它是基于一个完整cocos2d-x引擎扩展开发出的引擎，有组件式开发和和数据驱动的特点。它包括游戏开发的一整套功能，如游戏引擎，资源管理功能，场景编辑，游戏预览和发布，在游戏开发中，美工、策划、程序各司其职，共同开发。creator所有的功能和工具都集成到一个统一的应用程序中。工作流作为开发的核心概念，使开发人员能够快速找到不同的功能，最大限度地发挥自己在工作中的作用，进入点，并能够与团队的其他成员进行沟通。对于程序开发人员来说，只需要专注于编程部分，而不必关注艺术策划的一部分。

SLG游戏全球纷争介绍

全球纷争是一款战争策略类手机游戏，游戏部分是仿照同类游戏COK列王的纷争设计制作的。既然是战争策略类游戏，游戏就包含养成系统和战斗系统。战斗系统也就是PVP和PVE模块是我设计制作的。养成系统我有参与制作。

养成系统

玩家可以发展自己的实力，主要通过不断的采集资源，升级城堡内的建筑，培育士兵，建造战争兵器来实现。并且游戏包含类似League of legends的符文和天赋系统，玩家可以培养特殊的技能点，学习特殊的技能。玩家可以专注于发育，也就是发展自身，玩家也可以专注与进攻其他玩家，同样也可以走辅助路线，玩法多样。

战斗系统

玩家可以同其他玩家一一起战斗，玩家建立同盟，战斗模式多样，玩家可以组团进行联盟与国家之间的战斗。战斗系统用到了动态生成节点，添加动画，生命周期回调，回调函数，模块化脚本等技术。

pvp和pve设计制作的意义

对于一款SLG战争策略类游戏，PVP和PVE模块是决定游戏性的最重要部分之一。现代游戏玩家接触过的游戏越来越多，对游戏的要求也越来越高。对于开发人员来说，一个游戏项目必须保证其游戏品质高于市面其他类型的游戏，游戏流畅度高于其他。这对于软件开发来说，以为着游戏数据存储优化，内存各种算法的优化，加载方式的优化，内存创建销毁的优化并减少内存泄露等等。

下面开始介绍开发pve和pvp模块的具体内容和优化部分及期间遇到的各种困难。

系统设计

地图存储的选择

第一部分游戏地图，制作时有2种解决方案，第一种是使用将1200×1200的地图数据存储在客户端，建立一个索引表索引缓存游戏地图，增加删除修改添加地图信息时根据键值查找对应的地图。但是，这么做会出现问题，我们的游戏是全球玩家同一个服务器，如何保证所有玩家的地图数据是一样的呢，如果地图数据存储在客户端的话，地图数据的更新就是一大问题。所以地图数据存储在服务器更好。

第二种根据客户端发送的坐标信息从服务器加载9*25*25共5625个地图节点信息，我们选择了第二种方法，客户端需要什么坐标区域的地图信息，服务器就向客户端发送什么区域的地图信息。由服务器来维护一个大地图的信息表。

地图如何搭建

我的地图采用的是瓦片地图的机制。瓦片地图有直角地图、斜角地图、六边形地图共三种。
（1）、直角地图
直角地图就是用方形瓦片构建整张地图，整张地图给人的感觉就是垂直从上方向下面观察，妥妥的给人一种2D游戏的感觉。
（2）、斜角地图
斜角地图， 与其名字一样，使用的瓦片就是斜角的菱形瓦片，如图2.1是45度角瓦片地图，与直角地图不同。通过将视角旋转大概45度角方向，让我们从地图的斜上方观察地图。斜角的地图可以使我们的大脑误以为有一个3维立体的感觉。对于很多2D游戏，为了开发的方便但是有给予玩家3维立体的感觉，采用斜角地图。但是采用斜角瓦片地图，坐标转换是一大问题，这我之后会讨论。

图2.1:45度角斜角瓦片地图示例

（3）、六边形地图

六边形地图，正如其名字而言，是使用六边形形状的瓦片构建的。

在我的游戏中，因为我做的是2D游戏，为了体现3维游戏的感觉，我选用了45度棱角的斜角地图。

瓦片地图中核心概念

要理解瓦片地图，主要要知道这些基本的概念，主要有层，瓦片地图坐标、全局标识这三种。瓦片地图包含地图层，开发人员在地图层上进行游戏元素的增加修改删除查询等等操作。瓦片地图正如他的名字，是游戏一个个小的瓦片组成整张大地图，就像用瓷砖拼接成整张瓷砖地板一样。在瓦片地图中，坐标与一般的地图不一样。不是一个点一个坐标，而是一张瓦片一个坐标。至于选择瓦片上顶点、左顶点、右顶点还是下顶点则完全看开发人员需要，我们选择的是上顶点。

45度角的斜角瓦片地图，坐标转换是一个问题。

我在游戏开发中使用的便是45度角的菱形瓦片地图，地图坐标系就在菱形地图顶端。

坐标转换问题之所以存在，是因为，游戏采用的是世界坐标系，所有游戏场景中的节点统一使用世界坐标系进行坐标确认。然而，游戏pvp和pve模块地图有一个坐标系，我们是1200*1200的地图，地图坐标就是1200到1200范围，这代表的是瓦片的数量。所以要进行，瓦片坐标到世界坐标和世界坐标到瓦片坐标的转换。我们每一个瓦片的坐标以在瓦片顶点作为原点。

我们有如下关于瓦片菱形的一些常量：菱形方块宽 var tileW :Number，菱形方块高 var tileH :Number，地图的行数 var row ，地图的列数 var col :int。

x坐标在世界坐标系X轴的偏移像素 = tileW /2;（向右偏移），x坐标在世界坐标系Y轴的偏移像素 = tileH /2; （向下偏移），Y坐标在世界坐标系X轴的偏移像素 = - tileW /2;（向左偏移），Y坐标在世界坐标系Y轴的偏移像素 = tileH /2; （向下偏移）

假如有个地图坐标点（M，N），那么它对应的像素坐标系的点为var p:Point
p.x = 原点坐标X M在像素坐标系X轴的偏移像素 × M N在像素坐标系X轴的偏移像素 × N = originP.x tileW /2 × M （-tileW/2） × N = originP.x (M – N) × tileW/2；
p.y = 原点坐标Y M在像素坐标系Y轴的偏移像素 × M N在像素坐标系Y轴的偏移像素 × N = originP.y tileH/2 × M tileH/2 × N = originP.y (M N) × tile

如何把菱形格子坐标转换成直角坐标系：

那么如何把直角坐标转M、N,，Y换成菱形格子坐标x,y：

地图搭建好后，接下来要处理的便是资源的加载和战斗逻辑编写以及优化测试部分。

模块详细设计

图3.1:模块详细设计

Pvp与pve模块功能见图3.1，pve功能主要包括野外打怪，采集资源，pvp模块主要包括攻城与守城战，争夺资源战与联盟之间的战斗。因为creator脚本化组件话的特点，模块详细设计主要是用JavaScript编写脚本，利用各种组件进行开发过程。

开发流程

通过组件进行开发，是creator的开发流程。采用的是组件实体的系统，游戏实体的创建使用的组合的方式，并不像我们一般开发使用继承的方式。

开发流程包括：创建节点、渲染节点、添加组件、编码这些步骤。

cocos creator的开发都是基于节点组件的开发。

组件是什么。组件和节点是什么关系我接下来会介绍。创建一个节点之后，关于节点的属性在属性检查器中可以全部显示。节点的属性除了一般的大小、角度、透明度等，我们可以看到Sprite组件，这可以理解为图片渲染组件，控制节点的图片显示控制。另外button组件，我们可以添加一个button组件在节点上，节点就获得了点击事件响应的能力。cocos creator 就是采用这样添加节点，添加组件，脚本编码的方式进行开发。

另外要提到，脚本也是组件，我们可以通过创建节点，添加组件，来完成UI界面的设计制作，cocos creator自带各种好用的组件，我们可以通过编写脚本组件来完成开发人员需要的特殊功能。但是，添加组件也可以在脚本组件内完成，这就意味着，只要有一个节点，一个绑定在节点上的脚本，我们就可以在脚本上通过代码控制完成整个UI界面的设计，但是这么做效率就很低了。

pvp与pve战斗逻辑

详细的战斗逻辑算法由服务器处理，不属于我模块的处理部分，我主要负责各种战斗逻辑的http request/response请求和websocket请求的发送接收，即对于接收到数据的处理，显示于用户。

数据交互

Cocos Creator提供了 Web 平台上最广泛使用的标准网络接口：

用于短连接的XMLHttpRequest和用于长连接的WebSocket

当然，在 Web 平台，浏览器原生就支持这两个接口，之所以说 Cocos Creator 支持，是因为在发布原生版本时，用户使用这两个网络接口的代码也是可以运行的。也就是遵循 Cocos 一直秉承的“一套代码，多平台运行”原则。【4】

在开发过程中，关于派遣军队都是采用http request连接，获取地图节点信息也是http连接，所以信息的动态更新，譬如资源田信息更新，行军部队节点信息都是采用webSocket连接更新。

地图各种资源显示加载

地图资源主要包括可供攻打的野怪，可供采集资源的资源田，资源田有多种类型，野怪也有多种类型。加载这些资源。

地图资源加载主要通过动态创建节点和客户端与服务器数据交互及动画播放来完成。需要注意的是，地图资源是实时更新的，也就是信息更新采用的websocket强连接的方式进行。其他客户端与服务器数据传输是采用Http request的方式。

动态创建节点

PVP和PVE模块是一个360度角滚动的地图，不止有静态内容，更多的是由一组地图数据生成的动态更新的内容。譬如资源田、野怪、城堡、行军路线等地图信息。

动态创建节点则需要一堆可以实例化每种地图内容的模板资源，也就是Prefab预制体。如图3.2和图3.3是野怪和资源的Prefab的例子。

图3.2:野怪Prefab示例

图3.3:资源prefab示例

Prefab预制体并不是主要有程序开发人员制作的，有专门负责的美工进行界面Prefab开发，程序开发人员可以根据自己需要进行修改。

Prefab动态生成节点时可以根据具体数据动态改变。上图展示的是Prefab的结构，可以根据数据修改节点大小、图片等信息。我们可以给Prefab绑定一个脚本组件ResourceField.js。

通过数据动态生成节点主要通过For循环不停的用模板Prefab生成节点。

剩余内容已隐藏，请支付后下载全文，论文总字数：20676字