cocos2d-x屏幕适配原理分析

2023-11-14

转自:https://www.2cto.com/kf/201212/175527.html

https://blog.csdn.net/u012861978/article/details/53233892

分析:
designResolutionSize是一个新的概念,它让一切与坐标,尺寸相关的数据彻底摆脱了屏幕分辨率的羁绊,或者说
由框架层来帮开发者完成转换,开发者需要的只是设置designResolutionSize。告诉框架你在什么样尺寸的场景下
做的资源,比如此例,背景图原始尺寸480x320,需求是刚好填满屏幕,那么就应该告诉框架“嗨,我设计时是以
480x320的屏幕为标准的,你帮我转转”,框架就会回答你“放心吧!” 那么框架究竟如何实现的呢? 跟踪
pEGLView->setDesignResolutionSize(480, 320, kResolutionNoBorder);


可以发现,框架是获取了实际分辨率和开发者designResolutionSize的比例,渲染的时候把图片按照这个比例来缩放绘制。
拿本例来说,屏幕960x640,designResolutionSize为480x320,缩放比例为2,那么原始大小480x320的背景图,在绘制
时就会x2来绘制,也就是实际绘制成了960x640的大小,这样就填满窗口了!
请注意这里对不同ResolutionPolicy的处理,原理后文会分析。

ok,现在面对480x320和960x640的屏幕,你已经能写出自动适配的代码了(其实只有一句,框架的好处啊~~)
又来了新的需求,“那谁谁,你改一下代码,程序要能适应ipad2 ”,WTF!好吧,问候归问候,问题总要解决。
于是你开始想“ ipad2分辨率1024x768,就按刚才帅帅凡教我的到main.cpp里修改”,好,修改为1024x768,
ms填满了,你很满意,但是不对,右下角的按钮肿么快到屏幕外面去了?!仔细一看,不是填满是填太满,背景图都超出屏幕了。
这是肿么回事呢? 根源在于pEGLView->setDesignResolutionSize(480, 320, kResolutionNoBorder);第三个参数,找到定义:

讲得很清楚了:
kResolutionExactFit:会靠拉伸来填满屏幕,本例来说背景图会变形来填充屏幕,因为1024:768=1.3, 480:320=1.5,宽高比不同,图片也就无法等比缩放来填满屏幕,只能变形了。
kResolutionNoBorder: 看不到黑边,实际就是宽高等比缩放,但缩放比例取宽比和高比之中大的那一个。
kResolutionShowAll:全部显示,可以理解为保证内容都显示在屏幕之内,实际也是宽高等比缩放,但缩放比例取宽比和高比之中小的那一个。

一般来说,我们希望设计时一屏的内容,用户在实际设备上也能在一屏内看到,拿本例来说,1024x768分辨率时,右下角的按钮却跑到屏幕外去了。看完上面的分析,你应该知道如何解决了: 对了,改变pEGLView->setDesignResolutionSize(480, 320, kResolutionNoBorder);第三个参数为kResolutionShowAll。 ok,看看效果:


bingo!背景图填满了屏幕(水平方向),按钮紧贴到右下角,可以满足基本的风格统一要求。
不过纵向上出现黑边,这个是实际分辨率的宽高比和设计分辨率宽高比不同造成的,无法通过框架层来解决。
只能交给开发者自己了,比如在代码里根据分辨率计算会出现黑边时,在黑边填充相应的图片等。一些解决方法见 这里 

 

setPosition()的变化
之前版本可能已经习惯了CCNode::setPosition(const CCPoint &position);和CCNode::setPositionInPixel(const CCPoint &position);
但在新的版本里,只有setPosition(const CCPoint &position);
这里传入的参数不是像素,也和传统的point有不同,它指的是在designResolutionSize参照下的坐标。
验证交给你自己来:比如设计分辨率为480x320,设置一个sprite的位置为240,160,在480x320分辨率下会发现它在屏幕正中,
模拟其他分辨率,960x640,1024x768,会发现它依然在屏幕中心,这就可了解240,160这个值跟实际屏幕分辨率已经无关了,
只和designResolutionSize有关,理解这一点至关重要,是后续开发正确空间感的基础!


CC_CONTENT_SCALE_FACTOR()的变化
首先enableRetinaDisplay()在新版本里取消了,将不会有什么retina设备上scalefactor为2的说法了,
因为designResolutionSize已经解决了按不同屏幕缩放的问题,所以CC_CONTENT_SCALE_FACTOR();始终返回1。
 
 
所以新版本里的定义已经过时了,无须理会。

