Краткое изложение введения мини-игры Egret engine H5 на основе eui

HTML

предисловие

Поскольку компания-стажер хочет, чтобы кто-то делал игры H5, разработанные с использованием движка egret, языкtypescript. Желая изучить TS, я начал изучать волну разработки мини-игр H5. На чтение цапли, эуи, машинописных документов ушло несколько дней, а инструктору потребовалось 3 с половиной дня, чтобы имитировать игру 360. Игровой логики нет, небольшой вступительный проект, а теперь напишу небольшое резюме.

Копировать проект:360 51 мини-игры

Адрес предварительного просмотра:eui imitation 360 мини-игра

Адрес источника:eui-360

предварительный просмотр

Начиная

Начало работы с TypeScript

[Учебник для новичков 2] Весь процесс создания карточной игры EUI

Egret Egret H5 Development - Обнесенный стеной нейронный кот

Структура каталогов

// 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 // 首页场景类

управление сценой

По аналогии с Интернетом, здесь нет игр с переходом по ссылкам, нет перехода по маршруту, потому что он основан наcanvasразвивающийся.

Таким образом, сцена управляет этой частью, добавляя различные подсцены к корневой сцене, такие как начальная сцена, игровая сцена, конечная сцена и т. д.

новый одноэлементный контроллер сцены, который планирует переключение сцены для всей страницы.

// 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-запросы, события и т. Д., Просто посмотрите документацию, и все в порядке.

Что касается доступа к интерфейсу WeChat, я напишу, когда мне нужно будет его изучить ==.

Эпилог

из-за использованияeui, интерфейс в основном можно дополнить визуальным перетаскиванием, а остальным нужно только обратить внимание на логику игры и некоторые анимационные эффекты.

Только начал учиться, общее впечатление все еще очень хорошее. По сравнению с созданием страницы (и постепенно чувствую, что интерфейс очень скучный), это все же немного интересно.

Категории