Egret 提供的屏幕適配的策略,及缺點:
StageScaleMode.SHOW_ALL 缺點:會產生黑邊
指定整個應用程序在指定區域中可見,且不會發生扭曲,同時保持應用程序的原始高寬比。應用程序的兩側可能會顯示邊框。
在這種模式中,舞台尺寸永遠會和最初的設置一致,這是入門開發者最適合的方式,但是這種方式的美中不足是,如果(手機或者PC等設備)屏幕的寬高比和舞台(stage)尺寸不一樣,會在兩側或者上下有黑邊
StageScaleMode.NO_BORDER 缺點:因為寬高度變化而出現布局需要手動調整的問題
指定整個應用程序填滿指定區域,不會發生扭曲,但有可能會進行一些裁切,同時保持應用程序的原始高寬比。
這種屏幕適配策略的永遠會填滿整個屏幕,但是舞台尺寸會隨着不同的屏幕變化而變化。以 480 * 800 的豎屏游戲為例,在 iPhone4全屏模式下上,舞台尺寸會被調整為 480 * 720,在iPhone5全屏模式上,舞台尺寸會被調整為 480 * 852。
使用這種屏幕適配策略,開發者應小心處理舞台高度不足的情況,以防出現在特定設備中,游戲內容無法顯示。有可能的情況是,背景圖會拉伸或者壓縮,出現失真的情況。
StageScaleMode.NO_SCALE 缺點:對於低分辨率手機來說,內容會被裁切
指定應用程序的大小是固定的,因此,即使在更改播放器窗口大小時,它仍然保持不變。如果播放器窗口比內容小,則可能進行一些裁切。
這種模式通常用於PC調試。
ScaleScaleMode.EXACT_FIT 缺點:會發生扭曲
指定整個應用程序在指定區域中可見,但不嘗試保持原始高寬比。可能會發生扭曲。
在這種模式下,舞台尺寸永遠會和最初的設置一致,也不會出現黑邊,但是如果屏幕寬高比和舞台尺寸不一致,會進行非等比縮放。
在講解決思路之前,假定游戲類型分為兩種,應該也是兩種了:
固定內容游戲:游戲內容大小是固定的,比如游戲《夢想海賊王》,他的中心內容是等比例縮放的,他們上下產生黑邊怎么辦呢?用背景填充
非固定內容游戲:這類游戲一般是rpg游戲,游戲界面上下左右4個角上有ui界面,中心區域是地圖,當運行在不同分辨率的手機上時,4個角上的ui重新布局固定在角上,中心區域的地圖,因為分辨率不同,可視區域也變大變下。
接下來講述解決上述缺點的思路了:
1、首先將舞台寬高設置為,原生手機分辨率尺寸,在 native_loader.js 里修改,如圖:
var wid = egret_native.EGTView.getFrameWidth(); //獲取原生屏幕分辨率寬
var hei = egret_native.EGTView.getFrameHeight(); //獲取原生屏幕分辨率高
egret_native.EGTView.setDesignSize(wid, hei); //設置
context.stage = new egret.Stage(wid, hei); //設置
舞台的寬高已經設置好了,可以從 stage.stageWidth 和 stage.stageHeight 中獲取,這兩個值就是手機屏幕分辨率的寬高了。
2、定義我們游戲內容尺寸(以下都叫內容尺寸),也就是說,我們游戲是按照什么尺寸來寫的,比如我們的內容尺寸是 960*640 ,如果這個尺寸放到 1280 * 720 的機器上運行,則需要將內容進行放大才能適配,如果這個尺寸放到 800 * 450 的機器上運行,則需要將內容進行縮小才能適配。
我的定義如下
public static contentWidth: number = 1280; //內容的寬
public static contentHeight: number = 620; //內容的高(這個高度是故意設置成 620的,正常情況應該是720)
3、定義一些游戲使用的參數
public static contentScaleFullWidth: number = 0; //內容全屏縮放后的寬
public static contentScaleFullHeight: number = 0; //內容全屏縮放后的高
public static contentScale: number = 1; //內容等比縮放
public static contentScaleFull: number = 1; //內容全屏縮放
4、設置參數數據
private static onStageResizeInitDataListener(e: egret.Event): void {
//按照寬縮放,perW 為內容縮放比例 StageInfo.WIDTH = stage.stageWidth StageInfo.HEIGHT = stage.stageHeight
var perW = StageInfo.WIDTH / StageInfo.contentWidth;
var tempH = StageInfo.contentHeight * perW;
//如果縮放后的高是在分辨率中的
if (tempH <= StageInfo.HEIGHT) {
//內容全屏縮放的寬 等於 內容的寬
StageInfo.contentScaleFullWidth = StageInfo.contentWidth;
//內容全屏縮放的高 等於 舞台的高 / 除以縮放比例 ,這么做是為了,當設置縮放比例為 preW 的時候,能保證全屏
StageInfo.contentScaleFullHeight = StageInfo.HEIGHT / perW;
//設置縮放比例
StageInfo.contentScale = StageInfo.contentScaleFull = perW;
} else {
//按照高縮放,perH 為內容縮放比例
var perH = StageInfo.HEIGHT / StageInfo.contentHeight;
var tempW = StageInfo.contentWidth * perH;
//如果縮放后的寬是在分辨率中
if (tempW <= StageInfo.WIDTH) {
//內容全屏縮放的高 等於 內容的高
StageInfo.contentScaleFullHeight = StageInfo.contentHeight;
//內容全屏縮放的寬 等於 舞台的寬 / 除以縮放比例 ,這么做是為了,當設置縮放比例為 preH 的時候,能保證全屏
StageInfo.contentScaleFullWidth = StageInfo.WIDTH / perH;
//設置縮放比例
StageInfo.contentScale = StageInfo.contentScaleFull = perH;
}
}
}
代碼詳解
StageInfo.contentScale,是使用在固定內容游戲中的,表示一個內容區域在屏幕分辨率內最大呈現的縮放比,按照分辨率的寬縮放,保證高是在屏幕內的;如果按照高縮放,保證寬在屏幕內,只要其中有一個成立,縮放比確定了。如圖:
這樣游戲的ui控件可以添加在黃框的內容區域中,根據內容的contentWidth/contentHeight編程,不同分辨率縮放,上下或左右產生的空白區域用背景填充,就不會產生不可控的黑邊了。
StageInfo.contentScaleFull,是使用在非固定內容游戲中的,當確定好了等比縮放比例之后,將在分辨率中的寬/高加長,達到設置縮放比例的時候,高度還是在區域內的,實現全屏。如圖:
,這樣對於非固定尺寸的游戲,不同屏幕分辨率,4個角上的ui可以根據 contentScaleFullWidth和contentScaleFullHeigh進行重新布局和編程,而且保持全屏,不會產生黑邊,而且游戲元素也是等比例縮放,不會產生扭曲的和裁剪的情況。
演示例子:
固定內容游戲,比如將屏幕設置成 1280*720 ,由於我們的內容尺寸是 1280*620 將在高度上補充背景
如果我們再將屏幕尺寸設置為,450*800,這是比較極端的情況
非固定內容游戲,比如將屏幕設置成 1280*720 如圖
如果我們再將屏幕尺寸設置為,450*800,這是比較極端的情況