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 you have game_skins, you are right. 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
//移除其他场景
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);
}
})
}
//到主场景
static toMainScene(){
let stage:egret.DisplayObjectContainer=this.instance._stage; //根舞台
let mainScene=SceneManager.instance.mainScene; //主场景
//判断是否有父级（有说明添加到场景中了）
//加载主场景
console.log("加载主场景");
stage.addChild(mainScene);
this.instance.removeOther(this);
mainScene.toggleBtn(0);
}
//加载玩家场景
static toPlayScene(){
this.instance.removeOther(this.instance.playScene);
//
this.instance.mainScene.addChild(this.instance.playScene);
}
//加载英雄场景
static toHeroScene(){
this.instance.removeOther(this.instance.heroScene);
this.instance.mainScene.addChild(this.instance.heroScene);
}
//加载物品界面
static toArticleScene(){
this.instance.removeOther(this.instance.articleScene);
this.instance.mainScene.addChild(this.instance.articleScene);
}
//加载关于界面
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();
//数组数据
let dataArr:any[]=[
{image:"resource/Image/profile/skillIcon01.png",name:"旋龙幻杀"},
{image:"resource/Image/profile/skillIcon02.png",name:"魔魂龙咒"},
// {image:"resource/Image/profile/skillIcon03.png",mame:"嗜血盔"},
{image:"resource/Image/profile/skillIcon04.png",name:"痴情咒"},
{image:"resource/Image/profile/skillIcon05.png",name:"无间寂"},
{image:"resource/Image/profile/skillIcon06.png",name:"霸天屠杀"},
{image:"resource/Image/profile/skillIcon07.png",name:"灭魂狂飙"}
]
//数组数据转成EUI数组
let euiArr:eui.ArrayCollection=new eui.ArrayCollection(dataArr);
//把eui数组作为List数据源
this.Equip_list.dataProvider=euiArr;
//隐藏进度条
this.Equip_Scroller.horizontalScrollBar.autoVisibility=false;
//监听一键装备
this.Oneclickequipment.addEventListener(egret.TouchEvent.TOUCH_TAP,(e)=>{
SceneManager.toMainScene();
//拿到数据源
let dataProvider=this.Equip_list.dataProvider;
let arr:string[]=[];
//遍历数据源中的所有项
for(let i=0;i<dataProvider.length;i++)
{
let item=dataProvider.getItemAt(i);
arr.push(item.name);
}
console.log("装备"+arr)
SceneManager.showInfo(arr,"equip");
},this)
//监听一键强化
this.Oneclickreinforcement.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
SceneManager.toMainScene();
SceneManager.showInfo(null,'strengthen');
},this)
//监听返回
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();
//原始数组
let dataArr:any[]=[
{image:'resource/Image/heros_goods/heros01.png',name:'伊芙蕾雅',value:'我渴望有价值的对手',isSelected:false},
{image:'resource/Image/heros_goods/heros02.png',name:'流浪法师',value:'我已经参透了符文,你输了!',isSelected:false},
{image:'resource/Image/heros_goods/heros03.png',name:'费德提克',value:'我没有大脑,但很快你也会没有。',isSelected:false},
{image:'resource/Image/heros_goods/heros04.png',name:'邪恶咒师',value:'你的亲友们正在饱受折磨!',isSelected:false},
{image:'resource/Image/heros_goods/heros05.png',name:'威朗普',value:'该我们了!”我们上吧!威朗普',isSelected:false},
{image:'resource/Image/heros_goods/heros06.png',name:'黑暗之女',value:'你闻起来就像烧焦了一样!哈哈哈',isSelected:false},
{image:'resource/Image/heros_goods/heros07.png',name:'亚特伍德',value:'凡有活物,皆为臣属!',isSelected:false},
]
//将数组转为Eui数据
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(dataArr);
//把list设置为eui数据
this.Hero_List.dataProvider=Euiarr;
//设置list的项呈现器
this.Hero_List.itemRenderer=HeroList;
//隐藏进度条
this.Hero_Scroller.verticalScrollBar.autoVisibility=false;
//监听返回和确认按钮
this.Hero_back.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
SceneManager.toMainScene();
},this)
this.Hero_confirm.addEventListener(egret.TouchEvent.TOUCH_TAP,(e)=>{
SceneManager.toMainScene();
//拿到数据源
let dataProvider=this.Hero_List.dataProvider;
let arr:string[]=[];
//遍历数据源中的所有项
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();
//原始数据
let dataarr:any[]=[
{image:'resource/Image/heros_goods/goods01.png',name:'腐败药水',value:'消耗一层充能回复100生命值和75法力值'},
{image:'resource/Image/heros_goods/goods02.png',name:'替身布偶',value:'抵挡一次致命伤害'},
{image:'resource/Image/heros_goods/goods03.png',name:'嗜血戒',value:'提升30%吸血，增加20攻击力'},
{image:'resource/Image/heros_goods/goods04.png',name:'符文帽子',value:'提升50%的法术强度'},
{image:'resource/Image/heros_goods/goods05.png',name:'金色传说',value:'使用一次5秒内提升50%移动速度'},
{image:'resource/Image/heros_goods/goods06.png',name:'虚无法杖',value:'提升50法术强度以及35%法术穿透'},
{image:'resource/Image/heros_goods/goods07.png',name:'金色圣剑',value:'提升20%暴击率和50点攻击力'}
]
//将数组数据转为eui
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(dataarr);
//将list数据源转为eui
this.Article_list.dataProvider=Euiarr;
//隐藏进度条
this.Article_Scroller.verticalScrollBar.autoVisibility=false;
//监听返回
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();
//设置文本内容
this.About_text.text=`
游戏名：Hero-Esfight
UIdesigner:Bestliu`
//设置按钮可点击
this.About_back.touchEnabled=true;
//监听返回按钮
this.About_back.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
console.log("返回")
SceneManager.toMainScene();
},this)
}
}3. Operation results
