项目设置详解

Author：Charley、孟星煜

一、运行配置

1.1 分辨率设置

分辨率的设置会影响IDE内的预览效果，以及项目运行时的画布宽高、适配模式、对齐方式，画布背景色等。可设置属性如图1-1所示：

（图1-1）

1.1.1 画面宽高适配

影响产品画面宽高的三个设置，分别是设计宽高（Design Width、Design Height），缩放适配模式(Scale Mode)。

设计宽高，就是我们在IDE里的设置并看到的宽高，

这个宽高会影响在IDE里的UI场景背景大小，以及IDE的预览运行模式下，也是基于这个宽高查看效果。

在实际的运行环境里，例如不同的手机。由于屏幕比例的不同，肯定不可能与设计宽高完全吻合。

所以，就需要用引擎自带的缩放适配模式，进行缩放，从而来满足开发者的屏幕需求。

缩放适配模式涉及画布、舞台、适配算法等诸多知识点，我们在另一篇文档《屏幕适配》里详细介绍。

1.1.2 横竖屏适配

有的时候，我们需要根据屏幕的比例强制横竖屏设置，在IDE中可以通过设置屏幕模式（Screen Mode）来设置。

横竖屏有三种适配模式，如图1-2所示。

（图1-2）

1，无变化：none

none时，无论屏幕方向如何旋转，游戏的水平方向都不会产生跟随屏幕旋转的变化。

效果如动图1-3所示。

(动图1-3)

通过动图1-3发现，none值时，当屏幕发生旋转后，基于竖屏设计的界面在横屏下就会变的不适合，同理，基于横屏设计的界面在竖屏下，也会变的不适合。

当然，如果我们的布局策略运用的比较合理，也许也可以兼顾横竖屏的体验。效果如动图1-4所示。

(动图1-4)

虽然不那么难看了，但为了达到最佳的效果，最好的方案，还是竖屏始终与设备竖屏的方向保持一致，横屏与设备横屏的方向保持一致。

2，始终横屏：horizontal

当我们设置的宽高就是横屏产品时，horizontal无疑是最佳的体验，效果如动图1-5所示。

(动图1-5)

通过动图1-5发现，screenMode属性值设置为horizontal时，无论屏幕方向如何旋转，设计上的水平方向都会与屏幕最短的边始终保持垂直，所以用户设备竖屏时看到横屏画面，自然就会把设备横过来，从而吻合了产品的设计。

3，始终竖屏：vertical

当我们设置的宽高就是竖屏产品时，vertical无疑是最佳的体验，效果如动图1-6所示。

(动图1-6)

通过动图1-6发现，screenMode属性值设置为vertical时，无论屏幕方向如何旋转，游戏的水平方向都会与屏幕较长的边始终保持垂直。所以用户哪怕是把设备横屏了，仍然看到的是竖屏画面，自然就会把设备恢复竖屏，从而吻合了产品的设计。

[!Tip]

需要注意的是，浏览器中运行的时候，引擎的自动横屏和自动竖屏，只能对画布进行旋转，如果用户的手机锁屏了，虽然画面自动旋转过来了，但是浏览器没有旋转过来，会导致输入法依然按浏览器的方向弹出，此时，可能会导致输入法与浏览器的显示呈90度。

在小游戏平台中运行，由于小游戏底层有横屏还是竖屏的配置，不会出现这个问题。

1.1.3 画布背景色设置

画布背景色，其实就是给画布设置一个颜色，默认值为#888888，如图1-7所示：

（图1-7）

1.2 引擎初始化设置

有一些引擎的配置项，需要在引擎初始化的时候设置，而设置的入口就是如图1-8所示：

（图1-8）

2D属性参数说明：

3D属性参数说明：

1.3 杂项

如图1-9所示，LayaAir-IDE可以开启以下调试模块：

（图1-9）

1.3.1 显示统计信息

