Phaser 이미지와 스프라이트 다루기 완벽 가이드

Phaser 게임 엔진에서 이미지를 로드하고 스프라이트를 생성하여 화면에 배치하는 방법을 배웁니다. 스프라이트의 크기 조절, 회전, 기준점 설정부터 그룹 관리와 레이어 순서까지 게임 그래픽의 기초를 완전히 익힐 수 있습니다.

---

목차

1. 이미지_로드하기
2. 스프라이트_생성과_배치
3. 스프라이트_크기와_회전
4. origin_설정하기
5. 스프라이트_그룹_만들기
6. Z-index와_레이어

---

1. 이미지 로드하기

김개발 씨는 처음으로 Phaser를 이용해 게임을 만들어보기로 했습니다. 캐릭터 이미지 파일은 준비했는데, 이걸 어떻게 게임 화면에 띄우는 걸까요?

선배 박시니어 씨에게 물어보니 "먼저 이미지를 로드해야지"라는 답이 돌아왔습니다.

이미지 로드는 게임에서 사용할 그래픽 파일을 메모리에 미리 불러오는 과정입니다. 마치 요리를 시작하기 전에 재료를 냉장고에서 꺼내 도마 위에 올려놓는 것과 같습니다.

Phaser에서는 preload 함수에서 이미지를 로드하고, 로드가 완료된 후에야 화면에 표시할 수 있습니다.

다음 코드를 살펴봅시다.

class GameScene extends Phaser.Scene {
    preload() {
        // 이미지 로드: load.image(키 이름, 파일 경로)
        this.load.image('player', 'assets/player.png');
        this.load.image('enemy', 'assets/enemy.png');
        this.load.image('background', 'assets/bg.jpg');

        // 로딩 진행률 표시
        this.load.on('progress', (value) => {
            console.log('로딩 진행률:', Math.round(value * 100) + '%');
        });

        // 로딩 완료 이벤트
        this.load.on('complete', () => {
            console.log('모든 이미지 로드 완료!');
        });
    }
}

김개발 씨는 입사 3개월 차 주니어 개발자입니다. 회사에서 간단한 웹 게임 프로젝트를 맡게 되었는데, Phaser라는 게임 엔진을 처음 접하게 되었습니다.

일단 캐릭터 이미지를 화면에 띄워보려고 했는데, 아무리 해도 이미지가 나타나지 않았습니다. 선배 개발자 박시니어 씨가 다가와 코드를 살펴봅니다.

"이미지를 create 함수에서 바로 사용하려고 했구나. 그 전에 먼저 preload에서 로드해야 해요." 그렇다면 이미지 로드란 정확히 무엇일까요?

쉽게 비유하자면, 이미지 로드는 마치 영화관에서 영화를 상영하기 전에 필름을 영사기에 장착하는 것과 같습니다. 필름이 장착되어 있지 않으면 아무리 버튼을 눌러도 화면에 아무것도 나오지 않습니다.

마찬가지로 게임에서도 이미지 파일을 메모리에 먼저 올려놓아야 화면에 그릴 수 있습니다. Phaser는 Scene이라는 개념을 사용합니다.

각 Scene에는 preload, create, update라는 생명주기 함수가 있습니다. preload는 게임에 필요한 리소스를 미리 불러오는 단계이고, create는 게임 오브젝트를 실제로 생성하는 단계입니다.

this.load.image() 메서드는 두 개의 인자를 받습니다. 첫 번째는 키 이름으로, 나중에 이 이미지를 사용할 때 참조할 식별자입니다.

두 번째는 이미지 파일의 경로입니다. 키 이름은 원하는 대로 지정할 수 있지만, 의미 있는 이름을 사용하는 것이 좋습니다.

로딩 이벤트를 활용하면 사용자에게 로딩 상태를 보여줄 수 있습니다. progress 이벤트는 로딩이 진행될 때마다 0에서 1 사이의 값을 전달합니다.

