2015年5月21日 星期四

【Egret Engine】整合PureMVC

Egret 可以在專案中結合各式各樣的第三方javascript lib,目前先介紹對該lib有提供TSD的部份

PureMVC 算是Flash Developer都還蠻熟悉的一個MVC Framework

官方文件也有做了一個教學,如何使用第三方javascript lib,基於按照官方的教學,讓我摸索了一段時間,我這邊做個步驟整理以便以後若遇到問題時,可再次按圖操作

這個記錄我使用EgretVS新建出來的GUI專案來說明

2015-05-21_162536

新增專案完成後,在專案目前增加如下檔案

2015-05-21_164548

puremvc的TSD及JS檔案請至 github 下載

puremvc.json這個檔案,請自行增加,內容如下,source節點請依個人喜好填入

   1: {
   2:     "name": "puremvc",
   3:     "source":"src/puremvc/",
   4:     "file_list": [
   5:         "puremvc-typescript-standard-1.0.js",
   6:         "puremvc-typescript-standard-1.0.d.ts"
   7:     ]
   8: }

接著要修改egretProperties.json,把puremvc這個新增的module加入


2015-05-21_165203


完成後執行一下build engine


2015-05-21_165527


build完後,在libs目錄下即會出現 puremvc的參照


2015-05-21_165659


在src下新增一個Facade


2015-05-21_170426


程式如下:



   1: module leon456 {
   2:     export class ApplicationFacade extends puremvc.Facade implements puremvc.IFacade {
   3:         public constructor() {
   4:             super();
   5:             console.log('ApplicationFacade');
   6:         }
   7:  
   8:  
   9:         public static getInstance(): ApplicationFacade {
  10:             if (this.instance == null) this.instance = new ApplicationFacade();
  11:             return <ApplicationFacade><any> (this.instance);
  12:         }
  13:     }
  14: } 

並在 Main.ts最下方增一行,叫一下Facade初始化(singleton)


2015-05-21_170719


再執行一下build engine,及build


2015-05-21_170835


執行一下程式  Ctrl+F5


若未發現任何報錯,即己加載PureMVC至Egret專案成功


2015-05-21_171100


其它關於PureMVC該如何拼湊結構,可參考 github上 2048Egret 這個專案來學習,接下來只記錄在使用PureMVC時在typescript會發生的一些注意事項及跟使用actionscript3版本時不太一樣的地方



  • 需要經檔案執行egret build跟egret build engine,每次新增完class,需要去執行這二個動作,執行完後會去修改bin-debug/game_file_list.js這樣在執行程式時才會找到的參照
  • 在Mediator中,慣例會增加一個取得對應view的function 如下 ,需要在function前加上 get關鍵字,這樣才可以取得該view的參照

       1: module live {
       2:     export class BettingAreaMediator extends puremvc.Mediator implements puremvc.IMediator{
       3:         public static NAME: string = "BettingAreaMediator";
       4:         public constructor(viewComponent: any) {
       5:             super(BettingAreaMediator.NAME, viewComponent);
       6:             console.log("BettingAreaMediator", "constructor");
       7:  
       8:             console.log("BettingAreaMediator", "bankerBetButton = ", this.view);
       9: 
      10: 
      11:             this.view.bankerBetButton.addEventListener(egret.TouchEvent.TOUCH_TAP, this.addBet, this.view);
      12:             this.view.playerBetButton.addEventListener(egret.TouchEvent.TOUCH_TAP, this.addBet, this.view);
      13:         }
      14:  
      15:  
      16:         public listNotificationInterests(): Array<;any> {
      17:             return [];
      18:         }
      19:  
      20:         public handleNotification(notification: puremvc.INotification): void {
      21:         }
      22:  
      23:         public get view(): live.BettingArea {   //前面要加 get 關鍵字
      24:             return <live.BettingArea><any> (this.viewComponent);
      25:         }
      26:  
      27:         private addBet(e: egret.TouchEvent): void {
      28:             console.log("BettingAreaMediator","addBet");
      29:         }
      30:  
      31:        
      32:         private clearBet(e: egret.TouchEvent): void {
      33:         }
      34:  
      35:         private confirmBet(e: egret.TouchEvent): void {
      36:         }
      37:     }
      38: } 









    


    目前先這樣,後續有發現需要注意處,請做增加

沒有留言:

張貼留言