Configure Screen Design Size

如何在 Egret 中使用适合的屏幕适配策略

本教程适用于 Egret 1.1+ 版本，请在阅读本教程之前，使用 egret info 命令确认您的版本号。

基础概念

Egret 的屏幕适配主要包括以下概念。舞台尺寸、屏幕尺寸、屏幕适配策略

舞台尺寸指游戏舞台的大小，在 egret_loader.js中通过 setDesignSize 方法进行设置，默认值为480*800

屏幕尺寸指手机屏幕的分辨率大小，如 iPhone4 为640 * 960，iPhone5 为 640 * 1152

屏幕适配策略指如何将舞台尺寸以正确的方式映射到手机屏幕中

实现原理

在不同平台/不同浏览器中，egret的屏幕适配遵循以下流程

• 开发者设置舞台尺寸，如 480 * 800
• egret 内部获取屏幕尺寸，如 iPhone5 获取为 640 * 1152
• egret 检查当前的屏幕适配策略，并根据屏幕适配策略调整舞台尺寸
• 开发者根据调整后的舞台尺寸 stage.stageWidth 和 stage.stageHeight 进行编程

屏幕适配策略

Egret有以下四种屏幕适配策略：

StageScaleMode.SHOW_ALL

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

在这种模式中，舞台尺寸永远会和最初的设置一致，这是入门开发者最适合的方式，但是这种方式的美中不足是，如果屏幕的宽高比和舞台尺寸不一样，会在两侧或者上下添加一个黑边

StageScaleMode.NO_BORDER

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

这种屏幕适配策略的永远会填满整个屏幕，但是舞台尺寸会随着不同的屏幕变化而变化。以 480 * 800 的竖屏游戏为例，在 iPhone4全屏模式下上，舞台尺寸会被调整为 480 * 720，在iPhone5全屏模式上，舞台尺寸会被调整为 480 * 854。

使用这种屏幕适配策略，开发者应小心处理舞台高度不足的情况，以防出现在特定设备中，游戏内容无法显示。

StageScaleMode.NO_SCALE

指定应用程序的大小是固定的，因此，即使在更改播放器窗口大小时，它仍然保持不变。如果播放器窗口比内容小，则可能进行一些裁切。

这种模式通常用于PC调试。

ScaleScaleMode.EXACT_FIT

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

在这种模式下，舞台尺寸永远会和最初的设置一致，也不会出现黑边，但是如果屏幕宽高比和舞台尺寸不一致，会进行非等比缩放。