Cocos Creator 屏幕适配 （Widget，Fit Width， Fit Height）

最新推荐文章于 2023-04-20 18:42:29 发布
最新推荐文章于 2023-04-20 18:42:29 发布
阅读量1.6k 收藏 2
点赞数
文章标签： 游戏 游戏开发 html unity css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43287088/article/details/108676159
版权
本文介绍了Cocos Creator 2.3.4版本中的屏幕适配策略，主要包括Widget组件的使用和Canvas的Fit Width、Fit Height及Show All三种适配模式。Widget组件支持固定位置和百分比适配，适用于不同布局需求。Canvas的适配模式中，Fit Width适用于竖屏，Fit Height适合横屏，两者都选则相当于Show All，保证全屏显示。作者建议根据游戏类型和设备分辨率灵活选择适配策略。
摘要由CSDN通过智能技术生成

版本：2.3.4

参考：

cocos社区：麒麟子Cocos Creator 3D研究笔记二：麒麟子惯用框架分享

Cocos的屏幕适配，和Egret、Laya也差不多了。

精简到剩下最常用的Fit Width和Fit Height、Show All。

通常竖屏手机游戏采用Fit Width，横屏手机采用Fit Height，PC端全屏采用Show All。

而组件适配，采用了Widget组件，不仅提供了固定位置适配，还提供了百分比适配。

 

一   Widget组件

Cocos组件适配使用的Widget组件，我们在屏幕上下左右放4个Button，然后4个Button添加组件Wid

