니케 버스트 스킬 연출 리버스 엔지니어링 분석

REVERSE ENGINEERING

게임 기획 실습 — 리버스 엔지니어링 특강

승리의 여신: 니케

버스트 스킬 연출 리소스

역기획 분석

Asset

Motion

Effect

Sequence

4단계 파이프라인 기반 완전 분해

가천대학교 게임영상학과 | 게임 기획 실습

01 / 14

분석 대상 소개

왜 니케인가? — 분석 대상 선정 근거

장르 특성

슈팅+서브컬처 하이브리드 — 2D 일러스트 컷인 × 3D 배경 × Spine 캐릭터 혼합 아키텍처

버스트 스킬의 구조적 복잡성

3단계 버스트 체인(Burst I→II→III) × 캐릭터별 고유 컷인 × 카메라 연출 × 후처리 FX 중첩

역기획 학습 가치

리소스·코드 경계가 명확 / Spine 파츠 분리 구조 학습 최적 / 모바일 최적화 사례 포함

개발: 시프트업(SHIFT UP) | 출시: 2022 | 글로벌 누적 매출 $1B+ | 플랫폼: Mobile/PC

02 / 14

PURPOSE · 분석 목적

역기획의 목적 — 리소스 환원 및 로직 이해

역기획(Reverse Engineering)이란 무엇인가

ASSET

Sprite · Mesh · Texture

MOTION

Animation States · Curves

EFFECT

Particle · Glow · Post-FX

SEQUENCE

Camera · Timing · Logic

리소스(Resource)란

<strong style='color:#FFFFFF; font-size: 28px; font-weight: 500;'>파일로 존재하는 결과물</strong><div style='margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px;'><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>스프라이트 PNG</div><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>파티클 텍스처</div><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>Spine 바이너리</div><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>사운드 WAV</div></div>

코드(Code)란

<strong style='color:#FFFFFF; font-size: 28px; font-weight: 500;'>런타임에 수치로 제어되는 로직</strong><div style='margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px;'><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>Tween 보간</div><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>카메라 쉐이크 진폭</div><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>블렌드 타이밍</div><div style='background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 6px; font-size: 20px; color: #CCCCCC; border: 1px solid rgba(255,255,255,0.1);'>FSM 전이</div></div>

≠ 엄격히 구분

가천대학교 게임영상학과 | 게임 기획 실습

03 / 14

LAYER STRUCTURE

화면 레이어 구조 분석 — 6개 레이어 분리

버스트 스킬 화면을 6개 레이어로 분해한다

Layer 6

UI HUD

버스트 게이지바, 스킬 아이콘, 데미지 팝업 숫자

리소스+코드

Layer 5

Post-FX

Bloom·Chromatic Aberration·Vignette / 전체 화면 셰이더

코드

Layer 4

FX Glow

Additive 블렌딩 글로우 레이어 / 빛 번짐 소프트파티클

리소스

Layer 3

FX Base

기본 이펙트 파티클 텍스처 / 타격 충격파·잔상

리소스

Layer 2

캐릭터 Spine

Spine2D 바이너리(.skel/.atlas) / Head·Body·Weapon 파츠 분리

리소스

Layer 1

BG(배경)

#1a1a2e 진한 배경, 3D 렌더 또는 프리렌더 영상 / 스크롤·줌 모션은 코드

리소스+코드

04 / 14

가천대학교 게임영상학과 | 게임 기획 실습

LAYER · BLEND MODE

각 레이어는 어떻게 합성되는가

— Blend Mode 역추적

FX Base Layer

Alpha Blend

파티클 불투명도 조절, 자연스러운 연기·잔상

FX Glow Layer

Additive(Add)

빛 번짐 글로우, 색이 밝아지며 합산

Post-FX Layer

Screen / 전체 셰이더

Bloom Threshold 이상 픽셀 확산

글로우를 별도 레이어로 분리하는 이유

기본 이펙트의 형태(Base)를 유지하면서 발광 강도만 독립 제어 가능

이펙트 텍스처 1종으로 다양한 색상·강도 변형 가능 (최적화)

가천대학교 게임영상학과 | 게임 기획 실습

05 / 14

CHARACTER ASSET · Spine

캐릭터 에셋

Spine 파츠 계층 구조 역기획

Root

Head

눈깜빡임 Bone · 입모양 텍스처 스왑 · 표정 교체

Hair

물리 시뮬레이션 bone 체인 · Gravity 적용

Body

흉부 chest bone 미세 Scale 호흡 모션

L_Hand/R_Hand

무기 Slot 부착 · 스킬 포즈 전환 IK

Weapon

