내일배움캠프 TIL

웹소켓 게임 만들기 트러블 슈팅TIL 본캠프 12/19

parkcw0325 2024. 12. 19. 19:38

웹소켓 게임 만들기 과제 중 겪었던 상황과 그 상황을 대처하기 위한 트러블슈팅 기록입니다.

 

기본적으로는 강의를 보면서 진행했던 과제라서 기본적인 베이스는 갖추어져 있었다.

 

강의만 들으면 나오는 공룡 점프 액션 게임

 

다들 한 번씩은 봤을 법한 그 게임이다.

 

이 기본적인 베이스에 넣어야하는 기능들이 과제이다

 

1. 시간에 따른 점수 획득

 1-1 스테이지 구분

 1-2. 스테이지에 따른 점수 획득 구분

 

2. 아이템 획득

 2-1. 아이템 획득 시 점수 획득

 2-2. 스테이지 별 아이템 생성 구분

 2-3. 아아템 별 획득 점수 구분

 

등이 있다. 

 

1. 어려움을 겪게 된 배경

 

스테이지 별로 아이템을 생성해야하는 과제에서 많은 어려움이 있었다. 어디를 먼저 건들어야 하는지 

중요한 부분은 무엇인지 JSON파일로 가져온 itemUnlock은 어떻게 활용해야 하는지 도통 알 수 없었다.

 

2. 겪은 문제점 해결과정

모두 해결한 다음 작성한 트러블 슈팅이라 중간사진이 없고 다 해결된 후의 캡처사진이다.

 

먼저 아이템이 나오는 로직을 살펴보았다 해당 코드는 아이템을 이미지로 저장하여 임의의 id 값을 부여하고 사이즈를 조정하였다. 그렇다면 이 ITEM_CONFIG를 사용하는 곳은 어디일까

 

이곳에서 아이템을 생성하고 있었다. 두 번째 코드를 확인해보면 무엇인가의 0번째배열부터 랜덤하게 배열을 뽑고있는 것을 확인할 수 있다. 여기에 인자로 들어간 stage라는 값에 주목하다. 저 stage값은

 


이곳에서 넣어준 값이다. index.js파일에서 아이템 컨트롤러 파일에서 사용하는 업데이트란에

score.currentStage 라는 값을 넣어주었다 . score는 score.js에서 사용하는 코드로

해당 부분은 


이렇게 정의되어있다 따라서 포함된 stage라는 값은 1000이다. 

해당 값은

이렇게 아이템 컨트롤러.js 파일의 update에 활용되어  createItem이라는 곳의 인자로 들어가고 있다.

해당 내용은 다시 위로 올라가서 

 

이곳 파일에 첫번째 코드 0번째 배열부터 스테이지 기준 1000스테이지라면 1000-1000 = 0 즉, 1번째 스테이지에서는

첫번째 배열인 1가지의 아이템만 등장하고

2번 째 스테이지에서는 0~1 배열의 아이템이 랜덤으로 인덱스로 반환된다 그리소 해당 인덱스는 


이 곳을 참조하게 되어 각 스테이지마다 사용할 수 있는 아이템을 설정하게 되는 것이다 !!

 

3. 이번 과제를 통해 느낀 점

이번 과제를 진행하면서 가장 어려웠던 점은 웹소켓을 사용하여 서버와 클라이언트 간에 데이터들을 어떤 식으로 주고 받아야하는지 많이 헷갈리고 이해 안되는 부분들도 많았다. 

베이직반 튜터님들의 권유로 이제 게임서버 개발에서 웹서버 개발로 전향하게 되었는데

웹서버에서도 웹소켓을 사용할 수도 있다고 해서 마지막까지 과제를 최대한 마무리하려고 노력을 해보았다.

웹서버로 가서도 이런식으로 과제를 진행하면 많이 어려워하고 막힐 것 같은데, 지난 번 까지는 하는 방식을 몰라서 어려웠던 반면에 이번에는 이해 자체에서 크게 어려움을 겪었기 때문에 보다 효율적인 학습 방법을 강구해야 할 것 같다...