主要思路
- 根据屏幕方向来对场景进行旋转
技术点
- 对屏幕方向进行监听
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方法中操作比较稳妥。