ActionScript
TypeScript
JavaScript

自动横屏与横屏游戏

发布时间:2017-02-13

在讲到引擎的自动横屏之前,先说一说有些人对横屏游戏的误区。

直到如今有些人仍在说,如果做H5游戏一定要做竖屏游戏,其实要是深入了解一下,说这些话的,很大一部分是2015年或更早进入H5游戏行业中来的,还有一部分是受到那些早期做H5游戏影响的人。他们为什么会一直有这种误区呢?那到底是哪些原因是支持竖屏游戏论呢?在和大量持此观点的人交流后,总结下来,主要有三点。

第一、横屏游戏对性能的消耗更大?

针对这一观点,有存在这种可能,但这是完全可以避免的。因为导致性能问题,一是某些引擎在屏幕旋转处理上,可能没有处理好。二是项目自身在屏幕旋转后没有作好屏幕适配而导致的渲染量增多。有人会说,竖屏不需要做旋转处理,增加旋转操作肯定会增加游戏的性能消耗。貌似很有道理的样子,实际上旋转通常只有一次,这个性能的消耗也是可以被忽略的。所以横屏游戏性能消耗更大的说法,如果不是自身项目没写好。LayaAir引擎不会存在这种问题。

第二、横屏游戏的游戏用户转化率会更低?

这个观点,在早期的H5游戏中是成立的,对于不支持自动横屏的引擎或是没有用引擎的H5游戏,又无法实现自动横屏时。横屏操作,通常会受限于系统的横屏锁定开关。如果需要用户增加操作,的确有可能会导致部分用户的流失。但是Layabox的引擎并不存在这种问题。LayaAir引擎的自动横屏模式,是依据浏览器的显示比例,游戏的水平方向始终与浏览器屏幕较短边保持垂直,并不受系统影响。所以不会存在增加操作而导致用户的额外流失。

第三、竖屏游戏的游戏体验比横屏游戏更好?

首先不能否认的是,竖屏游戏里有很多非常优秀的游戏。但是横屏游戏,尤其是APP横屏游戏也有非常多的成功游戏案例。H5手游与APP手游除技术差异外,游戏的硬件载体与游戏体验,并没有天然的差异,对于玩家来说,其实他并不在意你采用了什么技术去开发游戏,而游戏本身的品质是否能吸引他玩下去和付费。所以无论是横屏游戏还是竖屏游戏,只要是制作团队优秀,都是可以制作出来精品大作。并不会因为是横屏还是竖屏而影响游戏用户体验。


LayaAir引擎如何设置自动横屏

上面刚刚有提到,LayaAir引擎设置自动横屏后,会让游戏的水平方向始终与浏览器屏幕较短边保持垂直。自动横屏的示例代码如下:   

module laya {
    import Text = Laya.Text;
    import Stage = Laya.Stage;

    export class smartScale {
        constructor()
        {
            //初始化舞台
            Laya.init(500, 300);
            //让舞台处于屏幕的垂直居中
            Laya.stage.alignV = "middle";
            //让舞台处于屏幕的水平居中
            Laya.stage.alignH = "center";

            //保持原始高宽比的情况下,将舞台铺满屏幕,超出比例的部分会有黑边
            Laya.stage.scaleMode = "showall";
 
            //自动横屏,游戏的水平方向始终与浏览器屏幕较短边保持垂直
            Laya.stage.screenMode = "horizontal";
            //设置舞台背景色
            Laya.stage.bgColor = "#232628";
            
            this.showText();
        }

        private showText(): void {
            var text:Text = new Text();
            text.text = "游戏水平方向";
            text.color = "gray";
            text.fontSize = 50;
            
            text.x = Laya.stage.width - text.width >> 1;
            text.y = Laya.stage.height - text.height >> 1;
            
            Laya.stage.addChild(text);
        }
    }
}
new laya.smartScale();

竖屏状态下的代码运行效果如下:

blob.png

横屏状态下的代码运行效果如下:

blob.png

处理自动横屏的代码是“Laya.stage.screenMode = Stage.SCREEN_HORIZONTAL;”示例代码中的注释中已经说明。大家可以在编码过程中进行体验。