当然,开发者可以通过CCDirector::sharedDirector()->setContentScaleFactor()来设置contentScaleFactor,这个系数可以理解为
图片原始尺寸和designResolutionSize的比值,这个比值将用来绘制图片。
如果只是一套资源按照不同屏幕分辨率缩放,可以不用理会。


getWinSize()的变化

CCDirector::sharedDirector()->getWinSize();   获取的是designResolutionSize
CCDirector::sharedDirector()->getWinSizeInPixels();  获取的是getWinSize*contentScaleFactor之后的值,和老版本一样。
如果contentScaleFactor为1,则这两个函数返回的值一样。

 

使用kResolutionNoBorder策略时要注意的
CCSize szVisible = CCDirector::sharedDirector()->getVisibleSize();
CCPoint posVisible = CCDirector::sharedDirector()->getVisibleOrigin();
使用该策略时,因为标准背景图可能会超出屏幕,所以设置位置时需要已一个可视矩形为基准。
可以这样理解,szVisible就是你在实际设备上能看到的有效区域的宽高,posVisible就是这个有效区域的起始坐标,和szVisible构成一个可视矩形,一般来说这个可视矩形是设计分辨率下可视矩形的子集。

 

总结一下,cocos2d-x新的版本(对于从1.0.1-x-0.11.0上来的人)的确添加了不少新的功能,代码结构也更加合理,这些都是开发者之福,希望2dxteam继续加油!

以下转自:https://blog.csdn.net/u012861978/article/details/53233892

cocos2dx中setContentScaleFactor作用

----------------------------------------------------------------------------------

比如设计分辨率是960x640,资源是320x480。为了让这个资源铺满屏幕,可以在所有设置资源的地方设置一个scale为2,也可以直接用setContentScaleFactor(0.5),那么所有的资源都会做2倍的缩放。为什么设置0.5是2倍缩放?因为这个的算法是(资源)/(设计分辨率)。但是通常美术给的图片大小是按照我们要求的设计分辨率来的,也就是Resources Size等于Design Size

 

Cocos2d-x图片显示有下面两个逻辑过程。
资源布局到 到 设计分辨率,设计分辨率 布局到 屏幕。
接口setContentScaleFactor()和setSearchPaths()控制着第一个转换过程。

而setDesignResolutionSize()控制第二个过程。两个过程结合在一起,影响最终的显示效果。

setContentScaleFactor()决定了图片显示到屏幕的缩放因子,Cocos2d-x引擎设计试图屏蔽游戏开发者直接去关注屏幕,这个其实是图片投射到设计分辨率的缩放因子,下图是设置缩放因子为RH/DH和RW/DW的效果:

用高度比作为内容缩放因子,保证了背景资源的垂直方向在设计分辨率范围内的全部显示。
用宽度比作为内容缩放因子,保证了背景资源的水平方向在设计分辨率范围内的全部显示。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

cocos2d-x屏幕适配原理分析 的相关文章

