[💬] 초보 코더의 좌충우돌 게임 엔진 개발기 - (1) 뼈대를 세우자

[익명(122.38)]

필자는 남녀 성비가 20:1 정도로 매우 평범한 공대 출신으로, 사실 컴퓨터 프로그래밍과는 거의 관계가 없는 학사 커리큘럼을 거쳤다. 그런데 어느날, 함께 소설 창작 소모임에 다니던 친구 하나가 "넌 공대니까 프로그래밍도 해봤겠지?" 라고 공대에 대한 환상이 듬뿍 담긴 질문을 던지면서 모든 일이 시작되었다.

그냥 문과 출신의 공대에 대한 환상이려니 했는데, 생각해 보니까 정말로 프로그래밍과는 담 쌓고 지내지 않았던가. 갑자기 흥미가 생겨버렸고, 그날로 자바스크립트 입문서를 구입해서 취미 삼아 공부를 시작했다. 그게 올해 2월 말이었고.

그렇게 한 2달 정도, 조금씩 짬을 내서 자바스크립트를 익히다 보니 뭔가 유의미한 것을 만들고 싶어졌다. 그래서 그 친구놈을 버그 리포팅(사실 아무것도 안 함) 담당으로 끌어들인 후 2018년 4월 10일, 자바스크립트 기반 비주얼 노벨 게임 엔진을 개발하는 작업에 착수했다. 이름을 두고 잠시 갑론을박이 벌어졌는데, 내가 내놓은 안이었던 "Skeleton Frame"을 변형한 "Skele-Frame"으로 결정되었다. 발음은 '스켈리-프레임'이다.

나도 그 녀석도 디자인알못이었고, 따라서 아주 투박하고 정직한 디자인이 되었다. 우선 sceneContainer에 투명한 png 이미지를 먼저 배치해서 placeholder로 둔 다음, 그 위에 진짜 메인 이미지를 덧씌우는 방식으로 배경 화면을 완성. 그 다음은 배경 위에 이리저리 놓이는 요소들을 준비했다. 캐릭터 포트레잇을 띄우고, 대화 상자를 띄웠으며, 중앙에는 선택지나 스테이터스 창, 혹은 알림창이 뜨도록 배치했다. 가장 z-index 값이 높은(가장 위쪽에 뜨는) 창은 alertBox, 즉 알림창이었다. 알림창은 저장 알림, 오류 알림 등 안내를 제공하는 것은 물론 설정 UI를 띄우는 역할도 겸하기 때문에 자연스러운 선택이었다.

아래쪽의 toolBox 부분은 스테이터스, 저장, 메인으로 돌아가기, 설정 등 각종 기능을 호출하는 역할을 한다.

css는 2개월 정도 바짝 한 것으로는 버거울 정도로 매우 까다로운 물건이었다. 도대체 사람이 쓰라고 만들어놓은 체계인지 의심이 될 정도였다. 하지만 몇 번의 시행착오를 거친 끝에 드디어 내가 원하는 수준으로 요소를 배치하는 데에 성공했고, 그 결과물이 바로 이것이다. 이것으로 스테이지는 준비되었고, 이제 배우를 무대로 불러오는 과정만 남았다. 그래, 자바스크립트 말이다.

하지만 본체가 될 js 파일을 작성하기에 앞서 해야 할 일이 있었다. 바로 반응형 레이아웃을 구현하여 모든 종류의 하드웨어에서 이 엔진을 통해 개발된 게임을 플레이할 수 있게 하는 과정이었다. respond.js를 이용하면 되기 때문에 그다지 어렵지는 않았으나, 폰트 사이즈와 관련해서 상당한 삽질을 벌인 끝에 그나마 최적이라 할 법한 비율을 찾아냈다. 이제 정말로, 준비가 끝났다.

[地鬼(dczlatan)]

크

[라멛(175.214)]

막줄 벅차오르는것 ㅋㅋ 화이팅

[익명(122.38)]

감사함당

[@(118.127)]

그래서 폰트 사이즈는 어떻게 하심? em이나 vw쓰시나여 아님 미디어쿼리로 하시나?

[@(118.127)]

암튼 파이팅입니다 좋은 시도네여 디자인만 90년대풍에서 벗어난다면...

[전혀(jenjenp)]

힘내세요!

[익명(122.38)]

ㄴㄴ 미디어쿼리와 vw를 모두 사용합니다.

[얄파고(114.70)]

웹어셈블리 ㄱㄱ