Phaser3

개요 최신 Angular 9 프로젝트에서 Phaser 3을 통합하는 방법을 정리합니다. ※ 사용한 버전 정보 Angular Cli : 9.1.0 Phaser : 3.22.0 Angular 어플리케이션 생성 Angular CLI 를 사용하여 Angular Aapplication(이하, App)을 만듭니다. ng new phaser-angular-app 안내 문구에 따라 필요하다면 routing을 추가하고, 선호하는 style sheet 형식을 선택합니다. App의 생성이 완료되면 다음 명령을 사용하여 새로 생성된 App 폴더로 이동합니다. cd phaser-angular-app/ Phaser 파일 설치 및 복사 App 폴더에서 npm을 이용해 Phaser를 설치합니다. npm i phaser Phaser가..

개요 Phaser.js는 웹 기반의 비디오 게임을 만들 수 있는 JavaScript 게임 프레임워크입니다. Phaser를 이용하면 프레임워크에서 제공하는 게임 제작에 필요한 유용한 도구들을 활용할 수 있으므로 우리가 모든 것을 처음부터 만들 필요가 없습니다. 이번 포스트에서는 Phaser가 제공하는 기본 기능을 살펴보겠습니다. 기본 Phaser 프로젝트 설정 도형 그리기 사운드 및 음악 재생하기 입력장치와 상호작용 이를 활용하면 다음과 같은 퍼즐 게임을 간단히 만들 수 있습니다. (링크) ※ 참고 : 학습한 결과를 바탕으로 제작한 것으로 완벽한(완성된) 게임의 형태를 띠고 있지는 못합니다. 기본 Phaser 프로젝트 설정 Phaser의 기능을 확인하는데 목적이 있으므로 개발환경 구축을 최소화하기 위해 다..

개요 에셋(Assets) 이란 이미지, 사운드 효과, 텍스트를 포함하여 게임상에 삽입되는 모든 것을 의미합니다. Phaser는 게임 내에서 사용되는 애셋을 사용하기 전에 먼저 로딩하도록 구성되어 있습니다. 제작하는 게임의 규모가 커짐에 따라 사용되는 애셋의 양이 늘게 되며, 로딩에 소요되는 시간이 점점 늘어나게 됩니다. 게이머는 모든 작업이 완료되기를 기다려야 하는데, 이때 기다리는 게이머를 위하여 화면에 대기해야 하는 정도를 표시해주어야 합니다. 이러한 화면을 로딩 화면이라고 하며, 이번 포스트에서는 Phaser를 이용하여 로딩 화면을 만들어 보도록 하겠습니다. 사전 준비 Phaser 를 실행할 수 있는 환경을 구성해야 합니다. 자신의 PC에서 본 프로젝트를 수행한다면 Getting Start With..