이 값에 100을 곱하면 퍼센트로 표시할 수 있습니다. 실제 게임 개발에서는 수십, 수백 개의 이미지를 로드해야 할 때도 있습니다.

이런 경우 로딩 화면을 만들어 사용자가 기다리는 동안 진행 상황을 보여주는 것이 좋은 사용자 경험을 제공합니다. 주의할 점은 파일 경로를 정확하게 입력해야 한다는 것입니다.

경로가 틀리면 콘솔에 404 에러가 발생하고, 해당 이미지를 사용하려 할 때 게임이 멈출 수 있습니다. 다시 김개발 씨의 이야기로 돌아가 봅시다.

박시니어 씨의 설명을 들은 김개발 씨는 preload 함수에 이미지 로드 코드를 추가했고, 드디어 캐릭터가 화면에 나타났습니다. "아, 순서가 중요했군요!"

실전 팁

💡 - 이미지 키 이름은 프로젝트 전체에서 고유해야 합니다. 중복되면 나중에 로드한 이미지로 덮어씌워집니다.

• 큰 이미지 파일은 로딩 시간이 길어지므로, 웹용으로 적절히 압축하여 사용하세요.

---

2. 스프라이트 생성과 배치

이미지 로드는 성공했습니다. 하지만 김개발 씨의 화면은 여전히 텅 비어 있습니다.

"로드만 하면 자동으로 나오는 거 아닌가요?" 박시니어 씨가 웃으며 대답합니다. "로드는 준비일 뿐이야.

이제 스프라이트를 만들어서 배치해야 해."

스프라이트는 게임 화면에 표시되는 이미지 객체입니다. 마치 무대 위에 배우를 세우는 것처럼, 로드한 이미지를 스프라이트로 만들어 원하는 위치에 배치합니다.

this.add.sprite() 또는 this.add.image()를 사용하여 생성할 수 있습니다.

다음 코드를 살펴봅시다.

class GameScene extends Phaser.Scene {
    create() {
        // 배경 이미지 추가 (애니메이션 없는 정적 이미지)
        this.add.image(400, 300, 'background');

        // 스프라이트 생성: add.sprite(x좌표, y좌표, 이미지키)
        const player = this.add.sprite(100, 200, 'player');

        // 여러 적 스프라이트 배치
        const enemy1 = this.add.sprite(300, 200, 'enemy');
        const enemy2 = this.add.sprite(500, 200, 'enemy');
        const enemy3 = this.add.sprite(700, 200, 'enemy');

        // 스프라이트 위치 변경
        player.setPosition(150, 250);

        // x, y 좌표 개별 설정
        player.x = 200;
        player.y = 300;
    }
}

김개발 씨는 이미지 로드에 성공한 뒤, 당연히 화면에 뭔가 나올 줄 알았습니다. 하지만 화면은 여전히 검은색 배경뿐이었습니다.

뭔가 빠진 게 있는 것 같았습니다. 박시니어 씨가 다시 설명을 이어갑니다.

"이미지를 로드하는 것은 재료를 사는 것과 같아. 하지만 재료를 샀다고 요리가 완성되는 건 아니잖아?

이제 그 재료로 요리를 만들어야 해. 그게 바로 스프라이트 생성이야." 스프라이트란 무엇일까요?

간단히 말해서, 게임 화면에 표시되는 그래픽 객체입니다. 영화에 비유하면 배우와 같습니다.

이미지 파일은 배우의 사진이고, 스프라이트는 실제로 무대에 서 있는 배우입니다. Phaser에서 스프라이트를 만드는 방법은 간단합니다.

this.add.sprite() 메서드를 호출하면 됩니다. 이 메서드는 세 개의 기본 인자를 받습니다.

x좌표, y좌표, 그리고 이미지 키입니다. 여기서 중요한 점은 좌표계입니다.

Phaser의 좌표계는 화면 왼쪽 위가 (0, 0)입니다. x값이 커질수록 오른쪽으로, y값이 커질수록 아래쪽으로 이동합니다.