별도 Attachment · 스킬 발동 시 이펙트 Slot 활성화

Clothes

스커트 · 리본 bone 중력 물리

Head 파츠

눈깜빡임은 2~4프레임 텍스처 스왑

표정은 Region Attachment 교체

Idle 루프 60~90프레임

Body 파츠

호흡 모션 chest bone ±3% Scale

Squash&Stretch로 프레임 절약

Weapon 파츠

스킬 발동 Trigger

Attachment 교체 + FX Slot 활성화

06 / 14

게임 기획 실습 — 캐릭터 리소스 분석

CHARACTER MOTION · FSM

캐릭터 모션 상태 분석 — FSM 역기획

모션 상태 머신(FSM) ⸺ Idle → Attack → Hit 전이 분석

Idle

루프

Pre-Attack

예비동작

Attack

공격

Hit

피격

스킬 트리거

0.15s

히트판정

복귀

Idle 상태

60~120프레임 루프

호흡+눈깜빡임 Blend

루프 포인트 설계로 무한 재생

Attack 상태

예비동작(Anticipation) 필수

Squash -15% → 공격 +120% Scale

히트스탑 1~3프레임 Freeze로 타격감 강조 (코드)

코드 vs 리소스 구분

애니메이션 곡선 파일 (리소스)

블렌드 시간 설정 (코드)

히트스탑 지속 시간 제어 (코드)

게임 기획 실습 — 리버스 엔지니어링 특강

07 / 14

EFFECT ASSET · FX Layers

이펙트 리소스 분석 — Base Layer & Glow Layer 합성 역추적

버스트 스킬 이펙트

Base FX와 Glow FX의 합성 구조

Base FX Texture

폭발 형태 PNG 시퀀스

Alpha Blend

연기·파편·충격파 형태 정의

Glow FX Texture

같은 형태에 채도 높은 색 적용

Additive 블렌딩

광원 번짐 표현

Post-Processing

Bloom 필터로 임계값 이상 픽셀 확산

Chromatic Aberration 색수차

코드로 후처리 제어

왜 Base와 Glow를 분리하는가?

형태(Base)와 발광(Glow) 독립 제어 → 같은 텍스처에 색상·강도만 바꿔 캐릭터별 고유 스킬 구현 (최적화)

Glow만 켜고 끄는 방식으로 히트스탑 순간 타격감을 극대화 (코드 1줄 제어)

텍스처 메모리 및 드로우콜 절감 → Base Atlas 공유 후 색조(Hue) 파라미터 조절

실제 추정 텍스처 목록 (Resource Profiling)

파일명

크기

프레임수

블렌딩

FX_Burst_Base_Atlas.png

2048 x 2048

8x8 (64 Frm)

Alpha Blend

FX_Burst_Glow_Atlas.png

1024 x 1024

8x8 (64 Frm)

Additive

가천대학교 게임영상학과 | 게임 기획 실습

08 / 14

EFFECT ASSET · Cut-in

컷인(Cut-in) 연출 리소스 분석 — 2D 일러스트 + 3D 전환

버스트 컷인 시퀀스 — 2D 일러스트 에셋 구조 역기획

컷인 에셋 구성 목록

컷인 시퀀스 단계별 설명

컷인 일러스트 레이어

배경 레이어

BG_cutin_[캐릭터명].png

캐릭터 레이어

CHAR_cutin_[캐릭터명].png

외곽 하이라이트 Glow 레이어

FX_cutin_outline.png

화면 분할 마스크

사선 또는 직선 분할 Mask Sprite

슬라이드인 방향 코드로 제어

화면 전환 오버레이

HUD 어두워짐 Overlay

알파값 코드 Tween

Phase A

전체화면 어두워짐

레이어 오버레이 알파 0 → 0.8

코드 제어

Phase B

일러스트 슬라이드인

마스크 Reveal 애니메이션 + 사운드

리소스 + 코드

Phase C

3D 전환

컷인 페이드아웃 + 3D 씬 등장

코드 전환

기획 의도

캐릭터 매력 극대화 순간(IP 가치)

스킬 발동 임팩트 강조

서브컬처 장르 팬층 기대 충족

가천대학교 게임영상학과 | 게임 기획 실습

09 / 14

SEQUENCE TIMELINE · 0.1s 단위

버스트 스킬 연출 타임라인 (0.0s ~ 2.5s)

가천대학교 게임영상학과 | 게임 기획 실습

10 / 14

DESIGN INTENT · Why

기획 의도 분석 — 2D 일러스트 + 3D 배경 결합 이유

왜 니케는 2D 일러스트와 3D 배경을 결합했는가

[가독성 관점]

