난생 처음 해보는 게임 개발을 시작했습니다.
기존 운영 중인 웹사이트에 게임 기능을 넣어볼 생각이라서, 웹에서 쉽게 개발할 수 있는 게임 프레임워크를 찾아보니 phaser3가 가장 무난하다고 합니다.
phaser3란?
HTML5 게임 개발을 위한 자바스크립트 게임 엔진입니다. 웹에서도 게임을 만들 수 있습니다.
개발환경
phaser3는 자바스크립트 프레임워크이기 때문에 메모장 하나만 있어도 개발 가능합니다.
npm, webpack, node.js 이런 것 필요없습니다.
저는 개발편의를 위해서 에디터는 비주얼 스튜디오 코드를 사용했고, 웹서버는 Live Server (비주얼 스튜디오 코드 Extensions) 사용했습니다.
이미지 불러오기
첫번째 강좌로 이미지 불러와서 화면에 보여주는 예제 입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Making your first Phaser 3 Game</title>
<!-- Phaser 3 라이브러리 불러오기 -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
</head>
<body>
<script type="text/javascript">
// 게임 설정 구성
var config = {
type: Phaser.AUTO, // 렌더링 방식: 자동으로 웹GL 또는 캔버스를 선택
width: 800,
height: 600,
physics: {
default: 'arcade' // 기본 물리 엔진으로 'arcade' 사용
},
scene: {
preload: preload,
create: create,
update: update
}
};
// 새로운 게임 객체 생성
var game = new Phaser.Game(config);
// 미리 필요한 리소스를 로드하는 함수
function preload() {
// 'dude' 이미지를 불러와 'assets/dude.png' 경로에서 사용
this.load.image('dude', 'assets/dude.png');
}
// 게임의 초기 상태를 설정하는 함수
function create() {
// 화면의 가운데에 이미지를 추가 ('dude' 이미지 사용)
this.add.image(config.width / 2, config.height / 2, 'dude');
}
// 게임 루프 중 매 프레임 호출되는 함수
function update() {
}
</script>
</body>
</html>
결과화면
'개발 - phaser3 강좌' 카테고리의 다른 글
| phaser3 강좌(6) tween 이동 (0) | 2024.10.17 |
|---|---|
| phaser3 강좌(5) 온라인 멀티플레이 (0) | 2024.10.15 |
| phaser3 강좌(4) Scene 전환 (0) | 2024.10.10 |
| phaser3 강좌(3) 캐릭터 이동 (0) | 2024.10.07 |
| phaser3 강좌(2) 스프라이트 이미지 불러오기 (0) | 2024.10.07 |