打开 Egret Wing，新建一个Egret游戏项目，然后删掉默认生成的createGameScene方法里面的东西
然后新建一个BeginScene.ts的文件，作为我们的游戏的第一个场景
class BeginScene extends egret.DisplayObjectContainer {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
}
public Init() {
let begin = new egret.TextField();
begin.text = "Click Begin"
begin.size = ;
this.addChild(begin)
begin.x = (GameConfig.SceneW - begin.width) / ;
begin.y = GameConfig.SceneH/;
}
}
然后我们再Main.ts里面的createGameScene方法把这个场景添加到里面
/**
* 创建游戏场景
* Create a game scene
*/
private createGameScene()
{
/**
* 添加开始场景
*/
this.beginScene = new BeginScene();
this.beginScene.width = GameConfig.SceneW;
this.beginScene.width = GameConfig.SceneH;
this.addChild(this.beginScene) }
然后点击Wing的调试按钮，这时候不出意外的话，模拟器中间上就会显示出Click Begin的字，（如果使用Chrome调试的话，那么最好切换到手机模式）
光秃秃的几个字看起来也有点尴尬，我们再来给当前场景弄一个背景层
再在src下新建一个文件 BgContent.ts 然后编写如下代码
/**
* 背景
*/
class BgContent extends egret.DisplayObjectContainer {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
} public Init(): void {
var shp: egret.Shape = new egret.Shape();
shp.graphics.beginFill(0x000000, );
shp.graphics.drawRect(, , GameConfig.SceneW, GameConfig.SceneH);
shp.graphics.endFill();
this.addChild(shp);
}
}
这个背景层就是一个黑色的背景，如果需要自己加图片或者其他的样式，就直接在Init里面写自己的逻辑就行了
加上背景之后，我们再次把这个背景层添加到Main.ts里面
/**
* 创建游戏场景
* Create a game scene
*/
private createGameScene() { /**
* 添加背景层
*/
var bg = new BgContent();
bg.name = "bg";
this.addChildAt(bg, )
/**
* 添加开始场景
*/
this.beginScene = new BeginScene();
this.beginScene.width = GameConfig.SceneW;
this.beginScene.width = GameConfig.SceneH;
this.addChild(this.beginScene) }
添加到场景的，egret给我们提供了addChildAt和addChild两个方法，前面一个是可以设置容器对象的深度，可以控制对象渲染的层级，比如显示到前面或者后面，后面一个方法，我的理解就是（先添加就先渲染，后添加就后渲染，后添加的就显示在前面）
然后再次点击调试按钮，运行我们的代码
然后开始界面就做好了。
好了，我也要睡觉去了，眼睛都有点疼了