【16日目】25日間でCocos Creatorでゲームを作る

ゲーム画面を作る

シーンを作る

1. Assetsパネルを右クリック→Create→Sceneと選択する
2. GameSceneにリネームする

CanvasにUIを配置する

• ScoreLabel(Label)を追加する
• ResultPanel(EmptyNode)を追加する
  • Background(Sprite)
  • ResultTitleLabel(Label): 今回のスコア
  • FinalScoreLabel(Label): 0
  • ButtonContainer(EmptyNode)
    • ContinueButton(Button): もう一回
    • BackToMenuButton(Button): メニューへ
      

リザルトパネル表示中のゲーム画面のタッチ判定を無効化する

1. ヒエラルキーパネルのResultPanelを選択する
2. インスペクターのAdd Compnentを選択する
3. BlockInputEventsで検索し、追加する

スクリプトを追加する

1. assets/scriptsにGameManager.tsを追加する
   GameManager.ts

   import { _decorator, Component, Node, Label, director } from 'cc';
   const { ccclass, property } = _decorator;
   
   @ccclass('GameManager')
   export class GameManager extends Component {
       @property(Label)
       scoreLabel: Label = null;
   
       @property(Node)
       resultPanel: Node = null;
   
       @property(Label)
       finalScoreLabel: Label = null;
   
       private score: number = 0;
   
       public addScore(pts: number) {
           this.score += pts;
           this.scoreLabel.string = `Score: ${this.score}`;
       }
   
       public finishGame() {
           this.finalScoreLabel.string = `${this.score}`;
           this.resultPanel.active = true;
           
       }
   
       public onRetryClick() {
           director.loadScene("GameScene"); 
       }
   
       public onMenuClick() {
           director.loadScene("MenuScene");
       }
   }
   

2. ヒエラルキーパネルのCanvasにGameManeger.tsをアタッチする
3. 各ノードをドラッグ&ドロップする
   
4. ContinueButtonのイベントを設定する
   
5. BackToMenuButtonのイベントを設定する
   

まとめ

最低限のゲーム画面としてはこれで完成です。