H5 游戏开发:游戏引擎入门推荐

H5 游戏开发:游戏引擎入门推荐

2017/12/28 · HTML5 · 1
评论 ·
游戏引擎

原文出处:
凹凸实验室   

图片 1

前言:

前言:

前言:

前言:

前言

很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分。
试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重新做一些修修补补的工作或者更换游戏引擎,这都是相当耗费人力物力的一件事。为了避免这种情况的出现,在前期选择适合项目需求的游戏引擎显得尤为重要。
接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

  昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等。

  昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等。

  在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写。

  好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了。在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js。在移动前端方面,尤其是小游戏开始有一点点小经验了。但只是小经验,为什么说是小经验?

游戏场景分类

在刚接到游戏需求时,我们可以从以下几个方面进行考量,分析出游戏需求场景所属,从而作为我们选择游戏引擎的依据。

  • 游戏效果呈现方式( 2D ? 3D ? VR ?)
    这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有
    2D 渲染、3D 渲染、VR 渲染三种。
    而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom
    由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对
    Canvas 和 WebGL 展开介绍。
    一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas
    渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择
    WebGL 渲染或者浏览器内嵌 Runtime 。
  • 游戏复杂度
    这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。

 

 

  对于这一节,我在讲解的过程中会使用到众多的类或对象,对于它们的具体用法,建议查看白鹭官方文档。

  首先,深度不足,虽然用得最熟最多的白鹭,可是习惯了JavaScript,对TypeScript的OOP编程掌握得还不够;其次,对Egret等游戏框架了解的广度还不够,还有相当部分用法没用到。虽然能够应付朋友圈里传播的大多数的H5小游戏,可是还有很大的进步空间。尤其是欠缺重度游戏以及性能方面的处理。所以,不论是一般的Web前端方面,还是H5游戏方面,我都要继续努力学习了。不足错漏之处,恳请大家多多指点。

游戏引擎推荐

笔者从业界较流行的一些框架,进行以下几个方面对比,希望能从客观数据上给大家的技术选型带来建议和参考。

  • 引擎支持的渲染方式
  • github上的 star 数
  • 更新时间
  • 文档详细度
  • 周边产品

2D,3D,VR 都支持的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Egret YES YES YES YES 2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
游戏开发过程中的每个环节基本都有工具支撑。 不仅仅提供了一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多周边产品
LayaAir YES YES(优先) YES YES 0.7k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
提供开发工具和可视化编辑器 支持2D、3D、VR,能开发超大游戏,forgame的醉西游,腾讯的QQ农场,乐动卓越的浪漫h5这些大作就是用它开发

整体概况:

整体概况:

  文档地址:

什么是Egret?

Egret

图片 2

Egret 周边产品

白鹭引擎是企业级游戏引擎,有团队维护。Egret
在工作流的支持上做的是比较好的,从 Wing 的代码编写,到 ResDepot 和
TextureMerger 的资源整合,再到 Inspector 调试,最后到原生打包(支持 APP
打包),游戏开发过程中的每个环节基本都有工具支撑。官网上的示例,教程也是比较多。值得一提的是,今年5月白鹭引擎支持了
WebAssembly ,这对于性能的提升又是一大里程碑。

    根据上一篇文章的提示,我们找到index.html,将帧率data-frame-rate修改成60。根据设计图宽高,我将data-content-width设成640,data-content-height设成1038;

    根据上一篇文章的提示,我们找到index.html,将帧率data-frame-rate修改成60。根据设计图宽高,我将data-content-width设成640,data-content-height设成1038;

修改Loading

  Egret是一套HTML5游戏开发解决方案,产品包含Egret Engine,Egret
Wing,EgretVS,Res Depot,Texture Merger,TS Conversion,Egret
Feather,Egret Inspector,DragonBones,Lakeshore等。而核心产品是Egret
Engine
,是一个基于TypeScript语言开发的一个HTML5游戏引擎,其余的大多是开发和辅助工具。

LayaAir

