euiベースのシラサギエンジンH 5ミニゲーム入門まとめ

前言
インターンシップ会社からH 5ゲームを依頼されたため、シラサギエンジンを使って開発され、言語はtypescriptです.tsを学びたいという気持ちで、H 5ゲームの開発を始めました.数日でegret,eui,typescriptのドキュメントを見て、3日半かけて、指導者は360の小さなゲームを真似させました.ゲームのロジックはありません.入門の小さなプロジェクトです.今、小さなまとめを書きます.
模倣項目:360 51ミニゲーム
プレビューアドレス:eui 360ゲーム
ソースアドレス:eui-360
プレビュー
入門資料
Type Script入門チュートリアル
【初心者チュートリアル2】EUIカードゲームの制作全過程
EgretシラサギH 5開発-神経猫を囲む
ディレクトリ構造

// 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に開発されたからです.
したがって、シーンはこれを制御し、ルートシーンに開始シーン、ゲームシーン、終了シーンなどの各シードシーンを追加します.
新w一例のシーンコントローラで、ページ全体のシーン切り替えをスケジューリングします.

// 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;
    }
}

アニメーション(Animation)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が使用されているため、インタフェースは基本的に可視化されたドラッグで完了し、残りはゲームロジックといくつかのアニメーション効果に注目すればよい.
***ページを作るより(だんだん先端が退屈になってきた)、ちょっと面白いです.