RITT(dev)

RITT 개발 관련

싱글플레이 개선점

• Car 객체 위에 다양한 요소 배치 : (요소) 에는 Name, Laps, HP가 포함됩니다. 캔버스에서 Car 객체에 요소를 포함해 동시에 렌더링 하려고 했으나, 객체는 회전도가 유동적이므로 요소만을 포함하는 Label 클래스를 생성해 Car 객체의 바로 위에 렌더링 하는 방식을 이용합니다. (멀티플레이 구현 방식에 따라 달라질 수 있음)

• 프레임 속도의 동기화 : Canvas상에서 객체가 1px씩 이동한다는 코드를 작성시, 1프레임 당 1px씩 이동하게 됩니다. 따라서 하드웨어의 성능에 따라 이동 속도가 달라지게 됩니다. 따라서 동일한 시간 동안 동일한 거리를 이동하기 위해 delta time (게임이 업데이트 되는동안 측정된 프레임 당 밀리초) 의 개념이 사용됩니다. 업데이트가 수행된 시간을 알 수 있게 해주며, 성능 차이에 따라 렌더링이 달라지는 문제를 해결해줍니다.

멀티플레이 구현

*사용 기술 목록

• Socket.io : 보통의 웹 서비스와는 다르게, 멀티플레이 게임은 끊임없이 지속되는 정보의 양방향 전달이 요구됩니다. Socket.io는 브라우저 내부에서 실시간 네트워킹을 가능하게 하며, 웹 소켓과 같은 최신 기술을 지원합니다. 또한 후술할 Node.js와의 연동성이 뛰어나며, 서버를 쉽게 통합할 수 있습니다.

• Node.js : 사용하기 쉽고 유동적입니다. 무엇보다 Node.js에서 사용할 수 있는 모듈 중 Express라는 웹 프레임 워크는 파일 제공, 복잡한 라우팅, 클라이언트 인증 및 세션 등을 포함하고 있습니다. 이는 Socket.io - Client 사이의 통신 과정에 알맞아, Socket.io가 Express에 정보를 전달하면 Express에서 게임 컨텐츠를 처리할 수 있습니다.

• Canvas/Html5 : 게임에 포함되는 여러 시각적인 요소들을 각 객체로 생성해 WebView상에서 렌더링이 가능하게 합니다.

*구현 방식

Socket.io를 이용한 멀티플레이 게임의 서버 처리 과정에 있어서, 주로 사용되는 방식은 크게 두 가지가 있습니다.

1. client-oriented

• 객체(player)의 위치를 클라이언트 측에서 정하고, 해당 사항을 서버 측에 전달하는 방식으로 다소 보안에 취약하지만 구현에 있어서 다소 편리해 집니다.

2. server-oriented

• 객체가 이동하거나 어떠한 행동을 취하기 위해 서버에 요청을 하는 방식이며, 서버에 접속한 모든 객체의 위치, 방향 등을 모두 서버에 담고 있어야 하기에 비교적 넓은 공간이 필요하지만 클라이언트의 조작으로 보안상 문제가 생길 일은 줄어듭니다.

*문제점

Socket.io 기술을 이용한 모든 웹 기반 멀티 플레이어 게임이 그렇듯이, 서버-클라이언트 사이의 지연 속도가 너무 깁니다. 실시간 멀티 플레이어 게임은 한 순간이 매우 중요하므로, 서로 먼 거리에 떨어져 있는 플레이어들이 원활하게 플레이하기 위할뿐만 아니라 멀티 플레이 중 각 Client에서 제대로 렌더링이 되기 위해서는 개선해야 할 문제점입니다. 이를 개선하기 위해 사용할 수 있는 기술은 다음과 같습니다.

• Client prediction : 기본적인 클라이언트-서버 연동 과정은 서버에서 정보를 전달받고, 클라이언트에서 위치를 설정하는 것입니다. 그렇지만 이러한 방식은 다른 클라이언트의 렌더링이 엉망이 될 수 있으며, 처리 속도도 느립니다. 따라서 해결책은 서버에서 정보를 전달받은 후 그 정보를 일정 시간동안 저장해 놓고, 몇 프레임 뒤 해당 정보대로 렌더링 하는 것입니다. 이는 지연율을 근본적으로 낮추는 방법은 아니지만, 게임을 보다 부드럽게 즐길 수 있게 합니다.