cocos2d-js h5橫豎屏切換的一種實現方案

主要思路

• 根據屏幕方向來對場景進行旋轉

技術點

• 對屏幕方向進行監聽

const PORTRAIT = 0;
const LANDSCAPE = 1;
window.addEventListener("orientationchange", function(event) {
    if(window.orientation == 180 || window.orientation == 0) {
        // 豎屏狀態
    } else if(window.orientation == 90 || window.orientation == -90) {
        // 橫屏狀態
    }
}

• 旋轉場景
  下面代碼專門針對豎屏轉橫屏來設計的，並保證scene始終保持橫屏顯示。

function changeSceneSize(width, height) {
    var win_size = cc.director.getWinSize();
    if(win_size.width === width && win_size.height === height) return;
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(width, height, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    cc.loaderScene = null;
}

function rotateScene(scene, width, height, orientation) {
    scene.setAnchorPoint(0, 0);
    if(orientation == PORTRAIT) {
        changeSceneSize(height, width);
        scene.setPosition(0, height);
        scene.setRotation(90);
    } else if(orientation == LANDSCAPE) {
        changeSceneSize(width, height);         
        scene.setRotation(0);
        scene.setPosition(0, 0);
    }
}

難點

• 何時旋轉場景。豎屏場景切換到橫屏場景的時機如何選擇。（目前我對cocos2d-js的場景管理機制不是很瞭解，感覺這塊以後可能會出問題）
• 第一個場景處理。剛進入遊戲進入第一個場景時無法知道當前屏幕是什麼方向。或許有辦法知道，只是我現在還沒查到。

旋轉場景的時機選擇

新場景切換完成時會調用其onEnter方法，在場景的onEnter方法中操作比較穩妥。