카메라와 레벨 스크롤 완벽 가이드

게임 개발에서 플레이어를 따라다니는 카메라 시스템을 구현하는 방법을 알아봅니다. 카메라 팔로우부터 패럴랙스 배경, 다양한 카메라 이펙트까지 Phaser를 활용한 실전 기법을 다룹니다.

---

목차

1. 카메라_팔로우_설정
2. 카메라_바운드
3. 데드존_설정
4. 부드러운_카메라_이동
5. 패럴랙스_배경
6. 카메라_이펙트

---

1. 카메라 팔로우 설정

김개발 씨가 처음으로 플랫포머 게임을 만들기 시작했습니다. 캐릭터가 움직이는 것까지는 성공했는데, 화면 밖으로 나가버리면 더 이상 보이지 않았습니다.

"어떻게 하면 카메라가 캐릭터를 따라다니게 할 수 있을까요?"

카메라 팔로우는 게임에서 특정 오브젝트를 카메라가 자동으로 추적하도록 설정하는 기능입니다. 마치 영화 촬영 감독이 주인공을 따라다니며 촬영하는 것과 같습니다.

이 기능을 사용하면 플레이어가 넓은 맵을 자유롭게 탐험할 수 있게 됩니다.

다음 코드를 살펴봅시다.

// 플레이어 스프라이트 생성
this.player = this.physics.add.sprite(100, 450, 'player');

// 카메라가 플레이어를 따라다니도록 설정
this.cameras.main.startFollow(this.player);

// 팔로우 강도 조절 (0~1 사이, 낮을수록 부드럽게)
this.cameras.main.setFollowOffset(0, -50);

// 줌 레벨 설정
this.cameras.main.setZoom(1.5);

김개발 씨는 입사 3개월 차 게임 개발자입니다. 회사에서 첫 번째 프로젝트로 간단한 플랫포머 게임을 만들게 되었습니다.

캐릭터 이동까지는 구현했는데, 캐릭터가 화면 오른쪽 끝에 도달하면 그대로 사라져버렸습니다. 선배 개발자 박시니어 씨가 옆에서 지켜보다가 말했습니다.

"게임 카메라를 설정하지 않았군요. 영화 찍을 때 카메라맨이 배우를 따라다니듯이, 게임에서도 카메라가 플레이어를 따라다녀야 해요." 그렇다면 카메라 팔로우란 정확히 무엇일까요?

쉽게 비유하자면, 카메라 팔로우는 마치 충실한 강아지와 같습니다. 주인이 어디를 가든 졸졸 따라다니면서, 항상 주인이 시야 중심에 있도록 합니다.

게임에서도 마찬가지로, 플레이어 캐릭터가 어디로 이동하든 카메라가 따라가며 화면 중앙에 유지시켜 줍니다. 카메라 팔로우가 없던 초기 게임들은 어땠을까요?

아타리 시절의 고전 게임들은 한 화면이 전부였습니다. 캐릭터가 화면 끝에 도달하면 다음 스테이지로 넘어가거나, 반대편에서 나타나곤 했습니다.

슈퍼 마리오가 등장하면서 스크롤링 개념이 도입되었고, 이것이 현대 게임의 카메라 시스템으로 발전했습니다. Phaser에서는 startFollow 메서드 하나로 이 복잡한 기능을 간단히 구현할 수 있습니다.

위의 코드를 살펴보겠습니다. 먼저 플레이어 스프라이트를 생성합니다.

그 다음 this.cameras.main.startFollow(this.player) 한 줄로 카메라가 플레이어를 따라다니기 시작합니다. 정말 간단하지 않나요?

setFollowOffset은 카메라 위치를 미세 조정합니다. 예제에서 (0, -50)으로 설정했는데, 이는 카메라를 플레이어보다 50픽셀 위에 위치시킵니다.

플랫포머 게임에서는 플레이어 위쪽을 더 많이 보여주는 것이 유리하기 때문입니다. setZoom은 카메라 확대 비율을 설정합니다.

1이 기본값이고, 1.5로 설정하면 화면이 1.5배 확대됩니다. 픽셀 아트 게임에서 도트를 크게 보여주고 싶을 때 유용합니다.

실제 현업에서는 어떻게 활용할까요? 예를 들어 메트로배니아 장르의 게임을 만든다면, 넓은 맵을 탐험하는 것이 핵심입니다.

