스프라이트 이미지란?
캐릭터가 이동할 때 움직임을 표현할 수 있도록 배열로 구성된 이미지 입니다.
아레 예제 이미지는 하나가 32px × 48px 크기로 10개로 구성 되어 있습니다.
스프라이트 이미지 불러오기
<!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 player;
// 새로운 게임 객체 생성
var game = new Phaser.Game(config);
// 미리 필요한 리소스를 로드하는 함수
function preload() {
// 'dude' 스프라이트 시트 불러오기 (각 프레임의 크기는 32x48)
this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
// 게임의 초기 상태를 설정하는 함수
function create() {
// 화면의 가운데에 'dude' 캐릭터 추가 (physics가 적용된 스프라이트)
player = this.physics.add.sprite(config.width / 2, config.height / 2, 'dude');
// 'turn' 애니메이션을 정의 (플레이어가 정지할 때 사용)
this.anims.create({
key: 'turn',
frames: [{ key: 'dude', frame: 4 }],// 'dude' 스프라이트의 4번째 프레임 사용
frameRate: 120
});
}
// 게임 루프 중 매 프레임 호출되는 함수
function update() {
// 'turn' 애니메이션 실행
player.anims.play('turn');
}
</script>
</body>
</html>
결과화면
스프라이트 이미지의 4번째 프레임만 화면에 보여집니다.
'개발 - 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 강좌(1) 이미지 불러오기 (0) | 2024.10.07 |