笔记十 :快速建立基本界面 + Egret制作转盘效果(基于通用MVC框架)

笔记十 :快速建立基本界面 + Egret制作转盘效果(基于通用MVC框架)

前言:

快速基本界面的编写直接跳到步骤二。

转盘效果是对egret白鹭引擎动画的功能进行一次应用,实现转盘效果可以对动画功能更好的理解,游戏的随机奖励可以用转盘效果来进行表现。

源代码:

演示效果:

步骤一:制作好素材,包括一个指针,一个按钮,一个转盘(随手画实现功能就行)

分别导出png图

分别添加纹理后导出文件

把这两个文件添加到:

\resource\assets\simple\Zhuanpan\并自动添加到default.res.json。

步骤二:快速建立基本界面

在通用MVC框架中(查看我的笔记一中如何下载搭建使用,或者参考我的源代码。)

建立基本View,和对应的exml界面文件:
1.1 .\src\example\module\demo\zhuanpan\ZhuanpanView.ts

/**
 * Created by egret on 15-1-7.
 */
class ZhuanpanView extends BaseEuiView {
    public constructor($controller: BaseController, $parent: eui.Group) {
        super($controller, $parent);
        this.once(egret.Event.REMOVED_FROM_STAGE,this.dispose,this);
        this.skinName = "resource/skins/demo/Zhuanpan.exml";
    }

    closeBtn: eui.Button;
    arrCollection: eui.ArrayCollection;
    list:eui.List;
    
    public initUI(): void {
        this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
        this.initItemList();
    }

    /**初始化itemList组件 */
    private initItemList():void{
    }

    private onCloseBtn(): void {
        App.ViewManager.playcloseView(1,this);
    }

    public dispose():void{
        this.closeBtn.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
    }
}

1.1 界面文件: \resource\skins\demo\ZhuanpanSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ZhuanpanSkin" width="700" height="900" xmlns:e="http://ns.egret.com/eui"
        xmlns:w="http://ns.egret.com/wing">
	<e:Group width="610.66" height="837.33" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="-3.5" verticalCenter="-3.5">
		<e:Group width="608" height="835.33" verticalCenter="1.8349999999999795" horizontalCenter="-0.3299999999999841" anchorOffsetY="0" anchorOffsetX="0">
			<e:Rect fillColor="0x097993" width="596" x="11" bottom="2.330000000000041" top="16"  anchorOffsetX="0" anchorOffsetY="0"/>
			<e:Image source="table_box_down" x="0" bottom="0.3300000000000409" anchorOffsetX="0" width="608.67" />
			<e:Image source="table_box_up" x="0" top="0" anchorOffsetX="0" width="607" />
			<e:Image source="table_box_middle" x="0" top="46" bottom="93.33000000000004" anchorOffsetX="0" width="607.33"  anchorOffsetY="0"/>
		</e:Group>
		<e:Button id="closeBtn" label="" x="514.99" y="7" anchorOffsetX="0" width="72" scaleX="1" scaleY="1">
			<e:skinName>
			<e:Skin states="up,down,disabled">
				<e:Image width="100%" height="100%" source="btn_wrong" source.down="btn_wrong" source.disabled="btn_wrong"/>
				<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
			</e:Skin>
			</e:skinName>
		</e:Button>
		<e:Group width="433.33" height="412.12" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" verticalCenter="0">
			<e:Image id="zhuanpan" anchorOffsetX="0" anchorOffsetY="0" source="zhuanpan3" fillMode="scale" horizontalCenter="0" verticalCenter="0"/>
			<e:Image id="zhizhen" source="zhuanpan2" horizontalCenter="0" verticalCenter="0" anchorOffsetX="300" anchorOffsetY="240"/>
			<e:Group id="zhuanpanBtn" width="100" height="100" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" verticalCenter="0">
				<e:Image verticalCenter="0" source="zhuanpan1" x="-256" y="-189.99999999999994" scaleX="1" scaleY="1"/>
			</e:Group>
		</e:Group>
	</e:Group>
</e:Skin>

2.建立基本Controller

\src\example\module\demo\zhuanpan\ZhuanpanController.ts

/**
 * Created by egret on 15-1-7.
 */
class ZhuanpanController extends BaseController {
    private zhuanpanView:ZhuanpanView;

