모듈, 프레임웍/Phaser

개요 최신 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..

본 포스트에서는 간단히 Phaser 3 의 기초를 학습하기 위하여 벽돌깨기 게임을 만들어 보도록 하겠습니다. 기본이 되는 내용은 2D breakout game using Phaser 을 바탕으로 진행하였으며, 원본의 코드는 Phaser 2 (CE) 버전을 기반으로 하고 있어, 여기서는 Phaser 3 에서 동작할 수 있도록 소스코드를 수정하였습니다. 사전작업 Phaser 를 사용할 수 있도록 환경을 구성합니다. 혹은 다음의 Stackblitz 링크에서 시작 합니다. 초기환경 링크 프레임 워크 초기화 게임의 기능을 삽입하기 전에 우선 전체적인 구조를 잡아주어야 합니다. Phaser 는 장면(scene) 단위로 게임을 관리합니다. 때문에 우선 장면(scene) 클래스를 생성한 후 이를 Angular 에 추가..

개요 Phaser는 HTML5 Game Framework로 이를 사용하면 우리는 JavaScript를 사용하여 Game을 쉽게 개발할 수 있습니다. 하지만 하나의 Game이 APP으로써 공통적인 요소로 사용자 관리(로그인), 게임자료 관리, (필요에 따라) 실시간 통신 등이 추가로 필요합니다. Angular와 같은 Web Framework를 사용하면 이러한 공통 요소를 좀 더 손쉽게 Game에 추가할 수 있습니다. 이번 포스트에서는 우선 Angular 프로젝트에서 Phaser를 사용할 수 있도록 설정해보도록 하겠습니다. 환경설정 Angular 우선 다음 링크를 참고하여 Angular를 사용할 수 있도록 프로젝트를 생성합니다. Angular 개발환경 설정하기 Angular 시작하기 Phaser 3 설정 P..