在渲染模式上,LayaAir 支持 Canvas 和 WebGL
两种方式;在工具流的支持程度上,主要是提供了 LayaAir IDE。LayaAir IDE
包括代码模式与设计模式,支持代码开发与美术设计分离,内置了 SWF
转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。

下图是主要支持2D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Pixi.js YES YES NO NO 16.8k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
依赖于canvas的WebGL渲染器
Phaser YES YES NO NO 16.9k(最新更2017.07)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供在线编辑器Phaser Sandbox
CreateJs YES YES NO NO 6.5k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 有博客
官方推荐TweenJS,SoundJS,PreloadJS配合使用
Hilo YES YES YES(Hilo3D) NO 4.2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
提供资源下载和管理工具 阿里巴巴集团推出,适合开发营销小游戏,以Chipmunk为2D物理引擎,与主流物理引擎兼容
Cocos2d-x YES YES NO NO 11.2k(最新更新2017.12)
▪ 有中文文档
▪ js例子不多,c++例子较多
▪ 社区活跃
Cocos Creator编辑器,打包工具等 提供的功能相当完整
lufylegend.js YES NO NO NO 0.4k(最新更新2016.03)
▪ 有中文文档
▪ 社区活跃
仿ActionScript3.0的语法,支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多种热门环境,可以配合Box2dWeb制作物理游戏,内置了LTweenLite缓动类等

  就是下图不包括微信工具栏的高度。至于适配模式我先设成exactFit,以canvas的渲染模式运行,这些可根据实际需求设定

  就是下图不包括微信工具栏的高度。至于适配模式我先设成exactFit,以canvas的渲染模式运行,这些可根据实际需求设定

  上一节我们讲到即将创建场景createGameScene()的时候就结束了,这一节在我们正常创建场景之前,我们先修改一下loading页的效果。毕竟它是最先进入我们视野的页面。

  关于这个引擎和工具方面的介绍,我就不多说了,以下是白鹭的下载地址,咋们直接从安装完成后讲起。

Pixi.js

一般来说,WebGL 的渲染速度都会比 Canvas
快,这是由俩者的绘制路径决定的。Pixi 最大的特点在于,Pixi 具有完整的
WebGL 支持,却并不要求开发者掌握 WebGL
的相关知识,并在需要时无缝地回退到 Canvas
。相较于很多同类产品,它的渲染能力是比较强大的。然而,Pixi
也有不足的地方,Pixi
对于动画的支持是比较缺乏的,在实际开发中,常常需要引进额外的动画库,如
GSAP。

  图片 3图片 4

  图片 3图片 4

  如果你还有印象,应该记得我提过LoadingUI的实例化的地方,并添加到stage。

  Egret官网:

Phaser

Phaser 在渲染方面直接封装了 Pixi;架构方面,Phaser
内嵌了3个物理引擎(Arcade
Physics、Ninja、p2.js),提供粒子系统、动画、预下载和设备适配方案;兼容性方面,Phaser
的焦点是放在移动端浏览器上的;API 方面,Phaser
能实现丰富的游戏功能,适合复杂度高的游戏开发。

  保存设置后我们可以关闭index.html了,然后点击Wing面板工具栏中的“构建并运行”按钮,或者点击“项目”—“运行”。

  保存设置后我们可以关闭index.html了,然后点击Wing面板工具栏中的“构建并运行”按钮,或者点击“项目”—“运行”。

  图片 7

准备阶段:

CreateJS

图片 8

CreateJs 周边产品

CreateJS 官方提供了 TweenJS 支持动画开发,同时通过 SoundJS 和 PreLoadJS
提供了音频和预下载的支持,对于 H5
游戏基础功能的支持是足够的。在兼容性方面,CreateJS 支持 PC
端和移动端几乎所有的浏览器。此外,CreateJS 还支持用 flash CC 开发导出由
CreateJS 渲染的 H5 游戏。

  如图所示:

  如图所示:

  为了修改loading效果,我们先打开LoadingUI.ts,我们可以看到在loading实例化之后,会执行createView()方法。

  首先,安装完egret
engine后在桌面打开这个logo图片 9,双击后你能看到以下引擎界面:

Hilo

