취미로 게임 개발하기
Phaser 3로 게임 개발하기 - Tutorials(1)
진장강
2023. 11. 24. 17:55
Phaser 공식사이트에서 튜토리얼을 제공한다.
영어 울렁증이 있어서 좀 어지러웠지만, 코드가 그렇게 어렵지 않아서 어찌저찌 쉽게 튜토리얼을 진행해 볼 수 있었다.
공식사이트에서 제공하는 파일을 다운 받아준다.
그리고 파일을 열어주면
튜토리얼을 진행 하는데 필요한 이미지 파일들과 각 단계 별로 완성된 HTML 파일들이 있다.
part1.html을 열어보면 튜토리얼을 시작하는 기본 틀이 구현되어있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Making your first Phaser 3 Game - Part 1</title> // 따로 Phaser를 설치하지 않아도 된다. <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> // Phaser Settings var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create, update: update, }, }; var game = new Phaser.Game(config); function preload() {} function create() {} function update() {} </script> </body> </html> 그런데 part1.html을 실행해보면
아무것도 안뜬다. 알아보니 웹서버를 세팅해주어야 한다는데… 서버에 대한 지식이 별로 없어서 좀 헤멜뻔 했으나
관성적으로 라이브 서버를 이용해서 html을 파일을 실행하다보니 튜토리얼이 다 끝나고 나서야 알아챘다.
나처럼 일단 튜토리얼부터 진행해보고 싶은 사람들은 라이브 서버를 이용하면 될 것 같다.
열어보면 800 X 600 사이즈의 기본 세팅이 되어 있는 것을 볼 수 있다.
Written on Obsidian