크레이지 아케이드 멀티게임(모작)

목차

1. 시연 영상

2. 서버와 동기화

3. 클라이언트

 

---

1. 시연 영상

https://www.youtube.com/watch?v=djo8hIFrLkg 

2. 서버와 동기화

socket.io를 이용해 웹 소켓 으로 실시간 통신을 했습니다. 

여러 클라이언트에서 동작이 같게 해야 했습니다. 동기화 방법을 찾아보니 lockstep이라는 기법이 있더군요. lockstep기법은 모든 클라이언트에서 서버로 정보를 전송하면, 해당 정보들을 클라이언트들에게 전송하는 가장 기본적인 동기화 기법입니다. c, c++언어에서는 소켓통신(tcp)를 하면 recv함수와 send함수를 사용하는데 recv함수는 정보를 받을 때까지 대기가 걸립니다. 코드만 짜면 lockstep이 자동으로 구현되는 것이죠. 하지만 socket.io는 이벤트를 사용해 통신하기 때문에 recv함수와 다르게 작동합니다. 그렇다면 어떻게 코드를 짜서 lockstep을 구현했느냐? 각 게임마다 플레이어 정보를 저장해두어 모든 플레이어의 키보드 정보를 받았을 때만 클라이언트에 정보를 전송합니다. 

서버측 동기화 모습

클라이언트는 delay를 먼저 설정합니다. delay는 몇ms마다 화면을 갱신할지 주기를 뜻합니다. delay시간이 지날 때 마다 클라이언트는 서버에 마우스정보를 전송합니다.

클라이언트측 동기화 모습

 

3. 클라이언트

게임 로직을 위해 필요한 대표 변수들: 

keyBoard: 내가 무슨 키보드를 눌렀는지 저장하는 변수. 서버에 전송할 때 쓰인다.

hardBlock: 물풍선으로 부셔지지 않는 블럭 배열. 2차원 배열이다.

softBlock: 물풍선으로 부셔지는 블럭 배열. 2차원 배열이다.

itemBlock: 아이템 배열. 2차원 배열이다.

waterBalloonBlock: 물풍선 배열. 2차원 배열이다.

- 왼쪽에 위 내용을 보여주고, 오른쪽에 하나씩 상세 내용을 보여주자.

 

서버에서 키보드 데이터 전송:

서버에서 키보드 데이터가 전송되면, 해당 데이터를 가지고 한번의 로직 계산과 한번의 화면 갱신이 일어난다. 즉 1 프레임이다. 

oneFrame함수에서 gameLogic함수와 gameDraw함수를 호출한다.

 

gameLogic: 1 프레임에서 계산해야 될 것들을 계산한다.

characterMove: 캐릭터들이 움직이는 것
getItem: 아이템 먹기
msgTimeFlow: 메시지 시간이 흐른다
pressBalloon: 물풍선을 놓으면
balloonTimeAndPop: 물풍선 시간이 가고 터진다
softBlockPop: 부셔지는 블럭이 터진다
itemTimeFlow: 아이템 시간이 지난다
meetWaterBalloonBoom: 터진 물풍선과 만난다
inWaterBalloonDo: 캐릭터가 물풍선 상태라면
whoIsWin: 누가 이겼나

 

gameDraw: 화면에 그리기 작업

배경화면, 부셔지는 블럭, 안부셔지는 블럭, 아이템, 물풍선, 캐릭터, 메시지 등을 그린다.