cocosUI多分辨率适配
需求:由于各个设备的分辨率和尺寸并不一样,所以需要一套适配系统去很好的针对不同的设备分辨率或尺寸进行适配,以给玩家一个很好的游戏体验。
目前的主流适配方案
目前,针对不同设备的适配,主流的方案通常包括以下几种:
-
响应式设计(Responsive Design):
-
响应式设计是一种流行的Web设计方法,通过使用CSS媒体查询等技术,使网站能够根据用户的设备(如手机、平板、桌面电脑)自动调整布局和样式。
-
这种方法可以使网站在不同设备上呈现出最佳的用户体验,但在游戏开发中的应用相对较少。
-
-
流式布局(Fluid Layout):
-
流式布局是一种设计方法,其中元素的宽度是相对于父容器的百分比,而不是固定像素值。这样可以使布局在不同屏幕尺寸下自动调整。
-
在游戏开发中,可以通过使用相对单位(如百分比)和布局技巧来实现流式布局,以适应不同设备的屏幕尺寸。
-
-
断点布局(Breakpoint Layout):
-
断点布局是一种设计方法,通过在特定屏幕宽度处设置断点(breakpoint),在不同屏幕尺寸下应用不同的布局和样式。
-
在游戏开发中,可以根据设备的屏幕宽度设置断点,针对不同尺寸的设备应用不同的布局和适配方案。
-
-
自适应设计(Adaptive Design):
-
自适应设计是一种根据设备特性和屏幕尺寸调整布局和功能的设计方法。可以根据设备的特征(如分辨率、屏幕尺寸等)提供不同的用户体验。
-
在游戏开发中,可以根据设备的特性动态调整游戏界面的布局、分辨率和功能,以提供最佳的用户体验。
-
Cocos Creator提供的适配方案
-
分辨率适配:
Cocos Creator支持多种分辨率适配策略,其通过以下几个部分完成多分辨率适配解决方案:
-
Canvas(画布) 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。
-
Widget(对齐挂件) 放置在渲染元素上,能够根据需要将元素对齐父节点的不同参考位置。
-
Label(文字) 组件内置了提供各种动态文字排版模式的功能,当文字的约束框由于 Widget 对齐要求发生变化时,文字会根据需要呈现完美的排版效果。
-
Sliced Sprite(九宫格精灵图) 则提供了可任意指定尺寸的图像,同样可以满足各式各样的对齐要求,在任何屏幕分辨率上都显示高精度的图像。
详细介绍可阅读该部分的官方文档:多分辨率适配方案 | Cocos Creator
-
-
多分辨率资源管理:
-
可以使用Cocos Creator的资源管理系统,为不同分辨率的设备提供对应的资源,确保游戏在不同设备上显示效果良好。
-
可以通过预加载资源或动态加载资源的方式,根据设备分辨率来加载适合的资源。
-
-
代码适配:
-
可以通过编写灵活的代码逻辑,根据设备的特性动态调整游戏界面的布局和功能。
-
可以使用条件判断、设备信息查询等方式,在运行时根据设备的不同特性进行适配处理。
Cocos creator在cc.sys中提供了丰富的关于获取用户设备信息的一系列API,包括获取手机型号、屏幕分辨率、是否是IPad、本地存储等;
具体可查看该官方文档:Cocos Creator 2.4 API - sys
-
自定义的适配方案
目前在游戏开发中所使用的主要适配方案是自适应设计。
主要是通过大量使用Canvas、Widget和Label组件来完成分辨率的适配,同时利用脚本获取用户屏幕分辨率或设备型号来完成需要动态加载的界面的适配。因为如果只是使用Cocos Creator的组件,是完全无法解决问题的,这时由于Canvas的局限性所致的,具体不详细说明了,所以需要使用到自定义的适配方案。以设计尺寸为1334x750为例。
由于我们的游戏设计尺寸就是1334x750,也就是宽高比1.778(16:9),所以只要屏幕尺寸为16:9的手机,都是可以完美的适配,即所有UI的位置和设计时的位置相比不会产生任何变动,虽然目前很多的手机都是16:9,但是19:9的手机也有很多,目前对于宽高比大于16:9的做法有两种·,1是采用一张比较宽的背景图(w:1624),2是在某些类中单独做了判断,针对屏幕尺寸大于1334的设备进行了设置尺寸处理,但是通用的还是采用第一种做法。主要的问题就是在宽高比小于16:9的机型上适配上有很大的问题,虽然目前这种机型占比非常小,但是依旧是存在的。原因是由于子物体的相对位置虽然随着根节点的位置变动(尺寸改变所导致)而变动,但是子物体的尺寸并没有产生任何改变,这就导致UI看起来会挤在一起。
下面讲述搭建一个自适应界面的详细流程:
-
搭建游戏主界面(需要勾选Canvas的Fit Height)
-
为一些层级添加widget
-
添加适配方法以适配不同尺寸的手机
protected fitScreen(): void { this.node.setContentSize(cc.winSize);//设置根节点尺寸为屏幕尺寸 const designSize = 1334/750;//设计尺寸 const realSize = cc.winSize.width/cc.winSize.height;//实际尺寸 if (this.nodeAlert && realSize<designSize) { this.nodeAlert.setScale(realSize/designSize); //设置子节点的缩放}
}
层级构建如下;

