✍ 오늘 한 일

💡 오늘 진행 상황을 간단하게 정리 합니다.

Map API 페이지 소리 추가

게임 내와 카카오 맵을 보여주는 페이지에서 서로, 갭이 크지 않도록, Map API 페이지에도 bgm과 버튼 효과음을 추가하였다.

키보드 입력 방향키로 변경

스킬을 Z 와 X로 사용이 가능한데, WASD와 함께 쓰는 것이 어렵다는 의견이 있었다. 기존 WASD로 움직이는 모션을 다시 방향키로 변경하였다.

마력창 덮이는 문제

축제 오브젝트에 다가가는 경우, 오브젝트에 의해, 플레이어의 마나창이 덮이는 이슈가 있었다. 아마 phaser에서 순서대로 생성하는 오브젝트 마다, 이전 오브젝트 생성이 있었다면 다음 오브젝트에 depth 값을 더 높게 설정하여 만드는 것이 기본값인가 보다. 다행히 오브젝트별로 depth를 설정하는 함수가 있어서 이를 통해 문제를 해결했다.

코드 리팩토링 Bgm , Effect

Bgm , Effect 클래스를 생성하였다. 기존 Audio 클래스를 Bgm , Effect 두개의 클래스로 분할하여, Effect 클래스 안에 effectSound() 함수를 이관하였다. Bgm 클래스는 bgm 관련 기능에 필요한 파일을 preload 하는 클래스로 사용된다.

코드 리팩토링 Skill

Skill 클래스를 생성하였다. 스킬이 시전중임을 확인하는 isHaste, isLevitation 과 스킬 시전시 아이콘을 보여주는 hasteIcon , levitationIcon 그리고 스킬을 토글하는 skillHaste() , skillLevitation() 을 이관하였다. Player 클래스에서 접근이 가능하도록 모든 변수, 함수를 public 상태로 설정하였다.

import Effect from './Effect';
import Player from './Player';

class Skill extends Phaser.GameObjects.Sprite {
  /** @description 캐릭터 스킬 시전 상태 확인*/
  public isHaste: boolean;
  public isLevitation: boolean;

  /** @description 캐릭터 스킬 사용시 아이콘 */
  public hasteIcon!: Phaser.GameObjects.Sprite;
  public levitationIcon!: Phaser.GameObjects.Sprite;

  constructor(
    scene: Phaser.Scene,
    x: number,
    y: number,
    texture: string,
    frame: string,
  ) {
    super(scene, x, y, texture, frame);
    this.isHaste = false;
    this.isLevitation = false;
  }

  /**
   *
   * @param player {Player} : Player 클래스 데이터
   * @description
   * "현재 시전 상태에 따라 스킬 토글""
   * @description
   * "캐릭터 speed 향상"
   *
   * @author bell
   */
  skillHaste(player: Player): void {
    if (this.isHaste) {
      this.hasteIcon?.destroy();

      // skill off 효과음
      Effect.effectSound(player.scene, 'skill_off', 800, 0.1);
      this.isHaste = false;
    } else {
      this.hasteIcon = new Phaser.GameObjects.Sprite(
        player.scene,
        player.x,
        player.y,
        'items',
        61,
      );

      // skill on 효과음
      Effect.effectSound(player.scene, 'skill_on', 800, 0.1);

      player.scene.add.existing(this.hasteIcon);
      this.isHaste = true;
    }
  }

  /**
   *
   * @param player {Player} : Player 클래스 데이터
   * @description
   * 현재 시전 상태에 따라 스킬 토글
   * @description
   * 캐릭터 바다 collide 제거
   *
   * @author bell
   */
  skilllevitation(player: Player): void {
    const temp = player.scene.physics.world.colliders;

    if (this.isLevitation) {
      // 아이콘 삭제
      this.levitationIcon?.destroy();

      // skill off 효과음
      Effect.effectSound(player.scene, 'skill_off', 800, 0.1);

      // 시전상태 : false
      this.isLevitation = false;

      // 만약 world 라는 이름이 collider가 존재하지 않는 경우에만
      // world collider 생성
      if (!temp.getActive().find(el => el.name == 'world'))
        player.createColliderForLayer();
    } else {
      // 레비테이션 아이콘 생성
      // 스프라이트로 생성하여 x,y 설정 가능하도록
      this.levitationIcon = new Phaser.GameObjects.Sprite(
        this.scene,
        player.x,
        player.y,
        'items',
        56,
      );
      // world collider 제거
      temp.remove(temp.getActive().filter(el => el.name == 'world')[0]);

      // skill on 효과음
      Effect.effectSound(player.scene, 'skill_on', 800, 0.1);

      // scene에 추가
      player.scene.add.existing(this.levitationIcon);
      // 시전상태 : true
      this.isLevitation = true;
    }
  }
}

export default Skill;

스킬 아이콘이 겹치는 문제

스킬을 2개를 중복해서 사용하는 경우, 아이콘이 겹치는 문제가 발생하였다. 이를 위해 중복 x,y 설정을 제거하였다. 동일하게 플레이어가 움직일때 함께 움직여야 하기 때문에, Player 이동 시 업데이트를 하는 것이 옳다고 판단하였다.

📢 개선 사항

💡 오늘 하루 개선하면 좋았을 부분을 작성합니다. 없다면 생략하셔도 좋습니다.

📢 내일 진행 예정

💡 내일 할 업무를 팀원들과 함께 공유해봅시다. 글이 자세할수록, 팀원 모두가 업무 흐름을 파악하기 쉬워집니다.

Map API 고도화

계속해서, Map API 페이지에 다양한 기능을 넣어볼 생각이다.