随机推荐

  • 感知器的数学表达和训练算法

    目录 一 感知器模型 二 两种训练法则 1 感知器训练法则 2 delta法则 三 小结 1 标准梯度下降算法与随机梯度下降算法的差异 2 有阈值的感知机算法和无阈值的感知机算法的差异 在人工神经网络简介一节中 图二中的ANN系统的每一个单
  • Numpy常用的数据结构

    numpy安装 pip install numpy numpy底层是使用C语言来实现运算的效果非常高 数据清洗的意义 现实生活中 数据并非完美 需要进行清洗才能进行后面的数据分析 数据清洗是整个数据分析项目最消耗时间的一步 数据的质量最终决
  • Java回调函数的理解

    2008 07 21 20 34 所谓回调 就是客户程序C调用服务程序S中的某个函数A 然后S又在某个时候反过来调用C中的某个函数B 对于C来说 这个B便叫做回调函数 例如Win32下的窗口过程函数就是一个典型的回调函数 一般说来 C不会自
  • DC/DC:闭环控制的升压(Boost)变换电路原理设计及实验仿真

    与降压 Buck 变换器类似 升压Boost变换电路也可以构建电压闭环反馈控制的闭环Boost变换器 Boost功率电路图如图所示 具体电路元器件参数计算可参考前期文章 直流电路中升压电路 Boost 的设计原理 参数计算及MATLAB仿真
  • Python实现FA萤火虫优化算法优化支持向量机分类模型(SVC算法)项目实战

    说明 这是一个机器学习实战项目 附带数据 代码 文档 视频讲解 如需数据 代码 文档 视频讲解可以直接到文章最后获取 1 项目背景 萤火虫算法 Fire fly algorithm FA 由剑桥大学Yang于2009年提出 作为最新的群智能
  • 爬虫需要知道的基础

    一 爬虫概述 1 爬虫必须知道的要素 爬虫要遵循网上的爬虫机器人协议 怎样查看 在网址后面加上 robots txt来查看 可以查到哪些是允许的 哪些是不允许的 爬虫的基本步骤 找到网址 发起请求 解析页面并获得原始数据 对数据进行处理 保
  • [深入研究4G/5G/6G专题-23]: 5G NR开机流程4.1 - 随机接入请求消息MSG1与PRACH首个上行信道的调度、时间提前量TA的检测

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 目录 前言 前置条件 第1章 随机接入知识准备
  • Java 到底是值传递还是引用传递?

    在开始深入讲解之前 有必要纠正一下大家以前的那些错误看法了 如果你有以下想法 那么你有必要好好阅读本文 错误理解一 值传递和引用传递 区分的条件是传递的内容 如果是个值 就是值传递 如果是个引用 就是引用传递 错误理解二 Java是引用传递
  • jwt 使用介绍

    JSON Web Token 缩写 JWT 是目前最流行的跨域认证解决方案 本文介绍它的原理和用法 一 跨域认证的问题 互联网服务离不开用户认证 一般流程是下面这样 1 用户向服务器发送用户名和密码 2 服务器验证通过后 在当前对话 ses
  • centos7编译安装基于fastcgi模式的LAMP架构

    工作过程 1 当客户请求的是静态资源时 web服务器会直接把静态资源返回客户端 2 当客户端请求的是动态资源时 httpd的php模块会进行相应的动态资源运算 如果此时过程还需要数据库的数据作为运算参数时 php会连接mysql取得数据然后
  • 【软件测试】自动化测试战零基础教程——Python自动化从入门到实战(五)

    整理不易 希望对各位学习软件测试能带来帮助 第四章 自动化测试模型 一个自动化测试框架就是一个集成体系 在这一体系中包含测试功能的函数库 测试数据源 测试对象识别标准 以及种可重用的模块 自动化测试框架在发展的过程中经历了几个阶段 模块驱动
  • 求第N个丑数

    原问题描述 把只包含质因子2 3和5的数称作丑数 Ugly Number 例如6 8都是丑数 但14不是 因为它包含质因子7 习惯上我们把1当做是第一个丑数 求按从小到大的顺序的第N个丑数 这个题不是很难 基本上看完题就能想出解法 但是要想
  • 微信小程序连接本地服务器(在本地服务器上进行真机测试-微信开发者工具)

    1 前言 最近做小程序 一直用的是本地服务器接口 在用真机测试的时候 发现动态数据并不能同步 研究了一下发现操作很简单 2 配置步骤 1 首先打开微信开发者工具 打开右上角的详情 点击本地设置 勾选下面的不校验合法域名 2 打开手机的热点
  • vue应用vue-pdf打包多出一个worker.js文件

    项目要用到pdf预览功能 因为是vue项目就是直接导入了vue pdf组件 但是在进行打包的时候在dist文件夹下面多个worker js文件 导致项目部署后预览pdf直接报了404 后来尝试了很多办法去解决 但是都是不太好用 目前有两种解
  • ASP.NET Core WebAPI学习-1

    Web API学习 ASP NET Core WebAPI学习 1 ASP NET Core WebAPI学习 2 ASP NET Core WebAPI学习 3 ASP NET Core WebAPI学习 4 ASP NET Core W
  • xshell + xmanager 图形化工具使用

    这里使用 Xshell6 0 Xmananger6 0工具 注意 很多资料说 在root下 export DISPLAY 0 0 然后xhost 就可以直接连接 但是在操作中始出现不了图形 后来使用下面的xshell xmanager工具时
  • python离散事件仿真库SimPy官方教程

    参考 SimPy Discrete event simulation for Python 建议先简单了解仿真原理 离散事件仿真原理DES 简单介绍 simpy的实现关键在于生成器的使用 通过例子说明一下 生成器function use y
  • Python 爬虫 NO.4 HTTP 响应状态码

    1 HTTP 响应状态码 响应状态码 即 Response Status Code 表示服务器的响应状态 如 200 代表服务器正常响应 404 代表页面未找到 500 代表服务器内部发生错误 在爬虫中 我们可以根据状态码来判断服务器响应状
  • SIGIR'22

    1 背景 近年来 因果推断在推荐 广告 用户增长等领域得到越来越多的关注和应用 如在用户 客户增长领域的消息发送和权益分发方面 为了兼顾用户体验和平台效率 不仅需要预估用户在接受不同权益下的转化概率 还需要预估用户自然情况下未接收干预的转化
  • cocos2d-x屏幕适配原理分析

    转自 https www 2cto com kf 201212 175527 html https blog csdn net u012861978 article details 53233892 分析 designResolutionS