✍ 오늘 한 일

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

마나 창 생성

스킬에 쓰기 위해, 필요한 마나를 생성하였다.

30이하까지 마나가 떨어지면, 색이 빨간색으로 변하도록 설정하였고, 그렇지 않은 경우에는 파란색으로 뜨도록 했다. 마나 창은 캐릭터 바로 머리위에 두고, 캐릭터가 움직일 떄, 마나 창도 함께 움직이도록 만들었다.

// 마나 창
class Mana extends Phaser.GameObjects.Graphics {
  public bar: Phaser.GameObjects.Graphics;
  public value: number;
  private p: number;

  constructor(scene: Phaser.Scene, x: number, y: number) {
    super(scene, undefined);
    this.bar = new Phaser.GameObjects.Graphics(scene);
    this.bar.x = x;
    this.bar.y = y;
    this.value = 100;
    this.p = 76 / 100;

    this.draw();
    scene.add.existing(this.bar);
  }

  draw() {
    this.bar.clear();

    //  BG
    this.bar.fillStyle(0x000000);
    this.bar.fillRect(this.x, this.y, 80, 16);

    //  Health
    this.bar.fillStyle(0xffffff);
    this.bar.fillRect(this.x + 1, this.y + 1, 78, 14);

    if (this.value < 30) {
      this.bar.fillStyle(0xff0000);
    } else {
      this.bar.fillStyle(0x02498f);
    }

    const d = Math.floor(this.p * this.value);

    this.bar.fillRect(this.x + 2, this.y + 2, d, 12);
  }

  decrease() {
    this.value -= 0.05;
    if (this.value < 0) {
      this.value = 0;
    }
    this.draw();
    // return this.value === 0;
  }

  increase() {
    this.value += 0.1;
    if (this.value >= 100) {
      this.value = 100;
    }
    this.draw();
    // return this.value === 0;
  }
}

export default Mana;

마나 이벤트

마나에 필요한 이벤트를 설계했다. skill 이 사용된다는 것이 확인되면, Player 의 update() 함수를 통해 마력이 일시적으로 감소한다. 100이 기준이므로, 이벤트당 0.1초 씩 소모하는 것이 적당해보였다. skill 이 사용되지 않는 것이 확인되는 경우, 동일하게 Player 의 update() 함수를 통해 마나가 증가하도록 설정했다. 유저 편의성을 위해, 1씩 회복하는 것이 좋다고 판단했다.

...

if (this.skill.isHaste) {
  this.skill.hasteIcon.x = this.me.x - 10;
  this.skill.hasteIcon.y = this.me.y - 45;
  this.mana.decrease();
}

if (this.skill.isLevitation) {
  this.skill.levitationIcon.x = this.me.x + 10;
  this.skill.levitationIcon.y = this.me.y - 45;
  this.mana.decrease();
}

if (!this.skill.isHaste && !this.skill.isLevitation) {
  this.mana.increase();
}
...

📢 개선 사항

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

📢 내일 진행 예정

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

맵 API 디테일 추가

다시 리액트로 넘어가, map API 부분들을 설계해보려 한다. 다양한 추천버튼들을 만들거나, 소리를 넣어 아직도 게임에 있는 것과 같은 느낌을 만들어보려고 한다.