CocosCreator 面试题(十一)Cocos Creator 屏幕适配


Cocos Creator 提供了多种屏幕适配的方式,以确保游戏在不同设备上能够正确显示和布局。

以下是 Cocos Creator 中常用的屏幕适配方式及其说明。


1、 Cocos Creator 项目设置中统一配置设计分辨率和屏幕适配

在同一个项目里的多个 Canvas 的设计分辨率仍然采用同一套设计分辨率以及适配方案。

可以通过 项目 -> 项目设置 -> 项目数据 页面配置。

在这里插入图片描述


  • 设计宽度、高度:主要设置游戏设计分辨率的尺寸,根据实际情况进行配置。
  • 适配屏幕高度:固定高度。
  • 适配屏幕宽度:固定宽度。

以下是详细适配方案:

(1)、等比显示整个场景内容(showAll)

在Creator上同时勾选适配屏幕高度适配屏幕宽度即可开启showAll适配模式。

在这里插入图片描述


这个适配方案的优点是不管屏幕比例如何,保证整个场景都是可见的,而且等比适配,但是总是在左右两边或者上下两边出现黑边。


(2)、NO_BORDER(等比拉伸到全屏)

和SHOW_ALL相反,在Creator上同时去除 适配屏幕高度适配屏幕宽度 的勾选即可开启 NO_BORDER 适配模式。

这个适配模式是根据屏幕比例等比拉伸画面,有两种结果:

  • 当高度拉满,宽度超出屏幕的时候,裁切宽度。
  • 当宽度拉满,高度超出屏幕的时候,裁切高度。

在这里插入图片描述


它的优点:是没有黑边

它的缺点:是在不同的屏幕比例上,不能确定到底是宽度裁切还是高度裁切

所以进行场景设计的时候有挺大局限性


(3)、FIXED_HEIGHT(等比拉伸高度到全屏)

在横屏模式下,通常设置适配方案为固定高度,这也是Creator默认的适配方案。

在Creator中,只勾选Canvas组件的适配屏幕高度即可开启FIXED_HEIGHT适配模式。

在这里插入图片描述


它的优点是:

可以实现全屏,拉伸或者缩放高度为屏幕高度,宽度进行裁切。


### **(4)、FIXED_WIDTH(等比拉伸宽度到全屏)**

在竖屏模式下,通常设置适配方案为固定宽度。

在Creator中,只勾选Canvas组件的适配屏幕宽度即可开启FIXED_WIDTH适配模式。


在这里插入图片描述


2、代码中完成设计分辨率设置和屏幕适配设置