Hilo
是阿里团队推出的一个开源项目,支持模块化开发,同时提供了多种模块范式的包装版本和跨终端解决方案,适合用来开发营销小游戏。其体积也是比较轻量的,只有70kb左右。Hilo
支持 DOM 渲染,Canvas 渲染和 WebGL 渲染,同时集成了 Hilo Audio, Hilo
Preload。其后推出的 Hilo 3D 也是其亮点之一。

  图片 10

  图片 10

  为了将文本居中,将textField的宽度改成舞台的宽度640,利用center实现水平居中。同时将y轴调到适当的位置500。

图片 12

Cocos2d-x

Cocos2d-x 是业界比较老牌的游戏引擎了,同时支持 C++ ,Lua 和 JavaScript
三种开发语言,官方用例来看更倾向于 C++
开发,适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator
游戏开发工具,组件化,脚本化,数据驱动,跨平台发布。

  运行后,Wing会启动你的默认浏览器并以服务器环境方式打开该项目的index页面,为了显示和调试方便,我直接用F12以手机模式浏览。

  运行后,Wing会启动你的默认浏览器并以服务器环境方式打开该项目的index页面,为了显示和调试方便,我直接用F12以手机模式浏览。

  因为RES.ResourceEvent事件只能返回当前已加载数和加载总数两个参数,所以为了把加载进度更加直观一点,我们一般写成百分比的形式。

  如果你已经下载最新版,那就直接使用最新版本就好,假如从别的地方拷到了不同版本的项目,那就必须打开这个界面再安装不同的引擎版本,以打开其他人不同版本的代码。

lufylegend.js

lufylegend.js
的最新更新是在16年,不过其社区还是十分活跃的,如果遇到什么开发问题,可以很方便地在社区上找到解决的方案。lufylegend.js
可以支持基础的游戏功能,但是其可拓展性不是很强。

主要支持3D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Three.js NO NO YES(倾向) NO 37.6k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
默认Ammo.js为默认物理引擎,基于JavaScript语言的3D库,耗性能,加载慢,效果一般
PlayCanvas NO NO YES YES 3k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供了在线编辑器,发布托管等 教程较为详细,入门快

  如果编译和运行成功,你会看到如下的Egret的默认页:

  如果编译和运行成功,你会看到如下的Egret的默认页:

  设置进度的代码如下:

  接下来点击工具按钮,从界面上我们可以看到很多工具,但是做H5小游戏常用的只有Egret
Wing、Texture Merger
等,部分人可能需要做重游或者native
app的,可能需要其他的工具,但这里不作介绍。没用过哈哈哈~~

Three.js

图片 13

Three.js 示例案例

相信对于很多有关注 3D 游戏的开发者来说,Three.js
早已经耳熟能详了。实际上,Three.js 官方定位并不是游戏引擎,而是一个 JS
3D 库。Three.js 更倾向于展示型的视觉呈现,比较少直接拿 Three.js 来开发
H5 游戏。渲染环境上,Three.js 支持 WebGL 和 CSS3D 两种渲染模式。

  图片 14

  图片 14

    public setProgress(current, total):void {
        var num = Math.floor(current / total * 100);
        this.textField.text = num.toString() + " %";
    }

图片 16

PlayCanvas

从渲染支持程度来看,PlayCanvas 不仅支持 3D WebGL渲染,同时保持到 VR
的支持,拥有比较好的拓展性。在工具流的支持上,提供了在线编辑器和发布托管等服务。从官方教程上看,教程也是比较详细的。

 

 

创建游戏场景

  继续选择下载,由于我这里都已经下载安装好了,所以界面上显示已安装,这里比较简单就不详说了。

结语

现在市场上的
H5游戏引擎很多,很难去直接定义哪个引擎的好坏,只能说每个引擎都有自己的特性,在某方面跟项目的契合程度比较高,笔者根据现在市场上比较热门的几大引擎做了几点比较,希望能给刚入门的你做技术选型的时候有一点帮助,找到适合项目的引擎,更快、更准、更高效率地完成项目需求。

感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏。

2 赞 3 收藏 1
评论

