cocos进阶教程(2)多分辨率支持策略和原理

cocos2d-x3.0API常用接口

  • Director::getInstance()->getOpenGLView()->setDesignResolutionSize() //设计分辨率大小及模式
  • Director::getInstance()->setContentScaleFactor() //内容缩放因子
  • FileUtils::getInstance()->setSearchPaths() //资源搜索路径
  • Director::getInstance()->getOpenGLView()->getFrameSize() //屏幕分辨率
  • Director::getInstance()->getWinSize() //设计分辨率
  • Director::getInstance()->getVisibleSize() //设计分辨率可视区域大小
  • Director::getInstance()->getVisibleOrigin() //设计分辨率可视区域起点

资源分辨率，设计分辨率，屏幕分辨率

  • Resources width 以下简写为RW，Resources height 以下简写为RH
  • Design width 以下简写为DW，Design height 以下简写为DH
  • Screen width 以下简写为SW，Screen height 以下简写为SH

Cocos2d-x图片显示有下面两个逻辑过程。 资源布局到 到 设计分辨率，设计分辨率 布局到 屏幕。

如下图所示：

接口setContentScaleFactor()和setSearchPaths()控制着第一个转换过程。

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

从资源分辨率到设计分辨率

setSearchPaths()需要根据当前屏幕分辨率做恰当的设置，HelloCpp展示了一套简单方案，但可能不是最佳的。

setContentScaleFactor()决定了图片显示到屏幕的缩放因子，但是这个接口的参数不是通过资源图片的宽、高比屏幕宽、高得来。Cocos2d-x引擎设计试图屏蔽游戏开发者直接去关注屏幕，所以这个因子是资源宽、高比设计分辨率宽、高。

setContentScaleFactor()通常有两个方式来设置参数。 RH/DH或RW/DW，不同的因子选择有不同的缩放负作用。 先看一张图:

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

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

从设计分辨率到屏幕分辨率

setDesignResolutionSize(DW, DH, resolutionPolicy)

有三个参数，设计分辨率宽，设计分辨率高，分辨率策略。

前两个很好理解，复杂点在分辨率策略的选择上。

先来看ResolutionPolicy::EXACT_FIT，ResolutionPolicy::NO_BORDER，ResolutionPolicy::SHOW_ALL这三种情况，2.1.3新加入的策略稍后分析。

三种策略的设计分辨率都是传入值，内部不做修正。

先看一张图：

ResolutionPolicy::SHOW_ALL

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(小)者作为宽、高的缩放因子。保证了设计区域全部显示到屏幕上，但可能会有黑边。

ResolutionPolicy::EXACT_FIT

屏幕宽 与 设计宽比 作为X方向的缩放因子，屏幕高 与 设计高比 作为Y方向的缩放因子。保证了设计区域完全铺满屏幕，但是可能会出现图像拉伸。

ResolutionPolicy::NO_BORDER

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(大)者作为宽、高的缩放因子。保证了设计区域总能一个方向上铺满屏幕，而另一个方向一般会超出屏幕区域。

ResolutionPolicy::NO_BORDER是之前官方推荐使用的方案，他没有拉伸图像，同时在一个方向上撑满了屏幕，但是2.1.3新加入的两种策略将撼动ResolutionPolicy::NO_BORDER的地位。

ResolutionPolicy::FIXED_HEIGHT和ResolutionPolicy::FIXED_WIDTH都是会在内部修正传入设计分辨率，以保证屏幕分辨率到设计分辨率无拉伸铺满屏幕。 如图：

ResolutionPolicy::FIXED_HEIGHT
保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度。

ResolutionPolicy::FIXED_WIDTH
保持传入的设计分辨率宽度不变，根据屏幕分辨率修正设计分辨率的高度。

结合两个过程

第一过程有两种情况，第二过程有5种情况，在一个分辨率下会有10种可能的方案组合。 如何选择自己需要的？

我们需要作出选择，是牺牲效果还是牺牲部分显示区域。

这里我们选者牺牲一个方向的显示区域为例，结果说明两个过程。

在我的游戏里面，背景图的高需要全部显示，而宽方向可以裁减。

要实现这个目的，需要保证两个过程都是在宽方向裁减。

  • 第一过程选择 setContentScaleFactor(RH/DH)
  • 第二过程有两个选择：ResolutionPolicy::NO_BORDER和ResolutionPolicy::FIXED_HEIGHT

为了说明两者的区别，需要结合VisibleOrigin和VisibleSize。 看图

ResolutionPolicy::NO_BORDER情况下，设计分辨率并不是可见区域，我们布局精灵需要根据VisibleOrigin和VisibleSize来做判断处理。

而ResolutionPolicy::FIXED_HEIGHT则不同，设计分辨率就是可见区域，VisibleOrigin总是(0,0)

getVisibleSize() = getWinSize()，ResolutionPolicy::FIXED_HEIGHT达到了同样的目的，但是却简化了代码。

ResolutionPolicy::FIXED_HEIGHT和ResolutionPolicy::FIXED_WIDTH是ResolutionPolicy::NO_BORDER的进化，新项目中建议立即开始使用这两种方式。

小结

ResolutionPolicy::FIXED_HEIGHT

