一、简介
Demo用到了大量的EUI组件皮肤，主要结合VS和Eui开发完成。
二、
1.新建项目（这里我用的是EUI项目，5.4.1最新版本—听说问题多）
2.资源管理（建好自己的文件夹，以便管理）
src的Game文件夹用来存储游戏代码，resource的game_skins存游戏皮肤，Image存游戏图片资源。注意：---game_skins记得添加到项目配置中去。
3.建皮肤
打开Eui编辑器，有game_skins就对了，没有就是刚刚没改成功。
接下来可以右键文件夹开始新建皮肤了，先布置好MainScene主页面皮肤
这里image为背景，然后添加一个组并往组里加4个ToggleButton切换按钮，然后加好ID标签，以便之后编写代码引用。同理建好其他场景皮肤。
这下主场景MainScene和其他场景（玩家，英雄，物品，关于）就做好了。接下来制作按钮皮肤和装备模板（新建的皮肤组件得是Button)。
然后在状态Up下删除亮起按钮，在状态Down下删除正常按钮，
这个按钮皮肤就做好了，同理做好其他三个按钮
然后制作装备和英雄模板
label中{data.name}用来标识替换的，而图片的标识则去全部属性加即可
这样一个英雄的模板就建好了。同理建好装备模板。
然后将刚刚场景的按钮皮肤改为建好的按钮皮肤即可，这下整个皮肤的装备工作就完成了。
4.编写代码
1）SceneMagager场景管理
//移除其他场景
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.ts中的createGameScene()内容清空并加上代码this.addChild(new MainScene)，然后可以运行了。
3）PlayScene()玩家场景
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()英雄场景
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）物品场景
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() 关于场景
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)
}
}三、运行结果
