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。