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

時間 2019-11-21

標籤基於 eui 白鷺引擎 h5 遊戲入門總結欄目遊戲简体版

原文原文鏈接

前言

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

模仿項目：360 51小遊戲前端

預覽地址：eui 仿360小遊戲vue

源碼地址：eui-360git

預覽

入門資料

TypeScript 入門教程github

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

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

目錄結構

// 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開發的。shell

因此場景控制這塊，經過在根場景上，添加上各類子場景，如開始場景，遊戲場景，結束場景等。canvas

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

// 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);
複製代碼