白鹭（Egret）MVC框架（一）

原文链接： https://blog.csdn.net/u013617851/article/details/82980669

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

前言：

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

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

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

这篇博客的源代码：笔记一建立基本scene

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/exampltest/Demouyiest.ts:

注意这一行，要加上preload普通资源
var subGroups:Array<string> = ["preload_core", "preload_ui","preload""];

  
  
/**
* 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", "preload" ];
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 运行并显示