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方法中操作比较稳妥。