图片 17

  接下来我们找到项目中的SRC目录,并打开LoadingUI.ts,这是官方预设的loading页面的LoadingUI类。

  接下来我们找到项目中的SRC目录,并打开LoadingUI.ts,这是官方预设的loading页面的LoadingUI类。

  保存loadingUI.ts的修改后,接下来我们打开Main.ts,并进入到createGameScene()方法。

使用阶段:

  它的效果如图所示,我们可以在chrome控制台中降低网速来查看loading页的效果。

  它的效果如图所示,我们可以在chrome控制台中降低网速来查看loading页的效果。

  为了方便后面的调用,我先创建一个初始化数据的方法。

  在以上工具都准备后,在engine界面或者桌面图标点击打开Egret
Wing,会看到以下画面:

  图片 18图片 19

  图片 18图片 19

 1     /**
 2      * 创建游戏场景
 3      * Create a game scene
 4      */
 5     private createGameScene():void {
 6         this.init();
 7     }
 8     /**
 9      * 初始化游戏数据和场景
10      * initial game data
11      */
12     private SW:number;//舞台宽
13     private SH:number;//舞台高
14     private SCORE:number = 0;//分数
15     private init():void{
16         this.SW = this.stage.stageWidth;
17         this.SH = this.stage.stageHeight;
18         //利用白鹭预设的创建bitmap方法创建背景图片
19         var bg = this.createBitmapByName("bg_game_jpg");
20         //并首先添加到舞台底部
21         this.stage.addChild(bg);
22     }

图片 22

 

 

  执行初始化方法后,保存并刷新浏览器就可以看到以下效果啦。一个基本的场景就出来了。

  Wing可以理解为专门使用TypeScript开发白鹭项目的IDE了,以后我们使用egret过程中,会一直跟这个界面打交道。

处理代码:

处理代码:

   图片 23

  好,现在我们先创建一个项目,我先建一个游戏项目,置于其他界面有什么区别呢,可以自行新建试试。EUI是主要做交互界面的,空项目是没有配置好相关需要的代码以及功能模块的,例如做缓动效果的Tween和加载的RES等等,所以为了方便,我们一般直接新建游戏项目。

  接下来我们就要开始操作代码了,我们找到项目src目录下的“主类”,但是Main并非是真正的主类,它跟C等其他的语言的主类不同,不过基本功能是一样的,就是进入主程。

  接下来我们就要开始操作代码了,我们找到项目src目录下的“主类”,但是Main并非是真正的主类,它跟C等其他的语言的主类不同,不过基本功能是一样的,就是进入主程。

  接下来,我们将头部的素材的提取出来,另建一个方法用于创建数据栏。

 

  由于官方给我们提供了一个案例,所以我打开Main.ts并把预设的一些效果和注释删除

  由于官方给我们提供了一个案例,所以我打开Main.ts并把预设的一些效果和注释删除

  图片 24

然后进入下一步:

  图片 25

  图片 25

 1     /**
 2      * 创建分数栏
 3      * create score container
 4      */
 5     private TF_socre: egret.TextField;
 6     private createScore(): void {
 7         //为方便管理与设置,把分数栏独立于一个容器内
 8         var cont = new egret.DisplayObjectContainer(),
 9             bg = this.createBitmapByName("bg_top_png"),
10             title = this.createBitmapByName("txt_score_png"),
11             txt = new egret.TextField();
12         //添加的顺序影响层级
13         cont.addChild(bg);
14         cont.addChild(title);
15         cont.addChild(txt);
16         //整个分数容器在设计图中的位置
17         cont.x = 40;
18         cont.y = 22;
19         //标题和分数在分数栏内部的位置
20         title.x = 36;
21         title.y = 54;
22         txt.x = 100;
23         txt.y = 51;
24         //限制文本的区域
25         txt.width = 110;
26         txt.height = 32;
27         //定义颜色、水平与垂直居中、字体大小,初始字符、加粗等
28         txt.textColor = 0xffdb15;
29         txt.textAlign = "center";
30         txt.verticalAlign = "middle";
31         txt.size = 24;
32         txt.text = "0";
33         txt.bold = true;
34         //将分数TextField实例引用到Main类下的内部属性值,方便其他方法调用并修改分数值
35         this.TF_socre = txt;
36         this.stage.addChild(cont);
37     }