카메라 팔로우 없이는 이런 게임을 만들 수 없습니다. 다시 김개발 씨의 이야기로 돌아가 봅시다.

startFollow를 적용하자 캐릭터가 어디로 가든 화면 중앙에 머물렀습니다. "이제야 진짜 게임 같아 보이네요!" 김개발 씨가 환하게 웃었습니다.

실전 팁

💡 - startFollow의 두 번째 인자로 roundPixels를 true로 설정하면 픽셀이 흐릿해지는 현상을 방지할 수 있습니다

• 여러 카메라를 만들어 미니맵이나 분할 화면을 구현할 수도 있습니다

---

2. 카메라 바운드

카메라 팔로우를 설정한 김개발 씨에게 새로운 문제가 생겼습니다. 캐릭터가 맵 끝에 도달했는데도 카메라가 계속 따라가서, 맵 바깥의 검은 영역이 보이기 시작한 것입니다.

"맵 밖은 보여주고 싶지 않은데..."

카메라 바운드는 카메라가 이동할 수 있는 범위를 제한하는 기능입니다. 마치 수족관의 물고기가 유리벽 밖으로 나갈 수 없는 것처럼, 카메라도 지정된 경계 안에서만 움직이게 됩니다.

이를 통해 게임 월드 밖의 빈 공간이 화면에 노출되는 것을 방지합니다.

다음 코드를 살펴봅시다.

// 맵 크기 설정 (예: 3200 x 600 픽셀 맵)
const mapWidth = 3200;
const mapHeight = 600;

// 월드 바운드 설정
this.physics.world.setBounds(0, 0, mapWidth, mapHeight);

// 카메라 바운드 설정 (카메라가 이 범위를 벗어나지 않음)
this.cameras.main.setBounds(0, 0, mapWidth, mapHeight);

// 플레이어도 월드 바운드 내에서만 이동
this.player.setCollideWorldBounds(true);

김개발 씨가 만든 게임에는 가로로 긴 스테이지가 있었습니다. 플레이어가 왼쪽 끝에서 시작해서 오른쪽으로 진행하는 구조였죠.

그런데 문제가 있었습니다. 캐릭터가 맵 왼쪽 끝에 있을 때, 카메라가 캐릭터를 화면 중앙에 두려고 해서 맵 왼쪽의 검은 공간이 절반이나 보였습니다.

박시니어 씨가 설명했습니다. "카메라에게 경계를 알려줘야 해요.

여기까지만 이동해도 된다고 말이죠." 카메라 바운드란 무엇일까요? 사진 액자를 생각해 보세요.

큰 그림을 작은 액자로 볼 때, 액자를 이리저리 움직여서 그림의 다른 부분을 볼 수 있습니다. 하지만 액자가 그림 밖으로 나가면 빈 벽이 보이겠죠.

카메라 바운드는 이 액자가 그림 안에서만 움직이도록 제한하는 것입니다. setBounds 메서드는 네 개의 인자를 받습니다.

시작 x좌표, 시작 y좌표, 너비, 높이입니다. 예제에서는 (0, 0)에서 시작해서 가로 3200픽셀, 세로 600픽셀 범위로 설정했습니다.

여기서 중요한 점이 있습니다. physics.world.setBounds와 cameras.main.setBounds는 다른 것입니다.

전자는 물리 엔진의 경계로, 오브젝트가 이 범위를 벗어나지 못하게 합니다. 후자는 카메라의 경계로, 화면에 보이는 영역을 제한합니다.

두 개를 같은 값으로 설정하는 것이 일반적입니다. **setCollideWorldBounds(true)**는 플레이어가 월드 경계에 부딪히면 더 이상 진행하지 못하게 합니다.

이것 없이는 플레이어가 맵 밖으로 나갈 수 있습니다. 실무에서 흔히 하는 실수가 있습니다.

타일맵을 사용할 때, 타일맵의 실제 크기와 바운드 설정이 다른 경우입니다. 타일맵이 3200픽셀인데 바운드를 3000으로 설정하면 오른쪽 끝 200픽셀은 절대 볼 수 없게 됩니다.

타일맵을 사용한다면 이렇게 동적으로 설정하는 것이 좋습니다. **this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels)**처럼 말이죠.

김개발 씨가 바운드를 설정하자, 캐릭터가 맵 끝에 가도 카메라는 맵 경계에서 멈췄습니다. 더 이상 검은 공간이 보이지 않았습니다.