// 设置设计分辨率
cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.FIXED_WIDTH);// 获取设计分辨率
const designSize = cc.view.getDesignResolutionSize();
console.log('Design resolution:', designSize.width, designSize.height);
```
在上述示例中,设置设计分辨率为 960x640,并使用 `cc.ResolutionPolicy.FIXED_WIDTH` 适配模式。这意味着游戏画面将根据宽度进行等比缩放。

通过设置设计分辨率和屏幕适配以后,还需要通过多个部分的工作来配合,才能完美适配。


3、以下四个部分完成多分辨率适配

  • Canvas(画布) 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。
  • Widget(对齐挂件) 组件添加给 UI 节点,能够根据需要将元素对齐目标节点(默认是父节点)的不同参考位置。
  • Label(文字) 组件内置了提供各种动态文字排版模式的功能,当文字的约束框由于 Widget 对齐要求发生变化时,文字会根据需要呈现完美的排版效果。
  • Sliced Sprite(九宫格精灵图) 则提供了可任意指定尺寸的图像,同样可以满足各式各样的对齐要求,在任何屏幕分辨率上都显示高精度的图像。

以上是常用的屏幕适配方式,可以根据游戏的需求选择适合的方式。适配的目的是确保游戏在不同设备上能够正确显示,并提供良好的用户体验。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/106449.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HBuilder创建uniapp默认项目导入uview(胎教)

1:更新HBuilder 建议更新 2:更新插件 我本人在没有更新插件的情况下报错了,找到了**这个大佬**解决问题,所以建议更新插件 先卸载uni-app(Vue2)编译 再重新安装 uni-app(Vue2)…

qemu基础篇——VSCode 配置 GDB 调试

文章目录 VSCode 配置 GDB 调试安装 VSCode 插件调试文件创建调试配置配置脚本qemu 启动脚 启动调试报错情况一报错情况二报错情况三 调试界面运行 GDB 命令查看反汇编断点查看内核寄存器查看变量参考链接 VSCode 配置 GDB 调试 qemu-基础篇——arm 裸机调试环境搭建 上一节中…

LuaJit交叉编译移植到ARM Linux

简述 Lua与LuaJit的主要区别在于LuaJIT是基于JIT(Just-In-Time)技术开发的,可以实现动态编译和执行代码,从而提高了程序的运行效率。而Lua是基于解释器技术开发的,不能像LuaJIT那样进行代码的即时编译和执行。因此&…

2023年最新Python大数据之Python基础【七】管理系统

文章目录 7、学生管理系统8、函数递归9、lambda函数后记 7、学生管理系统 # 需求拆分:1.展示学生管理系统的功能有哪些,引导用户键入序号选择功能 2.获取用户键入的功能 3.分析具体要执行哪一项功能 4.执行功能 def print_all_option():"""用户功能界面展示&qu…

利用ChatGPT练习口语

目录 ChatGPT 这两天发布了一个激动人心的新功能,App端(包括iOS和Android)开始支持语音对话以及图片识别功能。 这两个功能一如既往的优先开放给Plus用户使用,现在将App更新到最新版本,就能体验。 为什么说激动人心&a…

Bean实例化的三级缓存

在Spring框架中,Bean实例化的三级缓存(三级缓存也称为三级缓存机制)是用于缓存Bean定义的一种机制,用于管理和加速Spring容器中Bean的创建和初始化过程。三级缓存包括了singletonObjects、earlySingletonObjects 和 singletonFact…

2023年中国汽车智能工厂市场规模不断增大,智能化已成趋势[图]

汽车智能工厂是在数字化工厂的基础上,通过互联网技术与工业技术结合,数据监管设备以及AI等技术的结合,实现汽车整车从原材料及零部件的生产到运输、组装一系列的自动化生产。汽车智能工厂很大程度上降低成本和人为干扰,实现自动化…

19 | 如何搞清楚事务、连接池的关系?正确配置是怎样的

事务的基本原理 在学习 Spring 的事务之前,你首先要了解数据库的事务原理,我们以 MySQL 5.7 为例,讲解一下数据库事务的基础知识。 我们都知道 当 MySQL 使用 InnoDB 数据库引擎的时候,数据库是对事务有支持的。而事务最主要的作…

2018-2019 ACM-ICPC, Asia Nanjing Regional Contest G. Pyramid(组合数学 计数)

题目 t(t<1e6)组样例&#xff0c;每次给定一个n(n<1e9)&#xff0c;统计边长为n的上述三角形的等边三角形个数 其中等边三角形的三个顶点&#xff0c;可以在所有黑色三角形&白色三角形的顶点中任取&#xff0c; 答案对1e97取模 思路来源 申老师 & oeis A0003…

Unity引擎:收费模式和服务升级,为游戏开发带来更多可能性

Unity 引擎的收费模式和配套服务升级已经引起了广泛的关注和讨论。自 2024 年 1 月 1 日起&#xff0c;Unity 将根据游戏的安装量对开发者进行收费。这将会影响到很多游戏开发者和玩家。本文将探讨 Unity 引擎的收费模式和配套服务更新&#xff0c;以及对游戏开发者和玩家的影响…

报道 | 2023-2024年1月国际运筹优化会议汇总

2023年10月、11月、12月召开会议汇总&#xff1a; 2023 International Conference on Optimization and Applications (ICOA) Location: Abu Dhabi, United Arab Emirates Important dates: Conference: October 05-06, 2023 Details: https://lct.ac.ae/en/icoa/ 2023 INF…

javaScript输出数据的方法?

在JavaScript中&#xff0c;有几种主要的方法可以用来输出数据&#xff1a; console.log(): 这是最常用的输出方法&#xff0c;它可以将信息输出到浏览器的控制台。 console.log("Hello, World!"); console.info(): 这是用于输出普通信息的方法。 console.info(&quo…

python项目之AI动物识别工具的设计与实现(django)

项目介绍&#xff1a; &#x1f495;&#x1f495;作者&#xff1a;落落 &#x1f495;&#x1f495;个人简介&#xff1a;混迹java圈十余年&#xff0c;擅长Java、小程序、Python等。 &#x1f495;&#x1f495;各类成品java毕设 。javaweb&#xff0c;ssm&#xff0c;spring…

Java调用FFmpeg

Java调用FFmpeg 1、FFmepg基础知识1.1 下载 FFmpeg1.2 FFmpeg 工具使用 2、Java使用2.1 FFmpeg源码编译2.2 Java集成FFmpeg2.2.1 JNI2.2.2 Java调用执行 FFmpeg 工具 命令 1、FFmepg基础知识 About FFmpeg ffmpeg(计算机程序) - 百度百科 FFmpeg/FFmpeg - GitHub CSDN&#xf…

POI报表的高级应用

POI报表的高级应用 掌握基于模板打印的POI报表导出理解自定义工具类的执行流程 熟练使用SXSSFWorkbook完成百万数据报表打印理解基于事件驱动的POI报表导入 模板打印 概述 自定义生成Excel报表文件还是有很多不尽如意的地方&#xff0c;特别是针对复杂报表头&#xff0c;单…

解决react样式组合时css module动态样式失效的问题

现象&#xff1a; <button disabled{invalid} className{ "btn btn-primary btn-lg" invalid ? styles.btnDisabled : "" } > 注册 </button> 上面采用字符串拼接的方式&#xff0c;组合class&#xff0c;但是css module的动态样式style…

Bootstrap的导航菜单组件相关知识

目录 01-最基本的导航示例02-设置导航的对齐方式02-1-设置导航在水平方向上的对齐方式 02-2-设置导航在垂直方向上进行布局03-设计标签页导航04-带下拉菜单的标签页导航05-设计胶囊式导航05-1-基本的胶囊式导航05-2-带下拉菜单的胶囊式导航 06-让导航菜单项可以切换(激活导航菜…

LuatOS-SOC接口文档(air780E)-- iconv - iconv操作

iconv.open(tocode, fromcode)# 打开相应字符编码转换函数 参数 传入值类型 解释 string 释义&#xff1a;目标编码格式 取值&#xff1a;gb2312/ucs2/ucs2be/utf8 string 释义&#xff1a;源编码格式 取值&#xff1a;gb2312/ucs2/ucs2be/utf8 返回值 返回值类型 解…

发布npm包质量分测试

查询质量分接口 https://registry.npmjs.org/-/v1/search?textcanvas-plus v0.0.1 quality 0.2987 新建文件夹 canvas-plus 执行命令 npm init 生成package.json {"name": "3r/canvas-plus","version": "0.0.1","descript…

深入理解 Python 虚拟机:协程初探——不过是生成器而已

深入理解 Python 虚拟机&#xff1a;协程初探——不过是生成器而已 在 Python 3.4 Python 引入了一个非常有用的特性——协程&#xff0c;在后续的 Python 版本当中不断的进行优化和改进&#xff0c;引入了新的 await 和 async 语法。在本篇文章当中我们将详细介绍一下 Python…