수학 시간에 배운 좌표계와는 y축 방향이 반대라는 점을 기억하세요. **this.add.image()**와 **this.add.sprite()**는 비슷하지만 차이가 있습니다.

image는 정적인 이미지를 표시할 때 사용하고, sprite는 애니메이션이 필요한 객체에 사용합니다. 배경처럼 움직이지 않는 요소는 image로, 캐릭터처럼 애니메이션이 필요한 요소는 sprite로 만드는 것이 일반적입니다.

스프라이트를 생성한 후에도 위치를 변경할 수 있습니다. setPosition() 메서드를 사용하거나, x와 y 속성에 직접 값을 할당하면 됩니다.

게임 중에 캐릭터가 움직여야 하니까, 이 기능은 매우 자주 사용됩니다. 같은 이미지 키로 여러 개의 스프라이트를 만들 수도 있습니다.

위 코드에서 enemy1, enemy2, enemy3은 모두 같은 'enemy' 이미지를 사용하지만, 각각 독립적인 스프라이트 객체입니다. 위치도 다르게 설정할 수 있고, 나중에 크기나 색상도 개별적으로 조절할 수 있습니다.

김개발 씨는 create 함수에 스프라이트 생성 코드를 추가했습니다. 드디어 캐릭터와 적들이 화면에 나타났습니다.

"오, 드디어 뭔가 보인다!" 게임 개발의 첫 발을 내딛는 순간이었습니다.

실전 팁

💡 - 정적인 배경은 this.add.image()를, 애니메이션이 필요한 객체는 this.add.sprite()를 사용하세요.

• 스프라이트 생성 시 반환되는 객체를 변수에 저장해두면 나중에 조작하기 편합니다.

---

3. 스프라이트 크기와 회전

화면에 캐릭터가 나타났지만, 김개발 씨는 만족스럽지 않았습니다. 원본 이미지가 너무 크기도 하고, 적 캐릭터는 옆을 보고 있어야 하는데 정면을 보고 있었습니다.

"이미지 크기를 조절하거나 회전시킬 수 있나요?"

스프라이트의 크기와 회전은 게임에서 필수적인 조작입니다. setScale()로 크기를 조절하고, setAngle() 또는 setRotation()으로 회전시킬 수 있습니다.

마치 사진 편집 프로그램에서 이미지를 확대/축소하고 돌리는 것과 같습니다.

다음 코드를 살펴봅시다.

class GameScene extends Phaser.Scene {
    create() {
        const player = this.add.sprite(400, 300, 'player');

        // 크기 조절: setScale(배율) 또는 setScale(x배율, y배율)
        player.setScale(0.5);           // 50% 크기로 축소
        player.setScale(2, 1);          // 가로 2배, 세로 1배

        // 개별 속성으로도 설정 가능
        player.scaleX = 1.5;            // 가로 1.5배
        player.scaleY = 1.5;            // 세로 1.5배

        // 회전: 각도(degree) 또는 라디안(radian)
        player.setAngle(45);            // 시계방향 45도 회전
        player.setRotation(Math.PI / 4); // 라디안으로 설정 (45도)

        // 좌우 반전 (음수 스케일 사용)
        const enemy = this.add.sprite(600, 300, 'enemy');
        enemy.setScale(-1, 1);          // 좌우 반전
    }
}

김개발 씨가 만든 게임 화면을 보니, 캐릭터가 화면의 절반을 차지하고 있었습니다. 원본 이미지를 그대로 사용했기 때문입니다.

또한 적 캐릭터는 왼쪽을 바라봐야 하는데, 오른쪽을 보고 있었습니다. 박시니어 씨가 해결책을 알려줍니다.

"스프라이트는 크기도 바꾸고 회전도 시킬 수 있어. 심지어 뒤집을 수도 있지." setScale() 메서드는 스프라이트의 크기를 조절합니다.

