笔记一：EgretH5通用MVC框架的入门操作：制造一个基本scene与界面

笔记一 通用框架的入门操作：制造一个基本scene与界面

前言：

在公司已经搭建好的框架下进行开发，是一个从1到100的过程。

但是成为一名合格的游戏开发者，从0到1过程,同样也是必须掌握，必不可少的。

这里挑选了一个网上通用的白鹭H5框架进行学习。

1.第一步下载相应的源代码以及白鹭引擎对应的版本。

框架源代码：https://github.com/yicaoyimuys/EgretGameEngine

框架简介地址：http://bbs.egret.com/forum.php?mod=viewthread&tid=14648&extra=

如果我们需要建立一个界面的Demo范例，通过查看框架代码可知，

DemoController和DemoView 注册在 ViewManager中，而DemoScene负责统领这些ViewManager以及资源，而DemoTest通过SceneManager统领DemoScene，而DemoTest在入口Main.ts中进行启动。

2.创建一个基本scene的详细步骤

2.1第一步创建一个DemoScene.ts,目录src/example/scene/DemoScene.ts:

/**
 * Created by yangsong on 2014/11/28.
 * UI场景层
 */
class DemoScene extends BaseScene {
    /**
    * 构造函数
    */
    public constructor() {
        super();
    }
    /**
    * 进入Scene调用
    */
    public onEnter(): void {
        super.onEnter();

        //添加该Scene使用的层级
        this.addLayer(LayerManager.UI_Main);
        this.addLayer(LayerManager.UI_Popup);
        this.addLayer(LayerManager.UI_Message);
        this.addLayer(LayerManager.UI_Tips);

        //添加一个纯色背景
        var rect: eui.Rect = new eui.Rect();
        rect.fillColor = 0x78b93f;
        rect.percentHeight = 100;
        rect.percentWidth = 100;
        LayerManager.UI_Main.addChild(rect);

        //初始打开Home页面
        App.ViewManager.open(ViewConst.Demo);
    }
    /**
    * 退出Scene调用
    */
    public onExit(): void {
        super.onExit();
    }

}

DemoScenes继承自通用框架中已经写好的BaseScene，主要包括构造函数以及Scenes的生命周期的几个函数。其中比较重要的一句是App.ViewManager.open(ViewConst.Demo,);意思是调用ViewManager打开一个与名称”ViewConst.Demo”绑定好的View界面.

这里的ViewConst.Demo会在下文中进行绑定，View界面也会在下文中构建。建议了解一下中介者模式，能更好理解ViewManager的设计思路，因为View与View之间关系可能会错综复杂，牵一发而动全身，把View之间的调度通过中介者模式的思想统一交给ViewManager来管理和调度，会极大减少后期出现的View调度错误.

2.2 第二步 注册ViewManager 需要使用的ViewConst.Demo

打开src/example/consts/ViewConst.ts

添加上我们的关键字：Demo 修改后的的代码为：

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

    Game = 20000,
    GameUI,
    RpgGame,
}

2.3 构建DemoController.ts，并绑定之前的ViewConst.Demo

src/example/module/demo/DemoController.ts :

/**
 * Created by yangsong on 15-1-6.
 */
class DemoController extends BaseController{

    //private proxy:DemoProxy;
    private demoView:DemoView;

    public constructor(){
        super();

        //this.proxy = new DemoProxy(this);

        this.demoView = new DemoView(this, LayerManager.UI_Main);
        App.ViewManager.register(ViewConst.Demo, this.demoView);
    }
}

这是Demo页面的控制器，DemoView负责Demo界面显示,而DemoController负责Demo界面的计算和逻辑

2.4 构建DemoView.ts 以及对应的DemoSkin.exml:

src/example/module/demo/DemoView.ts:

/**
 * Created by egret on 15-1-6.
 */
class DemoView extends BaseEuiView{
    public constructor($controller:BaseController, $parent:eui.Group) {
        super($controller, $parent);

        this.skinName = "resource/skins/DemoSkin.exml";
    }

    button:eui.Button;

    /**
     *对面板进行显示初始化，用于子类继承
     *
     */
    public initUI():void{
        super.initUI();
        this.button.addEventListener(egret.TouchEvent.TOUCH_TAP,this.buttonClickHandler,this);
    }

    private buttonClickHandler(e:egret.TouchEvent):void{
        App.ViewManager.open(ViewConst.Friend);
    }



}

resource/skins/DemoSkin.exml:

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="DemoSkin" width="400" height="300" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
	<e:Rect width="361" height="192" x="19" y="52" fillColor="0xebfff8" anchorOffsetX="0" anchorOffsetY="0"/>
	<e:Image width="362" height="48" x="19" y="232" anchorOffsetX="0" anchorOffsetY="0" source="table_cloud_top" fillMode="repeat"/>
    <e:Image width="362" height="41.99" x="380.89" y="61.99" anchorOffsetX="0" anchorOffsetY="0" source="table_cloud_top" fillMode="repeat" rotation="180.16"/>
	<e:Button id="button" label="Button" x="162.5" y="126.5" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin"/>
</e:Skin>

2.5 创建DemoTest.ts 用来控制所有和Demo有关的东西：

src/example/test/DemoTest.ts:

/**
 * Created by yangsong on 15-3-27.
 * GUI测试
 */