图片 27

  图片 28

  图片 28

  大同小异,创建时间栏的方法如下。

  在这里,你需要配置游戏界面的大小,视频模式以及旋转设置。尺寸直接是设计图宽高,而视口我们一般会选择showALL(显示全部内容,不变形但会在留白),

  但是Main类下的createBitmapByName()方法,以及前面的加载资源以及配置都要留下来,这部分是我们需要复用的。

  但是Main类下的createBitmapByName()方法,以及前面的加载资源以及配置都要留下来,这部分是我们需要复用的。

图片 30图片 31

  网上也有一部分人开发的时候用fixedWidth(适配宽度,高度不足时会隐藏底下部分,适用于只有一些动画在上方,且下方是无关重要的背景时)。

  把没有用的代码删去之后,我们就要写自己的代码了。摁ctrl+s保存代码,点击“项目”并勾选“自动构建”可以在保存后自动编译,然后我们打开浏览器并刷新,我们现在可以看到什么都没有。

  把没有用的代码删去之后,我们就要写自己的代码了。摁ctrl+s保存代码,点击“项目”并勾选“自动构建”可以在保存后自动编译,然后我们打开浏览器并刷新,我们现在可以看到什么都没有。

 1     /**
 2      * 创建时间栏
 3      * create time container
 4      */
 5     private TF_time: egret.TextField;
 6     private createTime(): void {
 7         var cont = new egret.DisplayObjectContainer(),
 8             bg = this.createBitmapByName("bg_top_png"),
 9             title = this.createBitmapByName("txt_time_png"),
10             txt = new egret.TextField();
11         cont.addChild(bg);
12         cont.addChild(title);
13         cont.addChild(txt);
14         cont.x = 352;
15         cont.y = 22;
16         title.x = 36;
17         title.y = 54;
18         txt.x = 100;
19         txt.y = 51;
20         txt.width = 110;
21         txt.height = 32;
22         txt.textColor = 0xffdb15;
23         txt.textAlign = "center";
24         txt.verticalAlign = "middle";
25         txt.size = 24;
26         txt.text = "0 S";
27         txt.bold = true;
28         this.TF_time = txt;
29         this.stage.addChild(cont);
30     }

  还有一些人(例如我有时候)会用到百分百满屏的exacFit,设计师弄一个适中的尺寸,然后按照这种模式铺满全屏,有少数很宽或很长的屏幕会有一点变形,但是不影响游戏体验与界面。但是不好的地方是PC或pad打开会变形。

  图片 32图片 33

  图片 32图片 33

创建时间栏方法

选择完之后,我们点击完成。打开新建的项目目录:

 

 

  创建以上方法后,并在init()方法内通过this.createScore()和this.createTime()调用,刷新浏览器可看到以下变化。

图片 36

 处理资源:

 处理资源:

  图片 37

  src是TypeScript源码目录,bin-debug是调试环境编译出来的js,libs是文件包的引用目录,template主要是app用到的runtime;

  当我们把冗余的代码删去之后,同时我们也要把预置的资源素材删去,首先我们进入resource目录下,把assetconfig文件夹下的所有素材删掉。

  当我们把冗余的代码删去之后,同时我们也要把预置的资源素材删去,首先我们进入resource目录下,把assetconfig文件夹下的所有素材删掉。

 

  resource是我们项目中的资源路径,一般我们把图片音频等素材放置asset目录下,json等配置文件放置config目录下,default.res.json是我们用于加载资源的json配置文件,一般不修改名字,后面会讲到怎么使用。

  删除完之后就把自己需要的素材,例如图片和音频等放置于asset目录下,而配置文件json之类的则放置于config目录下。

  删除完之后就把自己需要的素材,例如图片和音频等放置于asset目录下,而配置文件json之类的则放置于config目录下。

   PS:时间关系,原本本文打算写更多的,但是为了保证延续性,先发这部分了。

  egretProperties是我们这个项目的一些配置记录信息,一般我们不需要动它。而index.html就是我们游戏的主界面文件。

  注意,default.res.json这个资源配置文件不可删除哦,但可以修改名字和路径,一般减少出错我们就让它保持原样就好。

  注意,default.res.json这个资源配置文件不可删除哦,但可以修改名字和路径,一般减少出错我们就让它保持原样就好。

 

  打开index.html

  图片 38

  图片 38

  接下来将继续更新第四篇,敬请期待。

