[7 Day] AI와 함께하는 즐거운 게임 제작

벌써 Perplexity.AI와 함께 D&D5e 기반의 웹게임을 만들기 시작한지 일주일이 되었습니다.

 

오늘도 컨텐츠보다 앞으로 더욱 견고한 게임을 위해 내부 아키텍처 개선이 좀더 많았습니다.

 

★ 레이어드 캔버스 사용

단일 캔버스 활용 대신 3개로 분리한 캔버스(background, ui, character) 로 분리하였습니다. 

이렇게 하면 전체를 다시 그리기 보다 갱신이 필요한 부분만 새로 그리고 합치는 방식으로 동작하기에

전체적인 성능의 향상에 도움이 된다고 (AI가) 합니다. ㅎㅎ

그리고 이번에 배운 내용이지만 캔버스 작업에 save, restore가 없으면 각각의 요소들이 서로 영향을 받기에

원하는대로 캔버스에 정확하게 표현하고 싶으면 save와 restore를 활용하면 됩니다. 

 this.uiCtx.save();

 this.backgroundCanvas = this.createCanvas();

 this.characterCanvas = this.createCanvas();

 this.uiCanvas = this.createCanvas();

 this.uiCtx.restore();

 

★  ESM 방식으로 변경

기존엔 html에서 모든 js를 <script>로 로드해서 구현했었는데 코드 분리가 날때마다 js가 점점 늘어나니...

그래서 처음엔 과거에 머물러있던 기억으로 require.js 를 사용하려 했더니 체신 기술을 AI가 가르쳐주네요.

덕분에 ESM방식으로 잘 뜯어 고쳤습니다. 이제 아무리 코드가 늘어나도

<script type='module' src="./js/main.js"></script>

위처럼 module로 선언한 main.js 만 index.html에서 기술됩니다. 보기 좋군요.

 

위와 같은 방식으로 전체적인 구조를 개선하고 나니 아래와 같은 기능들을 추가할 수 있었습니다.

 

★ 시설 상호 작용 구현

시설에 들어가면 대화창에 선택지가 출력되고 클릭(터치)를 통해 상호작용이 가능하게 되었습니다.

앞으로 다양한 시스템 추가 시 기본이 될 기능이 지요. 뭐 추가 하는동안엔 이리저리 버그와 수정사항이 많았지만

지금은 잘동작하니 OK입니다.

 

이제 이렇게 대화창에 선택지가 나오고 누르면 정상 동작 합니다. 위에 지역 표시도 위치가 잘 나오고 있습니다.

 

그리고 전투에서도 공격 결과에 따라 아래와 같이 이펙트가 표현됩니다!

 

명중 하면 Hit! 크리가 발생하면 Critical! 이 표시 됩니다. 이것도 어제 잘 안됬었는데 후후후..

 

전반적으로 코드를 정리하고 구조를 개선하였더니 훨씬 구현해 놓은 기능들이 기대한 대로 동작하는게 느껴집니다. 

 

그리고 초반에 이미지들을 모두 로딩해놓고 게임을 시작하기 때문에 아래처럼 로딩 화면도 구현이 되었습니다.

 

뭐랄까... 이제 좀 게임 같아진 느낌 적인 느낌이 더 듭니다.

 

어느정도 정리 및 기반 다지기는 된 것 같아 슬슬 다음 단계 구현을 해보도록 하겠습니다. 

 

우선 캐스터 계열을 위한 주문 시스템, 도적과 파이터 클래스의 부가 행동 같은 시스템 구현을 하고

 

전투가 아닌 탐사 시 발동 될 이벤트 들, 마을 내 상호작용을 통한 퀘스트나 휴식, 물품 거래, 시나리오 등등..

 

어라.. 아직도 할게 태산이군요!? 

 

그래도 AI와 함께 하니 즐겁게 앞으로 나아가 보겠습니다. 

 

테스트주소: https://ggoban.com/d2ng/

더2N전

깃헙주소: https://github.com/d2ng/

d2ng - Overview