egret(白鹭引擎) 学习历程（二）

昨日因个人原因没能及时更新，今天补上！！！！

上接上一篇文章

三：资源配置
1: 在onConfigComplete的最后，有一行加载资源组的代码： RES.loadGroup("preload");
loadGroup 就是用来加载资源组的。
2：资源加载结束：资源加载结束后，我们需要判断所加载的资源是哪个资源组的，所以在onResourceLoadComplete中的if条件中就是需要加载的资源组。
3：Egret将会加载的xxxx资源组，并且程序执行到createGameScene时，资源组已经加载完成。
四：资源配置规则：
配置文件中的”resource”我们可以视为资源库，当前游戏使用到的资源都可以放到这里。其中以资源为单位分别列出。每一项资源单位都包含三个属性：
name：表示这个资源的唯一标识符。注意资源比较多的项目应确定一套命名规则，避免不同资源命名之间重复或太接近而易混淆。

type：表示资源类型。紧跟着会进一步讲解其含义及取值规则。

url：表示当前资源文件的路径。通常我们约定配置类型的资源置于config子目录下；其他类型置于assets子目录下。

每个”resource”单位中的type，是Egret约定好的若干类型，最常用的有以下类型：

image：表示各种常见的图片类型，包括PNG和JPG格式，载入后将解析为egret.Texture对象；

text：表示文本类型，即文本文件，载入后将解析为string对象；

json：也是一种文本类型，不过内容是json格式的，载入后将直接解析为json对象；

很多情况下，我们在某种游戏场合，需要同时加载若干资源，用以准备后续的游戏流程显示。Egret已经考虑到这种情况，使得我们可以将若干项资源定义为一个资源组。需要时，只需加载这个资源组即可。 “groups

”是预加载资源组的配置，每项是一个资源组。每一个资源组须包含两个属性：

name：表示资源组的组名

keys：表示这个资源组包含哪些资源，里面的逗号分隔的每一个字符串，都与”resource”下的资源name对应。
五：加载资源代码分析：
加载资源的过程整体分为两部分，第一步首先加载资源配置清单，第二步就是加载资源。

在onAddToStage方法中，有代码：

RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE,
this.onConfigComplete, this); RES.loadConfig("resource/resource.json",
"resource/");
这是专门用来加载资源配置的代码。首先添加一个针对CONFIG_COMPLETE事件的侦听，然后执行加载。配置加载完成时，即会执行onConfigComplete方法。

接着，加入了对资源组事件的侦听。

首先是对资源组加载完成的侦听，这是必须的，因为程序的流程需要从这里进行，即程序需要在某种资源加载完成后进行预期的后续流程。另外，任何加载都需要稳定的网络，而网络出现各种中断是很常见的情况，所以需要添

加对加载错误事件的侦听，以在这种情况作出相应的处理，通常是重新加载或者是提示用户检查网络。可选的，可以加入对加载进度的侦听，通常是通过某种样式的进度条显示给用户当前进度，这在所加载的内容需要耗时较长

时对于用户体验非常重要。

在加载完成的处理，即onResourceLoadComplete中，通过检查当前加载完成的资源组名称，来做对应的处理。确认当前加载的资源组是heroes后，便进入程序的正式流程createGameScene中。
六：显示图片：
1：Bitmap:
显示所需的图片，在Egret对应的类就是Bitmap。使用Bitmap创建一个图片时，在其构造函数中传入RES载入的资源，这里取得的是一个图片的资源，图片资源通过getRes获得的将是一个Texture对象。
var testImg:egret.Bitmap = new egret.Bitmap(RES.getRes("hero-01"));
testImg.x = 20;
testImg.y = 20；
testImg.height = 100;
testImg.width = 200;
super.addChild (testImg);
七：显示深度设置：
1:获取深度：this.getChildIndex()
2:改变深度：this.setChildIndex(name,value)
3:关于显示深度的规则：
A. 某一个显示深度只能对应一个显示对象，一个显示对象也只能有一个显示深度。
B. 显示深度总是从零开始连续的，当某个深度位置的显示对象被设置为其他深度时，原来的深度会自动被紧邻的比其深度值大1位置的显示对象占据，后续深度位置的显示对象会依次往前排。
C. 某一容器内的显示列表的深度最大值是显示列表长度-1。
可以理解每个深度位置是一个房间，这些房间从0开始依次编号。每个显示对象是一个人，显示列表维护总要确保每个人在一个自己的房间，并且这些房间之间没有空的，除非这些人都从0开始排满了前面的房间。

4:交换显示深度:this.swapChildren(name1,name2);

八：Tween动画效果:
1:锚点：锚点。锚点用另一个易于理解的词来说，就是定位点。因此锚点是只存在于显示对象的概念。并且锚点是对显示对象自身设置的。由于是用于坐标定位，锚点自然地包含了两个部分：X方向锚点和Y方向锚点。锚点的

