1.大家在问问题之前,希望能够认真的思考一下问题,可以在论坛多搜索一下。如果实在没有请发帖子。
2.发帖子的时候,请说明具体的情况,即要有个上下文。理解具体情况,大家才好回答,帮您快速的解决问题。
3.如果您看到有可以回答的问题,请帮忙回答一下,社区的发展需要您的支持。
在游戏中,我们经常会碰到横屏游戏的需要。我这里就简单的介绍一下我的思路和处理的流程。这里的横屏适用于在h5之下,在app模式,只需要一个参数设置就可以强制为横屏,这里就不讨论了。欢迎留言和讨论,如果您有更好的解决方案或者方法。希望您能分享出来。
首先创建egret项目,我们在项目中找到launcher目录下的egret_loader.js文件。在这里我们把默认的项目文件内容做一下调整修改。 var scaleMode ;
var isMobile ;
if(egret.MainContext.deviceType == egret.MainContext.DEVICE_MOBILE)
{
isMobile = true;
scaleMode = egret.StageScaleMode.NO_BORDER;
egret.StageDelegate.getInstance().setDesignSize(480, 800);
}else
{
isMobile = false;
scaleMode = egret.StageScaleMode.NO_SCALE;
egret.StageDelegate.getInstance().setDesignSize(800, 480);
} 这里主要做了一个pc端和移动端的判断。然后同时设置了一下不同的分辨率。在pc上,我设置为800(宽)*480(高),这样在pc上保证了横屏效果,即开发的时候就是横屏开发,不需要歪着脖子开发横屏游戏了。这点是不是很爽? 在移动端设置为480(宽)*800(高),这里的设置在后面讲解。 在rootClass判断的这段代码中,我添加了重力感应监听,使用了window,所以这里在app打包的时候是不能通过的。 var rootContainer = new rootClass();
if (rootContainer instanceof egret.DisplayObjectContainer) {
context.stage.addChild(rootContainer);
window.onorientationchange = function(){
if(isMobile)
{
rootContainer.onRotation(window.orientation);
doResize();
}
}
}
else {
throw new Error("Document Class must be the subclass to egret.DisplayObjectContainer!");
} 主要添加了这段代码 window.onorientationchange = function(){
if(isMobile)
{
rootContainer.onRotation(window.orientation);
doResize();
}
} rootContainer就是我们在ts文件中的入口类,我这里的是egret项目默认的Main这个类。onRotation这个方法,就是我们在Main这里类里面的具体操作处理。 window.orientation 这个就是手机重力感应时候旋转的角度。 在Main类中,我们编写onRotation方法。 private isRotation:boolean = false;
private onRotation(rotation:number)
{
if(this.isRotation&&(rotation == 90 || rotation == -90))
{
this.rotation = 0;
this.x = 0;
this.isRotation = false;
egret.StageDelegate.getInstance().setDesignSize(800, 480);
}
else if(!this.isRotation && (rotation == 0))
{
this.rotation = 90;
this.x = 480;
this.isRotation = true;
egret.StageDelegate.getInstance().setDesignSize(480, 800);
}
} 因为重力感应是不停地切换的,我这里设置了一个isRotation:boolean变量。这里取名不是很适当,有更高追求的同学,可以做调整。 在createGameScene方法中,添加这段代码 if(egret.MainContext.deviceType == egret.MainContext.DEVICE_MOBILE)
{
this.isRotation = true;
this.rotation = 90;
this.x = 480;
}
egret.Profiler.getInstance().run();
var bg: egret.Bitmap = new egret.Bitmap(RES.getRes("bgImage"));
this.addChild(bg);
bg.width = 800;
bg.height = 480; 背景是做测试使用的。这里我设置的是宽(800)高(480),这里可以做调整。 这里所有最重要就是一个旋转操作。默认的在手机端的时候是480(宽)*800(高)如果不在createGameScene中设置旋转,那么显示的结果是如图,即没有旋转
当我旋转90度过后,同时移动坐标x到480,这里的理解,需要考虑锚点默认是在左上角的,如果不移动480是看不到的。自己可以用一张纸在现实中模拟一下旋转操作。应该是可以很快的理解的。 有没有觉得很爽,好吧,高手可以继续优化噢,希望有更高的技术解决方案。 |