GPT를 활용한 게임개발: 도넛받기 웹게임

바구니가 회전하면서 떨어지는 도넛을 받는 게임을 만들었어요

안녕하세요! 샤미고양이에요

카드 짝맞추기 게임에 이어서 도넛받기 웹게임을 GPT로 만드는 방법 과정을 공유하려 해요

 

▽카드 짝맞추기 포스트

https://cozycatart.tistory.com/entry/%EC%B1%97GPT%EB%A1%9C-%EC%9B%B9%EA%B2%8C%EC%9E%84-%EA%B0%9C%EB%B0%9C-%EC%B9%B4%EB%93%9C-%EC%A7%9D-%EB%A7%9E%EC%B6%94%EA%B8%B0

 

챗 GPT에게 개발을 시키는 방법, 즉 GPT에게 구체적으로 개발일을 시키는 과정을 보여드리는게 목표에요

 

이번 게임의 경우, 시작부터 GPT 가 헤메었는데요 

그만큼 요청자도 시행착오가 필요하고 GPT도 학습이 필요한 점을 알려드리고 싶어요

개발 때는 명칭을 도넛 이미지를 공으로써, 바구니를 캐릭터로써 표현하였습니다

1-1. javascript를 이용해서 하늘에서 떨어지는 공을 획득하여 점수를 얻어 최대한 많은 점수를 획득하는 게임을 만들려고 합니다. 캐릭터는 마우스로 움직이고 공이 바닥에 닿으면 게임이 종료되게 해주세요

 

카드 짝 맞추기는 웹에서 실행되는 코드를 달라했을 때 운이 좋게 html5, css, javascript 의 코드들을 제공했지만
공줍기 게임은 웹에서 실행되는 코드를 달라했을 때 처음에 python 코드를 제공해줘서

javascript코드를 요청한거고, html5, css, javascript 코드를 받았습니다.

 

python 코드를 사용하지 않는 이유는 python은 언어 설치, 웹 구동을 위한 python 라이브러리를 설치 해야하는 번거로움이 있고 html5, css, javascript 코드는 인터넷 브라우저만 있으면 실행 가능하기 때문이에요

 

그리고 GPT가 알려준데로 코드를 메모장에 넣어서 웹으로 실행해보았어요

이런 결과물이 나왔는데 얼레? 캐릭터(빨간 네모)가 위에 있고, 공도 안떨어지는거에요

그래서 해당 이슈에 대해 언급하고 말했어요

 

1-2. 공이 위에서 안떨어지고, 캐릭터는 바닥에서 시작하게 해줘

 

이렇게 요청하니, 공은 떨어지는데 공이 캐릭터와 닿은 즉시 게임이 종료되었어요

챗GPT한테 구체적인 게임방식을 명시하지 않았으니 나타난 현상이라,

게임방법에 대해 구체적으로 알려주었어요

 

1-3. 공과 캐릭터가 닿으면 점수가 쌓이게 해줘

이렇게 했는데 점수가 쌓이지도 않고..

캐릭터가 게임 판을 조금씩 벗어나는것도 거슬리고 완죤 총체적 난국이에요

완벽하지 못한 GPT도 실수를 하는거라 계속 요청을 해서 잡아줘야 합니다

 

1-4. 게임판을 가운데로 옮겨주고, 캐릭터는 일정 범위 내에서만 움직이게 해줘

 

게임을 하는 영역이 브라우저에서 좌정렬 상태라서 중앙으로 이동하길 바란건데,

중앙으로 옮겨지지 않았습니다 

 

이제 아래는 GPT에게 시킨 과정을 쭉 나열해서 보여드릴게요

1-5. 게임판이 웹 페이지 가운데로 안왔어

가운데로는 두번 말하니 고쳐졌는데, 기존에 잘되던 마우스 따라서 움직이던 캐릭터가 동작을 안합니다

1-6. 캐릭터가 마우스 따라 안움직여

1-7. 캐릭터가 게임판에서만 움직일수 있게 수정해줘

2-1. 공이 여러 개 생성되도록 수정해줘

2-2. 랜덤한 시간마다 게임이 끝날 때 까지 공을 생성해줘

2-3. 공이 생성될 때 랜덤한 속도로 떨어지게 수정해줘

2-4. 공의 생성 주기를 더 빠르게 해줘

3-1. 공을 주우면 점수가 올라가고 그 점수를 표시해줘

3-2. 점수 표시를 게임판 바로 위에 표시 해줘

4-1. 공이 바닥에 닿으면 게임이 종료되게 해줘

5-1. 게임이 종료되면 다시 시작 할 수 있는 기능을 추가해줘

5-2. 게임을 다시 시작하면 기존의 공들은 제거해줘

게임에 이미지 파일 나오도록 하기

6-1 공과 캐릭터를 이미지로 바꿔줘

공과 캐릭터를 드디어 실제 이미지로 바꾸는 단계가 왔어요

저렇게 해달라고 하니 GPT가 이미지 png 이름과 경로를 GPT가 임의로 제공해줬는데요 

 

이런식으로 이미지파일 및 경로를 임의로 제공해줬는데 정작 이미지 파일이 없으니

실행하면 이미지가 없이 빈 화면으로 실행이 되어서

제가 직접 character.png이미지와 ball.png이미지를 코드가 있는 폴더에 넣었고