设置是通过给出一个相对于显示对象本身的坐标值来实现的。具体来说就是以显示对象本身的左上角作为原点的，取值就是具体的像素值。使用显示对象属性anchorOffsetX和anchorOffsetY来设置坐标值锚点。

注：判断三种状态：
this.times = -1;
var self = this;
this.stage.addEventListener( egret.TouchEvent.TOUCH_TAP, function(){ switch ( ++ self.times % 3 ) { case 0: break; case 1: break; case 2: break; } }, this );

这里先熟悉一下Tween的基本用法。 Tween.get内传入需要对其进行动画控制的对象，并返回一个Tween对象。然后可以设置Tween对象的动画，即调用to方法。 to方法包含三个参数。首先是动画目标属性组，这个参数可以对目

标对象本身的各项属性进行设定，就是动画结束时的状态，可以设定一个或多个属性。第二个参数是动画时间，以毫秒计。第三个参数是补间方程，即对动画区间内每个时间点的属性值设定分布。在egret.Ease已经提供了丰

富的补间方程，可以根据自己的喜好选择。
egret.Tween.get(name1).to({x:name2.x},300,egret.Ease.circIn);//参数分别为目标对象、to里面分别动画目标、动画时间、动画过渡方式。注1：alpha(透明度)
九：加入声音：
声音资源配置
跟图片一样，声音也必须作为资源加载才可以播放。首先我们要先将准备好的声音文件放入到assets文件夹。

var sound:egret.Sound = RES.getRes( "bonus.mp3" );
var channel:egret.SoundChannel = sound.play(0,1);

上面的代码生成了一个 sound 对象并调用 sound 的 play 方法，其中的第一个参数 0 表示播放的开始时间，第二个参数表示播放次数，这里我们只播放一次，如果将第二个参数设置为负数将循环播放。该方法返回了一个

SoundChannel 对象。通过操作 channnel 对象可以控制声音的音量大小停止播放等。

十：网络通讯：

URLRequest 类封装了进行HTTP请求所需要的所有信息。常用的HTTP请求有GET/POST两种类型。当进行HTTP请求时，可以直接在URLRequest实例上设置请求类型和实际数据。

HTTP请求首先需要URL，我们准备了一个专用于测试的URL，其返回当前浏览器的代理信息： http://httpbin.org/user-agent

使用URLRequest类，就要创建其实例，通常在构造函数中传入URL即可：

var urlreq:egret.URLRequest = new egret.URLRequest( "http://httpbin.org/user-agent" );
URLLoader
URLRequest只是一个信息集合，实际通讯需要使用URLLoader。 URLLoader必须使用一个URLRequest实例来发挥作用，并且为了得到返回结果，需要加一个事件监听，代码如下：

var urlloader:egret.URLLoader = new egret.URLLoader; urlloader.addEventListener( egret.Event.COMPLETE, function( evt:egret.Event ):void{
console.log(evt.target.data);
}, this );
urlloader.load( urlreq );
编译运行，没有错误的话，控制台将会输出类似的代理信息log：

{ "user-agent": "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36" }
使用WebSocket通讯
众所周知，WebSocket为Web应用提供了更高效的通讯方式。本节介绍WebSocket的基本用法。

确保项目支持WebSocket
从Egret1.5.0开始，以官方扩展模块的形式支持WebSocket。在现有的Egret项目中，修改egretProperties.json中的"modules"，成为：

"modules": [ {"name": "core"}, {"name": "socket"} ],
在项目所在目录内执行一次引擎编译：
egret build -e

本步骤已经完成，现在项目中既可以使用WebSocket相关的API了。

WebSocket客户端用法
我们通过一个最简单的示例来学习。

所有的通讯都是基于一个WebSocket实例，首先创建WebSocket对象。
首先看基本代码。

private webSocket:egret.WebSocket;
private createGameScene():void { this.webSocket = new egret.WebSocket();
this.webSocket.addEventListener(egret.ProgressEvent.SOCKET_DATA, this.onReceiveMessage, this);
this.webSocket.addEventListener(egret.Event.CONNECT, this.onSocketOpen, this);
this.webSocket.connect("echo.websocket.org", 80);

}
WebSocket对象主要有两个事件，一个是连接服务器成功，另一个是收到服务器数据。在正常的网络交互中，这两个事件都是要必须侦听的。
加入侦听事件后，即可连接服务器。注意像所有的通讯协议一样，服务器需要支持WebSocket协议，为便于测试，WebSocket官方提供了一个专用于测试的服务器echo.websocket.org，连接其80端口即可测试。

在连接成功后，即可发送消息，消息的具体格式都是根据情况自己定义的，通常是json格式，便于解析。当然可以自定义其他的字符串格式：

