Laya Stage

最新推荐文章于 2022-05-16 09:57:02 发布
最新推荐文章于 2022-05-16 09:57:02 发布
阅读量1.6k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JunChow520/article/details/103031089
版权

舞台是显示游戏元素的平台，在游戏视觉编程中，一切游戏的元素必须添加到舞台才能被显示。因此，舞台是放置对象的最终容器。舞台自身也是一种可以显示的对象，从编程角度来讲，任何对象都具有属性和行为。

  • 舞台提供适配模式，不同适配模式产生不同大小的画布，画布越大渲染压力越大。
  • 舞台提供不同的帧率模式，帧率越高渲染压力越大，也越耗电。

环境

  • 操作系统：Windows10
  • 引擎版本：LayaAir2.2.0beta4
  • 编程语言：ES6

舞台

Laya是全局对象的引入入口类，Laya类引用常用全局对象。舞台可通过 Laya 类的 stage 属性 Laya.stage 单例访问。

属性含义
Laya.stage单例访问，获取舞台 laya.display.Stage 对象的引用。

Laya.stage 是 Laya 全局类的属性，是使用单例访问 laya.display.Stage 舞台类的对象，舞台类是显示列表的根节点，所有显示对象都在舞台上显示。

结构描述
Packagelaya.display
ClassLaya.Stage
InheritanceStage / Sprite / Node / EventDispatcher / Object

初始化引擎

Laya.init()初始化引擎，使用引擎前需要先初始化引擎，否则可能会报错。

$ vim ./libs/LayaAir.d.ts

/*
* 初始化引擎。使用引擎需要先初始化引擎，否则可能会报错。
* @param width 初始化的游戏窗口宽度，又称设计宽度。
* @param height 初始化的游戏窗口高度，又称设计高度。
* @param plugins 插件列表，比如 WebGL（使用WebGL方式渲染）。
* @return 返回原生canvas引用，方便对canvas属性进行修改
*/
static init(width:number,height:number,...plugins:any[]):any;

例如：根据IDE设置初始化引擎

if (window["Laya3D"]){
    Laya3D.init(GameConfig.width, GameConfig.height);
}else{
    Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
}

例如：使用默认的Canvas渲染引擎

//创建舞台，尺寸以iPhone5宽高1136x640为基准，16:9标准。
const width = 1136;
const height = 640;
const canvas = Laya.init(width, height);
console.log(Laya.stage.width, Laya.stage.height);//1136 640
console.log(convas);// <canvas id="layaCanvas" width="1136" height="640" style="position: absolute; left: 0px; top: 0px; background: rgb(35, 35, 142); transform-origin: 0px 0px 0px; transform: matrix(0.5, 0, 0, 0.5, 0, 0);"></canvas>

例如：使用WebGL渲染引擎

注意使用WebGL渲染引擎时，需要在项目中提前将laya.webgl.js类库导入，在编辑模式下使用【F9】打开项目设置，勾选类库设置中的laya.webgl.js。

//创建舞台，尺寸以iPhone5宽高1136x640为基准，16:9标准。
const width = 1136;
const height = 640;
const webgl = Laya.init(width, height, Laya.WebGL);
console.log(webgl);

宽高

LayaAir中的宽高可以分为以下几种类型：

宽高描述
Laya.Stage.width / Laya.Stage.height舞台实际宽高
Laya.Stage.designWidth / Laya.Stage.designHeight舞台设计宽高
Laya.Browser.clientWidth / Laya.Browser.clientHeight设备屏幕宽高
Laya.Browser.width / Laya.Browser.height设备物理宽高

设计宽高

设计分辨率是内容产生者在制作场景时使用的分辨率蓝本，屏幕分辨率则是游戏在设备上运行时的实际屏幕显示分辨率。通常设计分辨率会采用市场目标群体中使用率最高的设备的屏幕分辨率，比如目前在Android设备中 800 x 400和1280 x 720两种屏幕分辨率，或iOS设备中1136 x 640和960 x640两种屏幕分辨率。

设计宽高是LayaAir引擎初始化时设置的宽高