"이제 진짜 상용 게임 같아요!"

실전 팁

💡 - 타일맵을 사용한다면 map.widthInPixels, map.heightInPixels로 자동 계산하세요

• 카메라 바운드와 월드 바운드를 항상 일치시키는 것이 좋습니다

---

3. 데드존 설정

김개발 씨의 게임을 테스트하던 QA 담당자가 피드백을 주었습니다. "캐릭터가 조금만 움직여도 카메라가 따라오니까 어지러워요.

캐릭터가 좀 움직여도 카메라는 가만히 있다가, 많이 벗어나면 그때 따라오면 안 될까요?"

데드존은 카메라가 반응하지 않는 영역을 말합니다. 플레이어가 이 영역 안에서 움직이는 동안에는 카메라가 정지해 있다가, 영역을 벗어나면 그제야 따라오기 시작합니다.

마치 목줄이 있는 강아지처럼, 일정 거리까지는 자유롭게 돌아다니다가 목줄이 팽팽해지면 함께 움직이는 것과 같습니다.

다음 코드를 살펴봅시다.

// 카메라 팔로우 설정
this.cameras.main.startFollow(this.player);

// 데드존 설정 (화면 중앙 200x100 픽셀 영역)
this.cameras.main.setDeadzone(200, 100);

// 또는 비율로 설정하기
const width = this.cameras.main.width;
const height = this.cameras.main.height;
this.cameras.main.setDeadzone(width * 0.3, height * 0.2);

// 데드존 디버그 시각화 (개발 중에만 사용)
// this.cameras.main.deadzone 객체로 접근 가능

김개발 씨는 고개를 갸웃했습니다. "카메라가 바로바로 따라오는 게 당연한 거 아닌가요?" 박시니어 씨가 웃으며 대답했습니다.

"슈퍼 마리오를 해봤죠? 마리오가 조금씩 움직일 때는 카메라가 안 움직여요.

화면 중앙을 벗어나려고 할 때만 따라가죠." 데드존의 개념은 생각보다 오래되었습니다. 목줄에 연결된 강아지를 상상해 보세요.

주인이 서 있고, 강아지는 목줄 길이만큼 자유롭게 돌아다닐 수 있습니다. 강아지가 목줄 범위 안에서 움직이는 동안 주인은 가만히 있습니다.

하지만 강아지가 목줄 끝까지 가면, 더 가려면 주인도 따라 걸어야 합니다. 카메라와 데드존의 관계가 정확히 이렇습니다.

데드존이 왜 필요할까요? 카메라가 모든 미세한 움직임에 반응하면, 화면이 계속 미세하게 흔들립니다.

플레이어가 좌우로 조금씩 왔다 갔다 할 때마다 카메라도 따라 출렁이죠. 이것이 누적되면 플레이어는 멀미를 느낄 수 있습니다.

데드존은 이런 불필요한 카메라 움직임을 제거해줍니다. **setDeadzone(200, 100)**은 화면 중앙에 가로 200픽셀, 세로 100픽셀의 보이지 않는 사각형을 만듭니다.

플레이어가 이 사각형 안에 있는 동안에는 카메라가 움직이지 않습니다. 플레이어가 사각형 밖으로 나가려 하면, 그때 카메라가 따라옵니다.

데드존 크기는 게임 장르에 따라 다르게 설정해야 합니다. 액션 게임에서는 작은 데드존이 좋습니다.

빠른 반응이 필요하니까요. 반면 탐험 중심의 게임에서는 큰 데드존이 적합합니다.

플레이어가 주변을 둘러볼 여유가 생기니까요. 개발 중에는 데드존을 시각화해서 확인하는 것이 좋습니다.

this.cameras.main.deadzone 객체를 사용해서 사각형을 그려볼 수 있습니다. 실제 플레이할 때는 이 시각화를 끄면 됩니다.

김개발 씨가 데드존을 설정하고 게임을 다시 테스트했습니다. 캐릭터가 화면 중앙 근처에서 움직일 때는 카메라가 안정적으로 고정되어 있었고, 많이 이동할 때만 부드럽게 따라왔습니다.

QA 담당자도 만족스러워했습니다. "훨씬 나아졌어요!"

실전 팁

💡 - 화면 크기의 20~30% 정도로 데드존을 설정하는 것이 일반적입니다

