Cocos2d-x 3.1 一步步做屏幕适配

本文并不想讲关于屏幕适配的概念或者大道理,如果还不了解cocos2d-x屏幕适配的,请先看这篇文章:http://www.cocoachina.com/gamedev/cocos/2014/0516/8451.html。本文有一些内容和图片是引用这篇文章的。看了那么多网上关于屏幕适配的文章,还是觉得似懂非懂,所以最好的方法就是自己一步步做好适配。

一、根据屏幕尺寸选择“最”合适的图片。

如果根据屏幕尺寸来选择一样大小的图片,那么美工要哭了,因为对于安卓机,各种各样的分辨率啊,不仅美工要哭了,程序员也要哭了。所以,我们只能选择最合适的图片,比如320*500分辨率和300*480分辨率的屏幕可以使用320*480的图片。

1、在Cocos2d-x自带的解决方案中就有针对iphone、ipad和ipadhd所做的适配方案,在工程cpp-empty-test有例子。

// AppMacros.h
#define DESIGN_RESOLUTION_480X320    0
#define DESIGN_RESOLUTION_1024X768   1
#define DESIGN_RESOLUTION_2048X1536  2

// 要切换设计方案,改变这一行即可
#define TARGET_DESIGN_RESOLUTION_SIZE  DESIGN_RESOLUTION_480X320

typedef struct tagResource
{
    cocos2d::Size size;		// 尺寸
    char directory[100];	// 资源路径
}Resource;

static Resource smallResource  =  { cocos2d::Size(480, 320),   "iphone" };
static Resource mediumResource =  { cocos2d::Size(1024, 768),  "ipad"   };
static Resource largeResource  =  { cocos2d::Size(2048, 1536), "ipadhd" };

#if (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_480X320)
static cocos2d::Size designResolutionSize = cocos2d::Size(480, 320);
#elif (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_1024X768)
static cocos2d::Size designResolutionSize = cocos2d::Size(1024, 768);
#elif (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_2048X1536)
static cocos2d::Size designResolutionSize = cocos2d::Size(2048, 1536);
#else
#error unknown target design resolution!
#endif

// 480*320的字体大小是24号,根据当前的分辨率来修改字体大小
#define TITLE_FONT_SIZE  (cocos2d::Director::getInstance()->getOpenGLView()->getDesignResolutionSize().width / smallResource.size.width * 24)

从上面可以看出,cocos2d-x定义了三种大小,分别是iphone(480*320),ipad(1024*768),ipadhd(2048*1536),一般用得比较多的是iphone和ipad。

我们再看一下资源文件夹,工程->Resource下:

iphone目录:

ipad目录:

ipadhd目录:

也就是说,在这三个文件夹里面有三套不同大小分辨率的图片,我们之后根据屏幕大小来选择对应的图片就行了。

2、实现怎么根据屏幕大小来选择图片。

新建一个工程,再将AppMacros.h文件拷贝过去。

// AppDelegate.cpp
bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLView::create("My Game");
		glview->setFrameSize(480, 320);	// 在这里设置创建窗口的尺寸,手机上这个就不用啦,因为手机有固定的屏幕
        director->setOpenGLView(glview);
    }

	auto screenSize = glview->getFrameSize();	// 获取屏幕尺寸
	std::vector<std::string> searchPaths;

	// 这里是实现的重点,比较屏幕的高和设定的三种适配尺寸的高,选择合适的图片
	// 然后将对应图片的路径添加到搜索路径中,那么cocos2d-x就会到该目录去寻找图片
	if (screenSize.height > middleResource.size.height)
	{
		searchPaths.push_back(largeResource.directory);
	}else if (screenSize.height > smallResource.size.height)
	{
		searchPaths.push_back(middleResource.directory);
	}else
	{
		searchPaths.push_back(smallResource.directory);
	}

	FileUtils::getInstance()->setSearchPaths(searchPaths);

    // turn on display FPS
    director->setDisplayStats(true);

    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);

    // create a scene. it's an autorelease object
    auto scene = HelloWorld::createScene();

    // run
    director->runWithScene(scene);

    return true;
}

3、改变窗口尺寸来看效果:

窗口尺寸500*300:

因为高300小于320,所以使用480*320的图片。这时候看到的是左右有黑边,上下被截了一点。没事,下面会讲怎么解决。

窗口尺寸700*300:

还是用480*320分辨率的,都是300的错。

窗口尺寸800*480:

这次用的是1024*768的了,因为320<480<768。

