저는 HTML5, 캔버스 및 WinJS를 사용하여 Windows 8 용 게임을 만들고 있습니다. 게임은 거의 완료되었고 모든 것이 작동합니다. 그러나 나는 그래픽에 대해 이야기하고 있으며 다른 해상도에 대한 지원을 구현 한 방식에 대해 우려하기 시작했습니다. 이 프로젝트를 시작할 당시에는 캔버스와 관련이 없지만 해상도를 처리하는 방법에 대한 많은 정보를 읽었습니다. 나는 이런 식으로 뭔가를 구현 결국 :Windows 8 WinJS 게임에서 해상도를 처리하는 방법은 무엇입니까?
if (window.innerWidth >= 2560 && window.innerHeight >= 1440) { //Full 2560x1440(16:9)/Letterbox 2560x1600(16:10)
canvas.width = 2560;
canvas.height = 1440;
} else if (window.innerWidth >= 1920 && window.innerHeight >= 1080) { //Full 1920x1080(16:9)/Letterbox 1920x1200(16:10)
canvas.width = 1920;
canvas.height = 1080;
} else if (window.innerWidth >= 1600 && window.innerHeight >= 900) { //Full 1600x900(16:9)/Border 1680x1050(16:10)
canvas.width = 1600;
canvas.height = 900;
} else if (window.innerWidth >= 1360 && window.innerHeight >= 768) { //Full 1366x768(16:9)/Border 1440x900 (16:10)/Cut 1360x768(<16:9)
canvas.width = 1366;
canvas.height = 768;
} else if (window.innerWidth >= 1280 && window.innerHeight >= 720) { //Full 1280x720(16:9)/Letterbox 1280x768(<16:9)/Letterbox 1280x800(16:10)/Letterbox 1280x1024(5:4)
canvas.width = 1280;
canvas.height = 720;
} else { //Letterbox 1024x768(4:3)
canvas.width = 1024;
canvas.height = 575;
}
pixelScale = canvas.height/768;
assetScale = canvas.height;
그것이 (화면 비율이 다른 편지 복싱으로) 주어진 해상도에 캔버스를위한 최적의 크기를 발견 한 뒤에 기본 아이디어. 그런 다음 assetScale이 정확한 크기의 비트 맵 (예 : images/1080/myimage.png)을로드하기위한 PreloadJS의 매니페스트에있는 모든 이미지에 적용되며 pixelScale은 1366x768의 작업 해상도에서 운영중인 이미지로 좌표를 조정하는 데 사용됩니다 다른 해상도에서는 올바르게 배치됩니다.)
그러나 이것이 실제로 처리하기에 가장 좋고 올바른 방법인지 그리고 과도하게 복잡하게 만들지는 모르겠다. 메뉴 요소의 크기 조정을 돕기 위해 본문 요소에 클래스를 추가 한 결과, VS2012의 Blend에서 높은 DPI 장치 (예 : 1920x1080 @ 140 %)가 1080이 아닌 768로 해상도를 선택한다는 사실을 갑자기 알아 챘습니다. 높은 DPI 장치에 대한 성능 저하가 있습니까? 이 문제를 별도로 고려해야합니까? 그렇다면 어떻게해야합니까? 아니면 방금 무시한 것입니까?
다른 캔버스 요소를 고해상도로 렌더링 한 다음 전체 캔버스 요소를 축소 (다시 비주얼 화) 한 다음 WinJS가 "-100", " -140 "및"-180 "(캔버스/PreloadJS가 아닌 인라인/CSS 이미지에서만 작동합니다).
누군가가 이것을 처리하는 방법의 올바른 방향을 가르쳐 주시겠습니까? 에 대한 많은 잘못된 정보가있는 것 같습니다. 결국 모든 사용자가 자신의 컴퓨터/장치 해상도로 제공되는 최고 품질의 이미지를 얻고 싶습니다. 많은 감사
이 게시물 읽기 : [전체 화면 winjs]을 [1] [1] : 후반 수용에 대한 https://stackoverflow.com/questions/12986205/fullscreen-winjs-ui-flipview –