当前位置: 首页 > article >正文

CocosCreator 面试题(十七)Cocos creator 固定宽度与固定高度的底层原理是什么?Cocos creator是如何做适配的?


一、Cocos creator 固定宽度与固定高度的底层原理


在 Cocos Creator 中,固定宽度和固定高度是两种常见的适配方式,用于在不同屏幕尺寸上保持游戏画面的一致性。它们的底层原理如下:


1、固定宽度适配

固定宽度适配的目标是在不同屏幕宽度上保持游戏画面的一致性。底层原理如下:

  • 游戏设计时基于一个固定的宽度进行布局和渲染,通常称为「设计宽度」。
  • 在游戏初始化阶段,通过获取设备的屏幕宽度,计算出一个缩放比例,将设计宽度缩放到设备的实际宽度上。
  • 将游戏画面按照缩放比例进行缩放,保持宽度的一致性。高度会根据缩放比例等比例缩放,以保持画面的纵横比不变。
  • 使用相对坐标和布局方式,确保游戏中的元素在不同屏幕尺寸上正确定位和显示。

2、固定高度适配

固定高度适配的目标是在不同屏幕高度上保持游戏画面的一致性。底层原理如下:

  • 游戏设计时基于一个固定的高度进行布局和渲染,通常称为「设计高度」。
  • 在游戏初始化阶段,通过获取设备的屏幕高度,计算出一个缩放比例,将设计高度缩放到设备的实际高度上。
  • 将游戏画面按照缩放比例进行缩放,保持高度的一致性。宽度会根据缩放比例等比例缩放,以保持画面的纵横比不变。
  • 使用相对坐标和布局方式,确保游戏中的元素在不同屏幕尺寸上正确定位和显示。

通过固定宽度或固定高度的适配方式,可以使游戏在不同屏幕尺寸上保持一定的一致性,确保游戏中的元素的大小和位置相对稳定。具体选择哪种适配方式取决于你的游戏需求和设计考虑。在 Cocos Creator 中,你可以通过设置「设计分辨率」和使用相对坐标和布局方式来实现固定宽度或固定高度的适配。


二、Cocos creator如何做适配?


Cocos Creator 提供了多种适配方式,用于在不同屏幕尺寸上保持游戏画面的一致性。下面介绍 Cocos Creator 中常用的适配方式和相应的配置方法:

  1. 固定宽度适配
    • 在 Cocos Creator 编辑器中,选择「项目设置」窗口。
    • 在「分辨率」选项卡中,选择「固定宽度适配」。
    • 设置设计分辨率的宽度,这是游戏设计时使用的固定宽度。
    • 在代码中,可以通过 cc.view.getFrameSize().width 获取屏幕宽度,并使用缩放比例将设计宽度缩放到设备宽度上。

  1. 固定高度适配
    • 在 Cocos Creator 编辑器中,选择「项目设置」窗口。
    • 在「分辨率」选项卡中,选择「固定高度适配」。
    • 设置设计分辨率的高度,这是游戏设计时使用的固定高度。
    • 在代码中,可以通过 cc.view.getFrameSize().height 获取屏幕高度,并使用缩放比例将设计高度缩放到设备高度上。

  1. 自适应适配
    • 在 Cocos Creator 编辑器中,选择「项目设置」窗口。
    • 在「分辨率」选项卡中,选择「自适应适配」。
    • 设置设计分辨率的宽度和高度,这是游戏设计时使用的分辨率。
    • 在代码中,可以使用相对坐标和布局方式,使用百分比或比例来定位和缩放游戏中的元素,以适应不同屏幕尺寸。

  1. 其他适配方式
    • Cocos Creator 还提供了其他适配方式,如填充适配、裁剪适配等,可以根据具体需求进行选择和配置。

除了选择适配方式,你还可以使用 Cocos Creator 提供的 UI 组件和布局系统来实现自适应布局。例如,使用 cc.Widget 组件来设置节点的锚点、边距、对齐方式等,以适应不同屏幕尺寸。


总之,Cocos Creator 提供了多种适配方式和工具,帮助你在不同屏幕尺寸上保持游戏画面的一致性。选择适当的适配方式,并结合 UI 组件和布局系统,可以实现灵活而精确的适配效果。



http://www.kler.cn/a/147734.html

相关文章:

  • Python爬虫(入门+进阶)
  • CI/CD是什么?
  • 极狐GitLab 17.7正式发布,可从 GitLab 丝滑迁移至极狐GitLab【一】
  • hCaptcha 图像识别 API 对接说明
  • SQL 实战:窗口函数的妙用 – 分析排名与分组聚合
  • Day1 苍穹外卖前端 Vue基础、Vue基本使用方式、Vue-router、Vuex、TypeScript
  • 百度云Ubuntu22.04
  • OpenAI Whisper 语音识别 模型部署及接口封装【干货】
  • 内网隧道学习
  • 消息中间件——RabbitMQ(三)理解RabbitMQ核心概念和AMQP协议!
  • Course1-Week1:机器学习简介
  • QLayout的removeWidget与QButtonGroup的removeButton
  • 接口测试及常用接口测试工具(含文档)
  • 董明珠:创新永远在路上,格力电器坚持自主创新
  • Python基础语法之学习type()函数
  • LVS-DR实验
  • C 语言-循环嵌套-函数
  • 132.四叶玫瑰数-列举、查找、判断等题型【满分解题代码+详细分析】(四叶玫瑰数类型题-C/C++JavaPython实现)
  • 2023-11-26 LeetCode每日一题(统计子串中的唯一字符)
  • Redis缓存设计典型问题
  • oracle rac 19.3安装补丁19.19
  • 显示Excel功能区或工具栏的方法不少,其中快捷方式最快
  • React Hooks函数之useRef
  • docker基础快速入门:基础命令、网络、docker compose工具
  • 井盖倾斜怎么办?智能井盖传感器监测方法
  • 【Linux】驱动程序同步和异步通知方式