게시판 카테고리.

  1. 전체목록

  2. 그림

  3. 미디어

  4. 이벤트

  5. 기타



기타

[CEDEC2018] - '샤이니 컬러즈를 만든 방법'

댓글: 4 / 조회: 2664 / 추천: 1



본문 - 08-27, 2018 03:03에 작성됨.


안녕하세요. CEDEC2016의 데레스테 제작법의 세션 이후로 2년 만에 쓰는 세션 글이네요.

저도 이 내용을 깊이 아는 전공자는 아니지만,

혹시나 궁금하신 분들이 있을까 싶어서 글 써봅니다.


이 글은 2018년 08 월 22일~24일 퍼시픽 요코하마 회의 센터에서 열린

일본의 컴퓨터 엔터테인먼트 개발자 컨퍼런스 2018 (CEDEC 2018)에서 발표한

モバイルブラウザ上で実現させた『アイドルマスター シャイニーカラーズ』の作り方

즉, ‘모바일 브라우저에서 실현시킨 「아이돌 마스터 샤이니 컬러즈」를 만든 방법’

이라는 세션의 내용입니다.

웹페이지에 대한 전공지식이 (대학 수준 이상으로) 상당히 많이 들어 있으므로

어려운 내용은 모두 잘라내고 (...) 간단하게 정리해 본 글입니다.

해당 내용이 궁금하신 분이라면 조만간 CEDEC에서 공식 영상이 공지 될 것이니

찾아보시면 될 것 같습니다.


-------------------------------------------------------------------


tDf1Qgk.png

해당 강의는 08 월 24 일 (금) 11:20 ~ 12:20 에 있었던 세션입니다.


OXlKadV.png

발표자는 주식회사 도리콤의 Smith 라는 분입니다. enza-game.js를 개발하신 디렉터 및 프로듀서라고 합니다. 스마트폰으로 인터넷 게임의 개발, HTML5 게임 개발에 흥미가 있는 분이면 들어도 된다고 했었습니다. (전공자가 아니면 매우 어려운 내용이었습니다.


4oEl8Ry.png

샤니마스에 대해 중요하게 생각한 것 - 샤니마스는 어디서 즐길 것인가?

스마트폰에서 웹으로 즐기기 위해서 WebGL로 개발했다고 합니다.

네이티브와 동일한 퀄리티를 도전 해보자!가 목표 였다고 합니다.


x4gyYWk.png

웹으로 게임을 어느정도로 만들 수 있을지는 미지의 영역이었다고 합니다.


Y29G70B.png

그래서 WebGL으로 동작하는 자바스크립트 2D게임 제작용 백엔드 엔진인 Enza-game.js를 직접 만들었다고 합니다. 퍼포먼스(성능)를 중시했다고 합니다.


bjlP31p.png

사운드는 HTML5 상의 미들웨어를 사용하려고 했는데 문제가 있어서 안정감을 위해 브라우저 표준의 WebAudio을 이용했다고 합니다.


UwMk5IF.png

애니메이션 미들웨어는 게임용 2D 애니메이션 소프트웨어인 Spine을 사용해서 만들었습니다.


JlwUM02.png

그리고 Asm.js(어셈블러)를 통해 자바스크립트의 연산을 최적화 시켰다고 합니다.


7R3TppF.png

미들웨어는 전체적으로 WebGL/HTML5로 만들었고, asm.js로 만들었고, 랜더링은 특화시켜 개발해서 안정감이 높다고 하는 것 같습니다.


88GVSXI.png

UX(User Experience, 유저의 경험)를 위해 SPA을 사용하여 사용 씬을 만들었다고 하는데, SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하여 새로운 페이지를 다운로드 하지 않고 바로 화면을 바꾸는 기술입니다. (기존의 웹 페이지는 열 때마다 다운로드 합니다.)

 B20VwIJ.png

ITP는 사용자의 검색 기록을 저장하는 추적 Cookie를 검출하는 방법인데, 이걸 이용해서 웹상의 플레이 정보를 저장하여서 사용 한 것 같습니다.

 BBeKqH8.png

왼쪽은 좋은 화면인데, 사용 환경에 따라 오른쪽처럼 화면이 작아지거나 아이폰10이 밑에 검은 바가 생겨서 문제가 있어서 곤란했다고 합니다.

 v5fcKWg.png

그리고 브라우저의 버전에 대한 문제가 있었다고 합니다. 함수가 없거나, 버퍼 에러가 뜨거나, 오디오의 메모리 링크에 문제가 있다는 것 같습니다.


---------------------------------------------


이외에도 전문적인 웹 페이지의 백엔드 시스템에 대한 내용이 깁니다만,

일본어 실력의 부족과 전공이 웹이 아닌 관계로 자세히 모르는 부분은 건너뛰었습니다.

놀랍게도 위의 내용은 전체 세션의 20%정도 밖에 안 되는 내용입니다.

어려운 내용을 다 잘라냈는데도 비전공자분들은 대부분 이해가 안 가실거라 생각됩니다...


한 장 한 장 외부 이미지 사이트로 업로드 하는 것도 힘드네요(...)

샤니마스는 이렇게 만들어졌다! 는 기초적인 내용은 이상입니다.

웹 게임 제작에 관심이 있으신 분들은 해당 영상이 업로드 되면 직접 보시길 권장합니다.


다음 글은 (제가 시간이 있다는 가정 하에)

CEDEC 2018 - '반다이 남코 스튜디오의 캐릭터 라이브에 도전'

에 대한 내용을 게시하려고 합니다.
감사합니다.


1 여길 눌러 추천하기.