Re: HTML5 game app 개발시 이슈들...

안녕하세요. 다빈치S/W Lab 도창욱입니다.

게임 개발은 하지 않지만 개인적인 의견을 달아봅니다. ^^;

2013. 10. 10., 오전 8:45, Wonsuk Lee <wonsuk73@gmail.com> 작성:

> 임상석 팀장님,
> 아래와 같이 inline comment를 달아보았습니다~^^
> 
> 
> 2013년 10월 7일 오후 7:01, lim sangseok <sangseok.lim@gmail.com>님의 말:
> 문제의 큰 분류는 잘 정리해주신 것 같습니다.
> 게임 만들어보면 세세한 문제가 아주 많이 있습니다.
> 
> 1) URL bar 처리
> - 사라지게 하고 싶고, 일부 heuristic이 있지만, 완벽히 사라지게하기 힘들고, landscape 모드에서는 화면을 크게 차지해서 심각합니다.
> 
> 이 부분은 Full screen API를 이용하면 해결이 안되나요?

데스크톱용 브라우저는 fragmentation을 고려하고 서비스를 한다고 해도 모바일 브라우저에서는 해당 사항이 되지 않는 것이 1차적인 문제가 아닐까 합니다.
http://caniuse.com/#feat=fullscreen


iOS의 경우 HomeScreen에 등록할 때 mobile-web-app-capable 메타 태그를 이용하는 방법은 존재하지만 이 역시도 서비스 제공자의 입장에서 사용자의 인식 형태에 대해 고민을 안할 수는 없을 것 같네요. (안드로이드 크롬은 31버전부터 홈 스크린 기능을 제공한다고 합니다. 추가로  iOS의 apple-mobile-web-app-capable는 한시적으로 지원하며 조만간에 이 형식을 deprecate한다고 합니다.)

>  
> 2) Canvas를 rendering back-end로 사용시
> - 대부분 drawImage로 귀결되는 경향이 있지만, 단말별로 성능 차이가 너무 심해서 몇 fps로 해야할지를 단말별로 모두 정해야하는 문제
> 
> 이 부분은 전반적으로 브라우저 성능이 좋아져야 어느정도 해결이 되지 않을까 싶습니다^^;
> 혹시 다른 분들 중에 이 이슈를 smart하게 해결하신 분이 계신가요?? 아니면 아이디어를 가지고 계신 분이라도?? ;-)

iOS의 경우 레티나 디스플레이의 경우를 고려하여 성능을 일부 향상하는 방법(pixel ratio와 retina의 해상도를 고려하여 scale을 맞추는)이 존재히는데 이런 식으로 파편화에 대응하는 것이 역시 서비스에서는 쉽지 않을 것 같네요. world timer에 맞추어 동적인 프레임레이트를 제공하는 것 역시 게임의 계산 로직이 조금 더 복잡해지는 것과 실제 성능에 대한 판단을 사용자에게 넘겨 버린다는 점에서 현재는 모바일까지 커버하려면 징검다리로 하이브리드(예를 들어 cocos2d-html5와 cocos2d-x의 js 바인딩과 같은 형태)를 차용하는 것이 그나마 해결책이 아닌가 싶습니다. (실 성능이나 개발 난이도에 대해서는 저도 궁금합니다.)

>  
> - requestAnimFrame이 rendering이 bottleneck이 되는 경우 단말에서는 오히려 화면 갱신률이 떨어지는 문제
> 
> 혹시 안드로이드와 iOS 모두 같은 현상이 발생하나요? 안드로이드 stock browser와 chrome for android 모두 같은 현상이 발생하는지도 궁금합니다^^
>  
> - devicePixelRatio가 1.5일 경우 canvas로 rendering 시 화면을 깨끗하게 그리는 것이 쉽지 않음
> 
> 이 부분은 왜 그런지 궁금하네요^^; 혹시 안드로이드와 iOS 모두 같은 현상이 발생하나요? 

브라우저 입장에서는 캔버스 역시 렌더링 트리에 존재하는 노드 중의 하나일 뿐이라 어느 정도의 Jaggies가 발생하지 않을까 싶은데요.
디스플레이의 배율을 정수로 떨어지는 값으로 맞추기에는 게임 스크린 자체의 해상도 저하로 인한 품질 이슈도 있을 것이구요.