class DemoTest{
    public constructor(){
        var groupName:string = "preload_DemoTest";
        var subGroups:Array<string> = ["preload_core", "preload_ui"];
        App.ResourceUtils.loadGroups(groupName, subGroups, this.onResourceLoadComplete, this.onResourceLoadProgress, this);
    }

    /**
     * 资源组加载完成
     */
    private onResourceLoadComplete():void {
        this.initModule();
        App.Init();

        //音乐音效处理
        App.SoundManager.setBgOn(true);
        App.SoundManager.setEffectOn(!App.DeviceUtils.IsHtml5 || !App.DeviceUtils.IsMobile);

        //App.SceneManager.runScene(SceneConsts.UI);
        App.SceneManager.runScene(SceneConsts.Demo);
    }

    /**
     * 资源组加载进度
     */
    private onResourceLoadProgress(itemsLoaded:number, itemsTotal:number):void {
        App.ControllerManager.applyFunc(ControllerConst.Loading, LoadingConst.SetProgress, itemsLoaded, itemsTotal);
    }

    /**
     * 初始化所有模块
     */
    private initModule():void{
        App.ControllerManager.register(ControllerConst.Friend, new FriendController());
        App.ControllerManager.register(ControllerConst.Demo, new DemoController());
    }
}

2.6 为 DemoController 注册ControllerManager所使用的 ControllerConst.Demo：

打开src/example/consts/ControllerConst.ts: 添加上Demo，修改后的代码为：

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

2.7 为第一步创建DemoScene.ts 注册SceneManager所使用的SceneConsts.Demo：

打开src/example/consts/SceneConst.ts: 添加上Demo，修改后的代码为：

/**
 * Created by yangsong on 2014/11/28.
 */
enum SceneConsts{
    /**
     * Game场景
     * @type {number}
     */
    Game = 1,

    /**
     * 游戏场景
     * @type {number}
     */
    UI,

    /**
     * Loading场景
     * @type {number}
     */
    LOADING,

    /**
     * RpgGame场景
     * @type {number}
     */
    RpgGame,
    Demo,
}

2.7 打开Main.ts为第一步创建的DemoScene.ts 绑定到 SceneManager中

打开Main.ts在private initScene():void 函数中加上一句：

App.SceneManager.register(SceneConsts.Demo, new DemoScene());

2.8 Main.ts中初始化加载DemoTest

在Main.ts中的private onThemeLoadComplete(): void 函数中的末尾

把其他的new XXTest();全部注释掉并加上我们的DemoTest:

new DemoTest();

Main.ts修改后的代码为：

class Main extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {
        this.removeEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);

        //注入自定义的素材解析器
        egret.registerImplementation("eui.IAssetAdapter", new AssetAdapter());
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());

        //适配方式(全屏适配)
        App.StageUtils.startFullscreenAdaptation(650, 1000, this.onResize);

        //初始化
        this.initLifecycle();
        this.initScene();

        //加载资源配置文件
        this.loadResConfig();
    }

    private initLifecycle(): void {
        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }
    }

    private onResize(): void {
        App.ControllerManager.applyFunc(ControllerConst.RpgGame, RpgGameConst.GameResize);
    }

    private loadResConfig(): void {
        //初始化Resource资源加载库
        App.ResourceUtils.addConfig("resource/default.res.json", "resource/");
        App.ResourceUtils.addConfig("resource/resource_core.json", "resource/");
        App.ResourceUtils.addConfig("resource/resource_ui.json", "resource/");
        App.ResourceUtils.addConfig("resource/resource_battle.json", "resource/");
        App.ResourceUtils.addConfig("resource/resource_rpg.json", "resource/");
        App.ResourceUtils.loadConfig(this.onConfigComplete, this);
    }

    /**
     * 配置文件加载完成,开始预加载preload资源组。
     */
    private onConfigComplete(): void {
        //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
        var theme = new eui.Theme("resource/default.thm.json", this.stage);
        theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);
    }

    /**
     * 主题文件加载完成
     */
    private onThemeLoadComplete(): void {
        //模块初始化
        this.initModule();

        //设置加载进度界面
        App.SceneManager.runScene(SceneConsts.LOADING);

        //开启游戏
        //new RpgTest();

        //new ActTest();
        //new ProtoBufTest();
        //new EUITest();
        new DemoTest();
    }

    /**
     * 初始化所有场景
     */
    private initScene(): void {
        //App.SceneManager.register(SceneConsts.LOADING, new LoadingScene());
        //App.SceneManager.register(SceneConsts.UI, new UIScene());

        App.SceneManager.register(SceneConsts.UI, new DemoScene());
        App.SceneManager.register(SceneConsts.Game, new GameScene());
        App.SceneManager.register(SceneConsts.Demo, new DemoScene()); //rongqingmei
        //App.SceneManager.register(SceneConsts.RpgGame, new RpgGameScene());
    }

    /**
     * 初始化所有模块
     */
    private initModule(): void {
        App.ControllerManager.register(ControllerConst.Loading, new LoadingController());
    }
}

2.9 运行并显示

笔记一 ：EgretH5通用MVC框架的入门操作：制造一个基本scene与界面

猜你喜欢

笔记一：EgretH5通用MVC框架的入门操作：制造一个基本scene与界面