基于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，界面这一块基本上靠可视化的拖拽就能够完成，其他只要关注游戏逻辑和一些动画效果就行。

刚入门学习，整体体验仍是挺好的。比起作页面（渐渐地以为前端很无聊），仍是有点意思的。