图片 40

  当我们把自己使用到的资源放置于asset目录下后,我们再回到wing面板,点击default.res.json进入资源管理界面并刷新,假如你在resource目录下新增了素材,就会弹出以下窗口。

  当我们把自己使用到的资源放置于asset目录下后,我们再回到wing面板,点击default.res.json进入资源管理界面并刷新,假如你在resource目录下新增了素材,就会弹出以下窗口。

 

  我们可以看到游戏界面所需的js,都自动生成并引用好了。这一部分我们不需要也不能手动去修改

  点击“”,则自动添加所有资源到json资源配置文件default.res.json中。
  注意:假如资源中有黄色提示框,则表示该资源已被删除,应该将该配置项同步删去或者修改路径。点击右键,删除资源。

  点击“”,则自动添加所有资源到json资源配置文件default.res.json中。
  注意:假如资源中有黄色提示框,则表示该资源已被删除,应该将该配置项同步删去或者修改路径。点击右键,删除资源。

   转载请注明出处,谢谢。

  但是你可以在style标签中修改背景色或者在div属性值中修改配置参数,如渲染的帧率(一般我们设成60,如果是计算量大的,我们再适当降低),在这里我们可以重新修改刚刚新建游戏时的适配模式、宽高、旋转等;

  图片 41

  图片 41

  图片 43

  将data-show-fps和data-show-log设成true,我们就可以看到游戏运行的实时帧率了。

   图片 44

   图片 44

  帧率可以检测游戏运行的流畅度(性能),渲染数量越多,同时计算量越大,性能就越差,掉帧就越多。所以帧率越高,则表示性能越好,流畅度高。

  在资源配置页,我们可以看到下方有个资源组。它的意思是我们可以分不同的组别或者批次来加载资源。

  在资源配置页,我们可以看到下方有个资源组。它的意思是我们可以分不同的组别或者批次来加载资源。