在500*300尺寸中我们看到图片左右因为不够宽而出现黑边,而上下因为太大了而被截取了一部分,那么要怎么解决这个问题呢?往下看。

二、图片与屏幕“完美”融合

为了使图片能与屏幕“完美”融合,Cocos2d-x提供了一组相关的接口和5种分辨率适配的策略。

首先了解一下三种分辨率:

资源分辨率:也就是图片分辨率,下面宽Resource Width简写为RW,高Resource Height简写为RH。

设计分辨率:也就是我们设定区域的分辨率,下面宽Design Width简写为DW,高Design Height简写为DH。

屏幕分辨率:也就是窗口分辨率,下面宽Screen Width简写为SW,高Screen Height简写为SH。

Cocos2d-x的图片显示有下面两个过程:

从资源分辨率到设计分辨率,从设计分辨率到屏幕分辨率。

这个过程就是:

1、先选定目标的设计分辨率,在AppMacros.h中我们定义了三种分辨率,分别是480*320,1024*768,2048*1536:

默认选中的是480*320:

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

通过setContentScaleFactor()函数来缩放图片的分辨率,以适应设计分辨率的大小。这个函数的参数不是通过资源宽/屏幕宽、资源高/屏幕高得来的,而是通过资源宽/设计分辨率宽、资源高/设计分辨率高得来的。这样我们就可以不关注屏幕尺寸,先根据现有的资源跟选好的设计分辨率来做好适配。

在上面800*480尺寸的图中可以看到,图片四边都被截取了,原因就是没有做好图片的缩放,接下来我们先用setContentScaleFactor()来做图片缩放。

设计分辨率选择的是480*320,窗口分辨率480*321,这样用的就是1024*768分辨率的图片了:

	if (screenSize.height > middleResource.size.height)
	{
		searchPaths.push_back(largeResource.directory);
		director->setContentScaleFactor(largeResource.size.height/designResolutionSize.height);
	}else if (screenSize.height > smallResource.size.height)
	{
		searchPaths.push_back(middleResource.directory);
		// 缩放因子是资源宽/设计分辨率宽
		director->setContentScaleFactor(middleResource.size.height/designResolutionSize.height);
	}else
	{
		searchPaths.push_back(smallResource.directory);
		director->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);
	}

效果:

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

修改缩放因子为资源宽/设计宽:

// 缩放因子是资源宽/设计分辨率宽
director->setContentScaleFactor(middleResource.size.width/designResolutionSize.width);

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

可以参考一下这张图,我的是横屏的,这张图画的是竖屏的,不过原理一样:

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

设计分辨率是我们自定义分辨率方案,图片根据设计分辨率做好了缩放效果了,如果跟屏幕分辨率适配,说白了就是一厢情愿。最后一步就是使用setDesignResolutionSize()函数来实现设计分辨率到屏幕分辨率的完美适配了:

void GLViewProtocol::setDesignResolutionSize(float width,	// DW
											 float height,	// DH
											 ResolutionPolicy resolutionPolicy)	// 适配策略

五种适配策略:

enum class ResolutionPolicy
{
    EXACT_FIT,
    NO_BORDER,
    SHOW_ALL,
    FIXED_HEIGHT,
    FIXED_WIDTH,

    UNKNOWN,
};

先看不使用适配策略的情况,在第2中,设置窗口分辨率为960*640:

接着,我们使用setDesignResolutionSize()函数来适配设计分辨率和屏幕分辨率:

glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::EXACT_FIT);

效果:

这时候就是我们想要的效果了。

上面说到共有五种分辨率适配的策略,其实就是从设计分辨率适配到屏幕分辨率时,图片拉伸的策略:

1、ResolutionPolicy::SHOW_ALL

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

2、ResolutionPolicy::EXACT_FIT

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

3、ResolutionPolicy::NO_BORDER

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

如图:

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

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

4、ResolutionPolicy::FIXED_HEIGHT

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

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

5、ResolutionPolicy::FIXED_WIDTH

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

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

如图:

屏幕适配的就讲到这里了,由于本人口才不好,所以有些地方可能表达不够清晰,请见谅。

网上讲屏幕适配这方面的文章一搜一大把,但都是理论知识,个人觉得最好的学习方法就是去做个demo,一步步做,看看效果如何,这样才能掌握。

Cocos2d-x 3.1 一步步做屏幕适配

时间: 2024-12-28 07:08:07

Cocos2d-x 3.1 一步步做屏幕适配的相关文章

