基於eui的白鷺引擎H5小遊戲入門總結

前言

由於實習公司要人做 H5遊戲，使用白鷺引擎開發，語言是typescript。本着想學習ts的心態，就開始學習一波H5小遊戲開發。幾天時間看了下egret, eui, typescript的文檔，花了3天半的時間，導師讓仿一個360的小遊戲。沒啥遊戲邏輯，入門小項目，現在寫個小總結。

模仿項目：360 51小遊戲

預覽地址：eui 仿360小遊戲

源碼地址：eui-360

預覽

入門資料

TypeScript 入門教程

【新手教程2】EUI卡牌遊戲的製作全過程

Egret白鷺H5開發-圍住神經貓

目錄結構

// src 目錄
│  AssetAdapter.ts
│  LoadingUI.ts // 轉場加載類
│  Main.ts // 入口文件
│  Platform.ts
│  ThemeAdapter.ts
│  
├─common
│      GameUtil.ts // 工具類
│      
└─game
    │  GameData.ts // 數據中心類
    │  SceneManager.ts // 場景管理類
    │  
    ├─components // 抽離的組件
    │      MyImage.ts // 自定義的圖片組件
    │      prize.ts
    │      RewardMy.ts
    │      Rule.ts
    │      
    └─scene
            MainScene.ts // 遊戲場景類
            StartScene.ts // 首頁場景類

場景控制

類比於web，小遊戲沒有鏈接跳轉，也沒有路由跳轉，因爲是給予canvas開發的。

所以場景控制這塊，通過在 根場景 上，添加上各種子場景，如開始場景，遊戲場景，結束場景等。

new 一個 單例 的場景控制器，對整個頁面場景切換進行調度。

// SceneManager.ts 場景控制器
class SceneManager {
  public _stage: egret.DisplayObjectContainer; // 根場景
  public startScene: StartScene;
  public mainScene: MainScene;

  constructor() {
    this.startScene = new StartScene();
    this.mainScene = new MainScene();
  }

  // 獲取單例
  static sceneManager: SceneManager;
  static get instance() {
    if (!this.sceneManager) {
      this.sceneManager = new SceneManager();
    }
    return this.sceneManager;
  }

  // 刪除其他場景
  private removeOtherScene(scene) {
    let arr = [this.startScene, this.mainScene];
    arr.forEach(item => {
      if (scene === item) {
        return
      }
      if (item.parent) {
        this._stage.removeChild(item)
      }
    })
  }

  // 設置根場景
  public setScene(s: egret.DisplayObjectContainer) {
    this._stage = s;
  }

  // 開始場景
  static toStartScene() {
    this.instance.removeOtherScene(this.instance.startScene)
    this.instance._stage.addChild(this.instance.startScene)
  }

  // 遊戲場景
  static toMainScene() {
    this.instance.removeOtherScene(this.instance.mainScene)
    this.instance._stage.addChild(this.instance.mainScene)
  }
}

// main.ts
protected createGameScene(): void {
  // 將main創建的容器 作爲 根容器場景
  SceneManager.instance.setScene(this);
    // 跳轉至開始場景
    SceneManager.toStartScene();
}

組件繼承

我想給eui.Image控件添加一個isClick屬性，用來判斷該圖片是否被點擊過。

可是canvas不像dom，有自定義屬性data-*，因此通過組件繼承的方式，自定義一個控件，繼承自eui.Image。之後便不使用eui.Image，而是用MyImage自定義控件

// 自定義圖片類
class MyImage extends eui.Image {
    public isClick: boolean;
  
    public constructor() {
        super();
        this.isClick = false;
    }
}

動畫

使用egret.Tween這個動畫庫，實現起來還是很方便的，具體看文檔

// 3秒360度旋轉圖片
tw.get(this.musicImg, {
  loop: true
}).to({
  rotation: 360
}, 3000);

子容器調用父容器方法

和vue的子組件向父組件傳值差不多個意思

// 子容器
protected childrenCreated(): void {
  super.childrenCreated();
    this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.close, this);
}
private close() {
  // 創建一個 CLOSE_POP_REWARD_MY 事件
  let closeEvent: egret.Event = new egret.Event('CLOSE_POP_REWARD_MY');
  // 向該容器的父容器派發該事件
  this.parent.parent.dispatchEvent(closeEvent);
}

// 父容器
// 監聽該派發事件 CLOSE_POP_REWARD_MY
this.addEventListener('CLOSE_POP_REWARD_MY', this.closeRewardMy, this);

tips

還有一些諸如音樂播放，http請求，事件這些，看看文檔就ok了。

而像微信接口的接入這些，等我有需求學到了再寫= =。

結語

由於使用了eui，界面這一塊基本上靠可視化的拖拽就可以完成，其餘只要關注遊戲邏輯和一些動畫效果就行。

剛入門學習，總體體驗還是挺好的。比起做頁面（漸漸地覺得前端很無聊），還是有點意思的。