인자로 1을 넣으면 원본 크기, 0.5를 넣으면 절반 크기, 2를 넣으면 두 배 크기가 됩니다. 마치 지도의 축척과 비슷합니다.

인자를 하나만 넣으면 가로와 세로가 같은 비율로 조절됩니다. 하지만 두 개의 인자를 넣으면 가로와 세로를 각각 다르게 조절할 수 있습니다.

setScale(2, 1)은 가로만 두 배로 늘리고 세로는 그대로 유지합니다. 회전은 **setAngle()**과 setRotation() 두 가지 방법이 있습니다.

setAngle()은 도(degree) 단위를 사용합니다. 우리가 일상에서 사용하는 각도 표현입니다.

45도, 90도, 180도처럼요. setRotation()은 라디안(radian) 단위를 사용합니다.

수학이나 프로그래밍에서 자주 쓰이는 단위입니다. 회전 방향은 시계 방향입니다.

양수 값을 넣으면 시계 방향으로, 음수 값을 넣으면 반시계 방향으로 회전합니다. 여기서 재미있는 트릭이 있습니다.

음수 스케일을 사용하면 이미지를 뒤집을 수 있습니다. setScale(-1, 1)을 적용하면 좌우가 반전됩니다.

적 캐릭터가 오른쪽을 보고 있는 이미지밖에 없을 때, 이 방법으로 왼쪽을 보게 만들 수 있습니다. 별도의 반전 이미지를 준비할 필요가 없습니다.

실제 게임에서 이 기능들은 정말 자주 사용됩니다. 플레이어가 왼쪽으로 이동할 때 캐릭터를 뒤집거나, 아이템을 획득했을 때 크기를 키웠다가 줄이는 연출, 회전하는 장애물 등 다양한 곳에 활용됩니다.

김개발 씨는 캐릭터 크기를 적절하게 줄이고, 적 캐릭터를 좌우 반전시켰습니다. 화면이 훨씬 자연스러워졌습니다.

실전 팁

💡 - 좌우 반전이 필요하면 별도 이미지 대신 setScale(-1, 1)을 활용하세요.

• 각도 계산이 필요하면 Phaser.Math.DegToRad()와 Phaser.Math.RadToDeg()를 활용하세요.

---

4. origin 설정하기

김개발 씨가 캐릭터를 화면 정중앙에 배치했습니다. 그런데 막상 실행해보니 캐릭터가 중앙에서 약간 벗어나 있는 것 같았습니다.

"분명히 (400, 300)으로 설정했는데 왜 정중앙이 아니죠?" 박시니어 씨가 웃으며 말합니다. "origin에 대해 알아야 할 때가 됐군."

origin은 스프라이트의 기준점입니다. 위치, 회전, 크기 조절 등 모든 변환이 이 기준점을 중심으로 이루어집니다.

마치 컴퍼스의 중심축과 같습니다. 기본값은 이미지의 정중앙(0.5, 0.5)이지만, 필요에 따라 변경할 수 있습니다.

다음 코드를 살펴봅시다.

class GameScene extends Phaser.Scene {
    create() {
        // origin 기본값: 이미지 중앙 (0.5, 0.5)
        const sprite1 = this.add.sprite(400, 300, 'player');

        // origin을 왼쪽 위로 설정 (0, 0)
        const sprite2 = this.add.sprite(400, 300, 'player');
        sprite2.setOrigin(0, 0);

        // origin을 아래 중앙으로 설정 (0.5, 1)
        const character = this.add.sprite(400, 500, 'player');
        character.setOrigin(0.5, 1);  // 발밑 기준점

        // 회전 시 origin이 중요한 이유
        const rotating = this.add.sprite(200, 200, 'player');
        rotating.setOrigin(0, 0);     // 왼쪽 위 기준 회전
        rotating.setAngle(45);

        const rotating2 = this.add.sprite(600, 200, 'player');
        rotating2.setOrigin(0.5, 0.5); // 중앙 기준 회전
        rotating2.setAngle(45);
    }
}

