一、框架简介
Gardener作为一款轻型的白鹭游戏UI框架，提供丰富UI功能，满足绝大部分的游戏产品的需求。兼容EUI，适配横屏和竖屏项目，框架接口清晰简单，控制灵活，是从线上多款产品框架中总结提炼出来，而且完全开源。此框架的意义在于解放开发者，让开发者把更多的精力用在游戏的核心玩法上。
二、框架使用
1.框架引入
在egretProperties.json中配置modules.
{
"name": "gardener",
"path": "./libs/gardener"
}
2.框架启用
protected createGameScene(): void {
gardener.initGardener(this, { // 启动参数，参数详细请参照initGardener接口
stringResName: "StringResource_cn_json", // 全局本地化文本文件
allowMultipleMessageBoxes: true, // 允许MessageBox多层覆弹
showMultipleMessageBoxesOffset: 10, // 多层MessageBox错位显示
navigatorContainerAvailable: true // 启用导航层
});
let navi: DemoNavigator = new DemoNavigator(); //建个导航框
navi.touchEnabled = false;
navi.touchChildren = true;
gardener.addNavigator(navi); //添加到导航层
}3.页面编辑
1）主页面
class DemoNavigator extends eui.Component {
public static CURRENT_bgSelect = 'bgSelect';
public static CURRENT_Attribute = 'Attribute';
public static CURRENT_MainScene='GameScene'
public Game_Play:eui.Button;
private _currentTab: string;
public constructor() {
super();
this.skinName = 'resource/eui_skins/demo/MainScene.exml';
this.height = gardener.StageHeight;
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onLoad, this);
}
private onLoad(){
this.Game_Play.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
Main.instance.removeChildren();
Main.instance.addChild(new bgSelect());
},this)
}
}2)家境选择页面
class bgSelect extends eui.Component{
public home_bgtext:eui.Label;
public home_confirm:eui.Button;
public home_bg1:eui.RadioButton;
public home_bg2:eui.RadioButton;
public home_bg3:eui.RadioButton;
public home_bg4:eui.RadioButton;
constructor(){
super();
this.skinName="resource/eui_skins/demo/bgselect.exml";
}
protected createChildren(): void {
super.createChildren();
this.home_bg1.value="pk";
this.home_bg2.value="pt";
this.home_bg3.value="fy";
this.home_bg4.value="mx";
//初始家庭
this.home_bgtext.text=gardener.getString("Pk_Homebg")
this.home_bg1.selected=true;
//监听组
let bgGroup:eui.RadioButtonGroup=new eui.RadioButtonGroup;
bgGroup=this.home_bg1.group;
bgGroup.addEventListener(egret.Event.CHANGE,this.onTabSelect,this);
}
public _currentTab:string;
//确定哪个按钮
private onTabSelect(e: egret.Event){
let value = (<eui.RadioButtonGroup>e.target).selectedValue;
this.switchScene(value);
}
//执行相应操作
private switchScene(tab){
if(this._currentTab === tab){
return;
}
this._currentTab = tab;
switch(tab){
case "pk":
this.home_bgtext.text=gardener.getString("Pk_Homebg")
Main.instance.home_bg="pk";
break;
case "pt":
this.home_bgtext.text=gardener.getString("Pt_Homebg")
Main.instance.home_bg="pt";
break;
case "fy":
this.home_bgtext.text=gardener.getString("Fy_Homebg")
Main.instance.home_bg="fy";
break;
case "mx":
this.home_bgtext.text=gardener.getString("Mx_Homebg")
Main.instance.home_bg="mx";
break;
}
//监听确认
this.home_confirm.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
Main.instance.removeChildren();
Main.instance.addChild(new Attribute());
},this)
}
}
这里通过监听按钮组的属性变化得到选择的按钮，根据这个按钮的Value值用框架的getString可以直接获取到资源json文件的值，从而得到家庭情况的数据。
3）属性加点页面
class Attribute extends eui.Component{
public attribute_1:eui.Group;
public attribute_2:eui.Group;
public attribute_3:eui.Group;
public attribute_4:eui.Group;
public attribute_5:eui.Group;
public attribute_6:eui.Group;
public text_1:eui.Label;
public text_2:eui.Label;
public text_3:eui.Label;
public text_4:eui.Label;
public text_5:eui.Label;
public text_6:eui.Label;
public at_number:eui.Label;
public attribute_confirm:eui.Button;
public attribute_back:eui.Button;
public attribute_number:number;
constructor(){
super();
this.skinName="resource/eui_skins/demo/attribute.exml"
this.initialization(Main.instance.home_bg);
}
protected createChildren(): void {
super.createChildren();
//默认属性值
this.attribute_number=10;
//监减属性
for(let i:number=1;i<7;i++){
this[`attribute_${i}`].getChildAt(2).addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
if(parseInt(this[`attribute_${i}`].getChildAt(1).text)==0) return;
else{
this[`attribute_${i}`].getChildAt(1).text=
(parseInt(this[`attribute_${i}`].getChildAt(1).text)-1).toString()
this.attribute_number+=1;
this.at_number.text=this.attribute_number.toString();
}
},this)
}
// 监增属性
for(let i:number=1;i<7;i++){
this[`attribute_${i}`].getChildAt(3).addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
if(this.attribute_number<=0) return;
this[`attribute_${i}`].getChildAt(1).text=
(parseInt(this[`attribute_${i}`].getChildAt(1).text)+1).toString()
this.attribute_number-=1;
this.at_number.text=this.attribute_number.toString();
},this)
}
//监听确认
this.attribute_confirm.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
//保存属性数据
this.Save();
Main.instance.removeChildren();
Main.instance.addChild(new GameScene);
},this)
this.attribute_back.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
gardener.showFloatTip(new FloatTipControl(gardener.getString('Back_road'), 1))
},this)
}
public initialization(home_bg:string){
switch(home_bg){
case "pk":
this.text_2.text="2"
this.text_3.text="2"
break;
case "pt":
this.text_5.text="2"
this.text_1.text="2"
break;
case "fy":
this.text_6.text="2"
break;
case "mx":
this.text_4.text="2"
break;
}
}
public Save(){
Main.instance.SaveData("wisdom",parseInt(this.text_1.text))
Main.instance.SaveData("fortune",parseInt(this.text_2.text))
Main.instance.SaveData("power",parseInt(this.text_3.text))
Main.instance.SaveData("Appearance",parseInt(this.text_4.text))
Main.instance.SaveData("happly",parseInt(this.text_5.text))
Main.instance.SaveData("desire",parseInt(this.text_6.text))
console.log(Main.instance.attribute)
}
}这里监听好按钮和属性值的绑定，以及对属性值的判断，然后将属性值存储到Main.的Attribute中，以便后续的判断剧情发展。
字幕弹出：
由框架自带的消息字幕实现。
4）游戏页面
class GameScene extends eui.Component{
public Game_text:eui.Label;
public home_confirm:eui.Button;
public Attribute:Object=Main.instance.attribute;
public St_line:number=0;
constructor(){
super();
this.skinName="resource/eui_skins/demo/Game_Scene.exml";
}
protected createChildren(): void {
super.createChildren();
//初始化剧情
this.Game_text.text=gardener.getString(Main.instance.home_bg+"_study");
//判断剧情分支
this.home_confirm.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
console.log("stline"+this.St_line)
this.StoryDirection(this.St_line)
this.St_line+=1;
},this)
}
public StoryDirection(St_line:number){
switch(St_line){
case 0:
//this.Game_text.text=gardener.getString() 这里存储问题没解决就直接用字符了
let msg1: DemoMessageBox = new DemoMessageBox(gardener.getString(this.OutStoryString(Main.instance.home_bg)), 2);
gardener.showMessageBox(msg1);
break;
case 1:
//懒得做
break;
case 2:
//懒
break;
case 3:
//还是懒
break;
case 4:
//就是懒
break;
}
}
//根据属性值返回所需的键值
public OutStoryString(str:string):string{
console.log("fortune"+this.Attribute["fortune"]+Main.instance.attribute["fortune"])
if(this.Attribute["fortune"]>4) return "pk_1a"
else return "pk_1b";
}
}这里根据前面的家境选择和属性加点判断，选择游戏故事剧情的走向。属性大于某个点可以激发什么事件。
事件根据框架代码跳出消息框实现。
let msg1: DemoMessageBox = new DemoMessageBox(gardener.getString(this.OutStoryString(Main.instance.home_bg)), 2);
gardener.showMessageBox(msg1);
四、演示视频
五、总结
该框架实用性不是特别强(难怪现在没什么人用这个）,然后这个游戏呢也是根据这个框架来配合开发的，游戏很简陋（全是屎山代码），请谅解一个小白，做了一个下午-_-ne。
然后后面草率解决的原因是准备去详细了解一下剧情树这东西，学好了回来再来优化啦。目前剧情都是我一个人写呢55