• 수직 슈팅 게임에서는 좌우 데드존을 크게, 상하 데드존을 작게 설정합니다

---

4. 부드러운 카메라 이동

게임의 기본 카메라 시스템은 완성되었지만, 김개발 씨는 뭔가 아쉬웠습니다. 캐릭터가 빠르게 방향을 바꿀 때 카메라도 딱딱하게 움직였습니다.

고급 게임들처럼 카메라가 부드럽게 따라오는 느낌을 어떻게 만들 수 있을까요?

부드러운 카메라 이동은 선형 보간(lerp)을 활용해 카메라가 목표 위치로 서서히 이동하게 만드는 기법입니다. 마치 고무줄로 연결된 것처럼, 당기면 천천히 따라오고 멀리 가면 더 빠르게 따라옵니다.

이 기법으로 프로페셔널한 카메라 연출이 가능해집니다.

다음 코드를 살펴봅시다.

// 카메라 팔로우와 lerp 설정
this.cameras.main.startFollow(this.player, true, 0.08, 0.08);

// 또는 별도로 lerp 값 설정
this.cameras.main.setLerp(0.1, 0.05);

// 수동으로 부드러운 카메라 이동 구현
// update 함수에서
const camera = this.cameras.main;
const targetX = this.player.x;
const targetY = this.player.y;
const lerpFactor = 0.1;

camera.scrollX += (targetX - camera.scrollX - camera.width/2) * lerpFactor;
camera.scrollY += (targetY - camera.scrollY - camera.height/2) * lerpFactor;

박시니어 씨가 김개발 씨에게 질문했습니다. "혹시 lerp가 뭔지 알아요?" 김개발 씨가 고개를 저었습니다.

"선형 보간이라고 들어보긴 했는데, 정확히는 모르겠어요." Lerp는 Linear Interpolation의 줄임말입니다. 한국어로 선형 보간이죠.

고무줄을 생각해 보세요. 한쪽 끝에 손가락을 대고, 다른 쪽 끝에 공을 매달았습니다.

손가락을 움직이면 공이 바로 따라오지 않고, 고무줄이 늘어나면서 천천히 따라옵니다. 손가락이 멀리 가면 고무줄이 더 팽팽해져서 공이 더 빨리 따라오고, 가까워지면 느리게 따라옵니다.

Lerp가 바로 이 원리입니다. startFollow의 세 번째, 네 번째 인자가 lerp 값입니다.

0.08로 설정하면, 매 프레임마다 현재 위치와 목표 위치의 차이를 8%씩 줄여나갑니다. 값이 작을수록 더 느리고 부드럽게, 값이 클수록 더 빠르고 즉각적으로 따라옵니다.

1로 설정하면 lerp 효과 없이 즉시 따라옵니다. x축과 y축의 lerp를 다르게 설정할 수도 있습니다.

예를 들어 **setLerp(0.1, 0.05)**로 설정하면, 좌우 이동에는 빠르게 반응하고 상하 이동에는 느리게 반응합니다. 플랫포머 게임에서 점프할 때 카메라가 너무 출렁이지 않게 하려면 y축 lerp를 낮게 설정하면 됩니다.

코드의 마지막 부분은 lerp를 수동으로 구현한 것입니다. Phaser의 내장 기능을 쓰지 않고 직접 제어하고 싶을 때 유용합니다.

현재 위치와 목표 위치의 차이에 lerpFactor를 곱해서 조금씩 이동시킵니다. 주의할 점이 있습니다.

lerp 값이 너무 작으면 카메라가 플레이어를 영영 따라잡지 못할 수 있습니다. 빠르게 달리는 플레이어를 0.01의 lerp로 추적하면, 플레이어가 계속 화면 가장자리에 있게 됩니다.

게임 속도와 lerp 값의 균형을 맞춰야 합니다. 김개발 씨가 lerp를 0.08로 설정하자, 카메라가 마치 촬영 감독이 핸드헬드 카메라로 찍는 것처럼 자연스럽게 움직였습니다.

"와, 이것만으로 게임이 훨씬 고급스러워 보여요!"

실전 팁

💡 - 일반적으로 0.05~0.15 사이의 lerp 값이 좋은 결과를 냅니다

• 점프가 많은 게임에서는 y축 lerp를 x축보다 낮게 설정하세요

---

