이 기사는

헥스 전략 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에 슬라이더 상태에 따라 0-1의 값이 들어가므로 그것을 바탕으로 좋은 느낌으로 카메라의 줌을 조정합니다.

슬라이더 구성 요소 설정.

NodeTree에 슬라이더 구성 요소를 설정하여 슬라이드 이벤트를 추가합니다.
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);
    }

  }

다음은 헥스에 지형과 지형 파라미터를 세트 하려고 합니다.