캐릭터 도감 & 수영장 입수 물리 엔진 시뮬레이션
플라잉 체어 세트장을 수놓는 4종의 매력적인 캐릭터 프로필과, 웹 브라우저 HTML5 Canvas 2D 환경에서 60 FPS로 부드럽게 렌더링되는 뉴턴 역학 물리 시뮬레이션의 비하인드를 공개합니다.
👤 4인 4색 캐릭터 도감 (Character Profiles)
플레이어는 로비에서 자신의 개성을 표현할 캐릭터를 자유롭게 선택할 수 있습니다. 각 캐릭터는 고유한 비주얼 스프라이트와 입수 애니메이션을 보유하고 있습니다:
스탠다드 보이
클래식 MC 스타일원조 예능 진행자의 정석을 보여주는 베이직 캐릭터. 단정하지만 날아갈 때의 허탈한 표정 변화가 일품인 국민 캐릭터입니다.
개구리 점퍼
공중 곡예사초록빛 수영복을 입고 입수 시 특유의 공중 360도 텀블링 궤적을 선보이며 가장 높은 고도까지 도약하는 탄성형 캐릭터입니다.
메카 사이보그
중량급 거인금속 장갑을 두른 미래형 안드로이드. 날아갈 때 제트 분사 잔상이 생기며 수면에 닿는 순간 가장 거대한 물보라 충격을 발생시킵니다.
닌자 섀도우
스텔스 마스터검은 복면의 날렵한 암살자. 기습적인 발사에도 공중 제비를 돌며 착지하며, 물속으로 미끄러지듯 잠수하는 세련된 모션을 자랑합니다.
📐 캔버스 2D 물리 엔진의 수학적 원리
단순한 GIF나 스프라이트 반복 재생이 아닙니다. '위험한 초대'의 모든 발사 장면은 실시간 프레임 단위의 수학적 물리 모델에 따라 계산되어 그려집니다:
1. 2D 탄도학 포물선 궤적 (Projectile Trajectory)
의자가 격발되는 순간 캐릭터에게는 상향과 후방을 향한 초기 속도 벡터 \(v_0\)가 주어집니다. 이후 프레임마다 중력 가속도 \(g\)와 수평 감속 계수가 적용됩니다:
// 수직 위치: y(t) = y_0 - (v_0 * sin(θ) * t) + (0.5 * g * t^2)
// 초기 발사각 θ = 65° | 중력 가속도 g = 9.8 m/s²
2. 수면 충돌 및 물방울 파티클 시뮬레이션 (Water Splash Particles)
캐릭터의 \(y\) 좌표가 수면 레벨(Waterline)에 도달하면 입수 충돌 이벤트가 발생합니다. 이때 수면 중앙에서 총 32개의 독립적인 물방울 파티클이 방사형으로 생성되며, 각 파티클은 개별적인 수명(Life), 크기, 투명도, 비산 속도를 가집니다:
particle.vy = -Math.random() * splashForce * 1.5; // 상향 비산
particle.alpha -= particle.decayRate; // 투명도 지수 감쇠
🦈 소환수(상어, 악어, 갈매기) 인터랙션 메커니즘
수영장은 안전한 곳만이 아닙니다! 아이템전을 활성화하면 소환된 수중/상공 동물들이 수영장을 휘젓고 다닙니다:
- • 죠스 상어: 수면 위로 검은 삼각 지느러미를 드러내며 좌우로 순항하다가, 플레이어가 입수하는 지점으로 고속 돌진하여 거대한 물보라를 만듭니다.
- • 늪지대 악어: 수면 아래 숨죽이고 있다가 플레이어가 착수할 때 턱을 쩍 벌리는 코믹한 특수 이펙트를 발생시킵니다.
- • 부산 갈매기: 상공을 우아하게 선회하며 의자가 솟구칠 때 놀라서 깃털을 흩날리는 공중 앰비언트 효과를 연출합니다.
⚡ 브라우저 60 FPS 보장을 위한 최적화 기법
저사양 스마트폰이나 오래된 노트북 브라우저에서도 끊김 없이 부드러운 60 FPS를 유지하기 위해 다음의 엔지니어링 최적화가 적용되었습니다:
1. RequestAnimationFrame 동기화: 타이머(setInterval) 기반의 불규칙한 호출을 배제하고 디스플레이 주사율과 1:1로 일치하는 네이티브 렌더 루프를 사용합니다.
2. 파티클 풀링(Object Pooling): 가비지 컬렉터(GC) 부하를 방지하기 위해 입수 때마다 새 객체를 메모리에 할당하지 않고 사전 생성된 파티클 배열을 재사용합니다.
3. 뷰포트 상대 해상도(DPR) 보정: 레티나 디스플레이에서도 글자와 캐릭터가 선명하게 보이도록 디바이스 픽셀 비율(Device Pixel Ratio)을 동적으로 감지하여 캔버스 크기를 스케일링합니다.