5. 패럴랙스 배경

게임의 카메라 시스템이 완성되어 가고 있었습니다. 그런데 기획자가 새로운 요청을 했습니다.

"배경이 너무 밋밋해요. 산은 천천히 움직이고, 나무는 빨리 지나가는 그런 깊이감 있는 배경을 넣을 수 있을까요?"

패럴랙스 배경은 여러 겹의 배경 레이어가 서로 다른 속도로 움직여 깊이감을 표현하는 기법입니다. 마치 기차를 타고 가면서 창밖을 볼 때, 가까운 전봇대는 빠르게 지나가고 먼 산은 천천히 움직이는 것과 같습니다.

이 착시 효과로 2D 게임에서도 3D 같은 공간감을 만들어냅니다.

다음 코드를 살펴봅시다.

// 여러 겹의 배경 레이어 생성
this.bgFar = this.add.tileSprite(0, 0, 1920, 1080, 'sky')
    .setOrigin(0, 0)
    .setScrollFactor(0);  // 고정 배경

this.bgMid = this.add.tileSprite(0, 200, 1920, 600, 'mountains')
    .setOrigin(0, 0)
    .setScrollFactor(0.3);  // 30% 속도로 스크롤

this.bgNear = this.add.tileSprite(0, 400, 1920, 400, 'trees')
    .setOrigin(0, 0)
    .setScrollFactor(0.6);  // 60% 속도로 스크롤

// update 함수에서 tileSprite 위치 업데이트
this.bgMid.tilePositionX = this.cameras.main.scrollX * 0.3;
this.bgNear.tilePositionX = this.cameras.main.scrollX * 0.6;

김개발 씨가 물었습니다. "패럴랙스가 뭐예요?

처음 들어보는 용어인데요." 박시니어 씨가 창문을 가리켰습니다. "저 창밖을 봐요.

지금 우리 건물은 움직이지 않죠? 그런데 만약 차를 타고 달리면서 본다면?" 패럴랙스 효과는 우리가 매일 경험하는 현상입니다.

자동차를 타고 고속도로를 달려본 적 있나요? 도로 옆 가드레일은 순식간에 지나가지만, 들판 끝의 건물은 천천히 움직이고, 먼 산은 거의 제자리에 있는 것처럼 보입니다.

이것이 시차(parallax) 현상입니다. 가까운 물체일수록 빠르게, 먼 물체일수록 느리게 움직이는 것처럼 보이죠.

게임에서 이 효과를 구현하려면 배경을 여러 레이어로 나눠야 합니다. 가장 먼 배경인 하늘은 **setScrollFactor(0)**으로 설정합니다.

0은 카메라가 움직여도 전혀 움직이지 않는다는 뜻입니다. 하늘은 어디서 봐도 같은 위치에 있으니까요.

그 다음 산 레이어는 **setScrollFactor(0.3)**입니다. 카메라가 100픽셀 움직이면 산은 30픽셀만 움직입니다.

멀리 있으니 천천히 움직이는 것처럼 보이죠. 가까운 나무 레이어는 **setScrollFactor(0.6)**입니다.

카메라 움직임의 60%만큼 따라옵니다. 산보다는 빠르지만 전경보다는 느립니다.

전경인 플레이어와 타일맵은 기본값 1.0으로, 카메라와 동일하게 움직입니다. tileSprite를 사용하면 배경 이미지가 타일처럼 반복됩니다.

긴 스테이지에서도 작은 이미지 하나로 끝없이 이어지는 배경을 만들 수 있습니다. update 함수에서 tilePositionX를 갱신해서 스크롤 효과를 만듭니다.

레이어 순서도 중요합니다. 먼저 생성한 것이 아래에 깔리므로, 멀리 있는 배경부터 순서대로 생성해야 합니다.

하늘, 산, 나무, 그리고 마지막에 플레이어 순서로요. 김개발 씨가 패럴랙스 배경을 적용하자, 평면적이던 게임이 갑자기 깊이감을 갖게 되었습니다.

캐릭터가 뛰어갈 때 멀리 산이 천천히 지나가고, 가까운 나무가 빠르게 스쳐갔습니다. "2D 게임인데 입체감이 느껴져요!"

실전 팁

💡 - 보통 3~5개의 레이어로 충분한 깊이감을 표현할 수 있습니다

• scrollFactor는 0(고정)에서 1(카메라와 동일) 사이의 값을 사용합니다

