Egret 入门培训与开发指南
【极客学院】Egret 入门培训与开发指南
https://www.bilibili.com/video/BV1jx411v7km 2 4
1.1.1.Egret 介绍
e鬼勒 白鹭
1、关于Egret
2、开源的Egret
3、Egret特点
4、Egret功能
5、Egret路线图
docs.egret-labs.org/
1、Node.js
2、TypeScript编辑器
3、HTTP服务器（可选）
4、Chrome（可选）
5、Egret
www.egret-labs.org
白鹭科技公司于2022年2月已经停止运营，白鹭引擎也停止了官方技术团队的维护和更新，由于业内还有几十万活跃的开发者，现我们已委托第三方社区进行引擎的维护和开发，
NOV-282014
Egret 1.1.4
1.1.2.Windows下环境搭建
1.1.3.Mac 下搭建环境
1.1.4.创建 HelloWorld 项目
egret create Helloworld
egret build Helloworld
egret startserver Helloworld/
1.1.5.Egret 实例演示
2.1.1.显示对象种类
DisplayQbject
DisplayObjectContainer
Bitmap
Shape
TextField
TextInput
Sprite
Stage
MovieClip
Bitmap Text
//打开性能面板
egret.Profiler.ge
2.1.2.显示对象的基本概念
1、DisplayObject类是所有显示对象的父类，该类归纳总结了一些显示对象共有的特性，这些共有的特性被整理成为一些列的属性与方法。当一个显示对象在舞台中显示的时候，该对象拥有一些非常明显的属性，例如位置，大小等。除此之外显示对象还有一些其他属性。
Egret中的显示对象类DisplayObject拥有四个派生类，分别为：
Bitmap Shape TextField TextInput这四个派生类实现了不同的功能：
Bitmap进行位图显示和操作。
Shape是可以进行矢量图绘制的显示对象。
TextField和TextInput都属于文本操作。
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}
onAddToStage(event:egret.Event){
var spr:egret.Sprite = new egret.Sprite();
spr.graphics.beginFill(0xFF0000);
spr.graphics.drawRect(0, 0, 100, 100);
spr.graphics.endFill();
spr.rotation = 45;
this.addChild(spr);
}
}
2.1.3.遮罩的使用
1、遮罩是游戏中非常常用的一种视觉处理手段。例如，游戏中滚动的玩家列表就使用了遮罩这一技术。所谓遮罩就是指定一个显示对象哪些部分可以显示，哪些部分不可以显示。
Egret启用遮罩功能非常的简单，在DisplayObject中，我们暴露了一个名称为Mask的属性，该属性就是用来指定遮罩部分的。
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}
onAddToStage(event:egret.Event){
var spr:egret.Sprite = new egret.Sprite();
spr.graphics.beginFill(0xFF0000);
spr.graphics.drawRect(0, 0, 100, 100);
spr.graphics.endFill();
spr.rotation = 45;
this.addChild(spr);
var spr1:egret.Sprite = new egret.Sprite();
spr1.graphics.beginFill(0xFF0F00);
spr1.graphics.drawRect(0, 0, 100, 100);
spr1.graphics.endFill();
spr1.rotation = 45;
spr1.x = 20;
spr1.y = 20;
this.addChild(spr1);
var rect:egret.Rectangle = new egret.Rectangle(20, 20, 30, 50);
spr.mask = rect;
}
}
2.1.4.碰撞检测
1、碰撞检测在游戏中是非常重要的功能，例如我们制作一款打飞机游戏，当子弹与飞机发生碰撞的时候我们可以认为游戏结束。此时碰撞的过程需要进行碰撞检测操作。
shp.hitTestPoint（10，10）
2.1.5.自定义显示对象类
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}
onAddToStage(event:egret.Event){
var card=new MyCard();
this.addChild(card);
}
}
class MyCard extends egret.Shape{
constructor(){
super();
this.drawCard();
}
private drawCard(){
this.graphics.beginFill(0x0000);
this.graphics.drawRect( 0, 0, 100, 200 );
this.graphics.endFill();
}
}
2.1.6.锚点的操作
1、每一个显示对象都包含一个锚点，该锚点默认位于显示对象的左上角。当设置一个显示对象的坐标位置时，我们会以锚点为参照改变显示对象绘图位置。同时，锚点相对于显示对象的位置也是可以改变的。
card.anchorOffsetX=card.width/2;
2.2.1.显示容器的概念与实现
1、DisplayObjectContainer封装了一些显示列表中的常用功能。常用操作包括：
1）：添加、删除子对象
2）：访问子对象3）：检测子对象
4）：设置叠放次序2、最轻量级的容器
在Egret中，我们拥有一个非常轻量级的容器：Sprite。
2.2.2.添加与删除显示对象
1、在Egret中建立显示对象和渲染显示对象是两个过程。建立显示对象后，对象会处于内存中，但不会参与渲染过程，只有把显示对象放到显示列表后，显示对象才会参与渲染过程。
如果想将某个显示对象从渲染过程中删除，只需要将其移除显示列表即可。
2、添加显示对象到显示列表
3、删除显示对象
4、显示对象操作的注意点
1）：显示对象独立于显示列表
2）：相对坐标系
3）：多次添加显示对象到显示列表
4）：删除操作的注意点
spr（容器）
文档类（容器）
舞台（容器）
this.removeChild(spr)
pro.praret
2.2.3.深度管理
1、每一个容器都会有一个自己的深度管理功能，这个深度管理就好像我们排队一样。
2、深度顺序
3、添加/删除指定深度的对象
4、交换不同深度对象
5、重设子对象深度
this.numChildren
sprcon.addChildAt(sprNew,1);
容器。swapChildren（显示对象，显示对象）容器。swapChildrenAt（深度值，深度值）
//sprcon.swapChildrenAt（1，3）；容器。setChildIndex（显示对象，新的深度值）
cndlou cotChi1dTndov
2.2.4.访问容器子对象
访问容器子对象
1、想要获取一个容器的子对象，我们有两种方式可以选择，第一种是通过子对象的深度值来获取子对象，第二种是通过子对象的name属性来获取。
2、通过深度值获取子对象3、通过Name属性获取
4、两种获取子对象方式的比较
spr.name='kk'
epr.getChildByName("Hello"); spr. getChildAt(0);
2.3.1.事件机制原理及流程
事件处理机制的原理
1、Egret中的事件机制是一套业内标准的事件处理架构。所提供的事件模式也非常的清晰、强大和高效。在使用Egret中的事件时，我们可以非常方便的编写代码，并实现想要的逻辑功能。在Egret中，事件模型定义了一套标准的生成和处理事件消息的方法，使程序中的对象可以相互交互，通信，保持自身状态和相应 变化。简单的说，数据的提供者只管发出数据对象，只要确保数据对象是egret.Event类或者子类的实例即可。这种数据对象，称为事件（Event）。数据对象的发出者，称之为事件发送者（Event dispatcher）。同时，接受事件的对象，称为事件侦听者（Event listener）。
new DateEvent(DateEvent. DATE); this. dispatchEvent (daterEvent);
boy.addEventListener(DateEvent.DATE,girl.getDate,ğirl);
2.3.2.事件 Event 类及优先级
Event类
1、Event类是所有事件类的基类。当你你要创建一个自定义事件的时候，事件应该继承自Event类。同时Event类也包含一些事件。这些事件通常与显示列表，显示对象的状态有关。
extends egret.Event
事件侦听器
1、事件侦听器也就是事件的处理者，负责接收事件携带的信息，并在接收到该事件后执行特定的代码。
2.3.3.事件实例
2.4.1.Egret 矢量绘图
1、Egret中可以直接使用程序来绘制一些简单的图形，这些图形在运行时都会进行实时绘图。要进行绘图操作，我们需要使用Graphics这个类。但并非直接使用。一些显示对象中已经包含了绘图方法，我们可以直接调用这些方法来进行绘图。Graphics中提供的绘图方法共有四种。
a.绘制矩形b.绘制圆形c.绘制直线
egret. Shape()
cs.drawRect(.drawCircle(
shp. graphics. moveTo(10,10); shp. graphics. lineTo (100,100); shp oranhics endEi11()
.curveTo( 弧形
2.4.2.Egret 文本设置
1、在Egret中，我们有三种类型的文本可以选择，分别为“普通文本”，“输入文本”和“位图文本”。这些不同类型的文本在不同的场景下使用。对于不同类型的文本，其操作方式可能会有所不同。三种类型的文本特点如下：
a.普通文本：能够正常的显示各种文本，文本内容可以被程序设置，最为常见的文本类型b.输入文本：可以被用户输入的文本，常用于登陆中的输入框或者游戏中的聊天窗口c.位图文本：使用位图文字来渲染的文本，常用于游戏中需要加特殊字体效果的文本2、文本操作：
a.创建文本b.文本颜色c.文本字体d.文本布局e.文本样式
极客学
egret.TextField();
2.4.3.Egret 动画效果
1、Tween缓动动画
通常情况下，游戏中或多或少都会带有一些缓动动画。例如界面弹出，或者道具飞入飞出的特效等等。在制作这些缓动动画的时候我们仅仅希望简单的办法实现这种移动或者变形缩放的效果。Egret中的 Tween 缓动动画类就为我们提供了相关的功能。
2、MovieClip序列帧动画
MovieClip又称之为“影片剪辑“，是Egret中提供的一种动画解决方案。我们通常会将MovieClip简写为”mc“。实际上一个mc所实现的功能就是播放序列帧动画。
这个概念与我们平常所使用的gif图很相似。当我们想实现一个任务跑动的动作时，你需要将原有的动画制作成为能够被Egret识别的动画格式。然后将这些制作好的资源进行加载，最后播放
let tw=egret.Tween.get(card);
tw.to({x:300},2000);
}
2.4.4.Egret 计时器
计时器
1、现在假设你的游戏中设计一个倒计时功能，要求玩家在30秒内进行游戏操作，并达到一定要求方可过关。在这个需求中，我们需要一个倒计时的功能，而倒计时的功能离不开计时器。值得幸运的是，在Egret中提供了一个方便好用的计时器Timer。
= new egret. Timer(500,5).addEventListener
2.5.1.创建位图
创建位图
1、位图的使用离不开纹理的支持，在Egret中，我们默认隐藏了纹理的操作，所有操作均针对于显示对象进行。但位图的显示依然基于纹理。在显示一张图片时，我们需要使用Bitmap 类。这是egret中的图片类，而纹理则来自于我们加载的资源图片。通常情况下，我们会使用单张图片作为纹理，游戏中也会大量使用纹理集来进行渲染。
new egret. Bitmap(); Res(""):
resource.json 配置
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}
onAddToStage(event:egret.Event){
// var card=new MyCard();
// this.addChild(card);
// card.anchorOffsetX=card.width/2;
// let tw=egret.Tween.get(card);
// tw.to({x:400},2000);
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.start,this);
RES.loadConfig("resource/default.res.json", "resource");
// RES.loadGroup("preload");
}
start(){
var bg=new egret.Bitmap();
bg.texture=RES.getRes("bg_jpg");
this.addChild(bg);
}
}
2.5.2.资源加载
资源加载
1、资源加载模块
2、资源加载模块配置
3、初始化资源加载模块
4、预加载资源组
5、获取资源
*三种方式
getRes（）同步
getResAsync（）异步ww
getResByUrl（）
2.5.3.九宫格的使用
1、通常情况下为了游戏画面中的美观程度，我们或多或少都会使用一些圆角矩形或者边缘不规则的矩形。在游戏中，我们经常会对这些图形进行拉伸。那么拉伸后的图形会发生变形。为了让边缘不会因为拉伸而变形，我们需要一个解决办法。这个办法就是“九宫格”。
var rect: egret. Rectangle = new egret. Rectangle(30,31,40,41); img2. scale9Grid =regt; hieddhi1d/imeدt
2.5.4.纹理的填充方式
纹理的填充方式
1、位图的填充方式有两种，第一种是拉伸图像以填充区域，第二种是重复图像以填充区域。当你创建一个Bitmap对象时会默认选择第一种填充方式。
img.fillMode = egret.BitmapFillMode.REPEAT; a2
2.5.5.纹理集的使用
纹理集的使用
1、纹理集听上去名称高大上，实则概念非常简单。纹理集实际上就是将一些零碎的小图放到一张大图当中。游戏中也经常使用到纹理集。使用纹理集的好处很多，我们通过将大量的图片拼合为一张图片从而减少网络请求，原先加载数次的图片资源现在加载一次即可。同时，在引擎渲染的时候也会较少1O读取，从而提高性能。
img. texture = imgs. getTexture("geekf'); I
2.6.1.加载音频资源播放音频
音频系统
1、音频是游戏制作中不可或缺的元素，在游戏中，我们经常使用背景音乐来渲染故事情节。同时，人物在发生打击动作、一些绚丽特效播放的时候也会附带播放一系列的音频。Egret中的音频系统接种HTML5的Audio系统，这使得Egret的音频兼容绝大多数浏览器。在音频文件格式中Egret仅支持MP3格式。由于音频文件属于游戏资源的一部分，所以在游戏逻辑中，使用音频前需要预先加载音频资源。配置json
var_curSound:egret.Sound = RES.getRes（"mysound"）；爆放
2.6.2.暂停音频及循环播放
暂停播放
1、与播放音频相同，在Egret中暂停音频播放只需要一个方法即可，该方法是Sound类中的pause。如果你想要暂停当前播放的音频，只需要执行如下代码即可：
2.6.3.网络通信及请求数据格式
网络
1、构建通信请求
2、读取不同的数据格式
3、POST和GET
4、发送带参数的请求
let urlRequest=new egret.URLRequest("http://192.168.0.5:3000/api/get");
let loader=new egret.URLLoader();
loader.dataFormat=egret.URLLoaderDataFormat.TEXT;
loader.load(urlRequest);
loader.addEventListener(egret.Event.COMPLETE,function(){
console.log(loader.data);
},this)
2.6.4.请求方式和参数携带
小游戏联机对战引擎
fighter
egret-fighter-master
已经si的项目jdg行
let urlRequest=new egret.URLRequest("http://192.168.0.5:3000/api/get");
urlRequest.method=egret.URLRequestMethod.GET;
urlRequest.data=new egret.URLVariables("name=123&age=456");
let loader=new egret.URLLoader();
loader.dataFormat=egret.URLLoaderDataFormat.TEXT;
loader.load(urlRequest);
loader.addEventListener(egret.Event.COMPLETE,function(){
console.log(loader.data);
},this)
Egret白鹭 - H5游戏开发入门视频课程
https://www.bilibili.com/video/BV1AJ411B7kT
egret run-a 命令来实时监听文件是否修改
GamePlay.exml sence 惨景
jdg si了
浙公网安备 33010602011771号