勾选显示统计信息之后，可以查看当前帧率、内存占用、节点等信息，用于项目的分析与优化。如图1-10所示。

（图1-10）

如想了解更详细的统计信息面板上的参数，请查阅文档《性能统计与优化》。

1.3.2 显示移动端调试工具 VConsole

在移动端调试，通常需要联到电脑端的浏览器上。

如果开发者不需要断点，只是一些常用的日志打印、加载等查看等，开启V Console，在移动端会出现如图1-11所示的调试工具面板。

（图1-11）

1.3.3 弹窗显示全局错误

如果捕获全局错误window.onerror，勾选弹窗显示全局错误可以弹窗抛出详细错误堆栈。例如，可以自定义一个全局错误，代码如下：

//自定义一个全局错误
let err = new Error("自定义的Error");
Laya.Browser.window.onerror(err.message, "", "", "", err);

运行时，就会弹窗抛出异常，效果如图1-12所示。

（图1-12）

二、引擎库模块

LayaAir引擎有多个模块组件，在IDE中默认只引入了较为基础的模块，如图2-1所示。

（图2-1）

如果应用到其它模块，需要勾选对应的模块，才可以使用其API，否则项目运行时会导致报错。

2D引擎库模块说明：

3D引擎库模块说明：

通用引擎库模块说明：

其它引擎库模块说明：

三、物理系统

3.1 2D物理

2D物理有一些全局的配置，如图3-1所示，

（图3-1）

3.2 3D物理

3D物理有一些全局的配置，如图3-2所示，

（图3-2）

四、WebGPU

WebGPU是一种新的Web标准，旨在为Web应用程序提供更好的图形和计算性能。在支持WebGPU的浏览器中，可以通过启用WebGPU来提高渲染性能，如图4-1所示。

（图4-1）

注意：编辑器内置预览不支持WebGPU，需要使用外部浏览器预览。

例如，如果使用Chrome浏览器，可以通过访问 chrome://flags 查看是否有相关选项来启用这种支持。如图4-2所示，在页面中搜索 "WebGPU"。设置为“Enabled”后，重启浏览器。

（图4-2）

五、启动页

启动页是指，在游戏开始前，显示的图标。如果不进行设置，则会使用引擎默认的图标。开发者可以自定义图标，如图5-1所示：

（图5-1）

参数说明：

六、脚本编译

如图6-1所示，IDE提供了脚本编译和发行版本选项，

（图6-1）

脚本编译选项的配置如下，

发行版本选项的配置如下，

七、预览服务

预览服务器可以设置在浏览器中预览的地址和端口号。设置好后刷新IDE，即可应用，效果如图7-1所示。

（图7-1）

八、预设值

8.1 纹理类型

当从外部导入纹理资源（PNG、JPG）到IDE时，如图8-1所示，会将该资源设置为开发者设定的纹理类型，通常可以选择为精灵纹理。

（图8-1）

8.2 3D预制体编辑场景

默认情况下，3D预制体是位于一个专用的系统空场景（DefaultPrefabEditEnv）的环境下进行编辑。

如果通过3D预制体编辑场景，指定了一个目标场景，相当于直接位于某个3D场景中进行编辑，这样当切换到3D场景中，就会更加符合需求。操作如图8-2所示：

（图8-2）

8.3 自动烘焙IBL

勾选自动烘焙IBL后，如图8-3所示，如果在Scene3D中更换了天空盒材质（Material由skybox更换为其它材质），此时Reflection Probe的IBL Tex无需手动点击烘焙按钮，保存场景后，IDE会自动进行重新烘焙。

（图8-3）

只有Reflection Probe的Source为Skybox时，才会自动烘焙。Custom无法自动烘焙。

8.4 3D渲染层名称定义

3D节点，可以选择层级并设置，而编辑设置中，正是增加、删除层级，以及为层级命名的地方。效果如图8-4所示。

（图8-4）

关于层级Layer的更多介绍，可前往IDE文档《使用3D精灵》进行查看。