Open Egret Wing, create a new Egret game project, and delete the createGameScene method generated by default

 

Then create a new beginScene.ts file as the first scene of our game

1 class BeginScene extends egret.DisplayObjectContainer { 2 public constructor() { 3 super(); 4 this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this) 5 } 6 7 public Init() { 8 let begin = new egret.TextField(); 9 begin.text = "Click Begin" 10 begin.size = 50; 11 12 this.addChild(begin) 13 begin.x = (GameConfig.SceneW - begin.width) / 2; 14 begin.y = GameConfig.SceneH/2; 16 15}}Copy the code

We then add the scene to the Main. Ts createGameScene method

/** * Create a game scene */ private createGameScene() {/** * add a game scene */ this.beginScene = new beginScene (); this.beginScene.width = GameConfig.SceneW; this.beginScene.width = GameConfig.SceneH; this.addChild(this.beginScene) }Copy the code

Then Click on the Wing debug button, and the word Click Begin should appear in the middle of the emulator (preferably in mobile mode if you’re debugging using Chrome).

 

The bare words look a little awkward, so let’s create a background layer for the current scene

Create a new file bgContent.ts under SRC and write the following code

/ * * * * / class background 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, 1); shp.graphics.drawRect(0, 0, GameConfig.SceneW, GameConfig.SceneH); shp.graphics.endFill(); this.addChild(shp); }}Copy the code

The background layer is a black background, and if you need to add images or other styles, just write your own logic in Init

After adding the background, we add the background layer to main.ts again

/** * Create a game scene */ private createGameScene() {/** * add a background layer */ var bg = new BgContent(); bg.name = "bg"; This.addchildat (bg, 0) /** * Add the start scene */ this.beginScene = new beginScene (); this.beginScene.width = GameConfig.SceneW; this.beginScene.width = GameConfig.SceneH; this.addChild(this.beginScene) }Copy the code

AddChildAt and addChild are two egret methods that you can add to the scene. The first one is to set the depth of the container object, and you can control the rendering level of the object, such as display to the front or back. The second one is to add to render first, add to render later. The last ones are shown first.)

Then hit the debug button again to run our code

And then the start screen is ready.

Well, I’m going to bed, too. My eyes are a little sore