//引擎初始化
Laya.init(designWidth, designHeight);
//获取设计宽高
console.log(Laya.Stage.designWidth);
console.log(Laya.Stage.designHeight);

舞台宽高

游戏舞台实际大小的宽高

Laya.stage.width;

Laya.stage.height;

适配宽高

通过引擎适配模式scaleMode对设计宽高缩放后的宽高。

画布宽高

HTML5中Canvas节点的宽高，游戏中所有可见内容都在画布区域内。

早期的移动设备中，屏幕分辨率较低，比如iPhone3的分辨率为320 x 480，此时一个“像素”等于一个屏幕物理像素。随着设备屏幕像素密度越来越高，从iPhone4开始Apple开始推出Retina屏，分辨率提高到了640 x 960，也就是说分辨率提高了一倍，但设备屏幕尺寸并没有变化，这就意味着同样面积大小的屏幕上，像素却多了一倍，这提高的也就是设备像素比devicePixelRatio。

在LayaAir中可以通过Laya.Browser.pixelRatio获取设备像素比。

//获取设备像素比
const pixelRatio = Laya.Browser.pixelRatio;

屏幕宽高

手机浏览器屏幕的宽高即设备像素分辨率 ，比如iPhone6竖屏宽高为376x667。

//获取手机浏览器屏幕宽高
const clientWidth = laya.utils.Browser.clientWidth;
//const clientWidth = Laya.Browser.clientWidth;

const clientHeight = laya.utils.Browser.clientHeight;
//const clientHeight = Laya.Browser.clientHeight;

默认从Browser浏览器上获得clientWidth和clientHeight并不是像素分辨率，而是经过缩放后的分辨率。如果想要获得正确的像素分辨率，则需要在HTML文件中设置视区的宽度为设备宽度且不缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scale=no" />

物理宽高

手机屏幕窗口的实际宽高，平时比较常用的一般是设备物理分辨率，它代表着浏览器窗口的实际分辨率。

//获取手机屏幕窗口的实际宽高
//const browserWidth = laya.utils.Browser.width;
const deviceWidth = Laya.Browser.width;

//const browserHeight = laya.utils.Browser.height;
const deviceHeight = Laya.Browser.height;

例如：

//创建舞台，尺寸以iPhone5宽高1136x640为基准，16:9标准。
const designWidth = 1136;//设计宽度
const designHeight = 640;//设计高度
const canvas = Laya.init(designWidth, designHeight);
//设置缩放模式
//Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//最小比例缩放，缩放后全部都在屏幕内，但可能会出现黑边。
Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;//最大比例缩放，缩放后全屏幕显示无黑边，但可能有部分显示在屏幕外边。

//获取设备像素比
const pixelRatio = Laya.Browser.pixelRatio;
console.log(`pixelRatio = ${pixelRatio}`);//pixelRatio = 2
//获取设备像素分辨率即屏幕宽高
const clientWidth = Laya.Browser.clientWidth;
const clientHeight = Laya.Browser.clientHeight;
console.log(`clientWidth = ${clientWidth}`, `clientHeight = ${clientHeight}`);//clientWidth = 667 clientHeight = 375
//获取设备物理分辨率即物理宽高
const width = Laya.Browser.width;
const height = Laya.Browser.height;
console.log(`width = ${width}`, `height = ${height}`);//width = 1334 height = 750
4933701-3a7293349757db28.png
LayaAir中的宽高

对齐模式

属性描述
Laya.stage.alignH横向水平对齐
Laya.stage.alignV纵向垂直对齐

Laya.stage.alignH 舞台横向对齐 分为左中右

水平对齐描述
Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;设置舞台水平居左对齐
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;设置舞台水平居中对齐
Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;设置舞台水平居右对齐

Laya.stage.alignV 舞台纵向对齐 分为上中下

垂直对齐描述
Laya.stage.alignV= Laya.Stage.ALIGN_TOP;设置舞台垂直居上对齐
Laya.stage.alignV= Laya.Stage.ALIGN_MIDDLE;设置舞台垂直居中对齐
Laya.stage.alignV= Laya.Stage.ALIGN_BOTTOM;设置舞台垂直居下对齐

