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

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

  1. 修改Canvas(画布)的属性


    捕获.PNG

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


  1. 修改场景的脚本组件
protected onLoad(): void {
    // 分辨率适配
    cc.Canvas.instance.designResolution = cc.winSize;
}

  1. 修改场景下的UI脚本组件
protected onLoad(): void {
    // 分辨率适配
    this.node.setContentSize(cc.winSize);
}

  1. 背景图大小的选择、组件的修改
    ------如果是纯色背景图,那么其大小就可以随意了;如果不是纯色背景图,那么怎么确定背景图的大小呢?对一些竖屏跑酷游戏,全屏意味着不同宽高比的手机难度可能不一样,这就比较麻烦,需要根据游戏实际情况来设计,我只说不是按屏运动的游戏,目前大部分的手机宽高比不会大于21:9,所以背景图可以最大设计为21:9。
    ------修改组件的位置,用Widget组件是最方便的,详细使用就不用多说了。
    ------修改组件的大小,如果宽高比小于一个值,比如小于1:1的时候,如果很多组件堆叠在一起,就需要对组件进行缩放处理。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。