居然使用 TyptScript...
先贴手册地址：http://www.typescriptlang.org/docs/tutorial.html。
先要接受一个诡异的写法：
private loadingView:LoadingUI;
- 首先支持了 private、public
- 类的对象名在前：loadingView
- 类的类型名在后：LoadingUI（在JS上封装出了强类型？）
TyptScript 的特性：
- 类 Classes
- 接口 Interfaces
- 模块 Modules
- 类型注解 Type annotations
- 编译时类型检查 Compile time type checking
- Arrow 函数 (类似 C# 的 Lambda 表达式)
只能说微软的人硬是要用 C# 的语法特性重新封装一下 JS 让自己更顺手么 - -。
Module：
略微看了下 Modules 的作用，提供了 export 与 import 关键字，那就很明白了：模块与模块之间是不透明的，允许其他模块使用的资源需要用 export 声明，引用其他模块资源时需要用 import 进口。
Function：
function 函数名：参数列表：返回值类型 { 函数内容 }
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number { return x+y; };
开始 Egret 之旅：
先上 API 参考：http://edn.egret.com/cn/index.php/apidoc/egret243/。
第一个 demo - createGameScene():
private createGameScene():void {
console.log("Runtime start.");
this.stage.width = 480;
this.stage.height = 960;
var bg: egret.Shape = new egret.Shape(); // Shape 绘制块状区域
bg.graphics.beginFill(0x0000ff);
bg.graphics.drawRect(0, 0, this.stage.width, this.stage.height);
bg.graphics.endFill();
this.addChild(bg); // 刷新到屏幕
var tx: egret.TextField = new egret.TextField(); // TextField 控制文本块
tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!";
tx.x = 20;
tx.y = 20;
tx.width = this.stage.width - 40;
this.addChild(tx);
tx.touchEnabled = true; //激活 touch
tx.addEventListener(egret.TouchEvent.TOUCH_TAP, this.touchHandler, this); //增加事件监听
console.log("Runtime end.");
}
private touchHandler(evt:egret.TouchEvent):void{ //事件处理API
var tx:egret.TextField = evt.currentTarget;
tx.textColor = 0x00ff00;
}
资源配置：
Resoure 目录下的 default.res.json 是资源清单文件，每一项资源都包含 name、type、url 三个属性。
name：表示这个资源的唯一标识符。注意资源比较多的项目应确定一套命名规则，避免不同资源命名之间重复或太接近而易混淆。
type：表示资源类型。紧跟着会进一步讲解其含义及取值规则。
-
url：表示当前资源文件的路径。通常我们约定配置类型的资源置于config子目录下；其他类型置于assets子目录下。
-
每个”resource”单位中的type，是Egret约定好的若干类型，最常用的有以下类型：
image：表示各种常见的图片类型，包括PNG和JPG格式，载入后将解析为egret.Texture对象；
text：表示文本类型，即文本文件，载入后将解析为string对象；
json：也是一种文本类型，不过内容是json格式的，载入后将直接解析为json对象；
-
我们在某种游戏场合，需要同时加载若干资源，用以准备后续的游戏流程显示。我们可以将若干项资源定义为一个资源组。需要时，只需加载这个资源组即可。 “groups”是预加载资源组的配置，每项是一个资源组。 每一个资源组须包含两个属性：
name：表示资源组的组名
keys：表示这个资源组包含哪些资源，里面的逗号分隔的每一个字符串，都与”resource”下的资源name对应。
白鹭的这张图还是具有代表性的：
资源加载：
非常简单明了的逻辑：清单加载监听 -- 加载清单 -- 关闭清单监听 -- 开启资源组加载监听 -- 按需加载资源组 -- 加载完资源后关闭监听。
RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this); //加载配置清单事件监听
RES.loadConfig("resource/default.res.json", "resource/"); //加载配置清单
private onConfigComplete(event:RES.ResourceEvent):void { //回调 -- 加载清单完成时
RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this); //移除加载清单监听
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this); //资源组加成完成监听
RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this); //资源组加载错误监听
RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this); //资源组加载进度监听
RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
RES.loadGroup("preload");
}
private onResourceLoadComplete(event:RES.ResourceEvent):void { //回调 -- 资源组加载完成时
if (event.groupName == "preload") {
this.stage.removeChild(this.loadingView); //删除进度条
RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this); //移除各类监听
RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
this.createGameScene();
}
}
资源管理的统一入口是全局的 “RES” 命名空间里的 API。
Stage 可通过设置子项的“显示优先级”来控制层次：
this.setChildIndex( captain, 2);
来做一个官网 超级英雄的例子：
1. 先把4个超级英雄P出来做成资源，放入 Resource 目录的 asserts 文件夹下。
2. 配置 default.res.json，新增一个资源组。
3. 在 Main 中，将加载 preload 改成加载 heroes 资源组。
private createGameScene():void {
var bg:egret.Shape = new egret.Shape();
bg.graphics.beginFill(0x336699);
bg.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);
bg.graphics.endFill();
this.addChild(bg);
var batman:egret.Bitmap = new egret.Bitmap(RES.getRes("hero1_png"));
batman.x = 10;
batman.y = 20;
this.addChild(batman);
var captain:egret.Bitmap = new egret.Bitmap(RES.getRes("hero2_png"));
captain.x = 130;
captain.y = 20;
this.addChild(captain);
var superman:egret.Bitmap = new egret.Bitmap(RES.getRes("hero3_png"));
superman.x = 250;
superman.y = 20;
this.addChild(superman);
var hulk:egret.Bitmap = new egret.Bitmap(RES.getRes("hero4_png"));
hulk.x = 370;
hulk.y = 20;
this.addChild(hulk);
console.log("Display indexes:", this.getChildIndex(bg), this.getChildIndex(batman), this.getChildIndex(captain), this.getChildIndex(superman), this.getChildIndex(hulk));
this.swapChildren(superman, hulk);
console.log("Display indexes:", this.getChildIndex(bg), this.getChildIndex(batman), this.getChildIndex(captain), this.getChildIndex(superman), this.getChildIndex(hulk));
hulk.anchorOffsetX = 30; //设置锚点 -- 将图片上的某个点设置为原点，可用作为该图标的代表将其部署在一个相对于画布原点的坐标上
hulk.anchorOffsetY = 40;
hulk.x += 30; //修正设置锚点带来的偏移
hulk.y += 40;
this.times = -1;
var self = this;
this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP,() => { //蛮做了一个测试，可以用类似C#的匿名函数写法，也可以用 function() 代替 () =>
switch(++self.times % 3){
case 0:
egret.Tween.get(batman).to({x:superman.x}, 300, egret.Ease.circIn); //get:激活一个对象为其添加动画，x:修改其横坐标属性
egret.Tween.get(superman).to({x:batman.x}, 300, egret.Ease.circIn); //to:修改其属性 - para1：目标状态，param2：持续时间，param3：补间方程
break;
case 1:
egret.Tween.get(captain).to({alpha:0.3}, 300, egret.Ease.circIn).to({alpha:1}, 300, egret.Ease.circIn); //alpha：修改其透明通道属性
break;
case 2:
egret.Tween.get(hulk).to({scaleX:0.4, scaleY:0.4}, 500, egret.Ease.circIn).to({scale:1, scaleY:1}, 500, egret.Ease.circIn); //scaleX、scaleY:修改其缩放比例属性
break;
}
}, this);
}