教程-横屏解决方案（个人）(此教程适用于2.0.x系列引擎)

本题已加入「常见问题汇总」 » 「其它问题汇总」，更多「其它问题汇总」相关的话题欢迎关注讨论

1.大家在问问题之前，希望能够认真的思考一下问题，可以在论坛多搜索一下。如果实在没有请发帖子。
2.发帖子的时候，请说明具体的情况，即要有个上下文。理解具体情况，大家才好回答，帮您快速的解决问题。
3.如果您看到有可以回答的问题，请帮忙回答一下，社区的发展需要您的支持。

系列教程

在游戏中，我们经常会碰到横屏游戏的需要。我这里就简单的介绍一下我的思路和处理的流程。这里的横屏适用于在h5之下，在app模式，只需要一个参数设置就可以强制为横屏，这里就不讨论了。欢迎留言和讨论，如果您有更好的解决方案或者方法。希望您能分享出来。

这里是另外一位开发者taiyang5535提供的解决旋转x，y坐标相反的问题，地址http://bbs.egret.com/forum.php?mod=viewthread&tid=10643

先贴链接地址http://xsstomy.com/egretprojects/courses/paoku/

首先创建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是看不到的。自己可以用一张纸在现实中模拟一下旋转操作。应该是可以很快的理解的。

有没有觉得很爽，好吧，高手可以继续优化噢，希望有更高的技术解决方案。

paoku.rar (500.96 KB, 下载次数: 176)

2015-7-29 11:13 上传

点击文件名下载附件

我顶你个肺啊

fany 发表于 2015-7-29 11:37
我顶你个肺啊

顶个帖子，不用这样吧，你过来保证不打死你

东北大客 发表于 2015-7-29 11:32

谢顶。

横屏小伙伴的福利

好的好的

Once 发表于 2015-7-29 11:44
横屏小伙伴的福利

谢顶

trackway 发表于 2015-7-29 12:16
好的好的

谢顶

先顶一下
但是这个只是治标不治本的办法
单单旋转90度后 像坐标系错乱，scroll,editabletext等组件问题
希望能像lark一样 不知道什么时候能实现