node对应根节点(CommonAlert),nodeAlert对应子节点(Alert),内容则放在子节点下。
首先是设置界面的尺寸等于屏幕尺寸,然后是计算设计尺寸和实际尺寸,如果实际尺寸比值比设计尺寸小,就需要缩放界面,而这个缩放的值,我是以设计尺寸为基准,求出的缩放值,即realSize/designSize = scale / 1(scale为所求缩放值)。
相关文章:
cocosUI多分辨率适配
需求:由于各个设备的分辨率和尺寸并不一样,所以需要一套适配系统去很好的针对不同的设备分辨率或尺寸进行适配,以给玩家一个很好的游戏体验。 目前的主流适配方案 目前,针对不同设备的适配,主流的方案通常包括以下几种…...
无法加载到主类
说明:记录一次项目启动错误,如下: 错误信息:错误: 找不到或无法加载主类 com.hezy.App 原因: java.lang.ClassNotFoundException: com.hezy.App 解决:首先,在项目中勾选这个,显示target文件夹 …...
深入理解Kafka核心设计与实践原理_03
深入理解Kafka核心设计与实践原理_03 03_消费者3.1消费者与消费者组3.2客户端开发3.2.1 必要的参数配置3.2.2 订阅主题与分区 草稿 03_消费者 与生产者对应的是消费者,应用程序可以通过KafkaConsumer来订阅主题,并从订阅的主题中拉取消息。不过在使用Ka…...
MySQL- 覆盖索引
覆盖索引(Covering Index)是 MySQL 中的一种优化技术,它能够显著提高查询性能。在使用覆盖索引的情况下,查询操作只需要访问索引即可获取所需的数据,而不必再访问表的实际数据行(即不需要回表)。…...
JSON与EXL文件互转
功能:实现json到excel文件的相互转换(支持json多选版) 目的:编码与语言对应,方便大家使用 页面设计: 介绍: 1.选择文件栏目选择想要转换的文件 2.生成路径是转换后文件所在目录 3.小方框勾选与不勾选分别代表exl到…...
后台管理权限自定义按钮指令v-hasPermi
第一步:在src下面建立一个自定义指令文件,放自定义指令方法 permission.js文件: /*** v-hasPermi 操作权限处理*/import store from "/store";export default {inserted(el, binding) {const { value } binding;//从仓库里面获取到后台给的数组const permission s…...
【Python绘制散点图并添加趋势线和公式以及相关系数和RMSE】
在Python中,绘制散点图并添加趋势线(通常是线性回归线)、公式、以及相关系数(Pearson Correlation Coefficient)和均方根误差(RMSE)可以通过结合matplotlib用于绘图,numpy用于数学运…...
linux bridge VLAN
TP-Link 支持 Linux 桥接(bridge)和 VLAN 功能的产品主要包括其高端的交换机和一些企业级路由器: TP-Link JetStream 系列交换机: TL-SG3424: 24端口千兆交换机,支持 VLAN 和桥接。TL-SG3210: 24端口千兆管理型交换机&…...
Java进阶篇之深入理解多态的概念与应用
引言 在Java面向对象编程(OOP)中,多态(Polymorphism)是一个关键概念,它允许相同类型的对象在不同的场景中表现出不同的行为。多态不仅增强了代码的灵活性和可扩展性,还极大地提高了代码的可维护…...
Linux下的进程调度队列
我们在进程那一篇讲到了操作系统时间片轮换调度的概念 那么Linux下具体是怎么调度的?...
统计回归与Matlab软件实现上(一元多元线性回归模型)
引言 关于数学建模的基本方法 机理驱动 由于客观事物内部规律的复杂及人们认识程度的限制,无法得到内在因果关系,建立合乎机理规律的数学模型数据驱动 直接从数据出发,找到隐含在数据背后的最佳模型,是数学模型建立的另一大思路…...
【项目】基于Vue3.2+ElementUI Plus+Vite 通用后台管理系统
构建项目 环境配置 全局安装vue脚手架 npm install -g vue/cli-init打开脚手架图形化界面 vue ui创建项目 在图形化界面创建项目根据要求填写项目相关信息选择手动配置勾选配置项目选择配置项目然后我们就搭建完成啦🥳,构建可能需要一点时间࿰…...
随机生成 UUID
1、随机生成 UUID主方法 /*** 随机生成 UUID* param {*} len 生成字符串的长度* param {*} radix 生成随机字符串的长度**/export function uuid_(len 30, radix 20) {var chars 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.split()var uuid [],ir…...
报名表EXCEL图片批量下载源码-CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构
每次报名表都会包含大量照片,一张一张下载很慢 可以通过未来之窗开源平台架构 开开excel批量下载 实现代码也很简单 function 未来之窗下载(){ let 未来之窗地址 document.getElementById("batchurl").value; let 保存路径 document.getElementById(…...
SpringBoot 整合 Elasticsearch 实现商品搜索
一、Spring Data Elasticsearch Spring Data Elasticsearch 简介 Spring Data Elasticsearch是Spring提供的一种以Spring Data风格来操作数据存储的方式,它可以避免编写大量的样板代码。 常用注解 常用注解说明如下: 注解名称 作用 参数说明 Docu…...
计算机毕业设计 助农产品采购平台 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...
Django后台数据获取展示
续接Django REST Framework,使用Vite构建Vue3的前端项目 1.跨域获取后台接口并展示 安装Axios npm install axios --save 前端查看后端所有定义的接口 // 访问后端定义的可视化Api接口文档 http://ip:8000/docs/ // 定义的学生类信息 http://ip:8000/api/v1…...
innodb 如何保证数据的一致性?
InnoDB是MySQL的默认存储引擎之一,它通过多种机制来保证数据的一致性。以下是InnoDB保证数据一致性的主要方式: 1. 事务支持 InnoDB实现了ACID(原子性、一致性、隔离性和持久性)事务模型,这是保证数据一致性的基础。…...
Oracle-OracleConnection
提示:OracleConnection 主要负责与Oracle数据库的交互,特别针对CDC功能,提供了获取和处理数据库更改日志的能力,同时包含数据库连接管理、查询执行和结果处理的通用功能,与DB2Connection作用相似 文章目录 前言一、核心…...
基于hadoop的网络流量分析系统的研究与应用
目录 摘要 1 Abstract 2 第1章 绪论 3 1.1 研究背景 3 1.2 研究目的和意义 4 1.2.1 研究目的 4 1.2.2 研究意义 6 1.3 国内外研究现状分析 7 1.3.1 国内研究现状 7 1.3.2 国外研究现状 9 1.4 研究内容 11 第2章 Hadoop技术及相关组件介绍 12 2.1 HDFS的工作原理及…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...
