EN中文
开发者社区 > 程序

HTML5屏幕适配的缩放模式之：不缩放(LayaAir引擎)

发表于2017-02-23
评论0 6k浏览

        缩放模式是屏幕适配的重点内容，需要开发者通过实例体验，去深入理解。关于缩放模式的API方法scleMode共有七种参数，本篇将介绍不缩放模式的“noscale”与“full”，并说明两者的区别。


        为了大家能更好的理解缩放模式，我们以iPhone5的屏幕像素（1136, 640）制作一张游戏加载页背景图(loadingBg.jpg)，以Phone６的屏幕像素（1334, 750）为舞台大小，并为舞台设置背景色。结合不同的缩放模式，分别在iPhone4、iPhone5、iPhone6、iPad Mini手机屏幕中体验不同模式的区别。


loadingBg.jpg(点击下载1136, 640像素背景原图)



noscale模式

        该模式不对内容进行缩放，在保持1：1原始比例的基础上，将舞台与浏览器左上角对齐。当浏览器窗口小于内容时，将进行裁切，对内容不会产生缩放变化。

blob.png

（图1）Iphone4横屏的Noscale模式效果，背景右侧超出浏览器的部分被裁切


blob.png

（图2）Iphone5竖屏的Noscale模式效果，背景右侧超出浏览器的部分被裁切

blob.png

（图3）Iphone６横屏的Noscale模式效果

blob.png

（图４）iPd Mini横屏的noscale模式效果

noscale模式示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function()
{
    var Stage  = Laya.Stage;
    var Text   = Laya.Text;
    var Image  = Laya.Image;
 
    //适配模式
    var modes = "noscale";
         
    //全局文本信息
    var txt;
 
    (function()
    {
        //初始化舞台
        Laya.init(1334, 750);
         
        //设置适配模式
        Laya.stage.scaleMode = modes;
        //设置舞台背景色
        Laya.stage.bgColor  = "#ffff99";
 
 
        //实例一个背景
        var bg = new Image();
        bg.skin = "res/img/loadingBg.jpg";
        Laya.stage.addChild(bg);
 
        //实例一个文本
        txt = new Text();
        txt.text = "适配模式("+modes+") ";
        txt.bold = true;
        txt.pos(10, 350);
        txt.fontSize = 60;
        txt.color   = "#fff000";
        Laya.stage.addChild(txt);
    })();
 
})();



full模式

        full模式与noscale模式相似，不对显示内容进行缩放，在保持1：1原始比例的基础上，将舞台与浏览器左上角对齐。当浏览器窗口小于内容时，将进行裁切，对显示内容不会产生缩放变化。但是对于舞台的大小会产生改变，将舞台（stage）的宽高等于浏览器屏幕的宽高。下面我们可以注意一下两种模式之间舞台背景区域的区别。

blob.png

（图5）Iphone4横屏的full模式效果，背景右侧超出浏览器的部分被裁切


blob.png

（图6）Iphone5竖屏的full模式效果，背景右侧超出浏览器的部分被裁切


blob.png

（图7）Iphone６横屏的full模式效果


blob.png

（图8）iPd Mini横屏的full模式效果

full模式示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function()
{
    var Stage  = Laya.Stage;
    var Text   = Laya.Text;
    var Image  = Laya.Image;
 
    //适配模式
    var modes = "full";
         
    //全局文本信息
    var txt;
 
    (function()
    {
        //初始化舞台
        Laya.init(1334, 750);
         
        //设置适配模式
        Laya.stage.scaleMode = modes;
        //设置舞台背景色
        Laya.stage.bgColor  = "#ffff99";
 
 
        //实例一个背景
        var bg = new Image();
        bg.skin = "res/img/loadingBg.jpg";
        Laya.stage.addChild(bg);
 
        //实例一个文本
        txt = new Text();
        txt.text = "适配模式("+modes+") ";
        txt.bold = true;
        txt.pos(10, 350);
        txt.fontSize = 60;
        txt.color   = "#fff000";
        Laya.stage.addChild(txt);
    })();
 
})();



如社区发表内容存在侵权行为，您可以点击这里查看侵权投诉指引

标签：

游戏开发屏幕适配HTML5