最低0.47元/天 解锁文章
「已注销」
关注
屏幕的宽度_cocos creator基础-(十四)cc.widget与屏幕适配
weixin_29447549的博客
01-14 388
1: 掌握适配策略;2: 掌握cc.Widget在适配中的作用;3: 完成适配案例;屏幕适配1: 一款游戏能适应不同的手机分辨率，我们把这个称为屏幕适配;2: creator屏幕适配策略: 固定高度,固定宽度, 固定宽高度;3: cc.Canvas组件: (1)决定屏幕的适配策略; (2)大小为屏幕的大小;4: 美术设计分辨率: 美术人员在一个固定的分辨率下来设计资源,我们在canvas组件配置...
CocosCreator屏幕适配小结
楚游香的博客
11-03 3019
1 原理 CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。 Canvas(画布)：可以随时获得设备的实际大小并对所有渲染元素进行缩放。 Widget(对齐组件)：能够将元素对齐父节点的不同参考位置。 设计分辨率：场景制作时使用的模版分辨率。 屏幕分辨率：设备运行时的屏幕显示的实际分辨率。 假设设计分辨率的宽度为w1，高度为h1；屏幕实际分辨率的宽度为w2，高度为h2。那么 当设计分辨率宽高比(w1/h1)小于屏幕分辨率宽高比(w2/h2) 时，说明实际屏幕更宽，
cocoscreator 第十五章 cc.widget与屏幕适配
qq_18643343的博客
01-25 980
屏幕适配   1: 一款游戏能适应不同的手机分辨率，我们把这个称为屏幕适配; 2: creator屏幕适配策略:  固定高度,固定宽度, 固定宽高度; 3: cc.Canvas组件:      (1)决定屏幕的适配策略;      (2)大小为屏幕的大小; 4: 美术设计分辨率:      美术人员在一个固定的分辨率下来设计资源,我们在canvas组件配置设计分辨率;   设计分辨率 ...
vue适配不同屏幕大小_Cocos creator面试题 屏幕适配的3个小技巧
weixin_39598094的博客
11-22 462
引言cocos creator是什么？Cocos Creator 是触控科技旗下的产品，以内容创作为核心的游戏开发工具，在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。屏幕适配是cocos creator面试题中必问的一个题目，今天给大家说说怎么样做屏幕适配。1: 屏幕适配的2个核心的配置 a: 设计分辨率: 美术设计资源时候的分辨率, 也是我们所有资源的参考分辨率，我们就...
Cocos Creator移动端适配组件-Ts版
kenvs的博客
03-05 879
序言 平时在使用Cocos开发移动端的项目时，总会遇到适配类的问题，索性写了一个适配的组件，最近在整理之前的项目和经验，把组件优化了一下，提供给大家使用。 使用方法 挂载到所需适配的节点上 往规则列表添加适配规则 适配规则 该适配组件可自适配移动端屏幕，提供多种适配规则： 吸附顶部、底部、左边、右边，可设置上下或左右扣除的值（为1以下小数时为当前屏幕宽度、高度乘于该值，为1以上的值时为当前屏幕宽度、高度减去该值） 适配宽度、高度，即铺满当前屏幕的宽度、高度，可设置上下或左右扣除的值（为1以下小数时为
CocosCreator | 分辨率适配，全面屏，处理黑边
Valiancer
09-16 7114
获取更多笔记和源码 公众号:CocosCreator笔记 概念解释 Canvas（画布） 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放 Widget（对齐挂件） 放置在渲染元素上，能够根据需要将元素对齐父节点的不同参考位置 设计分辨率 游戏在设计制作时场景的分辨率，即Canvas中的Design Resolution属性，也就是图中紫色边框的区域 屏幕分辨率 顾名思义，就是设备上屏幕的分辨率 ...
cocos creator屏幕适配fitHeight / fitWidth，手机端竖屏，pc端浏览器适配，pc分辨率全屏适配，血条跟随的适配
github_38633141的博客
11-18 4259
creator 3d血条跟随，适配
CocosCreator 屏幕适配、UI布局排版 (第十二篇)
程序员战胜
03-04 6392
前言： 这篇文章将会提及屏幕的适配问题、Widget(对齐组件)的使用、Label组件的文字排版、以及容器Layout 组件。 一、屏幕适配 1.屏幕适配主要是用来解决不同的手机分辨率不同的问题。因为我们在游戏开发的时候那个画布Canvas就设置好了，虽然一般在设置分辨率的时候都是适合大部分的手机，但还是有一部分手机不匹配。对于不匹配的分辨率就要进行等比的缩放操作，这个时候就出现了游戏界面宽度缩放...
cocos中Widget 的用法
liziqiang_tieli的专栏
06-13 4428
摘自百度： http://zhidao.baidu.com/link?url=aIjF3FRMMHaAP67BDVhw8uroKelKb3KjYuybQq4XJnIT9x2Sjxm8Uyg4VBuxSiYD0awKfpP259iPcCM13GMOkIDlw15Rm0FVK8Pq9P_8T_C 所有Widget类型的节点都支持addTouchEventListener和addCl
cocos creator中的组件pageview适配
10-30
本教程将详细讲解如何在Cocos Creator中实现PageView组件的横向和纵向适配。 首先，我们了解PageView的基本概念。PageView是一个可滚动的容器，它可以包含多个子节点，这些子节点在视觉上表现为一个接一个的“页面...
cocos creator屏幕适配的3个妙招
bycw666的博客
02-19 2642
屏幕适配是面试中必问的一个题目，今天给大家说说怎么样做屏幕适配。 1: 屏幕适配的2个核心的配置 a: 设计分辨率: 美术设计资源时候的分辨率, 也是我们所有资源的参考分辨率，我们就是基于这个分辨率来适配到其它不同的手机分辨率上的; b: 适配策略: 固定高度/固定宽度; 设计分辨率大家都好理解，那么什么是适配策略呢？ 假设我们以设计分辨率是960x640为例，我们要适配到1920x1080上面, 大家会发现，这个怎么适配啊？ 960x640----> 19...
【CocosCreator入门】CocosCreator组件 | Widget（对齐）组件
看世界，也找自己
04-20 2383
Cocos Creator 是一款流行的游戏开发引擎，具有丰富的组件和工具，其中的Widget组件用于UI布局和调整，可以通过调整Widget组件来实现UI元素的自适应和排版。
java设置canvas大小_Cocos Creator 动态设置Canvas的宽度与高度，更改适配
weixin_33935636的博客
02-28 1061
let c = this.node.getComponent(cc.Canvas);c.fitHeight = true;c.fitWidth = false;let h = 960 * cc.winSize.height / cc.winSize.width;c.designResolution = new cc.Size(960, h);this.node.setContentSize(960...
Qt开发高级进阶：如何在显示时适合视窗宽度和高度(fitWidth+fitHeight)
tanmx219的博客
07-26 1165
因为scale是累积相乘。所以正确的做法是，前一次的视图比例乘1/rx后，相当于该维度上scale会被置为1.0，然后，再乘以我们想要的rw（适合宽度）的视图比，就能使图片正好适合视察宽度了。注意这里是指调整图片的显示大小，例如一张800x600的图片，图片大小是不变的，只是显示成任意大小，Qt提供了一个函数scale，同时，配套使用的是transform，算法的基本原理是这样的，这里，scale中的两人个参数表示x,y轴的显示比例，transform中的m11,m22则分别对应这两个比例。......
cocos creator实战项目记录(二)----屏幕适配
In_Zihuatanejo的博客
09-22 436
屏幕适配应该是很多游戏引擎都会有的东西；先发下我在之前博客汇中写关于屏幕适配的文章，cocos2d-x中的屏幕适配,这篇文章主要讲解了原来cocos2d-x(下文简称cc-2d)中的屏幕适配；对比现在的cocoscreator （以下简称ccc），ccc中在Canvas 组件中添加了fix height 和fix width两个模式，如果都勾选的话就是cc-2d中的EXACT_FIT；cc-2d中的另外两个适配需要在creator中的代码中写一些具体的逻辑来实现了。 关于边缘的...
Cocos Creator 动态设置Canvas的宽度与高度，更改适配
weixin_33777877的博客
12-04 2649
let c = this.node.getComponent(cc.Canvas);c.fitHeight = true;c.fitWidth = false; let h = 960 * cc.winSize.height / cc.winSize.width; c.designResolution = new cc.Size(960, h);this.node.setContentSize(...
cocos creator横竖屏适配方案及常用设计尺寸
jiangjialuan2的博客
07-13 9152
摘要 在 Cocos Creator 中，我们使用WebSocket：用于长连接，今天我们说一下长连接的封装。 使用WebSocket作为网络连接的方式，简单的使用文本传输,使用onfire做事件的分发，可以替换NetControl里面的websocket实现为socket和其他网络方案，只要修复onfire的激发，基本不用该游戏代码。 环境 cocos Creator 引擎2.4.3 编辑工具HBuild X 使用方法 1、引入一个onfire类库 引入一个onfire类库 项目地址： https://g
cocoscreator适配
枫树林的博客
08-05 2504
cocoscreator的ui适配
cocoscreator 屏幕适配
最新发布
02-19
Cocos Creator是一款流行的游戏开发引擎，它提供屏幕适配的功能，以确保游戏在不同设备上的显示效果一致。下面是Cocos Creator中屏幕适配的一般步骤： 1. 设计分辨率：首先，你需要确定游戏的设计分辨率，即你在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值