게임 프로젝트 기초집LESSON 05

플레이 화면 만들기: 카메라·배경·분류 지점·기본 UI 배치하기

난이도초급 프로젝트

예상 시간50분

선수지식4강 게임 규칙 설계

5강. 플레이 화면 만들기: 카메라·배경·분류 지점·기본 UI 배치하기

1. 이번 강의에서 해결할 문제

아트 에셋이 준비될 때까지 기다리면 입력·판정·해상도 문제를 늦게 발견합니다. 기본 Square Sprite와 텍스트로 플레이 화면의 정보 구조를 먼저 만듭니다.

2. 학습 목표

3. 핵심 개념

회색 상자 단계에서는 충돌 영역과 정보 우선순위가 보이면 충분합니다. 월드 Sprite는 게임 공간, Screen Space Canvas는 점수·목숨·상태처럼 화면에 고정된 정보를 맡습니다. UI 배치는 한 해상도에 고정하지 않고 Anchor를 사용합니다.

4. 단계별 실습

C# · 파일 경로: Assets/_Project/Scripts/Gameplay/PlayfieldBounds.cs

PlayfieldBounds.cs
using UnityEngine;

namespace DeliverySorter.Gameplay
{
    public sealed class PlayfieldBounds : MonoBehaviour
    {
        [field: SerializeField] public float Left { get; private set; } = -4.5f;
        [field: SerializeField] public float Right { get; private set; } = 4.5f;
        [field: SerializeField] public float SpawnY { get; private set; } = 5.5f;
        [field: SerializeField] public float MissY { get; private set; } = -5.5f;

        public float ClampX(float x) => Mathf.Clamp(x, Left, Right);

        private void OnDrawGizmosSelected()
        {
            Gizmos.color = Color.cyan;
            Gizmos.DrawLine(new Vector3(Left, SpawnY), new Vector3(Right, SpawnY));
            Gizmos.color = Color.red;
            Gizmos.DrawLine(new Vector3(Left, MissY), new Vector3(Right, MissY));
        }
    }
}

Unity Editor 작업

Main Camera를 Orthographic으로 두고 배경색을 설정합니다.
Playfield GameObject에 PlayfieldBounds를 붙입니다.
BlueZone, OrangeZone, MissZone에 Square Sprite와 BoxCollider2D를 둡니다.
Canvas에 ScoreText, LivesText, StateText, StartPanel, PausePanel, GameOverPanel을 만듭니다.

Inspector 연결 작업: HUD 텍스트는 상단 Anchor, 상태 Panel은 Stretch를 사용합니다. Zone 색뿐 아니라 BLUE, ORANGE 텍스트 또는 아이콘도 함께 둡니다.

테스트 작업: Game 뷰에서 16:9, 4:3, 세로 비율을 바꾸고 Zone과 UI가 겹치거나 잘리지 않는지 기록합니다.

5. 코드가 동작하는 이유

플레이 경계를 한 컴포넌트에 모으면 입력과 생성 시스템이 같은 수치를 사용합니다. Gizmo는 빌드 화면을 장식하지 않고 에디터에서만 생성·놓침 선을 시각화합니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