关于前端屏幕适配规范

前言

适应APP横屏、竖屏， PC版 UI布局

一. 基础概念

1. Canvas（画布）

组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放

2. Widget（对齐挂件）

放置在渲染元素上，能够根据需要将元素对齐父节点的不同参考位置

3. 设计分辨率

游戏在设计制作时场景的分辨率，即 Canvas 中的 Design Resolution 属性，也就是图中紫色边框的区域

4. 屏幕分辨率

顾名思义，就是设备上屏幕的分辨率

二. 游戏设计分辨率

设备	尺寸
横屏	1334 * 750
竖屏	750 * 1334
PC	1920 * 1080

在游戏初始时定义全局模板属性 Template ； 设置模板类型：LS（横屏）、PT（竖屏）、PC（PC端）；

手机端壳内给出当前屏幕的方向，初始化中定义好模板属性。如：Template = PT; //游戏为竖屏, 之后的模板属性Template不可更改，此次游戏的状态都为竖屏。

如果是PC状态，由游戏中自己锁定。

美术在设计UI时不可超过当前模板的设计分辨率。

三. 游戏的屏幕适配模式

场景适配：

取宽高比小的那个值做基准，等比缩放到全屏大小。

这种模式在两边会留下空白部分，可以让美术出一张较大的背景底图垫在背后。

 initUILayout () {

        let node = cc.Canvas.instance;

        let width = cc.view.getVisibleSize().width;
        let height = cc.view.getVisibleSize().height;

        if (width <= height) {
            if (width/height > 750/1334) {
                node.fitHeight = true;
                node.fitWidth = true;
            } else {
                node.fitHeight = false;
                node.fitWidth = true;
            }

        } else {
            node.fitHeight = true;
            node.fitWidth = false;
        }
    },

弹框适配：

现在所有弹框类型（中心弹出、无动画、右渐入、左渐入等）都无需设置 Weight 只要 保证 Node.Position 为 0，0 就可以：

注意：

五子棋项目，由于 游戏界面 是用 prefab 创建， 所以在关闭弹框时 请谨慎使用 Pop 的 removeAll() 方法， 该方法会把所有弹出框关闭掉，最终回到当前场景页。

四. UI的设计

在游戏的三种模板属性下，UI也要设计对应的三套。（每个界面都对应有三套布局，除了一些可以通用的小弹窗）

横屏：

竖屏：

PC 端：

五. 代码逻辑

在UI在打开中判断当前的模板属性来打开对应的UI。 如： MainUI，设计有三套，分别为：LS_MainUI、PT_MainUI、PC_MainUI； 打开UI时：

switch (Template) {
	case LS:
		Open(LS_MainUI);
		Break;
	case PT:
		Open(PT_MainUI);
		Break;
	sase PC:
		Open(PC_MainUI);
		Break;
}

注意

三套UI中的可操作单元要完全一致，包括变量和方法，以方便外部调动管理。

建议把逻辑层和UI层分开，一个逻辑类对应三个UI布局类。 如：

Class LS_UIA //布局类（横屏）
{
	var ctrl : Ctrl_A;
	var btn1;
	var btn2;
	function onBtn1Click() { ctrl.clickBtn1() } 
	function onBtn2Click() { ctrl.clickBtn2() }
	
}

Class PT_UIA //布局类（竖屏）
{
	var ctrl : Ctrl_A; 
	var btn1;
	var btn2;
	function onBtn1Click() { ctrl.clickBtn1() } 
	function onBtn2Click() { ctrl.clickBtn2() }
}

Class PC_UIA //布局类（PC）
{
	var ctrl : Ctrl_A;
	var btn1;
	var btn2;
	function onBtn1Click() { ctrl.clickBtn1() } 
	function onBtn2Click() { ctrl.clickBtn2() }
}

Class Ctrl_A //逻辑控制类
{
	function onAdd(){};
	function onRemove(){};
	function clickBtn1(){};
	function clickBtn2(){};
}