⚡ 라이트닝 라이더 라라

번개 소녀 라라가 전기 미로를 스와이프로 질주하며, 상승하는 방전 파동을 피해 탈출하는 아케이드 러너

Phaser 3SpinePortrait 9:16540×960모바일 웹
항목내용
프로젝트명라이트닝 라이더 라라 (Lightning Rider Lara)
장르아케이드 퍼즐 러너 (Pac-Man 스타일)
레퍼런스Tomb of the Mask (Happymagenta / Playgendary)
엔진Phaser 3 (WebGL)
애니메이션Spine (phaser-spine 플러그인)
플랫폼모바일 웹 (iOS Safari / Android Chrome), 데스크톱
해상도세로형 9:16 — 기준 540×960
타일32×32px (스케일링 대응)
👆
손맛
스와이프 → 즉각 슬라이딩 → 벽 충돌 피드백 0.1초 이내
😰
긴장감
아래에서 올라오는 '방전 파동' 압박
수집 쾌감
Volt Orb 수집 → 전류 이펙트 + 진동
📈
성장 보상
영구 업그레이드 + 코스튬 해금
구분Tomb of the Mask라라 버전
이동4방향 스와이프 슬라이딩동일
위협상승 용암(Lava)방전 파동(Discharge Wave)
수집도트/코인Volt Orb
파워업마그넷, 프리즈 등전기 테마 (자기장, 과충전 등)
캐릭터단순 마스크 아이콘Spine 기반 라라
테마네온 블루/그린전기/회로 기판 (보라+시안+옐로)
모드아케이드 + 스테이지동일
💡
스와이프 → 해당 방향 직진 → 벽/장애물 충돌 정지 → 다음 입력 대기
입력 버퍼링
슬라이딩 중 다음 방향 입력 → 벽 도달 즉시 전환
이동 속도
기본 12 타일/초, 최대 18 타일/초
충돌 판정
타일 기반 AABB, 히트박스 = 1타일
코너링
불가 — 반드시 벽에 멈춘 후 전환
🚨
Tomb of the Mask의 "상승 용암" 대응 — 핵심 긴장 요소
초기 속도1.5 t/s 최대 속도6.0 t/s 가속0.05 t/s² 접촉 시즉사
단계조건연출
🟡 경고화면 하단 15%하단 번쩍임 + 저주파 진동
🟠 접근화면 하단 30%전기 크랙 텍스처 + 노이즈 SFX
🔴 임박캐릭터 3타일 이내카메라 흔들림 + 붉은 비네트
💀 접촉충돌화이트아웃 → 사망 연출
ID타일기능비주얼
0빈 공간이동 가능어두운 회로 기판
1이동 차단, 충돌 정지회로 라인 + 글로우
2Volt Orb수집 아이템노란 전기 구슬
3스파이크접촉 시 즉사전기 가시
4스파이크 트랩주기적 ON/OFF바닥 전극, 2초 토글
5이동 벽왕복 이동전자기 블록
6텔레포터쌍 간 순간이동보라 포탈 링
7부서지는 벽1회 파괴금간 회로
8일방통행특정 방향만화살표 전극
9파워업 캡슐파워업 획득빛나는 캡슐
원본(TotM)라라 버전행동 패턴
Ghost전자 유령 (E-Ghost)플레이어 추적, 벽 통과 불가
Pufferfish전기 해파리 (Volt Jelly)확장/수축, 접촉 즉사
Spinning Blade회전 전극 (Rotor)고정점 회전, 2타일 반경
Fireball볼 라이트닝직선 이동, 벽에서 반사
파워업효과지속TotM
⚡ 자기장주변 2타일 Orb 흡수8초Magnet
🔋 과충전속도 1.5배 + 무적5초Shield
❄️ EMP 펄스모든 적/트랩 정지3초Freeze
💡 서킷 비전상단 5타일 미리보기6초신규
🔄 리버스 폴라리티방전 파동 후퇴3초신규
구조무한 상승형 스코어링Orb × 콤보 + 높이 리더보드주간/전체/친구 종료사망
구간방전트랩Orb파워업
0~501.5 t/s없음5%높음15%
50~1502.0 t/s낮음10%중간12%
150~3003.0 t/s중간15%중간10%
300~5004.0 t/s높음20%낮음8%
500+5~6 t/s매우 높음25%낮음5%
구조5챕터 × 20 = 100개 클리어출구 도달 ★클리어 ★★전Orb ★★★타임어택
챕터테마고유 기믹배경색
1. Circuit Board기본 미로없음 (튜토리얼)네이비+시안
2. Substation전류 흐름전류 벽 ON/OFF퍼플+옐로
3. Magnetic Storm자력 기믹자석 벽틸+마젠타
4. Plasma Core고속 위험추적형 볼 라이트닝레드+오렌지
5. Thunder Throne최종복합 + 보스블랙+골드
백발 + 빨간 리본붉은/주황 하의치비 2등신전기/번개 테마
💡
이동 시 전기 트레일 잔상, 벽 충돌 시 스파크 폭발
상태애니메이션프레임루프설명
대기idle12f호흡 + 머리카락 + 스파크
이동 좌/우slide_horizontal6f기울기 + 속도선 + 트레일
이동 상slide_up6f올려다보기 + 상승
이동 하slide_down6f내려다보기
벽 충돌wall_hit8f충격 + 스파크 폭발
아이템collect6f빛남 + 흡수
파워업powerup_active8f전신 글로우 + 오라
사망death16f감전→실루엣→파티클
승리victory20f점프 + 번개 포즈
텔레포트teleport_in/out6f전기 분해/재조립
코스튬스킨해금이펙트
기본default시작노란 전기
네온neon1,000 Orb시안 전기
플라즈마plasma5,000 Orb보라 플라즈마
골드gold올클리어금색 번개
쉐도우shadow아케이드 500+어둠+붉은 스파크
⚠️
에셋 총량: Spine 1세트 / 타일셋 ~32종 / 적 4종 / VFX 11종 / UI 16종+ / SFX 17종 / BGM 9트랙
ID트리거길이설명
SFX_SWIPE입력0.1s전기 스윗
SFX_SLIDE이동 중루프슬라이딩
SFX_WALL_HIT정지0.2s전기 임팩트
SFX_ORB_COLLECT수집0.15s팅 (피치↑)
SFX_ORB_COMBO연속0.2s피치↑↑
SFX_POWERUP_GET캡슐0.5s차징→폭발
SFX_POWERUP_END종료0.3s디차지
SFX_ENEMY_NEAR3타일0.3s저주파 험
SFX_DEATH즉사0.8s감전+단전
SFX_DISCHARGE_WARN15%루프웅웅
SFX_DISCHARGE_CLOSE3타일루프크래클
SFX_TELEPORT포탈0.3s전기 워프
SFX_BREAKABLE파괴0.3s유리+전기
SFX_STAGE_CLEAR출구1.0s팡파레
SFX_STAR결과0.3s별 1개당
SFX_UI_TAP0.1s클릭음
SFX_UI_BACK닫기0.1s디차지
ID용도길이BPM스타일
BGM_TITLE메인 메뉴60s120신스웨이브
BGM_ARCADE아케이드120s140고템포 일렉트로닉
BGM_STAGE_1회로 기판90s128칩튠+신스
BGM_STAGE_2변전소90s132다크 일렉
BGM_STAGE_3자기 폭풍90s136앰비언트
BGM_STAGE_4플라즈마90s142인텐스
BGM_STAGE_5번개 왕좌90s150에픽 신스 오케
BGM_GAMEOVER사망10s앰비언스
BGM_CLEAR클리어15s팡파레
/src
├── /scenes
│   ├── BootScene.js         — 에셋 프리로딩
│   ├── TitleScene.js        — 타이틀/메뉴
│   ├── ArcadeScene.js       — 아케이드 (핵심)
│   ├── StageScene.js        — 스테이지
│   ├── StageSelectScene.js  — 스테이지 선택
│   ├── ShopScene.js / ResultScene.js / UIScene.js
├── /entities
│   ├── Player.js            — 라라 (Spine + 이동)
│   ├── Enemy.js → EGhost / VoltJelly / Rotor / BallLightning
│   └── DischargeWave.js
├── /systems
│   ├── InputManager.js / TilemapManager.js / ProceduralGen.js
│   ├── CollisionSystem.js / ScoreManager.js / PowerupManager.js
│   └── CameraManager.js / AudioManager.js
├── /ui — HUD, Button, Panel
├── /data — DifficultyTable.json, StageData.json, ShopData.json
└── main.js
항목방법
타일 렌더링화면 내 Culling + StaticTilemapLayer
SpineGPU 스키닝, 아틀라스 1024² 제한
파티클ParticleEmitter, max 50
오디오WebAudio + Audio Sprite
메모리지나간 청크 destroy + 오브젝트 풀링
렌더저사양 → 0.75x 스케일
FPS60fps, 폴백 30fps
┌─────────────────────────────────┐ │ [⚡1923] [3816] │ Volt Orb / 점수 │ [⏸] │ 일시정지 │ │ │ ┌──────┐ │ │ │ 라라 │ │ 캐릭터 (상단 30%) │ └──────┘ │ │ [파워업 타이머 바] │ 활성시만 │ │ │ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ 방전 파동 └─────────────────────────────────┘
[앱 시작] → [스플래시 → 타이틀] → [메인 메뉴]
  ├─ [아케이드] → 플레이 → 게임오버 → 결과 → 메인
  ├─ [스테이지] → 선택 → 플레이 → 클리어/실패 → 선택
  ├─ [상점] → 코스튬/업그레이드
  └─ [설정] → 사운드/진동/언어
