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

芝士君發表於2018-12-14
UIH5遊戲

前言

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

模仿專案：360 51小遊戲

預覽地址：eui 仿360小遊戲

原始碼地址：eui-360

預覽

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

入門資料

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，介面這一塊基本上靠視覺化的拖拽就可以完成，其餘只要關注遊戲邏輯和一些動畫效果就行。

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

相關文章