2D 컷인: 캐릭터 얼굴·포즈를 최고 화질로 순간 각인

3D 배경 위에 2D를 얹으면 캐릭터가 즉시 전면으로 점프

평면 일러스트가 오히려 소화면 모바일에서 눈에 더 잘 띔

[타격감 관점]

3D 배경 전환 시 카메라 자유도 확보

Depth of Field·카메라 쉐이크를 3D 공간에서 자연스럽게 구현

2D만으로는 불가능한 입체적 스킬 임팩트 연출

[최적화 관점]

컷인 일러스트는 단 1장 PNG (드로우콜 최소)

3D 씬은 미리 프리렌더 영상으로 처리 가능

Spine 실시간 렌더+3D 영상 교체로 GPU 부하 분산

2D 매력(IP 가치)

3D 임팩트(타격감)

리소스 효율(최적화)

세 목표를 동시 달성

11 / 14

DESIGN INTENT · Code vs Resource

카메라 쉐이크(Camera Shake)는 왜 리소스가 아닌 코드인가

구현 원리

Camera Transform에 sin(time × frequency) × amplitude × damping을 매 프레임 적용 (약 3~5줄 코드).

진폭(Amplitude)·주파수(Frequency)·감쇠(Damping)를 파라미터로 외부에서 제어

항목

코드 처리

리소스 처리

수정 비용

파라미터 수치 1개 변경

영상 파일 전체 재제작

상황별 대응

데미지량·스킬급에 따라 강도 동적 조절

강도 고정(파일에 종속)

메모리

0byte 추가

영상 파일 용량 추가

최적화

연산 최소

파일 로딩 시간 추가

히트스탑(Time.timeScale 일시 정지)과 카메라 쉐이크를 코드로 연계 → 히트스탑 해제 순간 쉐이크 발동 타이밍을 프레임 단위로 제어 가능.

이를 리소스로 처리하면 히트스탑 가변 길이에 동기화 불가능

가천대학교 게임영상학과 | 게임 기획 실습

12 / 14

OPTIMIZATION · Mobile

니케 버스트 스킬의 모바일 최적화 전략 분석

스프라이트 아틀라스

파티클 텍스처를 단일 Atlas PNG로 패킹 → SetPass Call(드로우콜) 최소화

FX_burst_atlas.png 1장으로 10종 파티클 처리

Object Pooling

파티클 오브젝트 미리 생성 → Pool에서 Dequeue/Enqueue

스킬 발동 시 Instantiate 비용 0 → GC Allocation 방지

Spine 파츠 분리

전체 캐릭터 재렌더 대신 변경된 파츠 Bone만 업데이트

호흡 모션: chest bone 1개만 Scale → 전체 텍스처 리빌드 없음

LOD 전략

컷인 Phase: 고해상도 일러스트(2048px) / 전투 Phase: Spine 실시간 렌더(512px 텍스처)

거리·연출 단계별 품질 자동 전환

최적화 = 리소스 재사용 + 코드 제어 위임 + 연출 페이즈 분리

13 / 14

RESOURCE SPEC SHEET · 제작 요청서

리소스 제작 요청서 — 버스트 스킬 폭발 이펙트 & 캐릭터 컷인

[요청서 #001 | FX_burst_explosion_base]

[요청서 #002 | CHAR_cutin_illustration]

파일명:

FX_burst_explosion_base_001.png ~ _016.png (시퀀스)

규격:

512x512px, 투명 배경(알파채널), PNG-32

프레임 수:

16프레임, 24fps (약 0.67초)

루프:

없음 (1회 재생 후 소멸)

내용:

폭발 섬광→충격파→파편→연기 순서

블렌딩:

Alpha Blend (Glow 버전 별도 요청)

기획 의도:

히트스탑(1.4s) 직후 발동. 원본은 흰색~회색 계열, 캐릭터 색조는 코드 Hue Shift 처리.

파일명:

CHAR_cutin_[char_id]_base.png / CHAR_cutin_[char_id]_glow.png

규격:

1920x1080px(풀스크린), PNG-32

레이어 분리 납품:

배경 레이어 + 캐릭터 레이어 + 외곽선 Glow 레이어 (각각 별도 파일)

연출 시점:

0.3s~0.6s (약 0.3초 표시)

구도:

상반신 클로즈업, 시선 정면, 무기 강조 포즈

기획 의도:

IP 캐릭터 매력 각인. Glow 레이어는 Additive 합성이므로 검정 배경 기준 납품.

블루 아카이브 EX스킬 컷인 구도 / 니케 버스트 스킬 공식 영상 0.3s~0.6s 구간

가천대학교 게임영상학과 | 게임 기획 실습

14 / 14