canvas 삽질 정리

이미 기존에 풀 스크린 게임 환경을 제공하기 위해 삽질이 했다.

> 웹 브라우저에는 필연적으로 상단의 주소창(safari의 경우에는 하단의 버튼창이 존쟤)

> 이것은 상당히 눈에 거슬리고 게임화면에 불필요한 공간을 낭비함

그렇게 얻은 성과는 각 브라우저별 상단 주소창의 크기를 고려하여 resize를 통해 canvas를 맞춘것으로 마무리함.

하지만 이것은 임시 방편이고 수소문으로 웹 브라우저가 최근 풀 스크린 모드를 제공한다고 함.

조사한 결과는 아래와 같은 API를 제공함

> 다른 오픈 API를 사용할 수 있었으나 공부의 목적이기에 조사하고 구현하려 노력함

var elem = document.getElementById("myvideo");

if (elem.requestFullscreen) {

  elem.requestFullscreen();

} else if (elem.mozRequestFullScreen) {

  elem.mozRequestFullScreen();

} else if (elem.webkitRequestFullscreen) {

  elem.webkitRequestFullscreen();

}

requestFullscreen() API가 핵심인데

보안상의 이유로 automacally한 풀 스크리은 불가능하다고 한다.

> 꼭 사용자의 input(touch, click, key)을 통해 호출됨

> 물론, 우회방법이 있겠지만 고려하지 않음

문제는 requestFullscreen()으로 전체화면을 모바일에서 구현했다.

다만.. canvas의 resize의 경우 window의 크기(innerWidth)로 변경하는데

> canvas는 default로 480 720 의 크기를 가지고 있으며

> 표현할 때에는 현재 window 크기에 맞춰 scale을 재조정하고 출력하는 방식을 사용

> 여러모로 크기에 구애받지 않을 수 있어서사용하고 있다

풀 스크린 모드에 진입하면 window 크기가 줄어든다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

이게 무엇이냐 모바일 웹 브라우저의 초기에 window 크기는 980( 넥서스5)이지만

스크린 모드로 진입하면 window 크기가 360으로 축소된다.

물론, 360크기로 canvas를 리사이즈해서 문제되지 않는다.

다만 980 해상도 게임에서 360으로 줄어든다면 픽셀의 한계가 360/980으로 줄어드는데

이것을 용납하기 어려웠다.

> 아직 해결법은 찾지 못했지만 일반적으로 document 스크린 모드는 window가 줌인 되는 효과로 이해된다--

아니.. 주소창과 하단 창을 지원하지 않고 싶은데 해상도가 줄어드는게 이해가 안가지만

> webGL과 관련이 있을수도?

아래 링크에서 소개된 3가지 방법의 풀 스크린에서 사용하기가 힘든 webApp 포팅을 사용했다.

> 바탕화면에 AppIcon을 만들고 해당 페이지를 web으로 접속하는 webApp이 된다

이런 방법은 이유를 찾아봐야지만 window 크기가 기기 해상도로 유지된다.

결국, 이 방법을 사용해야겠다..ㅜ

물론 브라우저 마다 적용이 다르다.

crome 

<meta name="mobile-web-app-capable" content="yes">

ios

<meta name="apple-mobile-web-app-capable" content="yes">

firefox

{
  "name": "My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/",
  "icons": {
    "128": "/img/icon-128.png"
  },
  "fullscreen": true
}

> 참고 http://www.html5rocks.com/ko/mobile/fullscreen/