Egret屏幕適配【轉】


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,這是比較極端的情況

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM