Gamepad API와, 게임 클라이언트 개발에서 웹개발의 역할

Gamepad API 자체는 성의없다고 할 정도로 너무... 적습니다.

어쨌든 게임 개발에서 웹이 차지하고 있는 이유를 공부해보았습니다.

 

게임에서 로비(그러니까, 게임 일시 정지나 캐시샵 같은) 관련 작업은 html/css/js 스택으로 구성하는 일이 꽤나 있다. 

바닐라 js는 아니고, angular나 react와 같인 프론트 프레임웤도 사용하고 상태 관리인 redux까지 합쳐서 웹 스택을 그대로 가져간다. 하긴, 어차피 빌드하면 다 js인데 ㅋㅋ

 

그리고 이 웹을 s3에 올리던지, 그냥 게임 내에서 임베드해서 웹페이지를 가져오던지 한다. 이 로비에서 이루어진 작업은 또 서버와 통신하는 등의 작업을 수행한다. 로비에서 뭐 캐쉬 아이템 구매를 했다던지, 로그인을 했다던지 등...

 

게임에서 어케 웹 UI를 올리냐구? Coherent UI 같은 미들웨어를 사용한단다.

Coherent UI is a graphical user interface system specially designed for games.

Game developers and UI artists can use standard modern HTML, CSS, and JavaScript to design and implement game UI and interaction.

 

검색해보면, 검은 사막 이용자가 Coherent UI 관련 에러를 접했다는 글을 확인해볼 수 있다.

설명을 보면 "middleware which allows web content/assets to be displayed ingame"이라고 한다.

 

왜 게임에서 웹스택을 사용함?

로비에 있는 뷰 좀 망가졌다고 게임 빌드를 다시할 수는 없자나...

그리고 헤비한 작업 CI/CD 달아놓으면 빌드해주는 곳에서 과금하시는 거 아시잖아요

아는 분 프로젝트에선 커밋 한 번에 tavis에서 100원씩 삥뜯어가던데 ㅋㅋ

 

그냥 s3에서 정적 웹스팅으로 올리는게 가장 빠르게 쉽다. 그래서 게임에서 웹 스택 쓰려고 하는 거다.

 

게임을 콘솔에 출시한다면 게임패드 이벤트를 어떻게 웹에서 감지함?

developer.mozilla.org/ko/docs/Web/API/Gamepad_API

Gamepad API - Web API | MDN

매우 어이없지만 web api에서는 연결, 연결 해제, 현재 버튼 상태 딱 이 3가지 밖에 없다.

그래서 현재 버튼 상태를 조회하는 명령을 Polling으로 땡겨서 작업한다.(ㄹㅇ 무식한 방법인데 어쩔 수가 읎다네요)

 

따라서, 콘솔에서 출시하는 게임 중 웹을 사용하는 경우에는 자신들이 직접 웹에서 게임패드의 동작을 감지하는 툴을 만들기도 한단다.

 

 

클라이언트에서의 사용할 애니메이션?

그냥 lottie 쓰라는 것 같은데 일단 참고해봅시다.

css 애니메이션을 사용한다면 브라우저가 리페인트하지 않도록 조심해야 하겠네요.

canvas나 three.js 쓰려면 좀 어렵고, 솔직히 아무리 잘써도 그리는 것보다 시간이 오래 걸립니다.

technology.riotgames.com/news/animation-league-legends-client

 

 

LoL은 어떻게 게임 내 웹 클라이언트를 구현하고 있는가?

technology.riotgames.com/news/under-hood-league-client%E2%80%99s-hextech-ui

Under the hood of the League Client’s Hextech UI

 

... 좀 읽어보자

 

 

ref)

 

technology.riotgames.com/news/animation-league-legends-client

technology.riotgames.com/news/under-hood-league-client%E2%80%99s-hextech-ui

www.youtube.com/watch?v=PPpRgtSzJqs