摘要:但是不好的地方是或打开会变形。但是这三个地方还是以实际项目需求为准,以上是常规的设置。选择完之后,我们点击完成。所以帧率越高,则表示性能越好,流畅度高。并且代表作品萌鸡驾到美旅出行小程序电竞桌子小程序。
标签: egret,入门 什么是Egret?
Egret是一套HTML5游戏开发解决方案,产品包含Egret Engine,Egret Wing,EgretVS,Res Depot,Texture Merger,TS Conversion,Egret Feather,Egret Inspector,DragonBones,Lakeshore等。而核心产品是Egret Engine,是一个基于TypeScript语言开发的一个HTML5游戏引擎,其余的大多是开发和辅助工具。
关于这个引擎和工具方面的介绍,我就不多说了,以下是白鹭的下载地址。
Egret官网:http://egret.com/
准备阶段:我们要下载
并且在里面下载
使用阶段:在以上工具都准备后,在engine界面或者桌面图标点击打开Egret Wing,会看到以下画面:
Wing可以理解为专门使用TypeScript开发白鹭项目的IDE了,以后我们使用egret过程中,会一直跟这个界面打交道。
好,现在我们先创建一个项目,我先建一个游戏项目,置于其他界面有什么区别呢,可以自行新建试试。EUI是主要做交互界面的,空项目是没有配置好相关需要的代码以及功能模块的,例如做缓动效果的Tween和加载的RES等等,所以为了方便,我们一般直接新建游戏项目。
在这里,你需要配置游戏界面的大小,视频模式以及旋转设置。尺寸直接是设计图宽高,而视口我们一般会选择showALL(显示全部内容,不变形但会在留白),
网上也有一部分人开发的时候用fixedWidth(适配宽度,高度不足时会隐藏底下部分,适用于只有一些动画在上方,且下方是无关重要的背景时)。
还有一些会用到百分百满屏的exacFit,设计师弄一个适中的尺寸,然后按照这种模式铺满全屏,有少数很宽或很长的屏幕会有一点变形,但是不影响游戏体验界面。但是不好的地方是PC或pad打开会变形。
但是这三个地方还是以实际项目需求为准,以上是常规的设置。
选择完之后,我们点击完成。打开新建的项目目录:
src是TypeScript源码目录,bin-debug是调试环境编译出来的js,libs是文件包的引用目录,template主要是app用到的runtime;
resource是我们项目中的资源路径,一般我们把图片音频等素材放置asset目录下,json等配置文件放置config目录下,default.res.json是我们用于加载资源的json配置文件,一般不修改名字,后面会讲到怎么使用。
egretProperties是我们这个项目的一些配置记录信息,一般我们不需要动它。而index.html就是我们游戏的主界面文件。
打开index.html
将data-show-fps和data-show-log设成true,我们就可以看到游戏运行的实时帧率了。
帧率可以检测游戏运行的流畅度(性能),渲染数量越多,同时计算量越大,性能就越差,掉帧就越多。所以帧率越高,则表示性能越好,流畅度高。
另外,在底部,我们还能看到一个egret.runEgret({})的运行方法,在这里,你可以修改egret的渲染模式,默认是"webgl"。但是如果你需要用到跨域图片资源或者有大量的图片和文字,你最好还是使用"canvas"模式,避免跨域报错和性能问题。
点完编译,点调试,之后就出出现游戏界面,这是egret demo项目界面
在main 找到 createGameScene方法,然后添加
编译运行
作者简介:何永峰,芦苇科技web前端开发工程师,喜欢到处寻找好吃的,平时爱好是跳舞,打篮球,听音乐,有时会出席一些大型的舞蹈商演活动,目前是Acum.Revolution現狀革命成员之一。并且代表作品:萌鸡驾到、美旅出行小程序、电竞桌子小程序。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究,访问 www.talkmoney.cn 了解更多。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100350.html
摘要:引入宋丹丹老师在小品中曾经说过,把大象装进冰箱只需要三步,打开冰箱,把大象放进冰箱,关上冰箱。这些步骤的前提就是依赖有一个冰箱当然,在创建的时候,也是需要有一个前提条件的,那就是把基础的开发环境搭建完成。 引入 宋丹丹老师在小品中曾经说过,把大象装进冰箱只需要三步,打开冰箱,把大象放进冰箱,关上冰箱。 这些步骤的前提就是依赖有一个冰箱~~~ HelloWorld 当然,在创建Hello...
摘要:是一个静态类,调用方法来初始化各项支持信息。小结通过和这两个静态类初始化了项目运行的环境参数,然后创建了屏幕适配器根据不同的适配策略调整。下一篇源码分析全局哈希基类和全局异步函数对象接口 egret的github地址是https://github.com/egret-labs...,大家自己git clone到本地。 一.路口html文件 用ergetWing新建一个工程,打开根目录下...
摘要:这个类可以大大减少后期的代码量,降低整体的耦合度。关键代码是把位图按照区域进行分割,显示对象的滚动矩形范围。 这次给大家带来的是通过Egret实现密室逃生小游戏的教程。该游戏包括人物状态机、MVC设计模式和单例模式,该游戏在1.5s内通过玩家点击操作寻找安全点,方可进入下一关,关卡无限,分数无限。下面是具体的模块介绍和代码实现。 该游戏主要内容包括 **开始游戏场景游戏场景游戏结束结算...
阅读 1881·2021-11-09 09:46
阅读 2444·2019-08-30 15:52
阅读 2403·2019-08-30 15:47
阅读 1303·2019-08-29 17:11
阅读 1730·2019-08-29 15:24
阅读 3473·2019-08-29 14:02
阅读 2426·2019-08-29 13:27
阅读 1173·2019-08-29 12:32