适合高方向需要撑满，宽方向可裁减的游戏，结合setContentScaleFactor(RH/DH)使用。

ResolutionPolicy::FIXED_WIDTH

适合宽方向需要撑满，高方向可裁减的游戏，结合setContentScaleFactor(RW/DW)使用。

tip:正确设置AppMacros.h里面的宽高，注意横屏游戏和竖屏游戏的不同。

时间： 2024-08-11 05:45:04

cocos进阶教程(2)多分辨率支持策略和原理的相关文章

OGEngine之多分辨率支持策略和原理

对于AndEngine的屏幕适配,通常使用RatioResolutionPolicy来拉伸屏幕,但是当游戏分辨率与手机分辨率的宽高比例不一致的时候,就不可避免的出现部分的黑色区域,影响游戏体验,目前OGengine开源引擎已经解决了该问题,可以达到满屏自适应屏幕 游戏设计分辨率: 我们自己定义游戏的分辨率是多少(例如800×480),然后UI根据这个分辨率来进行绘图 手机屏幕分辨率:手机自身屏幕的分辨率 期望分辨率=游戏设计分辨率 实际分辨率=手机屏幕分辨率 首先确定是横屏游戏还是竖屏游戏,假设

cocos进阶教程(1)Lua调用自定义C++类和函数的最佳实践

第一层:纯C环境下,把C函数注册进Lua环境 a.lua 文件 print(foo(99)) a.c 文件 #include <lua.h> #include <lualib.h> #include <lauxlib.h> int foo(lua_State *L) { int n = lua_tonumber(L, 1); lua_pushnumber(L, n + 1); return 1; } int main() { lua_State *L = lua_ope

cocos进阶教程(5)CC_CALLBACK_X系列的使用技巧

CC_CALLBACK_1,CC_CALLBACK_2,CC_CALLBACK_3 这些都是std::bind的宏,数字1,2,3主要表示要占位的数量,也是将来传递参数的数量. // new callbacks based on C++11#define CC_CALLBACK_0(__selector__,__target__, ...) std::bind(&__selector__,__target__, ##__VA_ARGS__)#define CC_CALLBACK_1(__sele

cocos进阶教程(5)回调函数和定时器的使用技巧

cc.CallFunc.create(selector, selectorTarget, data) selector:函数名(函数指针) selectorTarget:node对象 data:参数

点赞和吐糟Adblock Plus~进阶教程

前言:Adblock Plus后文都简称ABP,这是一篇ABP进阶教程!用ABP实现flashBlock和NoScript.推荐有相当基础的阅读!初学者先看懂这里:http://adblockplus.org/zh_CN/filters 先夸夸ABP,它是最流行.语法最完善严谨的过滤软件,其它同类都以它为标准!它把网络资源按以下选项分几大类: script -- 外部脚本,由 HTML script 标签加载 image -- 正常图片,通常由 HTML 的 img 标签所载入 styleshe

Android.mk (2) 函数进阶教程 - 分支、循环、子程序

https://www.jianshu.com/p/674dc7d7b4b0 函数进阶教程 - 分支.循环.子程序 按照面向过程程序设计的标准流程,我们讲完了顺序结构,就要讲分支.循环和子程序.下面我们就开始讲用于分支.循环和子程序调用功能的函数. 分支函数 要走分支,一定是要有条件要判断. 在Makefile里,最主要的判断就是看字符串能不能找到了. 通过findstring函数来进行这个判断,然后用if函数使用findstring函数的结果. 例: .PHONY : all5 bootoat

Nodejs爬虫进阶教程之异步并发控制

Nodejs爬虫进阶教程之异步并发控制 之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回答才会再加载一部分,所以说如果直接发送一个问题的请求链接,取得的页面是不完整的.还有就是我们通过发送链接下载图片的时候,是一张一张来下的,如果图片数量太多的话,真的是下到你睡完觉它还在下,而且我们用nodejs写的爬虫,却竟然没有用到nodejs最牛逼的异步并发的特性,太浪费了啊. 思路 这次的的爬

duilib进阶教程 -- 响应windows原生消息和自定义消息(13)

duilib进阶教程 -- 响应windows原生消息和自定义消息(13) 一.windows原生消息 同样,入门教程只是给出了响应windows原生消息的方法,并没给出例子,这里以自适应屏幕分辨率为例.迅雷播放器虽然可以在启动的时候自动调整窗口大小,但是当屏幕分辨率实时改变时并没有调整窗口,所以我们给播放器加上实时调整大小的功能,很明显,应该响应WM_DISPLAYCHANGE消息,而duilib自己处理windows消息的函数是在HandleMessage里,因此我们重载HandleMess

Numpy库进阶教程（二）

第一篇在这里:Numpy库进阶教程(一)求解线性方程组 求解特征值和特征向量 关于特征值和特征向量的介绍,可以点击这里 首先创建一个矩阵 In [1]: A=mat("3 -2;1 0") In [2]: A Out[2]: matrix([[ 3, -2], [ 1, 0]]) 在numpy.linalg模块中,eigvals函数可以计算矩阵的特征值,而eig函数可以返回一个包含特征值和对应特征向量的元组. 使用eigvals函数求解特征值 In [3]: linalg.eigval