김개발 씨는 캐릭터를 (400, 300)에 배치했습니다. 화면 크기가 800x600이니까 정확히 중앙이어야 합니다.

그런데 실행해보니 캐릭터가 중앙보다 약간 오른쪽 아래에 있는 것 같았습니다. 박시니어 씨가 설명합니다.

"기본적으로 스프라이트의 origin은 이미지 중앙으로 설정되어 있어. 그래서 (400, 300)에 배치하면 이미지의 중앙이 그 좌표에 오게 돼.

아마 시각적으로 그렇게 보인 건 이미지 자체가 중앙 대칭이 아니어서 그런 거야." origin이란 무엇일까요? 쉽게 말해서 스프라이트를 다룰 때의 기준점입니다.

종이에 압정을 꽂는다고 생각해보세요. 압정을 어디에 꽂느냐에 따라 종이가 회전하는 모양이 달라집니다.

중앙에 꽂으면 제자리에서 빙글빙글 돌고, 모서리에 꽂으면 넓은 원을 그리며 돕니다. origin 값은 0에서 1 사이의 숫자로 표현됩니다.

(0, 0)은 이미지의 왼쪽 위 모서리, (1, 1)은 오른쪽 아래 모서리, (0.5, 0.5)는 정중앙입니다. 기본값은 (0.5, 0.5)입니다.

이 설정이 언제 중요할까요? 가장 흔한 예는 캐릭터를 바닥에 서 있게 할 때입니다.

origin을 (0.5, 1)로 설정하면 이미지의 아래 중앙이 기준점이 됩니다. 이렇게 하면 좌표가 캐릭터의 발 위치를 나타내게 되어, 바닥과의 충돌 처리가 훨씬 직관적이 됩니다.

회전할 때도 origin이 중요합니다. 칼을 휘두르는 애니메이션을 생각해보세요.

칼자루 끝을 기준으로 회전해야 자연스럽습니다. 이럴 때 origin을 칼자루 위치로 설정하면 됩니다.

UI 요소를 배치할 때도 유용합니다. 화면 오른쪽 위에 점수판을 놓고 싶다면, origin을 (1, 0)으로 설정하고 화면 오른쪽 위 좌표에 배치하면 됩니다.

점수 숫자가 길어져도 항상 오른쪽 정렬이 유지됩니다. 김개발 씨는 캐릭터의 origin을 (0.5, 1)로 설정했습니다.

이제 캐릭터가 바닥에 자연스럽게 서 있는 것처럼 보입니다.

실전 팁

💡 - 바닥에 서 있는 캐릭터는 setOrigin(0.5, 1)을 사용하면 발 위치 기준으로 배치할 수 있습니다.

• origin을 변경하면 같은 좌표에서도 스프라이트 위치가 달라지므로, 프로젝트 초기에 일관된 규칙을 정하세요.

---

5. 스프라이트 그룹 만들기

게임에 적이 10마리 등장합니다. 김개발 씨는 각 적의 위치를 업데이트하기 위해 enemy1.x += 1, enemy2.x += 1...

이런 식으로 10줄을 작성했습니다. 박시니어 씨가 코드를 보더니 "이건 좀 아닌 것 같은데"라고 말합니다.

"그룹을 사용하면 한 번에 처리할 수 있어."

스프라이트 그룹은 여러 스프라이트를 하나로 묶어서 관리하는 기능입니다. 마치 학교에서 반 전체에게 공지사항을 전달하는 것처럼, 그룹에 속한 모든 스프라이트에 동시에 같은 작업을 수행할 수 있습니다.

다음 코드를 살펴봅시다.

