AI코딩, 추억 속으로, 3D미로 게임

옛날 옛날 윈도우95 시절에는 컴퓨터에 기본 게임이 몇개 내장되어 있었는데요.
그중 하나가 3D 미로찾기 입니다.

이 게시글은 경험담이기 때문에 윈드서프 및 개발지식이 어느 정도 있는 분을 대상으로,
설명이 그리 상세하지는 못하니 양해 바랍니다 :)

잘 모르시면 그냥 그림으로 변천사만 봐주세요 ㅎㅎ
개발 + 글쓰고 기능 다듬는데 2시간 가량 소요된 것 같습니다.

그래도 필요한 IT 지식

웹에서 3D 컨텐츠를 개발하는 데는 여러 라이브러리가 있으며 보통 three.js 와 babylon.js 가 유명합니다.
제 경험으로는 babylon.js 가 성능이 더 좋은 느낌이 들기에 이걸 사용할텐데요.
이와 같은 기술 용어를 알고 이걸 사용해달라고 요청하면 그 기술에 맞게 개발을 해 줍니다.babylon.js 는 꽤 덩어리가 큰데요. 연습용이라면 내 PC에 다운받기보다는 CDN을 이용하는 것이 좋습니다.
CDN 은 Content Delivery Network 의 약어로 내가 사는 지역에서 가까운 서버에 접속하는 방식입니다.
기억해 주세요. 3D컨텐츠는 three.js 또는 babylon.js !
CDN : 가까운 지역의 컨텐츠를 사용하는 방식

기본 세팅

역시 XAMPP 환경에서 진행할 겁니다.
C:\xampp\htdocs\3dmaze 폴더를 만들고, 윈드서프에서 폴더 열기로 해당 폴더를 엽니다.

그리고 바로 미션을 지시했는데요.

babylon.js 를 이용해 3D 미로찾기 게임을 개발해줘. babylon.js 는 CDN 주소를 사용해 줘.

WASD 키로 이동가능한 뭔가 만들긴 했는데, W키로 전진하면 약간 이동하다 더 이동이 안되는 문제가 있었습니다. 참고로 한영키 모드는 영문으로 전환해야 이동이 가능합니다. 마우스를 클릭하여 드래그하면 카메라 전환이 가능하도록 짰더라구요.

개발 감각으로 플레이어 덩치가 크고 골목이 좁아서라는걸 알 수 있는데요.
아래와 같이 다시 지시하였습니다.

길이 좁아서 이동이 불편한 것 같아. 플레이어를 날씬하게 하고 길을 넓게 해줘.

그러자 이번엔 길은 갈 수 있으나, 모든 벽마다 틈새가 보여, 미로 찾기 같아 보이지 않더라구요.

다시 다음 지시를 하였습니다.

벽사이마다 틈새가 있어서 그 사이로 먼곳이 보이는데 틈새가 보이지 않게 메워주고 
모든 답변은 한글로 해줘.

이제 제대로 이동이 됩니다. 하나의 게임이 완성된 셈인데요.

목표점까지 완주해보았습니다.
최종 지점에 도달하자 완료 시간이 표시되더라구요.

나중에 알아낸 사실인데, 은글슬쩍 점프 기능이 들어가 있었습니다.
스페이스바를 누르면 점프해서 미로의 윗부분은 살짝 보는 히든 기능도 있었습니다.

이 후로도 이런 저런 지시를 해서,

길이 너무 붙어서 시야가 좁아. 
타일 단위를 3배 늘려주고 목적지에 도착하면 멋진 파티클 효과를 추가해줘,

파티클 효과가 약하네. 지금보다 입자를 50배 늘려줘

아래와 같은 결과를 만들어 냈는데요.

아래 URL에서 이 결과물을 만나보실 수 있습니다. :)

https://cray7.mycafe24.com/3dmaze/

3D Maze Game

 

윈도우 95 시절을 거치신 분에게는 추억의 3D 미로 찾기!
AI 코딩으로 재현되었는데 흥미로운 주제가 되셨을지요 ?

시청(?) 해주셔서 감사합니다~