CocosCreator项目屏幕适配之全屏显示

------在做小游戏平台游戏时，要全屏适配各个宽高比的手机，Cocos Creator的项目做全屏适配是比较简单的，做几个方面的操作就可以了，代码部分为TS。

1. 修改Canvas（画布）的属性

   
   
   

   捕获.PNG
   
   

   横屏游戏只勾选“适配高度（Fit Height）”
   竖屏游戏只勾选“适配宽度（Fit Width）"

---

2. 修改场景的脚本组件

protected onLoad(): void {
    // 分辨率适配
    cc.Canvas.instance.designResolution = cc.winSize;
}

---

3. 修改场景下的UI脚本组件

protected onLoad(): void {
    // 分辨率适配
    this.node.setContentSize(cc.winSize);
}

---

4. 背景图大小的选择、组件的修改
   ------如果是纯色背景图，那么其大小就可以随意了；如果不是纯色背景图，那么怎么确定背景图的大小呢？对一些竖屏跑酷游戏，全屏意味着不同宽高比的手机难度可能不一样，这就比较麻烦，需要根据游戏实际情况来设计，我只说不是按屏运动的游戏，目前大部分的手机宽高比不会大于21:9，所以背景图可以最大设计为21:9。
   ------修改组件的位置，用Widget组件是最方便的，详细使用就不用多说了。
   ------修改组件的大小，如果宽高比小于一个值，比如小于1:1的时候，如果很多组件堆叠在一起，就需要对组件进行缩放处理。