egret之HelloWorld

jk_v1 发布于2019-08-23 14:15 / 2285人阅读

摘要：但是不好的地方是或打开会变形。但是这三个地方还是以实际项目需求为准，以上是常规的设置。选择完之后，我们点击完成。所以帧率越高，则表示性能越好，流畅度高。并且代表作品萌鸡驾到美旅出行小程序电竞桌子小程序。

标签: 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项目界面

Hello World

在main 找到 createGameScene方法，然后添加

编译运行

作者简介：何永峰，芦苇科技web前端开发工程师，喜欢到处寻找好吃的，平时爱好是跳舞，打篮球，听音乐，有时会出席一些大型的舞蹈商演活动，目前是Acum.Revolution現狀革命成员之一。并且代表作品：萌鸡驾到、美旅出行小程序、电竞桌子小程序。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。

超融合服务器云服务器 HelloWorld egret 部署Egret Egret3D

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100350.html

游戏小学生02-HelloWorld

摘要：引入宋丹丹老师在小品中曾经说过，把大象装进冰箱只需要三步，打开冰箱，把大象放进冰箱，关上冰箱。这些步骤的前提就是依赖有一个冰箱当然，在创建的时候，也是需要有一个前提条件的，那就是把基础的开发环境搭建完成。引入宋丹丹老师在小品中曾经说过，把大象装进冰箱只需要三步，打开冰箱，把大象放进冰箱，关上冰箱。这些步骤的前提就是依赖有一个冰箱~~~ HelloWorld 当然，在创建Hello...

crossea 2019-08-21 16:43 评论0 收藏0
erget源码分析(1):入口文件分析

摘要：是一个静态类，调用方法来初始化各项支持信息。小结通过和这两个静态类初始化了项目运行的环境参数，然后创建了屏幕适配器根据不同的适配策略调整。下一篇源码分析全局哈希基类和全局异步函数对象接口 egret的github地址是https://github.com/egret-labs...，大家自己git clone到本地。一.路口html文件用ergetWing新建一个工程，打开根目录下...

Rainie 2019-08-21 17:35 评论0 收藏0
erget源码分析(1):入口文件分析

摘要：是一个静态类，调用方法来初始化各项支持信息。小结通过和这两个静态类初始化了项目运行的环境参数，然后创建了屏幕适配器根据不同的适配策略调整。下一篇源码分析全局哈希基类和全局异步函数对象接口 egret的github地址是https://github.com/egret-labs...，大家自己git clone到本地。一.路口html文件用ergetWing新建一个工程，打开根目录下...

impig33 2019-08-05 17:58 评论0 收藏0
密室逃生Egret游戏教程

摘要：这个类可以大大减少后期的代码量，降低整体的耦合度。关键代码是把位图按照区域进行分割，显示对象的滚动矩形范围。这次给大家带来的是通过Egret实现密室逃生小游戏的教程。该游戏包括人物状态机、MVC设计模式和单例模式，该游戏在1.5s内通过玩家点击操作寻找安全点，方可进入下一关，关卡无限，分数无限。下面是具体的模块介绍和代码实现。该游戏主要内容包括 **开始游戏场景游戏场景游戏结束结算...

elva 2019-08-23 12:12 评论0 收藏0
国内开源html5游戏引擎全收录

摘要：就先收录一下我所知道的国产开源游戏引擎吧。最近也火到不行，自从出了那个围住神经猫之后虽是新团队，但也是企业级产品，据说团队都是来自各界精英，大部分是从阵营转过来的。不过看过一些用开发的案例，感觉有点，也许是围住神经猫给人留下的第一印象吧。游戏开发这潭水太深，英文水平太差，不敢看国外的，而且这几年国内技术水平也挺高了不少，特别是JS方面。（我个人感觉）最近看了几个国产的js游戏引擎，...

molyzzx 2019-08-02 18:03 评论0 收藏0