    public constructor() {
        super();
        this.zhuanpanView = new ZhuanpanView(this, LayerManager.UI_Popup);
        App.ViewManager.register(ViewConst.Zhuanpan, this.zhuanpanView);
    }
}

3.添加基本ViewConst

\src\example\consts\ViewConst.ts

/**
 * Created by Administrator on 2014/11/23.
 */
enum ViewConst{
    Loading = 10000,
    Login,
    Home,
    Friend,
    Shop,
    Warehouse,
    Factory,
    Task,
    Daily,
    Mail,
    Demo,
    TarBarDemo,
    ItemListDemo,
    FoldList,
    Zhuanpan,

    Game = 20000,
    GameUI,
    RpgGame,
}

4.DemoTest中添加上Controller的加载:

    /**
     * 初始化所有模块
     */
    private initModule():void{
        App.ControllerManager.register(ControllerConst.Friend, new FriendController());
        App.ControllerManager.register(ControllerConst.Demo, new DemoController());
        App.ControllerManager.register(ControllerConst.TarbarDemo, new TarBarDemoController());      
        App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController());    
        App.ControllerManager.register(ControllerConst.FoldList, new FoldListDemoController());  
        App.ControllerManager.register(ControllerConst.Zhuanpan, new ZhuanpanController());  //这一行是要添加的东西,上面的几行可以忽略
    }

5.以及ControllerConst添加一个配置

\src\example\consts\ControllerConst.ts

/**
 * Created by Administrator on 2014/11/23.
 */
enum ControllerConst{
    Loading = 10000,
    Login,
    Home,
    Friend,
    Shop,
    Warehouse,
    Factory,
    Task,
    Mail,
    Game,
    RpgGame,
    Demo,
    TarbarDemo,
    ItemListDemo,
    FoldList,
    Zhuanpan,
}

6.添加这个View面板的启动(这是部分关键代码,详细代码比如button的一些部分请看源代码)

\src\example\module\demo\DemoView.ts

    private button4ClickHandler(e: egret.TouchEvent): void {
        //这是Config测试,配合按钮三一起使用的
        // let jsonObj: Object = GameConfig.getInstance().config("status");
        // let item = jsonObj[1];
        // let name = item["name"];
        // console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", jsonObj);

        //这是打开折叠菜单View的测试
        //App.ViewManager.playopen(1, ViewConst.FoldList);

        //这是打开转盘View的测试
        App.ViewManager.playopen(1, ViewConst.Zhuanpan);
    }

步骤三:设置转盘的动画关键代码

\src\example\module\demo\zhuanpan\ZhuanpanView.ts

    private zhuanpan: eui.Image;
    private zhizhen: eui.Image;
    private zhuanpanBtn: eui.Group;
    private isplaying:boolean = false;
    private _result:number = 0;
this.zhuanpanBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onZhuanpanClick,this);
    private onZhuanpanClick():void{
        this.turnTable(this._result)
    }

    /**指针转到哪一项 */
    public turnTable(resultNum: number) {
		if (this.isplaying == false) {
			this.isplaying = true;
			let resultAngle = this._result * 45 + 5 * 360;
			this._result++;
			this.showAnimation(5000, resultAngle);
		}
	}

    //播放转到多少角度的动画
    private _tween: egret.Tween;
    public showAnimation(time: number, resultAngle: number): void {
        let self = this;
        //这个是指针转
        //this._tween = egret.Tween.get(self.zhizhen).to({ rotation: resultAngle }, time, egret.Ease.cubicInOut).call(function () { self.isplaying = false; });//.call(this.endTurning, this);
        //这个是转盘转
        this._tween = egret.Tween.get(self.zhuanpan).to({ rotation: resultAngle }, time, egret.Ease.cubicInOut).call(function () { self.isplaying = false; });
    }

其中:resultAngle是决定最后转到哪个角度停下来的参数。

其中一个关键的参数,tween动画语句中有一个egret.Ease.cubicInOut,这个参数是决定动画的开头或者结尾的渐进的非线性变动。

比如cubicInOut代表缓慢启动,到最后也缓慢停止。

其中还有很多参数分别代表其他的渐进动画,可以Ctrl+Ease.cubicInOut查看。

两行this._tween中,一个是指针的转,一个是转盘的转。

步骤四:编译与运行