Phaser3

🐣 일하면서 공부하기

[Phaser3] Survival Game(6) - MainScene.js 파일 생성 및 초기 설정

MainScene.js 파일 생성하기 이전 포스팅에서 survival-game.js 파일을 작성했습니다. 이번 포스팅은 survival-game.js 파일에서 분리시킨 scene을 담당하는 MainScene.js를 작성해 보겠습니다. 먼저 survival-game.js 파일과 위치가 같은 곳에 MainScene.js 파일을 생성합니다. MainScene.js 코드 작성하기 먼저 MainScene.js 파일에서 MainScene의 클래스가 Phaser.Game 클래스를 확장할 수 있도록 합니다. 이후 슈퍼 클래스의 생성자를 호출합니다. 이 작업을 잊어버리면 런타임 예외 또는 이상한 동작이 발생할 수 있습니다. scene 추가하기 이제 생성된 게임에 scene을 추가하도록 하겠습니다. scene은 prelo..

🐣 일하면서 공부하기

[Phaser3] Survival Game(5) - survival-game.js 코드 짜기

일단 survival-game.js 작성하기 이전 포스팅에서 survival-game.js 파일을 생성했습니다. 이후 survival-game.js의 코드를 작성합니다. 코드에 대한 설명은 코드를 작성한 뒤 하겠습니다. const config = { width: 512, height: 512, backgroundColor: '#333333', type: Phaser.AUTO, parent: 'survival-game', scene: [], scale: { zoom: 2, }, physics: { default: 'matter', matter: { debug: true, gravity: {y: 0}, } }, plugins: { scene: [ { plugin: PhaserMatterCollisionPlu..

🐣 일하면서 공부하기

[Phaser3] Survival Game(4) - Visual Studio Code에서 초기 설정

Visual Studio Code에서 초기 설정 이전 포스팅에서 Map 구현하기가 끝났으면 이제 본격적으로 Phaser3로 게임을 만들어보겠습니다. Visual Studio Code를 실행하여 초기 설정을 진행합니다. 0. Live Server 설치 VS Code엔 Live Server라는 확장 프로그램이 있습니다. 이 확장 프로그램을 사용하면 코딩하고 있는 페이지를 확인할 수 있는 실시간 서버가 열립니다. 서버를 실행하기 위해 Live Server를 설치해 줍니다. 빨간색으로 표시된 버튼을 누른 뒤, 검색창에 주황색 박스에 표시된 것처럼 Live Server라고 검색해 줍니다. (또는 단축키로 Ctrl + Shift + X를 같이 누르고 Live Server라고 검색해도 됩니다.) 설치가 되어 있다면,..

🐣 일하면서 공부하기

[Phaser3] Survival Game(1) - Tiled Map Editor 설치하기

미리 보는 완성본 메타버스 프로젝트에 투입되면서 Phaser라는 게임 엔진을 사용하게 됐습니다. 하지만 저는 한 번도 사용해 본 적이 없어서...🥴 일단 공부 개념으로 제 마음 가는 대로 만들어 보았습니다. [Phaser3] Survival Game의 게시글은 이전에 만들었던 게임을 다시 한번 정리하는 회고록입니다. 완성본은 아래와 같습니다. 직접 꾸민 맵이 있고, 그 안에 캐릭터가 있고, 캐릭터는 맵 안에서 움직이며, 나무나 표지판, 돌, 빙판 등의 충돌체를 만나면 지나갈 수 없는 간단한 게임입니다. 개발 툴 선정 게임 엔진은 Phaser를 사용했고, 게임 Map은 Tiled Map Editor를 사용했습니다. Phaser란? Phaser는 데스크톱 및 모바일용 HTML5 게임을 만드는 데 사용되는 2..

개발자 린다씨
'Phaser3' 태그의 글 목록 (3 Page)