1. Summary
This article mainly talks about the development process of the main page of this game from 0 to 1, using a large number of components and Eui skins.
2. Video demonstration
3. Development content
1. Load the page
Just set this in the original LodingUI.
private createView(): void {
// //加载背景
let loding_bg1=utils.createBitmapByName('dljm_logo_png');
let loding_bg2=utils.createBitmapByName('qbbb_baoxiangk_png');
loding_bg1.anchorOffsetX=loding_bg1.width/2;
loding_bg1.anchorOffsetY=loding_bg1.height/2;
loding_bg1.x=Main.stageW/2;
loding_bg1.y=Main.stageH/2-200;
loding_bg2.width=Main.stageW;
loding_bg2.height=Main.stageH;
//加载提示
this.textField = new egret.TextField();
this.textField.width = 480;
this.textField.size=60;
this.textField.height = 100;
this.textField.textAlign = "center";
this.textField.anchorOffsetX=this.textField.width/2;
this.textField.anchorOffsetY=this.textField.height/2;
this.textField.x=Main.stageW/2;
this.textField.y=Main.stageH/2;
this.addChild(loding_bg2);
this.addChild(loding_bg1);
this.addChild(this.textField);
}
public onProgress(current: number, total: number): void {
this.textField.text = `Loading...${current}/${total}`;
}2. Login interface
There is an exit button here to exit the game. The exit interface is as follows
3. Main page
The main page is mainly divided into four parts
1) Button part:
The main button to jump to the page needs to set the interactive state when pressed.
*Store button: Let’s talk about it below
*Item Button: Let’s talk about it below
* Setting button: This is mainly used to control the sound volume
//默认系统声音大小
this.sys_sound.getChildAt(1).addEventListener(egret.Event.ADDED,function(){
this.getChildAt(1).value=bgSound._volume*100;
},this.sys_sound)
this.music_sound.getChildAt(1).addEventListener(egret.Event.ADDED,function(){
this.getChildAt(1).value=bgSound._volume*100;
},this.music_sound)
//替换系统声音值
this.sys_sound.getChildAt(1).addEventListener(egret.Event.CHANGE,
function(){
this.getChildAt(2).text=this.getChildAt(1).value+'%';
bgSound.setVolume(this.getChildAt(1).value/100);
},this.sys_sound)
this.music_sound.getChildAt(1).addEventListener(egret.Event.CHANGE,
function(){
this.getChildAt(2).text=this.getChildAt(1).value+'%';
bgSound.setVolume(this.getChildAt(1).value/100);
},this.music_sound)2) Resource section:
Mainly used to buy masonry, including the recharge interface
//充值
this.Recharge.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
let rect:eui.Rect=new eui.Rect();
rect.width=this.stage.width;
rect.height=50;
rect.y=this.stage.height/2;
rect.alpha=0.5;
let text:eui.Label=new eui.Label();
text.text="您的余额不足！！！";
text.size=40;
text.width=rect.width/2;
text.textAlign='left'
text.height=50;
text.x=rect.x+rect.width/2-100;
text.y=rect.y;
this.stage.addChild(rect);
this.stage.addChild(text);
//设置定时
let timer:egret.Timer=new egret.Timer(3000,1);
timer.start();
timer.addEventListener(egret.TimerEvent.TIMER,()=>{
console.log(1);
this.stage.removeChild(rect);
this.stage.removeChild(text);
},this)
},this)
//监听加减
this.Recharge_reduce.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
if(parseInt(this.Recharge_number.text)==0) return;
this.Recharge_number.text=(parseInt(this.Recharge_number.text)-1).toFixed();
},this)
this.Recharge_increase.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.Recharge_number.text=(parseInt(this.Recharge_number.text)+1).toFixed();
},this)
The replacement of the icon UI of the interface is received from the sequence number of the click event, and then the picture is replaced, and the plus and minus buttons control the intermediate value.
3) Hero introduction part:
The attributes of the hero are obtained by clicking on the hero pool List.
//数据控制
//默认选中项
this.hero_list.selectedIndex=0;
//监听按下键,进行属性替换
this.hero_list.addEventListener(eui.UIEvent.CHANGE,()=>{
this.fight.visible=this.hero_list.selectedItem.isfight;
this.per_image.source=this.hero_list.selectedItem.image; //换图
this.per_name.text=this.hero_list.selectedItem.name; //换名字
this.per_attack.value=this.hero_list.selectedItem.attack;//换属性
this.per_defense.value=this.hero_list.selectedItem.defense;
this.per_Health_value.value=this.hero_list.selectedItem.Health_value;
this.per_element.value=this.hero_list.selectedItem.element;
this.per_strength.value=this.hero_list.selectedItem.strength;
this.attack_text.text=this.per_attack.value+"/200"; //换文本
this.defense_text.text=this.per_defense.value+"/500";
this.Health_value_text.text=this.per_Health_value.value+"/1000";
this.element_text.text=this.per_element.value+"/1000";
this.strength_text.text=this.per_strength.value+"/1000";
},this)
4) Hero pool
//加载英雄
let dataArr:any[]=[
{image:'resource/image/hero/R_12.png',name:'朵莉亚',attack:50,defense:100,Health_value:200,element:500,strength:500,isfight:false},
{image:"resource/image/hero/R_1.png",name:"紫萱",attack:100,defense:80,Health_value:150,element:200,strength:600,isfight:false},
{image:"resource/image/hero/R_2.png",name:"哲也",attack:110,defense:50,Health_value:200,element:500,strength:500,isfight:false},
{image:"resource/image/hero/R_3.png",name:"魔理沙",attack:120,defense:70,Health_value:200,element:600,strength:300,isfight:false},
{image:"resource/image/hero/R_4.png",name:"伊蕾娜",attack:140,defense:60,Health_value:200,element:450,strength:600,isfight:false},
{image:"resource/image/hero/R_5.png",name:"里绫火",attack:160,defense:30,Health_value:100,element:600,strength:400,isfight:false},
{image:"resource/image/hero/R_6.png",name:"濑时矢",attack:130,defense:90,Health_value:150,element:110,strength:650,isfight:false},
{image:"resource/image/hero/R_7.png",name:"埃札瓦",attack:150,defense:50,Health_value:150,element:110,strength:500,isfight:false},
{image:"resource/image/hero/R_8.png",name:"布施翠",attack:90,defense:80,Health_value:150,element:450,strength:700,isfight:false},
{image:"resource/image/hero/R_9.png",name:"洛琪希",attack:120,defense:90,Health_value:150,element:400,strength:300,isfight:false},
{image:"resource/image/hero/R_10.png",name:"夏娜",attack:80,defense:150,Health_value:300,element:300,strength:800,isfight:false},
]
//转eui
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(dataArr);
this.hero_list.dataProvider=Euiarr;
//隐藏进度条
this.hero_scroller.horizontalScrollBar.autoVisibility=false;4. Shop and item pages
class Shopping_Scene extends eui.Component{
public Shopping_back:eui.Button;
public Sp_button1:eui.Group;
public Sp_button2:eui.Group;
public Sp_button3:eui.Group;
public Sp_button4:eui.Group;
public Shopping_button:eui.Group;
public top_swich:eui.Group;
public Grade_1:eui.Group;
public Grade_2:eui.Group;
public Grade_3:eui.Group;
public Grade_4:eui.Group;
public data_list:eui.List;
public shopping:eui.Button;
constructor(){
super();
this.skinName="resource/eui_skins/Scene/Shopping_Scene.exml"
}
//
protected createChildren(): void {
super.createChildren();
//监听返回
this.Shopping_back.addEventListener(egret.TouchEvent.TOUCH_END,()=>{
Main.instance.removeChildren()
Main.instance.addChild(new Home_Scene);
},this)
//界面按钮监听
for(let i:number=1;i<5;i++){
this[`Sp_button${i}`].addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{
this.ButtonManager(i);
},this)
}
//等级按钮监听
for(let i:number=1;i<5;i++){
this[`Grade_${i}`].addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{
this.ButtonManager(String.fromCharCode(97+i-1));
},this)
}
//设置默认页面
this.ButtonManager(1);
this.ButtonManager('a');
}
private ButtonManager(Selet:number|string){
console.log(Selet)
//全清
for(let i:number=1;i<5;i++){
if(typeof(Selet)=="number"){
if(i==Selet) this[`Sp_button${i}`].getChildAt(1).visible=true;
else this[`Sp_button${i}`].getChildAt(1).visible=false;
}
if(String.fromCharCode(97+i-1)==Selet) this[`Grade_${i}`].getChildAt(1).visible=true;
else this[`Grade_${i}`].getChildAt(1).visible=false;
}
switch(Selet){
case 1:
this.top_swich.visible=true;
this.ButtonManager("a");
this.data_list.dataProvider=this.dataToEui("A")
break;
case 2:
this.top_swich.visible=false;
this.data_list.dataProvider=this.dataToEui("Weapon")
break;
case 3:
this.top_swich.visible=false;
this.data_list.dataProvider=this.dataToEui("box")
break;
case 4:
this.top_swich.visible=false;
this.data_list.dataProvider=this.dataToEui("diamond")
break;
case "a":
this.data_list.dataProvider=this.dataToEui("A")
break;
case "b":
this.data_list.dataProvider=this.dataToEui("R")
break;
case "c":
this.data_list.dataProvider=this.dataToEui("S")
break;
case "d":
this.data_list.dataProvider=this.dataToEui("SSR")
break
}
//监听购买
this.shopping.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
let rect:eui.Rect=new eui.Rect();
rect.width=this.width;
rect.height=50;
rect.y=this.height/2;
rect.alpha=0.5;
let text:eui.Label=new eui.Label();
text.text="您的余额不足！！！";
text.size=40;
text.width=rect.width/5;
text.textAlign='left'
text.height=50;
text.x=rect.x+rect.width/2-100;
text.y=rect.y;
this.addChild(rect);
this.addChild(text);
//设置定时
let timer:egret.Timer=new egret.Timer(3000,1);
timer.start();
timer.addEventListener(egret.TimerEvent.TIMER,()=>{
this.removeChild(rect);
this.removeChild(text);
},this)
},this)
}
private dataToEui(str:String):eui.ArrayCollection{
switch(str){
case "A":{
//A英雄数据
let heroArr:any[20]=[]
for(let i:number=1,j:number=0;heroArr.length<20;i++,j++){
heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
if(i==3)i=0;}
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
return Euiarr;
};break;
case "R":{
//R英雄数据
let heroArr:any[20]=[]
for(let i:number=4,j:number=0;heroArr.length<20;i++,j++){
heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
console.log(heroArr[i])
if(i==6)i=3;}
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
return Euiarr;
};break;
case "S":{
//SR英雄数据
let heroArr:any[15]=[]
for(let i:number=7,j:number=0;heroArr.length<15;i++,j++){
heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
console.log(heroArr[i])
if(i==10)i=6;}
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
return Euiarr;
};break;
case "SSR":{
//SSR英雄数据
let heroArr:any[10]=[]
for(let i:number=11,j:number=0;heroArr.length<10;i++,j++){
heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
if(i==12)i=10;}
let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
return Euiarr;
};break;
case "Weapon":{
let weaponArr:any[20]=[]
for(let i:number=1,j:number=0;weaponArr.length<20;i++,j++){
weaponArr[j]={image:`resource/image/weapon/N_${i}.png`,name:`#2000${i}`}
if(i==9)i=0;
}let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(weaponArr);
return Euiarr;
};break;
case "box":{
let weaponArr:any[15]=[]
for(let i:number=1,j:number=0;weaponArr.length<20;i++,j++){
weaponArr[j]={image:`resource/image/icon/qbbb_baoxiang.png`,name:`#3000${i}`}
}let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(weaponArr);
return Euiarr;
}
case "diamond":{
let weaponArr:any[15]=[]
for(let i:number=1,j:number=0;weaponArr.length<20;i++,j++){
weaponArr[j]={image:`resource/image/icon/yxbb_zuanshi.png`,name:`#3000${i}`}
}let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(weaponArr);
return Euiarr;
}
}
}
}
Here, click the button to reach the fixed logo, and then use the logo to add hero data and equipment weapon data to the list in Soller. Just set the list entry skin to the required module.
4. Summary
Difficulty: The loading of the hero pool is fed back to the hero attributes
I spent a lot of time researching this point, and there is another area that needs to be optimized later, that is, the attributes changed by selecting the list hero pool through other buttons do not know how to feed back to the monitor. I will also be slow to learn this in the future. Slowly think of ways to optimize.