class GameScene extends Phaser.Scene {
    create() {
        // 그룹 생성
        this.enemies = this.add.group();

        // 그룹에 스프라이트 추가
        for (let i = 0; i < 5; i++) {
            const enemy = this.add.sprite(100 + i * 150, 200, 'enemy');
            this.enemies.add(enemy);
        }

        // 그룹 전체에 속성 적용
        this.enemies.setAlpha(0.8);           // 투명도 설정

        // 그룹의 모든 멤버에 개별 작업 수행
        this.enemies.children.iterate((child) => {
            child.setScale(0.5);
            child.setTint(0xff0000);  // 빨간 색조
        });

        // 물리 그룹 (충돌 감지용)
        this.coins = this.physics.add.group({
            key: 'coin',
            repeat: 9,
            setXY: { x: 50, y: 100, stepX: 80 }
        });
    }
}

김개발 씨의 게임에는 적이 많이 등장합니다. 처음에는 3마리였는데, 기획자가 10마리로 늘려달라고 했습니다.

김개발 씨는 enemy1부터 enemy10까지 변수를 만들고, update 함수에서 각각의 위치를 업데이트하는 코드를 작성했습니다. 코드가 점점 길어지고, 수정할 때마다 10군데를 고쳐야 했습니다.

적이 20마리로 늘어나면 어떻게 될까요? 박시니어 씨가 더 나은 방법을 알려줍니다.

그룹은 여러 스프라이트를 하나의 바구니에 담아 관리하는 개념입니다. 마치 선생님이 학생 한 명 한 명에게 말하는 대신, "여러분 모두 자리에 앉으세요"라고 한 번에 전달하는 것과 같습니다.

그룹을 만드는 방법은 간단합니다. **this.add.group()**을 호출하면 빈 그룹이 생성됩니다.

그런 다음 add() 메서드로 스프라이트를 추가하면 됩니다. 배열처럼 여러 개의 스프라이트를 담을 수 있습니다.

그룹의 진가는 전체 조작에서 드러납니다. **setAlpha()**를 그룹에 호출하면 그룹 내 모든 스프라이트의 투명도가 한 번에 바뀝니다.

개별 작업이 필요할 때는 **children.iterate()**를 사용하여 각 스프라이트를 순회하며 처리할 수 있습니다. **physics.add.group()**은 물리 엔진이 적용된 그룹입니다.

이 그룹의 스프라이트들은 충돌 감지, 중력 적용 등 물리 연산이 가능합니다. 설정 객체를 전달하면 여러 스프라이트를 한 번에 생성하고 배치할 수도 있습니다.

repeat 옵션은 스프라이트를 몇 번 반복 생성할지 지정합니다. setXY의 stepX는 각 스프라이트 사이의 x 간격입니다.

위 코드는 x 좌표 50에서 시작하여 80씩 떨어진 위치에 총 10개의 코인을 생성합니다. 실제 게임에서 그룹은 필수입니다.

적 무리, 총알, 코인, 파티클 등 같은 종류의 객체가 여러 개 필요한 상황은 매우 흔합니다. 그룹 없이 이런 것들을 관리하려면 코드가 금방 복잡해집니다.

김개발 씨는 적들을 그룹으로 묶어서 관리하기 시작했습니다. update 함수의 코드가 10줄에서 3줄로 줄어들었습니다.

실전 팁

💡 - 총알, 적, 아이템 등 같은 종류의 객체가 여러 개 필요하면 반드시 그룹을 사용하세요.

• physics.add.group()을 사용하면 충돌 감지와 물리 연산이 자동으로 적용됩니다.

---

6. Z-index와 레이어

김개발 씨의 게임 화면이 이상합니다. 캐릭터가 배경 뒤에 숨어버렸습니다.

분명히 캐릭터를 먼저 만들고 배경을 나중에 만들었는데, 배경이 앞에 나옵니다. "왜 순서가 뒤바뀌었죠?" 박시니어 씨가 설명합니다.

"나중에 추가한 게 위에 올라가거든. depth를 조절해봐."

depth(또는 z-index)는 스프라이트가 화면에 그려지는 순서를 결정합니다. 마치 투명 필름을 겹쳐 놓은 것처럼, depth 값이 높은 스프라이트가 위에 표시됩니다.