private onSocketOpen():void { var cmd = "Hello Egret WebSocket"; console.log("The connection is successful, send data: " + cmd); this.webSocket.writeUTF(cmd); }
服务器根据约定的格式个客户端发送消息，则会触发SOCKET_DATA事件，在其事件处理函数onReceiveMessage中即可读取消息，读取到字符串后，即可根据约定的格式解析：

private onReceiveMessage(e:egret.Event):void { var msg = this.webSocket.readUTF(); console.log("Receive data:" + msg); }
编译运行，没有错误的话，控制台将会输出如下log信息：

The connection is successful, send data: Hello Egret WebSocket Receive data: Hello Egret WebSocket

十一：自动生成index.html 的文件说明

1:加载 js 文件
modules_files
通过 egretProperties.json 生成的 js 文件列表，生成的文件在 libs/modules 下。执行 egret build [projectName] -e 会清理 libs/modules 文件夹。

other_libs_files
自定义所需要加入的其他的第三方库的文件。需要填写 egret=”lib” 以及 src-release。在这个块中script不会被自动替换以及清理。切记不要把这种使用方式的文件放在 libs/modules 下。

game_files
项目中使用的文件。在使用了 egret build -e 或者存在文件增、删时会有变动。这个块的 script 均为自动生成，请勿修改。

2:运行配置

data-entry-class：文件类名称。 egretProperties.json 不再需要配置这个。
data-orientation：旋转模式。
data-scale-mode：适配模式。
data-frame-rate：帧频数。
data-content-width：游戏内stage宽。
data-content-height：游戏stage高。
data-show-pain-rect：是否显示脏矩形区域。
data-multi-fingered：多指最大数量。
data-show-fps：是否显示fps。
data-show-log：是否显示egret.log输出出来的信息。这些会在fps的下面显示出来，和console.log不一样。前提是fps必须打开。
data-log-filter：只显示过滤的log。
data-show-fps-style：fps面板的样式。目前只支持4种，x:0, y:0, size:30, textColor:0xffffff。

egret(白鹭引擎) 学习历程（二）相关推荐

Egret白鹭引擎开发微信小游戏之保存图片到相册
玩家在玩小游戏的过程中,很多时候想要保存一下当前的截图.或者保存游戏内精美的画面到相册,一方面是为了记录在游戏中的美好时刻,另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐,因为我们就会 ...
egret 白鹭引擎遇到的问题和解决方案
egret 白鹭引擎遇到的问题和解决方案参考文章: (1)egret 白鹭引擎遇到的问题和解决方案 (2)https://www.cnblogs.com/dt1991/p/11642741.html ...
egret白鹭引擎RES资源管理模块，资源动态加载失效BUG，加载卡死BUG，完整解决方案与超详细调试漏洞过程
我是千里马,是一位软件工程师,最近几天完成了用户中心全套内容设计和游戏中大大小小的各种bug处理解决,准备开始游戏的正式填充,突然想起来还有两件抛之脑后的事情没有做.因为之前一直都是忙碌大方向内容设计 ...
TexturePacker 导出 Egret(白鹭引擎）格式的图集和图片字体
TexturePacker 导出 Egret(白鹭引擎)格式的图集(egretSheet)和图片字体(egretFont)补丁 https://github.com/chengyoujie/Textu ...
Egret白鹭引擎初始介绍及简单应用
白鹭简介白鹭引擎是一套完整的H5游戏开发的解决方案,这个引擎中包含多个工具和项目,使用白鹭引擎可以轻松实现H5的游戏的开发. 使用EgretEngine开发的游戏可发布为HTML5版本,运行于 ...
Egret 白鹭引擎实践
官网地址: http://cn.egret.com/ 官方提供的Examples https://github.com/egret-labs/egret-examples Egret-Core源码 h ...
白鹭引擎学习笔记（二）
显示对象注:在 egret 中建立显示对象和渲染显示对象是两个过程,建立显示对象后,对象会处于内存中, 但不会参与渲染过程,只有把显示对象放到显示列表后,显示对象才会参与渲染过程, 如果想将某个显示 ...
Egret(白鹭引擎)——Egret+fairyGui 实战项目入门
前言一行白鹭上青天需求最近,我们老板刷刷的为了省事,给美术减压(背景有点长,不说了). 美术出 fairygui,我需要在网页上看到实时操作,并且看到效果! 需求分析这怕是要了我的狗命啊,但是 ...
白鹭引擎生成html,初识Egret白鹭引擎之创建舞台
简述随着Html5游戏的逐渐普及,了解一款开发引擎,对于开发者是很有帮助的.目前国内比较流行的html5游戏引擎有:cocosCreator.Egret.Laya.今天就给大家详细介绍下当前比较流行 ...

egret(白鹭引擎) 学习历程（二）

egret(白鹭引擎) 学习历程（二）相关推荐

最新文章

热门文章