使用cocos2dx 3.2和cocosstudio做屏幕适配----有图才有真想!

屏幕适配的文章太多了,基本上都是理论性的东西,大家明白了机制就知道了,没有完美的适配方案,除非你们的美工愿意折腾. 常规策略: 今天研究了一下屏幕适配导致的缩放和展示不全的问题(黑边的方案直接淘汰).细想一下,美工给我们一张图(假设这张图width足够长),在不同的分辨率上我们应该如何对其展示?肯定不可能在所有的分辨率上把这张图完美的按照原比例展示出来,那答案就只有两种了: 1.铺满屏幕(长宽非等比缩放 EXACTFIT) 天天德州就采用了这种方法,在不同的分辨率上能明显看到元素被缩放或者拉伸了

【移动适配】移动Web怎么做屏幕适配(一)

屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的.对于Web开发的求职者而言,也是一个必需要理解清楚的经典问题 首发于微信公众号(啃先生)  (一) 移动端适配的是什么? 我们讨论的是网页适配多种尺寸屏幕,让网页效果看起来和设计师的设计稿一样.说白了就是同一套代码在不同分辨率的手机上跑时,页面元素间的间距,留白,以及图片大小会随着变化,在比例上跟设计稿一致. 举个粟子吧 图1.  260*400的屏幕 图2.  380*400的屏幕 上边的页面在不同大小屏幕上的展现,咋一

android studio 怎么做屏幕适配?

一.关于布局适配建议1.不要使用绝对布局2.尽量使用match_parent 而不是fill_parent .3.能够使用权重的地方尽量使用权重(android:layout_weight)4.如果是纯色背景,尽量使用android的shape 自定义.5.如果需要在特定分辨率下适配,可以在res目录上新建layout-HxW.xml的文件夹.比如要适配1080*1800的屏幕(魅族MX3采用此分辨率)则新建layout-1800x1080.xml的文件夹,然后在下面定义布局.Android系统

Cocos2d-JS的屏幕适配方案

Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代码: cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL); setDesignResolutionS

034-iOS屏幕适配-iOS笔记

学习目标 1.[了解]屏幕适配的发展史 2.[了解]autoResizing基本用法 3.[掌握]autoLayout 的基本用法 4.[掌握]autoLayout代码实现 5.[理解]sizeClass的基本用法 一.屏幕适配的发展史 随着iOS屏幕尺寸越来越多样化,屏幕适配也就越来越重要了. iphone1 - iphone3gs时代,window的size固定为(320,480).我们只需要简单计算一下相对位置就好了,不需要做屏幕适配. iphone4 - iphone4s时代,苹果推出了

android屏幕适配方案

曾经看了android的屏幕适配方案,有非常多种.当中自己用到的一种是:先找一款主流的分辨率的android机,如:1080*1920的分辨率做基准,然后在这个基准上.调整好一切布局.图片.适配其它手机分辨率的手机.用百分比来调节.比如:在480*800的主流手机上,写了一个height=520,那么在480*800的手机上,这个控件的高度则为 480height = 520 * 屏幕高度/1920. 这种方案做屏幕适配. 项目遇到一个问题. 在剩余空间里.在1080*1920的手机上适配非常好

IOS开发之绝对布局和相对布局(屏幕适配)

之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便.在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处.下面会结合两个小demo来学习一下我们IOS开发中UI的绝对定位和相对定位.在前面的博客中所用到的UI事例用的全是绝对定位,用我们Storyboard拖拽出来的控件全是绝对定位的,就是我们可以同改变组件的frame来改变组件的位置和大小.而相对定位则不同,相对定位是参考组件周围的元素来确定组件的大小或

iOS屏幕适配的几种方式

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策);(2)Autoresizing的使用(中策);(3)AutoLayout的使用(上策);(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据屏幕宽高写控件frame 利用宽高比,在不同的屏幕中来进行对控件的位置与控件的宽高进行等比例缩放.选定一个型号的屏幕的宽高为基准,进行等比例缩放.例如以iPhone6或者iPhone6s为基准. 其宽高分别是375与667.Iphon

iOS开发屏幕适配问题解决方案

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策):(2)Autoresizing的使用(中策):(3)AutoLayout的使用(上策):(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据当前屏幕的宽高写frame 在新特性界面中,根据:[UIScreen mainScreen].bounds.size.height.来判断用户的屏幕长度,来判断时3.5寸,4寸,4.7寸,5.5寸,以此来设置新特性中图片选用哪套. 常