[팀프로젝트][TIL] Phaser 배워보기

Trippy·2024년 1월 13일

내일배움캠프

목록 보기
8/8
post-thumbnail

phaser를 사용해보는 이유

최종 팀 프로젝트를 시작하면서 phaser를 배우는 이유는 새로운 프로젝트에서는 우리가 알고 있는 Gather Townzep 이라는 서비스로 잘 알고있는 메타버스를 이용한 공간 서비스이다.

우리가 정한 서비스의 목표로는 내가 배우고 있는 부트캠프와 같이 학습공간으로 zep과 게더타운과 같은 메타버스 서비스를 이용하여 학습을 하는데, 해당 애플리케이션들을 이용하면서 느꼈던 아쉬운 점들과 부족했던 컨텐츠들을 넣어서 학습 공간을 만들어 보고자 프로젝트 주제를 정하게 되었다.

학습 공간으로 사용하기 위해서는 2D로 랜더링된 그래픽요소가 필요한데 그러한 게임적인 부분을 해결할 수있도록 도와주는 프레임워크가 바로 phaser이다.

phaser를 통하여 그래픽을 랜더링해서 구현하고, socket.io을 이용하여 실시간 채팅과 캐릭터 이동 등을 보여주며, webRTC를 이용해 화상채팅에 필요한 클라이언트 정보 통신을 하기로 했다.


Phaser 란?

phaser는 데스크톱 및 모바일용 HTML 게임을 만드는 데 사용되는 2D 게임 프레임 워크이다.
phaser를 활용하면 간단한 HTML과 JavaScript 또는 TypeScript로만으로 게임을 만들 수 있다.

https://html5gameengine.com/

phaser3의 주요 개념으로는 다음과 같은 것들이 있다.

scene

  • 화면 단위이다. 메이플스토리의 게임 맵 하나 단위라고 생각하면 된다.

asset

  • 게임에서 사용하는 이미지, sprite이미지, 오디오 등을 의미한다.

load

  • asset을 게임에서 사용할 수 있게 로드해놓은 것을 의미한다. load해놓은 asset은 어디서든 사용 가능하다.

add

  • load한 asset을 scene에 추가하는 명령어이다.

physics

  • 물리엔진 -> 물체의 충돌, 겹침 등 물리적 상호작용에 대한 정보를 알 수 있고 이런 상호작용이 일어났을 때 작용을 지정할 수 있다.
  • 물리엔진의 종류에는 Arcade, Matter 등이 있다.

하루에 걸쳐서 간단하게 게임을 제작해보면서, phaser에 사용버에 대해서 익히게 되었으며, 이 덕분에 게임 엔진을 통해서 2d 메타버스 공간을 만들 수 있게 되었다.

👉게임하러 가보기


더 자세한 부분과 세부적 기능은 직접 다른 부분들도 만져보면서 하나 둘 배워가고 있는 과정이며 이 학습 뒤에는 곧바로 socket.io -> webRTC 학습을 진행할 것 이다.

그리고 타입스크립트를 얕게나마 이해하고 그냥 저냥 잘 사용하고 있었는데

본격적으로 큰 프로젝트를 시작하기에 앞서 타입스크립트를 더 확실하고 찐득하게 알아가기 위해서 역시 무엇보다는 책으로 읽는게 가장 공부답게 잘 되었다.. 따라서 팀원이 추천해준 타입스크립트 책을 하나 구매했고, 시간 틈틈이 공부를 하면서 언어를 도구로써 사용하기 위해서 고수가 되어야 겠다.

profile
감금 당하고 개발만 하고 싶어요

0개의 댓글