1. Introduction
The Demo uses a large number of EUI component skins, which are mainly developed in combination with VS and EUI.
two,
1. Create a new project (I am using the EUI project here, the latest version 5.4.1 – I heard there are many problems)
2. Resource management (build your own folders for easy management)
The Game folder of src is used to store game code, the game_skins of resource stores game skins, and Image stores game picture resources. Note: —game_skins remember to add it to the project configuration. 
3. Build skin
Open the Eui editor. If there is game_skins, it is correct. If not, it means that the change was not successful just now.
Next, you can right-click the folder to start creating a new skin. First, arrange the MainScene main page skin 
Here the image is the background, then add a group and add 4 ToggleButtons to the group, and then add ID tags for later reference when writing code. Create skins for other scenes in the same way.
Now the main scene MainScene and other scenes (players, heroes, items, about) are ready. Next, make the button skin and equipment template (the new skin component must be Button).
Then delete the light button in the Up state and delete the normal button in the Down state.
The skin for this button is ready, and the other three buttons are done in the same way.
Then make equipment and hero templates
{data.name} in the label is used to identify the replacement, while the image identification can be added to all attributes.
Such a hero template is created. In the same way, create an equipment template. 
Then just change the button skin of the scene just now to the created button skin. Now the entire skin equipment work is completed.
4. Write code
1) SceneMagager scene management
//Remove other scenes
private removeOther(scene){
let arr=[this.playScene,this.heroScene,this.articleScene,this.aboutscene];
arr.forEach((item)=>{
if(scene===item)
return
if(item.parent){
this.mainScene.removeChild(item);
}
})
}
//Go to the main scene
static toMainScene(){
let stage:egret.DisplayObjectContainer=this.instance._stage; //Root stage
let mainScene=SceneManager.instance.mainScene; //Main scene
//Determine whether there is a parent (instructions have been added to the scene)
//Load the main scene
console.log("Loading main scene");
stage.addChild(mainScene);
this.instance.removeOther(this);
mainScene.toggleBtn(0);
}
//Load player scene
static toPlayScene(){
this.instance.removeOther(this.instance.playScene);
//
this.instance.mainScene.addChild(this.instance.playScene);
}
//Load hero scene
static toHeroScene(){
this.instance.removeOther(this.instance.heroScene);
this.instance.mainScene.addChild(this.instance.heroScene);
}
//Load item interface
static toArticleScene(){
this.instance.removeOther(this.instance.articleScene);
this.instance.mainScene.addChild(this.instance.articleScene);
}
//Load about interface
static toAboutScene(){
this.instance.removeOther(this.instance.aboutscene);
this.instance.mainScene.addChild(this.instance.aboutscene);
}
2) MainScene() main scene
Then clear the createGameScene() content in Main.ts and add the code this.addChild(new MainScene), and then it can run.
3) PlayScene() player scene
class PlayScene extends eui.Component implements eui.UIComponent{
public Play_back:eui.Button;
public Oneclickreinforcement:eui.Button;
public Oneclickequipment:eui.Button;
public Equip_Scroller:eui.Scroller;
public Equip_list:eui.List;
public constructor(){
super();
this.skinName="resource/game_skins/PlayerScene.exml"
}
//
protected partAdded(partName: string, instance: any): void {
super.partAdded(partName,instance);
}
protected childrenCreated(): void {
super.childrenCreated();
//array data
let dataArr:any[]=[
{image:"resource/Image/profile/skillIcon01.png",name:"Spiral Dragon Fantasy Kill"},
{image:"resource/Image/profile/skillIcon02.png",name:"Demon Soul Dragon Curse"},
// {image:"resource/Image/profile/skillIcon03.png",mame:"Bloodthirsty Helmet"},
{image:"resource/Image/profile/skillIcon04.png",name:"Infatuation Curse"},
{image:"resource/Image/profile/skillIcon05.png",name:"无码久"},
{image:"resource/Image/profile/skillIcon06.png",name:"Batian Massacre"},
{image:"resource/Image/profile/skillIcon07.png",name:"Soul-killing Cyclonus"}
]
//Convert array data into EUI array
let euiArr:eui.ArrayCollection=new eui.ArrayCollection(dataArr);
//Use the eui array as the List data source
this.Equip_list.dataProvider=euiArr;
//hide progress bar
this.Equip_Scroller.horizontalScrollBar.autoVisibility=false;
//Monitor one-click equipment
this.Oneclickequipment.addEventListener(egret.TouchEvent.TOUCH_TAP,(e)=>{
SceneManager.toMainScene();
//Get the data source
let dataProvider=this.Equip_list.dataProvider;
let arr:string[]=[];
//Loop through all items in the data source
for(let i=0;i<dataProvider.length;i + + )
{
let item=dataProvider.getItemAt(i);
arr.push(item.name);
}
console.log("equipment" + arr)
SceneManager.showInfo(arr,"equip");
},this)
//Monitor one-click enhancement
this.Oneclickreinforcement.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
SceneManager.toMainScene();
SceneManager.showInfo(null,'strengthen');
},this)
//Listen to return
this.Play_back.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
SceneManager.toMainScene();
},this)
}
}
4) HeroScene() hero scene
class HeroScene extends eui.Component implements eui.UIComponent{
public Hero_back:eui.Button;
public Hero_confirm:eui.Button;
public Hero_Scroller:eui.Scroller;
public Hero_List:eui.List;
public constructor(){
super();
this.skinName="resource/game_skins/HeroScene.exml"
}
//
protected partAdded(partName: string, instance: any): void {
super.partAdded(partName,instance);
}
protected childrenCreated(): void {
super.childrenCreated();
//original array
let dataArr:any[]=[
{image:'resource/Image/heros_goods/heros01.png',name:'Efreya',value:'I desire a worthy opponent',isSelected:false},
{image:'resource/Image/heros_goods/heros02.png',name:'Wandering Mage',value:'I have penetrated the runes, you lose!',isSelected:false},
{image:'resource/Image/heros_goods/heros03.png',name:'Fiddlesticks',value:'I don't have a brain, but soon you won't either. ',isSelected:false},
{image:'resource/Image/heros_goods/heros04.png',name:'Evil Curse Master',value:'Your relatives and friends are suffering!',isSelected:false},
{image:'resource/Image/heros_goods/heros05.png',name:'Willump',value:'It's our turn!" Let's go! Willump',isSelected:false},
{image:'resource/Image/heros_goods/heros06.png',name:'Daughter of Darkness',value:'You smell like it's burnt! Hahaha',isSelected:false},
{image:'resource/Image/heros_goods/heros07.png',name:'Atwood',value:'All living creatures are subordinates!',isSelected:false},
]
//Convert array to Eui data
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(dataArr);
//Set list as eui data
this.Hero_List.dataProvider=Euiarr;
//Set the item renderer of the list
this.Hero_List.itemRenderer=HeroList;
//hide progress bar
this.Hero_Scroller.verticalScrollBar.autoVisibility=false;
//Listen to return and confirm buttons
this.Hero_back.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
SceneManager.toMainScene();
},this)
this.Hero_confirm.addEventListener(egret.TouchEvent.TOUCH_TAP,(e)=>{
SceneManager.toMainScene();
//Get the data source
let dataProvider=this.Hero_List.dataProvider;
let arr:string[]=[];
//Loop through all items in the data source
for(let i=0;i<dataProvider.length;i + + )
{
let item=dataProvider.getItemAt(i);
if(item.isSelected){
arr.push(item.name);
}
}
SceneManager.showInfo(arr,"hero");
},this)
//
}
}
5) Item scene
class ArticleScene extends eui.Component implements eui.UIComponent{
public Article_back:eui.Button;
public Article_Scroller:eui.Scroller;
public Article_list:eui.List;
public constructor(){
super();
this.skinName="resource/game_skins/ArticleScene.exml"
}
//
protected partAdded(partName: string, instance: any): void {
super.partAdded(partName,instance);
}
protected childrenCreated(): void {
super.childrenCreated();
//Raw data
let dataarr:any[]=[
{image:'resource/Image/heros_goods/goods01.png',name:'Corruption Potion',value:'Consume a layer of charge to restore 100 health and 75 mana'},
{image:'resource/Image/heros_goods/goods02.png',name:'Replacement Ragdoll',value:'Resist a fatal injury'},
{image:'resource/Image/heros_goods/goods03.png',name:'Bloodthirsty Ring',value:'Increase blood-stealing by 30% and increase attack power by 20'},
{image:'resource/Image/heros_goods/goods04.png',name:'Rune Hat',value:'Increase spell power by 50%'},
{image:'resource/Image/heros_goods/goods05.png',name:'Golden Legend',value:'Use once to increase movement speed by 50% for 5 seconds'},
{image:'resource/Image/heros_goods/goods06.png',name:'Void Staff',value:'Increase spell power by 50 and spell penetration by 35%'},
{image:'resource/Image/heros_goods/goods07.png',name:'Golden Holy Sword',value:'Increase critical hit rate by 20% and attack power by 50 points'}
]
//Convert array data to eui
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(dataarr);
//Convert list data source to eui
this.Article_list.dataProvider=Euiarr;
//hide progress bar
this.Article_Scroller.verticalScrollBar.autoVisibility=false;
//Listen to return
this.Article_back.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
SceneManager.toMainScene();
},this)
}
}
6)AboutScene() About the scene
class AboutScene extends eui.Component implements eui.UIComponent{
public About_back:eui.Button;
public About_text:eui.Label;
public constructor(){
super();
this.skinName="resource/game_skins/AboutScene.exml"
}
//
protected partAdded(partName: string, instance: any): void {
super.partAdded(partName,instance);
}
protected childrenCreated(): void {
super.childrenCreated();
//Set text content
this.About_text.text=`
Game name: Hero-Esfight
UIdesigner:Bestliu`
//Set the button to be clickable
this.About_back.touchEnabled=true;
//Listen to the return button
this.About_back.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
console.log("return")
SceneManager.toMainScene();
},this)
}
}
3. Operation results