💡
모든 인터랙션에 시각+청각+햅틱+카메라 4채널 피드백
이벤트시각청각햅틱카메라
스와이프화살표 잔상SFX_SWIPE
슬라이딩전기 트레일SFX_SLIDE
벽 충돌스파크 파티클SFX_WALL_HIT30ms50ms 쉐이크
Orb 수집흡수+점수팝업SFX_ORB_COLLECT10ms
콤보컬러변화+배율SFX_COMBO ↑15ms
파워업 획득전신글로우SFX_POWERUP50ms100ms 줌인
사망감전→분해SFX_DEATH200ms300ms 쉐이크
방전 경고하단 번쩍임DISCHARGE_WARN
방전 임박붉은 비네트DISCHARGE_CLOSE펄스미세 흔들림
클리어번개 스트라이크SFX_CLEAR100ms줌아웃
재화획득사용처
Volt Orb (소프트)게임플레이코스튬, 업그레이드, 컨티뉴
라이트닝 크리스탈 (하드)광고 / IAP프리미엄, 즉시 해금, 광고 제거
업그레이드효과최대비용
슬라이드 속도+5%/Lv5100/300/600/1K/2K
파워업 지속+1초/Lv5200/500/1K/1.5K/3K
자석 범위+0.5타일3300/800/2K
무료 부활+1회25K/15K
시작 파워업랜덤 획득110K
유형트리거보상
보상형 영상게임오버 → 부활현위치 부활 1회
보상형 영상결과 → 2배Orb ×2
배너메뉴/상점 하단
전면3판마다IAP로 제거
💡
총 약 9주 — Phase 1~2가 핵심 (스와이프 버퍼링 + calculateSlideTarget 집중)
Phase 1핵심 루프
2주
1.Phaser 3 프로젝트 세팅 + 세로 화면
2.타일맵 렌더링 (정적 미로 1개)
3.스와이프 입력 → 4방향 슬라이딩
4.벽 충돌 정지 로직
5.플레이스홀더 캐릭터 (컬러 사각형)
Phase 2게임플레이
2주
1.방전 파동 상승 + 게임오버
2.Volt Orb 배치 + 수집
3.장애물 (스파이크, 트랩)
4.점수 시스템 + HUD
5.절차적 미로 생성 (아케이드)
Phase 3캐릭터 & 비주얼
2주
1.Spine 캐릭터 '라라' 통합
2.전기 테마 타일셋 적용
3.VFX (트레일, 스파크, 방전 이펙트)
4.카메라 시스템 (추적 + 쉐이크)
5.햅틱 피드백
Phase 4콘텐츠 & 폴리시
2주
1.적 AI (E-Ghost, Volt Jelly 등)
2.파워업 시스템
3.스테이지 모드 (최소 20레벨)
4.BGM + SFX 전체 적용
5.튜토리얼
Phase 5메타 & 수익화
1주
1.코스튬/상점
2.영구 업그레이드
3.광고 통합
4.리더보드 (로컬 → 서버)
5.앱 스토어 빌드 (Capacitor)
화면
해상도540×960
비율9:16 세로
타일32×32px
맵 폭11타일
이동
기본 속도12 t/s
최대 속도18 t/s
히트박스28×28px
스와이프 최소20px
인식 시간150ms
방전 파동
초기1.5 t/s
최대6.0 t/s
가속0.05 t/s²
성능
FPS60 (폴백 30)
아틀라스1024²
파티클최대 50
청크16타일
원본라라 버전구현
마스크라라Spine 2D
네온 배경회로 기판TilemapLayer
용암방전 파동Sprite+Shader
코인Volt OrbSprite+Tween
스파이크전기 스파이크Sprite+Anim
고스트전자 유령추적 FSM
퍼퍼피시전기 해파리확장/수축
마그넷자기장Particle+흡수
프리즈EMP 펄스정지+이펙트
쉴드과충전무적+속도↑
마스크 16종코스튬 5종+Spine Skin
아케이드아케이드절차적 생성
스테이지스테이지JSON 맵