如何在Windows 8 WinJS遊戲中處理分辨率？

我使用HTML5，canvas和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然後應用於PreloadJS的清單中的所有圖像以加載正確大小的位圖（例如images/1080/myimage.png），pixelScale用於從1366x768的工作分辨率到操作分辨率的座標縮放在其他分辨率上正確定位）。

但是，我不確定這是否是最好的/正確的方式來處理它，以及我是否會過度複雜化。在body元素中添加了一個類以幫助縮放菜單元素，我突然注意到在Blend中VS2012的高DPI設備（即1920x1080 @ 140％）將分辨率選爲768而不是1080.這不會導致降低高DPI設備的視覺效果？我是否需要分開考慮這一點，如果是這樣，如何？還是我忽略的東西？

我遇到過的其他方法包括以高分辨率渲染整個畫布元素，然後縮小整個畫布元素（再次降級視覺效果？），並讓WinJS自動選擇圖像，方法是在「-100」，「 -140「和」-180「（似乎這隻適用於inline/css圖像，而不是canvas/PreloadJS）。

有人請指出我如何處理這個正確的方向？似乎有很多關於錯誤的信息。最後，我只是想確保所有用戶都能夠獲得最佳質量的圖像，以便爲他們提供計算機/設備的分辨率。非常感謝

來源

2013-03-03 Fourjays

閱讀此篇：[全屏winjs] [1] [1]：https://stackoverflow.com/questions/12986205/fullscreen-winjs-ui-flipview – 2014-02-27 21:27:38

ViewBox控件會將畫布縮放到設備分辨率，可能會或可能不是您想要的。縮放充滿像素的畫布可以獲得更大的像素。它不會像以後那樣產生更高質量的圖像。

如果你想要一個真正的自適應和高性能遊戲，那麼你將需要根據分辨率動態渲染你的畫布對象。如果設備是1366x768，那麼畫布應該是1366x768，一些精靈應該是100x100像素。如果設備是1600x900，那麼畫布應該是1600x900，同一個精靈應該是140x140。它會在你的代碼中使用一些邏輯。

首先，您將設置您的畫布的大小，因爲您在原始帖子中，然後每個可視資源都需要相對於該畫布大小定義大小。最好編寫一些代碼來抽象任務。

來源

2013-03-04 19:32:37

對不起，後期驗收。我結束了這個和我之前的結合。遊戲以768,1080或者1440高度分辨率選擇資產，以固定的16:10比率渲染。對於兩者之間的分辨率，它使用風格屬性將這三個畫布向下縮放，這大大地保留了質量。 – Fourjays 2013-03-16 13:16:07

幫助一堆的控件是在WinJS.UI命名空間中找到的ViewBox control。

ViewBox控件會自動縮放包含在其中的UI元素，因此您不必擔心手動計算出如何將UI用於當前分辨率。

查看Visual Studio中的固定佈局應用程序模板，以便快速開始使用ViewBox控件。您可以在Windows開發人員中心閱讀有關應用程序模板的更多信息，包括固定佈局應用程序模板。

而且一定要查看guidelines for scaling to screens。

有關Windows應用商店應用開發的更多信息，請註冊Generation App。

來源

2013-03-04 14:35:14 devhammer

如何在Windows 8 WinJS遊戲中處理分辨率？

回答

相關問題