图片 46

  譬如在场景一,我们只需要用到部分资源,我们就可以把这部分资源独立放置在一组,进入场景一时进行预加载。

  譬如在场景一,我们只需要用到部分资源,我们就可以把这部分资源独立放置在一组,进入场景一时进行预加载。

  另外,在底部,我们还能看到一个egret.runEgret({})的运行方法,在这里,你可以修改egret的渲染模式,默认是“webgl”。但是如果你需要用到跨域图片资源或者有大量的图片和文字,你最好还是使用“canvas”模式,避免跨域报错性能问题。

  假设到了场景二,我们则继续把场景二那一组资源进行加载,加载完再继续使用。这样可以达到分批加载的效果。

  假设到了场景二,我们则继续把场景二那一组资源进行加载,加载完再继续使用。这样可以达到分批加载的效果。

   明天更新第二篇,敬请期待。

  图片 47

  图片 47

 

  现在这个案例,暂时先用到一个组。所以我会把所有资源拖进preload当中,在进入游戏之前全部加载。

  现在这个案例,暂时先用到一个组。所以我会把所有资源拖进preload当中,在进入游戏之前全部加载。

   转载请注明出处,谢谢。

  把全部资源拖进去了preload组之后,已选用的资源会显示另外一种背景色。然后我们点击ctrl+s进行保存。

  把全部资源拖进去了preload组之后,已选用的资源会显示另外一种背景色。然后我们点击ctrl+s进行保存。

  图片 43

  图片 50

  图片 50

 

  我们除了可以使用拖拉选用资源外,我们还可以使用代码进行配置,手动修改json。我们可以点击资源面板的左上角“源代码”按钮查看刚刚我们保存的素材配置。

  我们除了可以使用拖拉选用资源外,我们还可以使用代码进行配置,手动修改json。我们可以点击资源面板的左上角“源代码”按钮查看刚刚我们保存的素材配置。

  图片 52

  图片 52

  “groups”:代表的是我们使用了多少个资源组,每个资源组分别需要加载什么素材,这个资源组叫什么等等。这些所有都使用字符串命名的方式进行辨识。

  “groups”:代表的是我们使用了多少个资源组,每个资源组分别需要加载什么素材,这个资源组叫什么等等。这些所有都使用字符串命名的方式进行辨识。

  “resources”:则涵盖了所有的资源名字类型以及其路径。注意的是这里不需要使用绝对路径,绝对路径稍后会在Main类中配置。

  “resources”:则涵盖了所有的资源名字类型以及其路径。注意的是这里不需要使用绝对路径,绝对路径稍后会在Main类中配置。

  另外,资源配置的命名规则等等的设置可以通过点击“项目”-“项目属性”打开配置面板,然后按照个人喜好进行修改。

  另外,资源配置的命名规则等等的设置可以通过点击“项目”-“项目属性”打开配置面板,然后按照个人喜好进行修改。

  图片 54

  图片 54

  接着我们回到Main.ts中,找到Res.loadConfig()方法

  接着我们回到Main.ts中,找到Res.loadConfig()方法

  该方法的第一个参数代表的是这个配置文件json的路径,而第二个参数代表的是里面加载的资源的路径前缀,一般情况下可以使用相对路径,但我们也可以写成外部变量,方便修改成绝对路径。

  该方法的第一个参数代表的是这个配置文件json的路径,而第二个参数代表的是里面加载的资源的路径前缀,一般情况下可以使用相对路径,但我们也可以写成外部变量,方便修改成绝对路径。

  图片 56

  图片 56

  在上述步骤完成后,我们就可以进行基本的编码了。在编码之前,我们先看看Main类干了什么。

  在上述步骤完成后,我们就可以进行基本的编码了。在编码之前,我们先看看Main类干了什么。

 

 

Main类逻辑:

Main类逻辑:

  由于我们之前已经在index.html页面中声明了入口类(**data-entry-class**),所以当页面加载完之后,就会自动执行Main类中的构造函数

  由于我们之前已经在index.html页面中声明了入口类(**data-entry-class**),所以当页面加载完之后,就会自动执行Main类中的构造函数

  并且在这个类构建完成后,会自动添加到舞台(stage)

  并且在这个类构建完成后,会自动添加到舞台(stage)

 

 

  1、实例化Main类

  1、实例化Main类

    这个过程是我们创建好Main类后,由Egret内部完成的,对于我们来说是不可见的,我们把Main设为入口类就好。

    这个过程是我们创建好Main类后,由Egret内部完成的,对于我们来说是不可见的,我们把Main设为入口类就好。

  图片 58

  图片 58

 

 

 

 

  2、constructor初始化

  2、constructor初始化

    在实例化Main类的过程中,本类的构造函数会被自动调用,进而初始化一些我们要用数据或方法

    在实例化Main类的过程中,本类的构造函数会被自动调用,进而初始化一些我们要用数据或方法

  这里由于Main继承自白鹭的基本容器egret.DisplayObjectContainer并且会自动添加到舞台中,所以在初始化阶段给Main绑定了添加到舞台事件,用于启动界面。

  这里由于Main继承自白鹭的基本容器egret.DisplayObjectContainer并且会自动添加到舞台中,所以在初始化阶段给Main绑定了添加到舞台事件,用于启动界面。

   图片 60

   图片 60

 

 

  3、Main实例化完成并添加到舞台

  3、Main实例化完成并添加到舞台

    由于这一步对我们来说,是不可见的,在我们定义好Main类并且运行程序后,egret会自动执行这一步。

    由于这一步对我们来说,是不可见的,在我们定义好Main类并且运行程序后,egret会自动执行这一步。

 

 

  4、Main被添加到舞台,触发旗下的onAddToStage方法

  4、Main被添加到舞台,触发旗下的onAddToStage方法

    触发了onAddToStage方法后会将LoadingUI类实例化,并添加到界面,这时候我们就可以看见一个白屏和初始的加载进度了。

    触发了onAddToStage方法后会将LoadingUI类实例化,并添加到界面,这时候我们就可以看见一个白屏和初始的加载进度了。

  然后我们可以绑定加载配置文件完成事件之后执行的方法,并且执行RES.loadConfig(),开始加载json配置文件。

  然后我们可以绑定加载配置文件完成事件之后执行的方法,并且执行RES.loadConfig(),开始加载json配置文件。

  图片 62

  图片 62

 

 

  5、配置文件加载完成后,执行onConfigComplete方法

  5、配置文件加载完成后,执行onConfigComplete方法

    移除CONFIG_COMPLETE配置完成事件,分别绑定资源组加载完成(GROUP_COMPLETE**)**执行的方法、

    移除CONFIG_COMPLETE配置完成事件,分别绑定资源组加载完成(GROUP_COMPLETE**)**执行的方法、

  资源组加载出错(**GROUP_LOAD_ERROR**)资源文件加载进度(**GROUP_PROGRESS**)要执行的方法、资源项加载出错(**ITEM_LOAD_ERROR**)要执行的方法。

  资源组加载出错(**GROUP_LOAD_ERROR**)资源文件加载进度(**GROUP_PROGRESS**)要执行的方法、资源项加载出错(**ITEM_LOAD_ERROR**)要执行的方法。

  接着正式开始执行RES.loadGroup()并加载资源组(默认preload)里面的资源。

  接着正式开始执行RES.loadGroup()并加载资源组(默认preload)里面的资源。

   图片 64

   图片 64

 

 

  6、正在加载资源,触发RES.ResourceEvent.GROUP_PROGRESS并执行onResourceProgress方法

  6、正在加载资源,触发RES.ResourceEvent.GROUP_PROGRESS并执行onResourceProgress方法

    在这个过程中,会不断地调用LoadingUI中的公共方法setProgress(event.itemsLoaded,
event.itemsTotal);

    在这个过程中,会不断地调用LoadingUI中的公共方法setProgress(event.itemsLoaded,
event.itemsTotal);

  GROUP_PROGRESS事件会返回当前已加载的数量event.itemsLoaded,以及加载资源的总数event.itemsTotal,我们可以利用这两个数值进行一些进度的显示。

  GROUP_PROGRESS事件会返回当前已加载的数量event.itemsLoaded,以及加载资源的总数event.itemsTotal,我们可以利用这两个数值进行一些进度的显示。

  图片 66

  图片 66

 

 

  7、资源组加载完成,触发RES.ResourceEvent.GROUP_COMPLETE并执行onResourceLoadComplete方法

  7、资源组加载完成,触发RES.ResourceEvent.GROUP_COMPLETE并执行onResourceLoadComplete方法

    将loading页面移出舞台,移除之前绑定的一些加载事件,并且执行createGameScene()方法。

    将loading页面移出舞台,移除之前绑定的一些加载事件,并且执行createGameScene()方法。

  图片 68

  图片 68

 

 

  8、开始绘制游戏场景

  8、开始绘制游戏场景

     在上述基本的加载以及准备阶段完成后,我们就可以开始绘制我们的游戏场景啦。当然,现在什么都没有,空空如也。

     在上述基本的加载以及准备阶段完成后,我们就可以开始绘制我们的游戏场景啦。当然,现在什么都没有,空空如也。

  但是,我们已经完成了基本步骤啦。下一节,我将会继续详细讲解游戏的代码开发部分啦。

  但是,我们已经完成了基本步骤啦。下一节,我将会继续详细讲解游戏的代码开发部分啦。

  图片 70

  图片 70

 

 

 

 

  接下来将继续更新第三篇,敬请期待。

  接下来将继续更新第三篇,敬请期待。

 

 

   转载请注明出处,谢谢。

   转载请注明出处,谢谢。

  图片 43

  图片 43

发表评论

电子邮件地址不会被公开。 必填项已用*标注