例如：设置舞台或画布水平居中显示

class Test {
    constructor() {
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        this.initStage();
        this.run();
    }
    initStage(){
        this.setStageAlign("center", "middle");
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    setStageAlign(h, v){
        h = h.toLowerCase();
        if(h == "left"){
            Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;
        }else if(h == "center"){
            Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        }else if(h == "right"){
            Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;
        }
        v = v.toLowerCase();
        if(v == "top"){
            Laya.stage.alignV = Laya.Stage.ALIGN_TOP;
        }else if(v == "middle"){
            Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        }else if(v == "bottom"){
            Laya.stage.alignV = Laya.Stage.ALIGN_BOTTOM;
        }
    }
    run(){
        console.log(Laya.stage.width, Laya.stage.height);//414 736
        console.log(Laya.stage.clientWidth, Laya.stage.clientHeight);//undefined undefined
        console.log(Laya.Browser.width, Laya.Browser.height);//1242 2208
        console.log(Laya.Browser.clientWidth, Laya.Browser.clientHeight);//414 736
    }
}
//启动
new Test();

屏幕模式

LayaAir可以根据浏览器显示的比例设置自动横屏或竖屏，不会受到锁屏而影响。简单来说，LayaAir的屏幕方向是智能适配设置的。改变LayaAir的屏幕方向并不会改变操作系统的的屏幕方向，因此LayaAir的屏幕方向不会受到操作系统屏幕方向的影响。

属性描述
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;自动横屏
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;自动竖屏
  • 设置自动横屏后，游戏的方向会始终与舞台较长的边保持垂直。
  • 设置自动竖屏后，游戏的方向会始终与舞台较短的边保持垂直。

例如：使用新窗口打开，拖动改变浏览器尺寸查看自动横屏效果。

class Test {
    constructor() {
        //初始化引擎
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        //初始化舞台
        this.initStage();
        //运行
        this.run();
    }
    /**初始化舞台*/
    initStage(){
        //设置舞台对齐方式
        this.setStageAlign("center", "middle");
        //设置舞台屏幕模式
        this.setStageScreen("horizontal");
        //设置舞台缩放模式
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    /**设置舞台屏幕模式 */
    setStageScreen(mode = "horizontal"){
        mode = mode.toLowerCase();
        if(mode == "horizontal"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
        }else if(mode == "vertical"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
        }
    }
    /**设置舞台对齐方式 */
    setStageAlign(h, v){
        h = h.toLowerCase();
        if(h == "left"){
            Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;
        }else if(h == "center"){
            Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        }else if(h == "right"){
            Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;
        }
        v = v.toLowerCase();
        if(v == "top"){
            Laya.stage.alignV = Laya.Stage.ALIGN_TOP;
        }else if(v == "middle"){
            Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        }else if(v == "bottom"){
            Laya.stage.alignV = Laya.Stage.ALIGN_BOTTOM;
        }
    }
    run(){
        console.log(Laya.stage.width, Laya.stage.height);//414 736
        console.log(Laya.stage.clientWidth, Laya.stage.clientHeight);//undefined undefined
        console.log(Laya.Browser.width, Laya.Browser.height);//1242 2208
        console.log(Laya.Browser.clientWidth, Laya.Browser.clientHeight);//414 736

        console.log(Laya.stage.alignH, Laya.stage.alignV);//center middle
        console.log(Laya.stage.screenMode);//horizontal
    }
}
//启动
new Test();

缩放模式

舞台提供不同的适配模式scaleMode，不同缩放模式下会产生不同的画布大小，画布越大，渲染压力也就越大。

属性值描述
Laya.stage.scaleMode = Laya.Stage.NOSCALE;noscale不缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;showall最小比例缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;exactfit全屏不等比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;noborder无框缩放 最大比例缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;full全屏缩放 舞台宽高等于屏幕宽高
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;fixedwidth宽度固定 宽度不变 高度根据屏幕比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_HEIGHT;fixedheight高度固定 高度不变 宽度根据屏幕比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;fixedauto自动选择 根据宽高比自动使用fixedwidth或fixedheight
class Test {
    constructor() {
        //初始化引擎
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        //初始化舞台
        this.initStage();
        //运行
        this.run();
    }
    /**初始化舞台*/
    initStage(){
        //设置舞台对齐方式
        this.setStageAlign("center", "middle");
        //设置舞台屏幕模式
        this.setStageScreen("horizontal");
        //设置舞台缩放模式
        this.setStageScale("showall");

        Laya.stage.bgColor = "#000000";
    }
    /**设置舞台缩放模式 */
    setStageScale(mode){
        mode = mode.toLowerCase();
        if(mode == "noscale"){
            //不缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_NOSCALE;
        }else if(mode == "showall"){
            //显示所有 最小比例缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        }else if(mode == "exactfit"){
            //全屏不等比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
        }else if(mode == "noborder"){
            //无框缩放 最大比例缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
        }else if(mode == "full"){
            //全屏缩放 舞台宽高等于屏幕宽高
            Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
        }else if(mode == "fixedwidth"){
            //宽度固定 宽度不变 高度根据屏幕比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;
        }else if(mode == "fixedheight"){
            //高度固定 高度不变 宽度根据屏幕比缩放
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_HEIGHT;
        }else if(mode == "fixedauto"){
            //自动选择 根据宽高比自动选择使用fixedwidth或fixedheight
            Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;
        }
    }
    /**设置舞台屏幕模式 */
    setStageScreen(mode = "horizontal"){
        mode = mode.toLowerCase();
        if(mode == "horizontal"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
        }else if(mode == "vertical"){
            Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
        }
    }
    /**设置舞台对齐方式 */
    setStageAlign(h, v){
        h = h.toLowerCase();
        if(h == "left"){
            Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;
        }else if(h == "center"){
            Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        }else if(h == "right"){
            Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;
        }
        v = v.toLowerCase();
        if(v == "top"){
            Laya.stage.alignV = Laya.Stage.ALIGN_TOP;
        }else if(v == "middle"){
            Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        }else if(v == "bottom"){
            Laya.stage.alignV = Laya.Stage.ALIGN_BOTTOM;
        }
    }
    run(){
        console.log(Laya.stage.width, Laya.stage.height);//414 736
        console.log(Laya.stage.clientWidth, Laya.stage.clientHeight);//undefined undefined
        console.log(Laya.Browser.width, Laya.Browser.height);//1242 2208
        console.log(Laya.Browser.clientWidth, Laya.Browser.clientHeight);//414 736

        console.log(Laya.stage.alignH, Laya.stage.alignV);//center middle
        console.log(Laya.stage.screenMode);//horizontal
        console.log(Laya.stage.scaleMode);//showall
    }
}
//启动
new Test();

例如：舞台中心添加精灵图，查看不同缩放模式下的效果。

//创建舞台
const designWidth = 400;//设计宽度
const designHeight = 300;//设计高度
const canvas = Laya.init(designWidth, designHeight);
//设置舞台背景颜色
Laya.stage.bgColor = "black";
//设置舞台水平对齐
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//水平居中
//设置舞台垂直对齐
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//垂直居中
//设置舞台缩放模式
Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;//缩放显示所有
//设置舞台屏幕模式
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;//自动横屏

//创建精灵
let sprite = new Laya.Sprite();
//精灵图绘制黄色矩形
sprite.graphics.drawRect(-100, -100, 200, 200, "gray");
//向舞台中添加精灵节点
Laya.stage.addChild(sprite);
//设置精灵在舞台中的坐标位置
sprite.x = Laya.stage.width >> 1;
sprite.y = Laya.stage.height >> 1;
  • SCALE_EXACTFIT 伸缩适应

Exact Fix模式是不考虑内容的原始比例，直接通过非等比缩放填满整个浏览器屏幕的模式。在此种模式下，画布宽高与舞台宽高都等同于设计宽高，而且不会发生改变。但当物理宽高与设计宽高不相同时，这种非等比的缩放可能会导致原有设计明显缺陷。

整个应用程序在指定区域中可见，但不尝试保持原始宽高比，可能会发生扭曲，应用程序可能会拉伸或压缩显示。


4933701-0fda64bfde51fbe5.png
SCALE_EXACTFIT
  • SCALE_NOBORDER 无边框

No Border无边框模式下，画布宽高等同于设计宽高。当缩放时，按照屏幕宽高与设计宽高最大比率的一方进行缩放。

比如设计尺寸为1136x640，屏幕物理宽高为750x1334，经过计算得到宽的比例为750/1136=0.66，高的比例1334/640=2.08，按照最大比例一方将适配拉伸至物理高度的1334，适配宽度等比拉升 1334/640*1136=2368，此时超出屏幕宽度的部分将会被自动裁剪掉。

整个应用程序填满指定区域，不会发生扭曲，但有可能进行一些裁剪，同时保持应用程序的原始宽高比。

