DEV JOURNAL / SLIME ESCAPE샘플
WebGL 화면이 잘렸던 이유는 게임 밖에 있었다
게임 캔버스와 하단 컨트롤바를 함께 고려하지 않아 발생한 화면 배치 문제를 돌아보는 글. (샘플 글)
증상
웹에 올린 게임 화면의 위아래가 예상과 다르게 잘리는 문제가 생길 수 있어.
원인
게임 캔버스 외에도 웹 템플릿이 추가하는 UI 높이가 전체 레이아웃에 영향을 줄 수 있어.
/* 샘플: 컨트롤바 높이를 뺀 만큼만 캔버스에 할당 */
#game-canvas { height: calc(100vh - var(--controls-height)); }해결에서 배울 점
엔진 화면만 보지 말고 실제 배포 환경의 DOM 구조와 캔버스 크기를 함께 확인하는 게 중요해.