Egret社区
本题已加入常见问题汇总 » 其它问题汇总,更多其它问题汇总相关的话题欢迎关注讨论

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

在游戏中,我们经常会碰到横屏游戏的需要。我这里就简单的介绍一下我的思路和处理的流程。这里的横屏适用于在h5之下,在app模式,只需要一个参数设置就可以强制为横屏,这里就不讨论了。欢迎留言和讨论,如果您有更好的解决方案或者方法。希望您能分享出来。
这里是另外一位开发者taiyang5535提供的解决旋转x,y坐标相反的问题,地址http://bbs.egret.com/forum.php?mod=viewthread&tid=10643


1.png
首先创建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中设置旋转,那么显示的结果是如图,即没有旋转
6.png

当我旋转90度过后,同时移动坐标x到480,这里的理解,需要考虑锚点默认是在左上角的,如果不移动480是看不到的。自己可以用一张纸在现实中模拟一下旋转操作。应该是可以很快的理解的。
有没有觉得很爽,好吧,高手可以继续优化噢,希望有更高的技术解决方案。
paoku.rar (500.96 KB, 下载次数: 167)
分享到 :
18 人收藏
一天一小步,十天一大步。个人博客http://www.xsstomy.com/

146 个回复

倒序浏览
东北大客  官方团队 | 2015-7-29 11:32:31
fany  圆转纯熟 | 2015-7-29 11:37:47
我顶你个肺啊
xsstomy  斑竹 | 2015-7-29 11:42:21

顶个帖子,不用这样吧,你过来保证不打死你
xsstomy  斑竹 | 2015-7-29 11:42:42
Once  斑竹 | 2015-7-29 11:44:22
横屏小伙伴的福利
trackway  略有小成 | 2015-7-29 12:16:51
好的好的
xsstomy  斑竹 | 2015-7-29 12:21:55
Once 发表于 2015-7-29 11:44
横屏小伙伴的福利

谢顶
xsstomy  斑竹 | 2015-7-29 12:22:02
zeason0124  初学乍练 | 2015-7-29 12:43:58
先顶一下
但是这个只是治标不治本的办法
单单旋转90度后 像坐标系错乱,scroll,editabletext等组件问题
希望能像lark一样 不知道什么时候能实现
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部