  • SCALE_NOSCALE 不缩放

No Scale不缩放模式下，画布与舞台的宽高等同于设计宽高，并在保持1:1原始设计比例的基础上，将舞台与浏览器屏幕左上角对齐。当屏幕宽高小于内容时将进行裁切，当屏幕宽高大于内容时则会出现黑边。

整个应用程序大小固定，即使播放器窗口大小更改，应用程序也会保持不变。如果播放器窗口比内容小，则可能进行裁剪。

  • SCALE_SHOWALL 显示所有

Show All显示所有模式下，舞台与画布的宽高等同于缩放后的适配宽高，缩放按照屏幕宽高与设计宽高最小比率一方进行等比缩放。

比如设计尺寸为1136x640，屏幕物理宽高为750 x 1334，通过计算得到宽的比率为 750 / 1136 = 0.66，高的比率为 1334 / 640 = 2.08。按照最小比率一方即宽为基准，画布宽高会被缩放为屏幕的物理宽度750，适配高度经过等比缩放 750 / 1136 * 640 = 423，由于423远远小于屏幕物理高度1134，因此会出现大量留黑的空屏。

整个应用程序在指定区域中可见，不会发生扭曲，同时保持应用程序的原始宽高比，应用程序两侧可能会显示边框。

查看默认缩放模式

//创建舞台，尺寸以iPhone5宽高1136x640为基准，16:9标准。
const width = 1136;
const height = 640;
const canvas = Laya.init(width, height);
console.log(Laya.stage.scaleMode);//noscale

设置缩放模式

//创建舞台，尺寸以iPhone5宽高1136x640为基准，16:9标准。
const designWidth = 1136;//设计宽度
const designHeight = 640;//设计高度
const canvas = Laya.init(designWidth, designHeight);
//设置缩放模式
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//最小比例缩放，缩放后全部都在屏幕内，但可能会出现黑边。
//Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;//最大比例缩放，缩放后全屏幕显示无黑边，但可能有部分显示在屏幕外边。
console.log(Laya.stage.scaleMode);//showall

自动计算

Laya.stage.autoSize = false;

由于Stage舞台类继承自Sprite精灵类，Sprite精灵类提供了autoSize属性，用于指定是否自动计算宽高数据，默认为 false。默认Sprite精灵宽高为0，不会随着绘制内容的变化而变化。如果想要根据绘制内容获取宽高，可以设置autoSize=true，或者通过getBounds()方法获取。不过开启autoSize后会对性能有一定影响。

帧率类型

Laya.stage.frameRate = Laya.Stage.FRAME_SLOW;

Laya 的 Stage 舞台类提供了 frameRate 存取器，用于获取和设置舞台的帧率类型。

帧率类型类型默认值描述
Laya.Stage.FRAME_FASTstringfase全速模式，以60FPS的帧率运行。
Laya.Stage.FRAME_SLOWstringslow慢速模式，以30FPS的帧率运行。
Laya.Stage.FRAME_MOUSEstringmouse自动模式，以30FPS的帧率运行，鼠标活动后会自动加速到60FPS，鼠标不动2秒后降低为30FPS，以节省性能。
Laya.Stage.FRAME_SLEEPstringsleep休眠模式，以1FPS的帧率运行。

FPS是画面每秒传输帧数（Frames Per Second），是指动画或视频的画面数（帧数）。FPS是用测量用于保存、显示动态视频的信息数量，秒条帧数越多所显示的动作就越流畅。通常要避免动作不流程的最低FPS是30。

FPS可理解为刷新率，单位Hz，比如装机选购显卡和显示器时默认刷新率都在75Hz以上，75Hz的刷新率表示屏幕1秒内扫描75次。当刷新率太低时肉眼会感觉到屏幕闪烁且不连贯，对图像显示效果和视觉感观不好。

电影以每秒24张画面的速度播放，一秒内在屏幕上连续投射出24张静止画面。游戏中一般人能接受的最低FPS为30Hz，基本流畅等级则需要高于50Hz。

常见媒体的FPS帧率

媒体FPS帧率
电影24FPS
电视 PAL25FPS
电视 NTSC30FPS
CRT 显示器75Hz
液晶显示器60Hz

显示分辨率不变的情况下，FPS刷新率越高对显卡的处理能力要求越高，计算机中所显示的画面都是由显卡输出的，屏幕上每个像素的填充都是由显卡计算输出的，当画面的分辨率为1024 x 768 时，画面的刷新率达到 24FPS，显卡在一秒钟内需要处理的像素就需要达到 1024 x 768 x24 = 18874368。FPS与分辨率和显卡处理能力的关系：显卡处理能力 = 分辨率 x 刷新率。

当前PC与手机等移动设备的满帧为60帧，如果游戏对画面的流畅度要求不高可采用Laya引擎的帧数限制方法Laya.Stage.FRAME_SLOW将FPS帧数限制为最高30帧。

Laya项目由于实际运行环境是在浏览器中，所以性能还取决于JavaScript解释器的效率，对此同一款游戏的FPS在不同的浏览器中可能会存在不同的差异。这部分不是开发者能够决定的，开发者能作的尽可能使用更好的引擎和游戏项目，争取在低端设备和低性能浏览器中提升FPS帧率。

Laya引擎支持Canvas和WebGL两种渲染模式，因此在查看FPS帧率时需要注意当前引擎在哪种渲染模式下。

封装

TypeScript封装舞台工具类

/**
 * 舞台工具类
 */
export default class Stage{
    //单例模式
    private static _instance:Stage;
    public static getInstance():Stage{
        if(!this._instance){
            this._instance = new Stage();
        }
        return this._instance;
    }
    private constructor(){}
    /**
     * 舞台初始化
    */
   init(width:number=1334, height:number=750, isWebGL:boolean=false, isStat:boolean=false):void{
        //引擎渲染方式
        if(isWebGL){
            Laya.init(width, height, Laya.WebGL);//指定WebGL
        }else{
            Laya.init(width, height);//默认Canvas
        }
        //是否显示统计信息
        if(isStat){
            Laya.Stat.show();
        }
        //自动计算
        Laya.stage.autoSize = false;//开启后影响性能
        //帧率类型
        Laya.stage.frameRate = Laya.Stage.FRAME_SLOW;//30帧
        //对齐方式
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//水平居中
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//垂直居中
        //屏幕模式
        Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;//横屏
        //缩放模式
        Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;
        //背景颜色
        Laya.stage.bgColor = "#808080";
   }
}
JunChow520
关注
scalemode属性 html,Laya屏幕适配及尺寸属性
weixin_42370320的博客
06-04 731
一、各种尺寸属性2.Laya.Stage/**设计宽度(初始化时设置的宽度Laya.init(width,height))*/public var designWidth:Number = 0;/**设计高度(初始化时设置的高度Laya.init(width,height))*/public var designHeight:Number = 0;override public function ...
Laya的Scene、View、Dialog区别 (Laya.Scene.opne, Laya.Dialog.open区别)
gamedaybyday
12-29 3026
版本：Laya2.2.0 新建场景时，会有3个类型，分别是Scene、View、Dialog Scene、View、Dialog的继承关系 Scene就是普通场景 View，继承自Scene，增加了widget组件，可以进行适配 Dialog，继承自View，除了适配，还增加了打开和关闭动画 Laya...
Laya横屏方式设置
Zmikoo学习之路
05-16 788
Laya设置Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZTAL;后的横屏是竖屏状态逆时针转了90度。但是我希望是顺时针转90度。修改如下： 修改文件laya.core.js if (rotation){ if (this._screenMode==="horizontal"){ mat.rotate(Math.PI / 2); mat.translate(screenHeight / pixelRatio,0); this.c
Laya打包的app实现手机全屏 强制关闭虚拟按键
qq2588258的博客
06-30 587
1 先在laya引擎里设置scaleMode： Laya.stage.scaleMode = Stage.SCALE_EXACTFIT; Laya.stage.screenMode = Stage.SCREEN_HORIZONTAL; //水平居中对齐 Laya.stage.alignH = Stage.ALIGN_CENTER; //垂直居中对齐 Laya.stage.alignV = Stage.ALIGN_MIDDLE; 2再构建到androidstudio里设置AppThemeNoActio.
LayaAir 屏幕适配-横屏与竖屏
蚩尤后裔-汪茂雄
12-25 6326
目录 屏幕方向 screenMode=none screenMode=horizontal screenMode=vertical 横竖屏切换代码 屏幕方向 laya.display.Stage 类的 screenMode 属性用于定义屏幕模式，即设置屏幕横屏或者竖屏，或者不改变屏幕。 Property（属性） screenMode : String 场景布局类型。 取值...
LayaAir 性能统计面板 laya.utils.Stat
蚩尤后裔-汪茂雄
01-06 3840
目录 性能统计 Stat 编码示例 FPS 帧率/帧率限制 性能统计 Stat 1、制作游戏过程中，掌握游戏以及引擎的优化技巧还是非常有必要的，要了解引擎的性能，首先要看懂性能统计面板。 2、LayaAir 引擎内置的性能统计面板可实时检测当前性能，在代码中输入 Laya.Stat.show(0,0); 即可调出性能统计面板。 Package laya.utils 类 ...
Laya音乐Bug,AudioManager
qq_42838904的博客
03-13 634
复现方法： 1.用Laya.SoundManager.playMusic()随意播放一个音效文件 2.在项目内开启Laya.SoundManager.autoStopMusic = true; //通过窗口失焦静音键让音频自动跟随设备静音 3.使游戏失焦： 这时背景音和音效都会暂停，Laya.SoundManager.musicMuted不知道有没有被设置为false，但是关键解决办法在这个值上面...
Laya 笔记-LayaAir基础篇
许集贤
06-04 1909
屏幕适配 获取浏览器DPR(Device Pixel Ratio)设备像素比：Laya.Browser.pixelRatio 逻辑宽高(逻辑分辨率的宽高)：Laya.Browser.clientWidth、Laya.Browser.clientHeight 物理宽高(物理分辨率):Laya.Browser.width、Laya.Browser.height 设计宽高：在LayaAir引擎里，初始化引擎的init(宽，高)值对应的就是设计宽高。如Laya.init(750, 1334); 引..
本地坐标和全局坐标转化
远行的博客
05-05 5449
涉及到的API globalToLocal localToGlobal toParentPoint fromParentPoint /** * 把本地坐标转换为相对stage的全局坐标。 * @param point 本地坐标点。 * @param createNewPoint （可选）是否创建一个新的Point对象作为返回值，默认为false，使用输入的p...
fgui的ui管理框架_FGUI+Laya Air 游戏架构之stage分层架构
weixin_36240177的博客
01-14 1222
先提前说明，此架构是幼麟棋牌框架的作者 @麒麟子 大神教给笔者的，麒麟子大佬给了一套基于FGUI+Laya Air写的棋牌大厅界面子工程学习，奎斯花了一段时间从代码中学习并初步总结了出了分层游戏架构的基本模式，因为只是初步学习,还有一些其他模块奎斯暂时没有加(比如网络模块)，下面奎斯分享出这套游戏架构(这里只介绍理论总结，不贴具体代码)。一、分层架构基本模式：先UI分层架构图： 在分层架构中，我们...
laya 下以光标为中心缩放对象
weixin_30254435的博客
01-19 207
private MouseWheel(e: Laya.Event) { console.log("event"); let currentSp = e.target as Laya.Sprite; let parentSp = currentSp.parent as Laya.Sprite; console.log("...
Laya的屏幕匹配
落尘飞
12-12 6423
LayaAir 中的 屏幕设置
FGUI+Laya Air 游戏架构之stage分层架构
qq_37872192的博客
04-12 1765
先提前说明，此架构是麒麟棋牌框架的作者@麒麟子大神教给作者的，麒麟子大佬给了一套基于FGUI+Laya Air写的棋牌大厅界面子工程学习，作者花了一段时间从代码中学习并初步总结了出了分层游戏架构的基本模式，因为只是初步学习,还有一些其他模块作者暂时没有加(比如网络模块)，下面作者分享出这套游戏架构(这里只介绍理论总结，不贴具体代码)。 一、分层架构基本模式： 先UI分层架构图： 在分层架...
laya 显示顺序和背景图片设置
frankxixu的专栏
02-07 1076
1、stage 包含子节点 scene ,因此scene和UI组件（或者直接add到stage上的节点平级），按照zOrder来决定顺序； 2、不同的camera按照layer来划分，按照renderOrder决定顺序
Laya：场景管理器。
luojialing2的博客
11-19 3477
在Laya中打开新场景时，使用Laya.Scene.open方法即可。但直接这样使用会有一个问题：如果在场景A中挂在了一个脚本，且在Update里执行了某个方法，当打开新场景B时，场景A里的Update方法依然会继续执行，说明单纯地调用Laya.Scene.open方法来打开新场景不能彻底地关闭上一个场景。于是自己写了一个简单的场景管理。 使用方法： 由于场景管理器是一个单例，我的使用方法是在游戏的初始化场景时通过： if(Laya.stage.getComponent(SceneMgr)) { retur
Laya快应用适配问题(华为，vivo，oppo)
09-17 2520
1.Laya引擎在快应用运行器上运行 不同手机的物理分辨率会获取的宽高不同 ，导致适配界面出现一片白屏问题。 解决代码需要开启 Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL; Laya.stage.alignH = Laya.Stage.ALIGN_CENTER ; Laya.stage.alignV = Laya.Stage.ALIG...
如何将HTML5引擎LayaAir的性能发挥到极致
Layabox 引擎
11-25 8867
游戏性能优化，一直是游戏开发者需要学习掌握的课题，在移动设备硬件性能远弱于PC的背景下，我们对性能的需求显得更加重要。
layabox的第一个程序---舞台输出：hello world
u012028371的博客
08-15 5333
这里给出一个一个输出hello，world的小demo，想要深入的学习layabox(layabox是一个款html5游戏引擎，主要是canvas的，不再写html和CSS文件)，请去layabox官网学习。    注意：在新建的空项目下的src文件夹下的主文件里编写。     //关于text文本类的详细属性和接口说明请参考text的API  var Text = laya
LayaBOX添加颜色滤镜
mayzhengxi的博客
08-11 6723
/初始化舞台 Laya.init(1334, 750,Laya.WebGL); //设置舞台背景色 Laya.stage.bgColor = "#ffffff"; //原始位图 createImg(100,50); //红色滤镜 creteRedFilter(); //灰色滤镜 createGrayFilter(); /**创建位图**/ function creat
laya resize
最新发布
11-03
在LayaAir引擎中，当浏览器窗口大小发生变化时，需要重新设置舞台大小以适应新的窗口大小。可以通过监听浏览器窗口的resize事件来实现。具体实现方法如下： ```javascript Laya.stage.on(Laya.Event.RESIZE, this, onResize); function onResize() { //重新设置舞台大小 Laya.stage.width = Laya.Browser.width; Laya.stage.height = Laya.Browser.height; //其他适配操作 } ``` 需要注意的是，在进行舞台大小适配时，需要考虑到不同设备的屏幕分辨率和宽高比等因素，以保证游戏在不同设备上的显示效果一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值