TOOLS GAMES DEVLOG DOCS ABOUT CONTACT
HOME > DOCS > Unity / C# > HD-2D 스타일 연출: 3D 배경 속 2D 픽셀 빌보드(Billboard)와 URP 피사계 심도(DoF)
Unity / C# Intermediate Unity 2022.3+ / Unity 6 (URP)

HD-2D 스타일 연출: 3D 배경 속 2D 픽셀 빌보드(Billboard)와 URP 피사계 심도(DoF)

Octopath Traveler 스타일: 3D 복셀/로우폴리 지형에 실시간 조명·그림자를 받는 2D 도트 캐릭터를 배치하고 URP Tilt-Shift 및 블룸으로 디오라마 감성을 완성하는 아키텍처.

#Unity #3D #2D #HD-2D #Billboard #DepthOfField #URP
핵심 개념HD-2D는 고전 16비트 도트 픽셀 캐릭터를 현대적인 언리얼/유니티 3D 엔진의 PBR 조명, 실시간 부드러운 그림자, 피사계 심도(Depth of Field / Tilt-Shift) 효과가 가득한 3D 환경에 결합한 하이브리드 비주얼 장르입니다. 2D 캐릭터가 3D 그림자를 자연스럽게 드리우고 카메라를 바라보게 만드는 빌보드 구조가 핵심입니다.

1. Y축 고정 카메라 빌보드(Billboard) 컴포넌트

HD2DBillboard.cs
using UnityEngine;

public class HD2DBillboard : MonoBehaviour
{
    [SerializeField] private bool lockX = true; // 좌우 회전만 허용하고 눕지 않도록 X축 잠금
    [SerializeField] private bool lockZ = true;

    private Camera _mainCamera;

    private void Start()
    {
        _mainCamera = Camera.main;
    }

    private void LateUpdate()
    {
        if (_mainCamera == null) return;

        // 카메라 정면을 바라보도록 회전 정렬
        Vector3 forwardDirection = _mainCamera.transform.forward;

        if (lockX) forwardDirection.y = 0f; // 캐릭터가 하늘/땅으로 눕는 현상 방지
        forwardDirection.Normalize();

        if (forwardDirection.sqrMagnitude > 0.001f)
        {
            transform.rotation = Quaternion.LookRotation(forwardDirection, Vector3.up);
        }
    }
}

2. 2D 스프라이트의 3D 그림자 캐스팅(Shadow Casting) 세팅

  • Cast Shadows = Two Sided: 2D SpriteRenderer의 인스펙터 Debug 모드 또는 C# 스크립트에서 SpriteRenderer.shadowCastingMode = ShadowCastingMode.TwoSided로 활성화하면 얇은 2D 캐릭터가 3D 지형 바닥에 길고 사실적인 3D 그림자를 자연스럽게 떨어뜨립니다.
  • URP Lit 머티리얼 적용: 기본 언릿 스프라이트 머티리얼 대신 URP Lit 셰이더(또는 Alpha-test 지원 커스텀 PBR 셰이더)를 연결해야 3D 포인트 라이트 및 횃불 광원에 실시간으로 명암이 반영됩니다.

3. 디오라마 감성을 완성하는 URP Volume 포스트 프로세싱

볼륨 이펙트추천 세팅 파라미터시각적 효과
Depth of Field (Bokeh)Focus Distance: 10m, F-number: 1.4, Focal Length: 75mm플레이어 주변만 선명하고 상하단 원경이 몽환적으로 흐려져 미니어처 디오라마 느낌 부여 (틸트시프트)
BloomThreshold: 0.9, Intensity: 1.2, Scatter: 0.7횃불, 마법 이펙트, 창문으로 쏟아지는 햇살이 도트 외곽선 위로 번져나가는 환상적인 분위기 연출
Color AdjustmentsPost Exposure: +0.2, Contrast: 15, Saturation: 20현대적인 고채도 비주얼 톤으로 레트로 도트 색감을 리마스터링