---

6. 카메라 이펙트

게임 개발이 거의 마무리 단계에 접어들었습니다. 그런데 보스전에서 뭔가 허전했습니다.

보스에게 큰 데미지를 입었는데 화면이 그대로인 게 어색했습니다. "대형 게임들은 피격당하면 화면이 흔들리던데, 그런 효과는 어떻게 넣나요?"

카메라 이펙트는 화면 흔들림, 페이드 인/아웃, 플래시 등의 시각 효과를 말합니다. 마치 영화에서 폭발 장면에 카메라가 흔들리는 것처럼, 게임에서도 이런 효과로 임팩트와 몰입감을 높일 수 있습니다.

Phaser는 다양한 카메라 이펙트를 기본으로 제공합니다.

다음 코드를 살펴봅시다.

// 화면 흔들림 효과 (피격, 폭발 등)
this.cameras.main.shake(200, 0.01);  // 200ms 동안, 강도 0.01

// 페이드 아웃 (장면 전환)
this.cameras.main.fadeOut(1000, 0, 0, 0);  // 1초 동안 검은색으로

// 페이드 인 (장면 시작)
this.cameras.main.fadeIn(500);  // 0.5초 동안 페이드 인

// 플래시 효과 (번개, 대미지 등)
this.cameras.main.flash(300, 255, 0, 0);  // 빨간색 플래시

// 이펙트 완료 콜백
this.cameras.main.once('camerafadeoutcomplete', () => {
    this.scene.start('NextScene');
});

박시니어 씨가 설명을 시작했습니다. "게임에서 **주스(juice)**라는 개념이 있어요.

게임에 즙을 짜넣는다고 해야 할까요. 카메라 이펙트가 대표적인 주스 요소예요." 영화를 떠올려 보세요.

주인공이 펀치를 맞으면 카메라도 함께 흔들립니다. 폭발이 일어나면 화면이 하얗게 번쩍이죠.

장면이 바뀔 때는 서서히 어두워졌다가 다시 밝아집니다. 이런 효과들이 없으면 화면이 건조하고 밋밋하게 느껴집니다.

shake 효과는 가장 많이 쓰이는 카메라 이펙트입니다. 첫 번째 인자는 지속 시간(밀리초), 두 번째는 강도입니다.

강도는 0.001에서 0.05 정도가 적당합니다. 0.01이면 적당한 흔들림, 0.05면 강한 진동입니다.

보스의 강력한 공격에 맞았을 때, 폭탄이 터졌을 때, 착지했을 때 등에 활용합니다. fadeOut과 fadeIn은 장면 전환에 필수입니다.

fadeOut(1000, 0, 0, 0)은 1초 동안 검은색(RGB 0,0,0)으로 서서히 어두워집니다. 새 장면이 시작될 때 fadeIn으로 밝아지면 자연스러운 전환이 됩니다.

색상을 바꿔서 흰색으로 페이드하면 회상 장면 연출도 가능합니다. flash는 순간적인 번쩍임입니다.

빨간색 플래시는 피격, 흰색 플래시는 폭발이나 번개, 노란색 플래시는 아이템 획득 등에 쓰입니다. 중요한 것은 이벤트 콜백입니다.

**once('camerafadeoutcomplete', callback)**으로 페이드 아웃이 끝난 시점을 잡아서 다음 장면으로 전환합니다. 이 콜백 없이 바로 전환하면 페이드 효과가 씹히게 됩니다.

주의할 점도 있습니다. 카메라 이펙트를 남용하면 오히려 피로감을 줍니다.

모든 공격에 화면이 흔들리면 게임을 오래 할 수 없게 되죠. 중요한 순간에만 절제해서 사용하는 것이 좋습니다.

김개발 씨가 보스전에 shake 효과를 넣고, 스테이지 클리어 시 fadeOut을 적용했습니다. 게임에 생동감이 더해졌습니다.

"이제 진짜 상용 게임 같아요!" 드디어 그의 첫 게임이 완성되었습니다.

실전 팁

💡 - shake 강도는 0.005~0.02 범위에서 시작해 조절하세요

• 모바일 게임에서는 진동 API와 함께 사용하면 효과가 배가됩니다
• 접근성을 위해 카메라 흔들림을 끌 수 있는 옵션을 제공하는 것이 좋습니다

---

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