⚡ 라이트닝 라이더 라라
번개 소녀 라라가 전기 미로를 스와이프로 질주하며, 상승하는 방전 파동을 피해 탈출하는 아케이드 러너
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 | 벽 | 이동 차단, 충돌 정지 | 회로 라인 + 글로우 |
| 2 | Volt 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~50 | 1.5 t/s | 없음 | 5% | 높음 | 15% |
| 50~150 | 2.0 t/s | 낮음 | 10% | 중간 | 12% |
| 150~300 | 3.0 t/s | 중간 | 15% | 중간 | 10% |
| 300~500 | 4.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등신전기/번개 테마
💡
이동 시 전기 트레일 잔상, 벽 충돌 시 스파크 폭발
| 상태 | 애니메이션 | 프레임 | 루프 | 설명 |
|---|---|---|---|---|
| 대기 | idle | 12f | ✅ | 호흡 + 머리카락 + 스파크 |
| 이동 좌/우 | slide_horizontal | 6f | ✅ | 기울기 + 속도선 + 트레일 |
| 이동 상 | slide_up | 6f | ✅ | 올려다보기 + 상승 |
| 이동 하 | slide_down | 6f | ✅ | 내려다보기 |
| 벽 충돌 | wall_hit | 8f | ❌ | 충격 + 스파크 폭발 |
| 아이템 | collect | 6f | ❌ | 빛남 + 흡수 |
| 파워업 | powerup_active | 8f | ✅ | 전신 글로우 + 오라 |
| 사망 | death | 16f | ❌ | 감전→실루엣→파티클 |
| 승리 | victory | 20f | ❌ | 점프 + 번개 포즈 |
| 텔레포트 | teleport_in/out | 6f | ❌ | 전기 분해/재조립 |
| 코스튬 | 스킨 | 해금 | 이펙트 |
|---|---|---|---|
| 기본 | default | 시작 | 노란 전기 |
| 네온 | neon | 1,000 Orb | 시안 전기 |
| 플라즈마 | plasma | 5,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_NEAR | 3타일 | 0.3s | 저주파 험 |
| SFX_DEATH | 즉사 | 0.8s | 감전+단전 |
| SFX_DISCHARGE_WARN | 15% | 루프 | 웅웅 |
| SFX_DISCHARGE_CLOSE | 3타일 | 루프 | 크래클 |
| SFX_TELEPORT | 포탈 | 0.3s | 전기 워프 |
| SFX_BREAKABLE | 파괴 | 0.3s | 유리+전기 |
| SFX_STAGE_CLEAR | 출구 | 1.0s | 팡파레 |
| SFX_STAR | 결과 | 0.3s | 별 1개당 |
| SFX_UI_TAP | 탭 | 0.1s | 클릭음 |
| SFX_UI_BACK | 닫기 | 0.1s | 디차지 |
| ID | 용도 | 길이 | BPM | 스타일 |
|---|---|---|---|---|
| BGM_TITLE | 메인 메뉴 | 60s | 120 | 신스웨이브 |
| BGM_ARCADE | 아케이드 | 120s | 140 | 고템포 일렉트로닉 |
| BGM_STAGE_1 | 회로 기판 | 90s | 128 | 칩튠+신스 |
| BGM_STAGE_2 | 변전소 | 90s | 132 | 다크 일렉 |
| BGM_STAGE_3 | 자기 폭풍 | 90s | 136 | 앰비언트 |
| BGM_STAGE_4 | 플라즈마 | 90s | 142 | 인텐스 |
| BGM_STAGE_5 | 번개 왕좌 | 90s | 150 | 에픽 신스 오케 |
| 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 |
| Spine | GPU 스키닝, 아틀라스 1024² 제한 |
| 파티클 | ParticleEmitter, max 50 |
| 오디오 | WebAudio + Audio Sprite |
| 메모리 | 지나간 청크 destroy + 오브젝트 풀링 |
| 렌더 | 저사양 → 0.75x 스케일 |
| FPS | 60fps, 폴백 30fps |
┌─────────────────────────────────┐
│ [⚡1923] [3816] │ Volt Orb / 점수
│ [⏸] │ 일시정지
│ │
│ ┌──────┐ │
│ │ 라라 │ │ 캐릭터 (상단 30%)
│ └──────┘ │
│ [파워업 타이머 바] │ 활성시만
│ │
│ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ 방전 파동
└─────────────────────────────────┘
[앱 시작] → [스플래시 → 타이틀] → [메인 메뉴] ├─ [아케이드] → 플레이 → 게임오버 → 결과 → 메인 ├─ [스테이지] → 선택 → 플레이 → 클리어/실패 → 선택 ├─ [상점] → 코스튬/업그레이드 └─ [설정] → 사운드/진동/언어
💡
모든 인터랙션에 시각+청각+햅틱+카메라 4채널 피드백
| 이벤트 | 시각 | 청각 | 햅틱 | 카메라 |
|---|---|---|---|---|
| 스와이프 | 화살표 잔상 | SFX_SWIPE | — | — |
| 슬라이딩 | 전기 트레일 | SFX_SLIDE | — | — |
| 벽 충돌 | 스파크 파티클 | SFX_WALL_HIT | 30ms | 50ms 쉐이크 |
| Orb 수집 | 흡수+점수팝업 | SFX_ORB_COLLECT | 10ms | — |
| 콤보 | 컬러변화+배율 | SFX_COMBO ↑ | 15ms | — |
| 파워업 획득 | 전신글로우 | SFX_POWERUP | 50ms | 100ms 줌인 |
| 사망 | 감전→분해 | SFX_DEATH | 200ms | 300ms 쉐이크 |
| 방전 경고 | 하단 번쩍임 | DISCHARGE_WARN | — | — |
| 방전 임박 | 붉은 비네트 | DISCHARGE_CLOSE | 펄스 | 미세 흔들림 |
| 클리어 | 번개 스트라이크 | SFX_CLEAR | 100ms | 줌아웃 |
| 재화 | 획득 | 사용처 |
|---|---|---|
| Volt Orb (소프트) | 게임플레이 | 코스튬, 업그레이드, 컨티뉴 |
| 라이트닝 크리스탈 (하드) | 광고 / IAP | 프리미엄, 즉시 해금, 광고 제거 |
| 업그레이드 | 효과 | 최대 | 비용 |
|---|---|---|---|
| 슬라이드 속도 | +5%/Lv | 5 | 100/300/600/1K/2K |
| 파워업 지속 | +1초/Lv | 5 | 200/500/1K/1.5K/3K |
| 자석 범위 | +0.5타일 | 3 | 300/800/2K |
| 무료 부활 | +1회 | 2 | 5K/15K |
| 시작 파워업 | 랜덤 획득 | 1 | 10K |
| 유형 | 트리거 | 보상 |
|---|---|---|
| 보상형 영상 | 게임오버 → 부활 | 현위치 부활 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 Orb | Sprite+Tween |
| 스파이크 | 전기 스파이크 | Sprite+Anim |
| 고스트 | 전자 유령 | 추적 FSM |
| 퍼퍼피시 | 전기 해파리 | 확장/수축 |
| 마그넷 | 자기장 | Particle+흡수 |
| 프리즈 | EMP 펄스 | 정지+이펙트 |
| 쉴드 | 과충전 | 무적+속도↑ |
| 마스크 16종 | 코스튬 5종+ | Spine Skin |
| 아케이드 | 아케이드 | 절차적 생성 |
| 스테이지 | 스테이지 | JSON 맵 |