🐣 일하면서 공부하기

🐣 일하면서 공부하기

[Phaser3] Survival Game(7) - create()에 player 추가 및 키보드 이벤트

MainScene.js의 create()에 player 추가하기 이전 포스팅에서 MainScene.js의 대략적인 구조를 잡았습니다. 이제 실제 움직이는 player를 생성해 보겠습니다. create()에 player 생성 및 키보드 이벤트 추가 create()에 아래의 코드를 추가시켜 player를 생성해 봅니다. 간단한 코드 설명 Phaser.Physics.Matter.Sprite는 Matter Physics Sprite 게임 오브젝트이며, 게임에서 정적 이미지와 애니메이션 이미지를 모두 표시하는 데 사용됩니다. Sprite는 입력 이벤트와 물리 몸체를 가질 수 있고, 또한 색조 지정 및 스크롤, 애니메이션을 적용할 수 있습니다. 이러한 Phaser.Physics.Matter.Sprite를 이용해 p..

🐣 일하면서 공부하기

[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라고 검색해도 됩니다.) 설치가 되어 있다면,..

개발자 린다씨
'🐣 일하면서 공부하기' 카테고리의 글 목록 (5 Page)