ゲームをつくる：Cocosでキー入力とスライダーインターフェイスを実装

13248 ワード
ゲーム開発 ゲーム制作 JavaScript CocosCreator ゲーム JavaScript テキストリンク

この記事は、

ヘックス戦略SLGが好きな筆者が、楽しい戦略SLGを自分で作る記録です。

この記事のまとめ

  • Sliderインターフェースの実装をした
  • キー入力インターフェイスの実装をした

こちらから動くものを確認できます。
ヘックスのタッチをどのように検出しているかはこちら。

Sliderインターフェースを実装した

カメラのズーム機能をSliderインターフェースで実装します。
Sliderインターフェースは、操作された際にメソッドをコールバックで呼び出してくれるので、
まずそのメソッドをCameraにアタッチしたcc.Componentに作成します。

  // **********************************************************
  // 開発用カメラズーム
  // **********************************************************
  debugCameraZoom(slider) {
    cc.log(slider.progress);
    CAM_M.SetCameraZoom(slider.progress * 4 + 0.55);
  }
}

コールバックにはcc.Sliderのインスタンスが渡されます。
インスタンスのprogressにスライダー状態に応じて０−１の値が入るので、それを元にいい感じでカメラのズームを調整します。

スライダーコンポーネントの設定。

NodeTreeにスライダーコンポーネントを設定して、Slide Eventを追加します。
cc.Nodeの欄に、先程メソッドを作成したコンポーネントが設置されているノードをドラッグアンドドロップ。
右の欄から該当コンポーネントを選択して、更に右の欄で先程作成したコンポーネントを選択して完成です。

キー入力インターフェイスを実装した

キー入力の初期化は以下のような形で行います。イベントが発生すると、登録したコールバックが呼ばれます。

    // キー入力を検出
    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, KEY.onKeyDown);
    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, KEY.onKeyUp);

コールバックメソッドはこんな感じ。

  // *******************
  // キーを押したとき
  // *******************
  static onKeyDown(event) {
    KEY.setKeyFlag(event.keyCode, true);
  }

  // *******************
  // キーを離したとき
  // *******************
  static onKeyUp(event) {
    KEY.setKeyFlag(event.keyCode, false);
  }

 // *******************
  // キーのフラグをセットする
  // *******************
  static setKeyFlag(keyCode, bool) {
    switch (keyCode) {
      case cc.macro.KEY.up: // 上
      case cc.macro.KEY.w:
        if (bool === true) {
          KEY.resetDirectFlag();
        }
        KEY.up = bool;
        break;

      case cc.macro.KEY.down: // 下
      case cc.macro.KEY.s:
        if (bool === true) {
          KEY.resetDirectFlag();
        }
        KEY.down = bool; break;

      case cc.macro.KEY.left: // 左
      case cc.macro.KEY.a:
        if (bool === true) {
          KEY.resetDirectFlag();
        }
        KEY.left = bool;
        break;

      case cc.macro.KEY.right: // 右
      case cc.macro.KEY.d:
        if (bool === true) {
          KEY.resetDirectFlag();
        }
        KEY.right = bool;
        break;
    }
  }

  // *******************
  // 方向フラグをリセット
  // *******************
  static resetDirectFlag() {
    KEY.up = false;
    KEY.down = false;
    KEY.left = false;
    KEY.right = false;
  }

KeyFlagをセットしておいて、色々なキー入力に関して処理を行います。
複数の方向入力を受け付けないような処理にしています。
カーソル入力の他に、wasdでも動くようにしました。

後は、コンポーネントの中のupdateで、毎フレーム必要な処理を書きます。

static update(dt) {
    if (KEY.left) {
      CAM_M.MoveCamera(-MOVE_SPEED * dt, 0);
    }
    if (KEY.right) {
      CAM_M.MoveCamera(MOVE_SPEED * dt, 0);
    }
    if (KEY.down) {
      CAM_M.MoveCamera(0, MOVE_SPEED * dt);
    }
    if (KEY.up) {
      CAM_M.MoveCamera(0, -MOVE_SPEED * dt);
    }

  }

次はヘックスに地形と地形パラメータをセットしようと思います。