✍ 오늘 한 일

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

Collider 상황 추가

축제 오브젝트와 캐릭터 스프라이트가 충돌하는 경우, 축제별 페이지 모달창이 뜨는 작업을 진행하려고 한다. matter 타입에서는, Collider를 상세하게 설정하는 것이 가능하나, Arcade 의 경우 두 sprite 가 부딪히는 경우만 파악하는 것이 가능했다. 따라서 이 상황이 되었을 때, 축제별 페이지를 띄우도록 마련하는 것이, 이번 문제의 설계이다.

Phaser.phisicis.add.collider() 에는 두 sprite 외에도, 세번째 매개변수로 콜백을 설정하는 것이 가능하다. 콜백함수의 매개변수는, 이전의 두 sprite 를 받게 된다. 나의 경우, Player 인스턴스가 외부 collider 를 인식하였는지 아닌지를 판단하는 조건문을 만들어주었다.

this.physics.add.collider(this.player, this.festivalObject.me,
      (player, _) => {
        // 이곳이 바로 축제별 페이지를 부르는 함수를 호출하면 된다잉
        // 근데 어떻게 호출하지...
        if (!player.body.checkCollision.none) {
          // console.log('축제 오브젝트와 접촉했다');
          // console.log('축제 오브젝트와 접촉했다');
          // setTimeout(() => {
          //   this.checkCollide = false;
          //   console.log('다시 false로 바귐');
          // }, 3000);
      }
   },
).name = 'object';

미니맵 생성

사용자 편의성 향상을 위한 부가기술로써 미니맵을 통해, 현재 주변 상황을 요약해서 알려주는 미니맵을 만들려고 한다. 기존의 맵을 하나더 생성하되, 다른 UI 들과 어울리도록, 작게 형성하고, setZoom() 기능을 활용하여, 좀 더 주변을 넓게 볼 수 있도록 설계하였다.

미니맵의 인칭시점은 실제 게임맵과 동일하게 주되, 카메라 포커스가 리얼타임으로 반영되도록, 캐릭터의 x, y 값을 미니맵의 중앙 좌표 x,y로 적용되도록 하였다.

this.minimap = this.cameras
      .add(30, window.innerHeight - 430, 400, 400)
      .setZoom(0.2)
      .setName('mini');

// 미니맵 스크롤 설정
this.minimap.scrollX = this.player.x;
this.minimap.scrollY = this.player.y;

// 미니맵도 캐릭터에 포커싱 되도록
const minimapCamera = this.cameras.cameras.find(el => el.name === 'mini');
minimapCamera?.startFollow(this.player.me);

📢 개선 사항

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

회고 밀리지 말자.

글은 나중에 큰 도움이 된다. 회고 밀리지 말자.

📢 내일 진행 예정

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

맵, 캐릭터 디자인

맵, 캐릭터 디자인을 진행해보려고 한다. 지금 현재 서비스용으로는 밋밋한 감이 있기 때문에, 다양한 asset을 탐구하고 우리 서비스의 아이덴티티에 걸맞게 반영을 해보려한다.