>  
> 3) Garbage collector 문제
> - 게임 반응성 저하: static object등을 써서 일부 완화/회피 가능하다지만, 그렇게 짜는 것들이 쉽지 않음
> 
> 이 부분은 브라우저에게 지속적으로 개선해 가고 있는 부분인데 시간이 좀 걸릴 것으로 예상이 됩니다.

거의 모든 곳에서 object pool을 이용한 GC 회피 방안을 제시하고 있는데 저도 동일한 의견입니다. 모듈화된 개발과 대치되는 부분도 있구요.

>  
> 4) CSS 3D를  rendering back-end로 사용 하는 경우
> - object 개수 늘어나면 성능의 급격한 저하, iOS도 100개 넘어가면 성능 저하 심함
> 
>  
> - texture update시 깜빡이는 문제
> 
> 이와 같이 Native app에 비해서 좀 부자연스러운 것이 많습니다. 브라우저 vendor들의 적극적인 수정이 필요하겠죠^^
>  
> 
> 이외에도 개발하다보면 풀어야할 문제가 아직은 참 많습니다.
> 
> 
> 예. 그래서 KIG에서 한번 정리를 해보면 재밌을 것 같습니다~ 많은 분들 특히 Game 개발을 직접하시는 분들께서 이슈에 대한 의견을 주시면 정말 감사하겠습니다~^^ 

오디오에 대한 문제도 빼놓을 수 없겠네요.

#
어찌보면 feature phone에서 게임을 개발하던 시절의 고민을 현재 모바일 웹 브라우저에서 다시 하게되는 것 같습니다.
그렇다고 기존 방식으로 해결하기에는 사용자의 눈높이가 올라갔다는게 가장 큰 bootleneck이 아닐까 싶네요.

> 
> 
> 이원석 드림.
> 
>  
> 
> 2013년 10월 6일 오후 10:31, Wonsuk Lee <wonsuk73@gmail.com>님의 말:
> 
> 안녕하세요. 삼성전자의 이원석입니다.
> 다름이 아니라 지난 HTML5 KIG 회의에서 unconference style로 회의를 진행을 하면서 참여하신 분들께서 어떤 부분에 대해서 관심이 있으신지 들어보았습니다.
> 다양한 분야들이 나왔는데 가능하면 이러한 이슈들에 대해서 정리를 해보고 해결책을 같이 찾아보는 것이 재미있을 것 같아서 HTML5 Game 개발시 부딪치는 이슈들 부터 함께 정리하고 논의를 해볼까 합니다.
> 제가 지난회의에서 들었던 내용은 아래와 같습니다. 실제로 현업에서 문제를 체험하고 계신 분들께서 추가적인 이슈에 대한 의견 주시면 정말 감사하겠습니다.
> 
> 1. 게임 앱 실행 도중 다른 App 실행(게임앱 background로 전환) 후 다시 게임 앱으로 돌아온 경우 이어서 게임을 하는 기능을 구현하기 어려움 (Reloading 되는이슈) 
> 
> 2. Audio 처리 이슈
> - Android 브라우저들은 대부분 Audio 재생 성능이 느림 
> - Mobile 브라우저 중 대부분의 브라우저가 Web Audio 미지원 (기능 지원의 gap)
> 
> 3. Graphic 처리 성능 이슈?
> - Mobile 브라우저들 간의 Canvas, CSS, WebGL 성능이 제각각 (그래픽 성능 gap)
> 
> .....
> 
> 많은 분들의 적극적인 참여를 부탁드립니다~^^
> 
> 
> 이원석 드림.
> =========================================
> 이 원 석 (Wonsuk, Lee) / Principal Engineer, Ph.D
> SAMSUNG ELECTRONICS Co., LTD. (三星電子)
> Mobile: +82-10-5800-3997
> E-mail: wonsuk11.lee@samsung.com, wonsuk73@gmail.com
> http://www.wonsuk73.com/, twitter: @wonsuk73
> -----------------------------------------
> Inspire the World, Create the Future !!!
> =========================================
> 
> 
> 
> 
> -- 
> 
> =========================================
> 이 원 석 (Wonsuk, Lee) / Principal Engineer, Ph.D
> SAMSUNG ELECTRONICS Co., LTD. (三星電子)
> Mobile: +82-10-5800-3997
> E-mail: wonsuk11.lee@samsung.com, wonsuk73@gmail.com
> http://www.wonsuk73.com/, twitter: @wonsuk73
> -----------------------------------------
> Inspire the World, Create the Future !!!
> =========================================