기본적으로 나중에 생성된 스프라이트가 위에 그려지지만, depth를 설정하면 이 순서를 제어할 수 있습니다.

다음 코드를 살펴봅시다.

class GameScene extends Phaser.Scene {
    create() {
        // 기본: 생성 순서대로 그려짐 (나중이 위)
        const background = this.add.image(400, 300, 'background');
        const player = this.add.sprite(400, 300, 'player');
        const foreground = this.add.image(400, 300, 'foreground');

        // depth 설정으로 순서 제어
        background.setDepth(0);    // 가장 뒤
        player.setDepth(10);       // 중간
        foreground.setDepth(20);   // 가장 앞

        // 또는 생성 시 설정
        this.add.sprite(400, 300, 'ui').setDepth(100);

        // 동적으로 depth 변경 (예: 점프 시 앞으로)
        this.input.keyboard.on('keydown-SPACE', () => {
            player.setDepth(player.depth + 1);
        });

        // 컨테이너로 레이어 관리
        this.uiLayer = this.add.container(0, 0);
        this.uiLayer.setDepth(1000);  // UI는 항상 최상위
        this.uiLayer.add(this.add.text(10, 10, 'Score: 0'));
    }
}

김개발 씨가 게임을 실행했을 때, 주인공 캐릭터가 보이지 않았습니다. 코드를 확인해보니 캐릭터는 분명히 있는데, 배경 이미지에 가려져 있었습니다.

박시니어 씨가 설명합니다. "Phaser에서 기본적으로 스프라이트는 생성 순서대로 그려져.

먼저 만든 게 아래에, 나중에 만든 게 위에 올라가. 그런데 네 코드를 보니까 배경을 캐릭터보다 나중에 만들었네." 이 문제를 해결하는 방법이 depth 속성입니다.

depth는 스프라이트의 표시 순서를 숫자로 지정합니다. 그림판에서 레이어를 쌓는 것과 같습니다.

depth 값이 높을수록 위에 그려집니다. depth 값은 정수가 아니어도 됩니다.

0.5나 1.5 같은 소수도 사용할 수 있습니다. 이미 depth 0과 1 사이에 뭔가를 넣어야 할 때 유용합니다.

일반적인 게임에서 depth 체계를 미리 정해두면 관리가 편합니다. 예를 들어, 배경은 0-9, 게임 오브젝트는 10-99, 캐릭터는 100-199, UI는 1000 이상 같은 식으로요.

이렇게 하면 나중에 새로운 요소를 추가할 때 적절한 위치에 넣기 쉽습니다. 컨테이너를 사용하면 여러 스프라이트를 묶어서 레이어처럼 관리할 수 있습니다.

컨테이너에 depth를 설정하면 그 안의 모든 요소가 해당 레이어에 속하게 됩니다. UI 요소들을 컨테이너에 넣고 depth를 높게 설정하면, 게임 화면 위에 항상 UI가 표시됩니다.

게임 중에 depth를 동적으로 변경할 수도 있습니다. 캐릭터가 점프해서 다른 오브젝트 위로 지나가거나, 건물 뒤로 숨는 효과를 만들 때 활용합니다.

RPG 게임에서 캐릭터가 나무 뒤로 걸어갈 때 나무에 가려지다가 앞으로 나오면 다시 보이는 효과도 depth 조절로 구현합니다. 김개발 씨는 배경, 캐릭터, UI 순서로 depth를 설정했습니다.

이제 캐릭터가 배경 위에 자연스럽게 표시되고, 체력바와 점수는 항상 최상단에 보입니다.

실전 팁

💡 - 프로젝트 시작 시 depth 체계(배경: 0-9, 오브젝트: 10-99, UI: 1000+)를 미리 정해두세요.

• 컨테이너를 활용하면 관련 있는 스프라이트를 레이어 단위로 관리할 수 있습니다.

---

이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!