이후 넣은 이미지로 실행됨을 볼 수 있었어요

이렇게 넣은 바구니와 도넛 이미지들이 GPT가 개발한 이미지 사이즈와 달라서

게임화면에서 짤라져보이는 현상이 있었어서,

해당 이슈는 후반 작업에서 고쳤어요

6-2 게임 판을 조금 더 크게 해주고 이미지로 변경해줘

6-3 게임 판을 이미지로 변경해달라구

7-1 점수 표시를 게임 판 밑에 오게 해주고, 텍스트를 한글로 바꿔줘

8-1 공이 게임판에서 삐져 나오지 않도록 수정해줘

8-2 공이 게임 판 양쪽 10px 안에서만 생성되도록 수정해줘

9-1. 화면에 포커싱을 벗어나면 캐릭터가 움직이지 않게 해줘

10-1. 공의 크기를 2배로 키워주고, 공은 떨어지면서 회전하게 수정해줘

10-2. 공이 생성 될 때 게임판에서 부터 공의 크기의 절반 만큼 안쪽에서 생성되게 수정해줘

10-3. 게임이 종료 되면 모든 공들이 회전을 멈추게 해줘

10-3. 게임이 종료되면 그 즉시 공이 더 이상 생성되지 않게 수정해줘

10-4. 처음 페이지 진입 시 캐릭터가 움직이질 않아

11-1. 게임 종료 후 나오는 팝업의 내용들을 세로로 정렬해줘

11-1. 게임판의 모서리를 둥근 모서리로 수정해줘

11-1. 점수판 배경색, 캐릭터 이미지 크기 수정

코드 직접 수정

여기서는 캐릭터 이미지 사이즈를 직접 수정했는데요,

너무나 구체적이고 명확한 이슈를 해결을 해야하는 상황으로

GPT보단 사람이 하는게 나아서 여기서는 직접 코드를 수정했습니다

그리고 이제 UX적으로 불편한점을 해소하기 시작했어요 게임에 디테일을 추가하게 된거죠 

물론 이전까지도 중간중간 계속 디테일을 추가했지만요 (둥근 모서리 등) 

 

12-1. 마우스를 눌렀을 때만 캐릭터를 움직일 수 있게 해줘

게임 방식이 마우스를 가져다 데기만 해도 캐릭터가 움직여서,

마우스를 클릭해야만 움직이게 게임 로직을 수정한거에요

이렇게 시키니 캐릭터 조작 방식은 원시킨데로는 나오긴 했는데,

마우스가 게임 판을 벗어나면 마우스가 떼진 상황으로 인식이 되어버려서

또 불편해지는 어떻게 보면 마이너하면서도 큰 UX문제점이 생겼어요

 

그리하여 이 다음에도 몇번의 과정을 거쳐서 게임을 완성했습니다

아래의 과정을 포함해서요

 

마우스를 눌렀을 때만 캐릭터를 움직일 수 있게 한 후, 캐릭터이미지(바구니)가 게임판을 넘어가지 않게 하기

다시 시작시 캐릭터의 위치를 초기화 시켜주기, 캐릭터를 중앙에서 시작하게 하기,

웹페이지에서 포커싱이 벗어나면 게임이 일시 정지 되게 하기(이걸 하지 않으면 다른걸 하다 다시 웹페이지로 돌아오면 엄청나게 많은 공(도넛)이 쌓여있는걸 볼 수있어서에요)

그리고 점수 텍스트를 좀 잘보이게 하기 위해 색을 직접 수정하기도 했습니다

텍스트 색 수정 코드

이후에도 몇번의 디테일 과정을 겪고, 세부적인 코드수정을 해야했는데요 

이유는 점점 개발이 진행될수록 코드는 복잡해져가고 

가끔 구체적인걸 명확하게 시켜도 GPT가 다른거에 영향이 가도록 로직을 짤 수도 있어,

수동으로 디테일부분을 잡아줘야하는 상황이 오더라구요

 

실제 개발자들이 GPT로 일 하는 방식

사실 명확하면서 사소한걸(예: 이미지 사이즈 등) 고치고 싶을 때에

전체코드를 GPT에게 제공하면 되긴 하는데 그 시간과 공수가 너무나 비효율적이고,

이 게임의 경우 하나의 스크립트 파일로써 게임이 동작되지만

만약 유니티 등의 엔진을 사용하게되면 스크립트 파일들 여러개로 관리하는 경우로 일하는게 대부분이기 때문에

결국엔 일부 코드만 GPT에게 제공하면서 수정하고 직접 일부만 고쳐야하는 상황이 올 수 밖에 없어요

 

마무리

마지막 디테일로써 직접 코드 수정의 예로

공(도넛)의 크기를 좀 크게 나오도록 수정하고 싶은데 이때 직접 사이즈를 셋팅했습니다

마지막으로 공의 회전속도가 빠르다 느껴서 코드를 직접 찾아서 좀 느리게 회전하도록 수정했어요

이렇게 해서 나온 결과물이 완전한 바퀴달린 바구니 이미지가 회전하는 도넛을 받아서 점수가 오르는 게임인거지요!

 

게임 실행화면 보여드릴게요

 

이상 챗GPT로 도넛받기 웹게임 만들기였어요

 

도움이 되었다면 좋아요 눌러주세요^^