pDirector->getOpenGLView()->setDesignResolutionSize(960,640,kResolutionShowAll);
enum ResolutionPolicy
{
// The entire application is visible in the specified area without trying to preserve the original aspect ratio.
// Distortion can occur, and the application may appear stretched or compressed.
kResolutionExactFit,//强制拉伸游戏方案,这个方案实用性很低,用暴力的拉伸直接将游戏拉伸到全屏,会导致图片比例失真
// The entire application fills the specified area, without distortion but possibly with some cropping,
// while maintaining the original aspect ratio of the application.
kResolutionNoBorder, //无黑边保持高宽比拉伸方案,这个方案最美观,但是等比拉伸会导致左右或上下总会有一部分显示到屏幕外,需要自己去保证UI元素不会显示在屏幕外
// The entire application is visible in the specified area without distortion while maintaining the original
// aspect ratio of the application. Borders can appear on two sides of the application.
kResolutionShowAll,//有黑边保持宽高比全显示拉伸方案,这个方案在在上两种方案之间,保持了宽高比也显示了全部内容,但是会在屏幕两侧留下黑边
// The application takes the height of the design resolution size and modifies the width of the internal
// canvas so that it fits the aspect ratio of the device
// no distortion will occur however you must make sure your application works on different
// aspect ratios
/*
Fix
- vt. 使固定;修理;安装;准备
- vi. 固定;注视
1) kResolutionFixedHeight:固定高度,动态宽度的适配模式,可以自由的自己根据动态的宽度处理游戏
宽度上超出屏幕的会被裁掉 设计游戏全景的时候就要按最长的宽度可能来设计
2) kResolutionFixedWidth:固定宽度,动态高度的适配模式,可以自由的自己根据动态的高度处理游戏 高度上超出屏幕的会被裁掉
这里拿固定高度方案来举个例子说明,比如我设定了固定高度600,如果屏幕实际高宽比为1.5 : 1,那么CCDirector->WinSize就会变成900×600;如果屏幕实际高宽比为1.667 : 1,那么CCDirector->WinSize就会变成1000×600。
看明白了没有?对!就是说固定高度的话,设计游戏全景的时候就要按最长的宽度可能(以600来算应该是600×1.78=1068)来设计,来保证最长宽高比的情况下右侧不会出现黑边。右侧的UI元素必须设定为“右对齐”,这样在宽度变窄的情况下UI元素会自动左移,宽度变宽的情况下UI元素会自动右移。另外要注意左右UI的摆放要保证在宽度最窄的情况下(600×1.333=800)不会重叠。
固定宽度的情况类似不多说了。
这是目前来说最好的动态适配方案,不用担心黑边也不用担心UI出屏幕。而且不用考虑复杂的8种对齐方式,因为宽度和高度有一个是固定的,所以只需要考虑两种对齐。对于横版或者竖版的卷轴游戏来说,这个适配方案需要的额外设计成本几乎为零。
*/
kResolutionFixedHeight,
// The application takes the width of the design resolution size and modifies the height of the internal
// canvas so that it fits the aspect ratio of the device
// no distortion will occur however you must make sure your application works on different
// aspect ratios
kResolutionFixedWidth,
kResolutionUnKnown,
};
为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 Cocos2D-X(当前稳定版:2.0.4)中,提供了相应的解决方案,以方便我们在设计游戏时,能够更好的适应不同的环境。而在设计游戏之
为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 Cocos2D-X(当前稳定版:2.0.4) 中,提供了相应的解决方案,以方便我们在设计游戏时,能够更好的适应不同的环境。
- // proj.linux/main.cpp linux 平台手动指定画面大小
- CCEGLView* eglView = CCEGLView::sharedOpenGLView();
- eglView->setFrameSize(720, 480);
- // proj.android/jni/hellocpp/main.cpp android 平台由 jni 调用传入设备分辨率参数
- void Java_org_cocos2dx_lib_Cocos2dxRenderer_nativeInit(JNIEnv* env, jobject thiz, jint w, jint h)
- {
- if (!CCDirector::sharedDirector()->getOpenGLView())
- {
- CCEGLView *view = CCEGLView::sharedOpenGLView();
- view->setFrameSize(w, h);
- AppDelegate *pAppDelegate = new AppDelegate();
- CCApplication::sharedApplication()->run();
- }
- else
- {
- // other
- ...
- }
- }
- CCEGLView::sharedOpenGLView()->setDesignResolutionSize(720, 480, kResolutionShowAll);
- // 或者
- CCEGLView::sharedOpenGLView()->setDesignResolutionSize(720, 480, kResolutionExactFit);
- CCSize winSize = CCDirector::sharedDirector()->getWinSize();
- // 获得 winSize
- CCSize winSize = CCDirector::sharedDirector()->getWinSize();
- // 查看其 getWinSize(); 方法实现
- [cocos2dx-path]/cocos2dx/CCDirector.cpp
- CCSize CCDirector::getWinSize(void)
- {
- return m_obWinSizeInPoints;
- }
- // 而 m_obWinSizeInPoints 是何时被赋值的
- [cocos2dx-path]/cocos2dx/platform/CCEGLViewProtocol.cpp
- void CCEGLViewProtocol::setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy)
- {
- ...
- ...
- m_obDesignResolutionSize.setSize(width, height);
- ...
- ...
- CCDirector::sharedDirector()->m_obWinSizeInPoints = getDesignResolutionSize();
- }
- const CCSize& CCEGLViewProtocol::getDesignResolutionSize() const
- {
- return m_obDesignResolutionSize;
- }
![](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513093702_1.jpg)
![](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513093717_1.png)
- // 组[1] :
- FrameSize: width = 720, height = 420
- WinSize: width = 720, height = 480
- VisibleSize: width = 720, height = 420
- VisibleOrigin: x = 0, y = 30
- // 组[2] :相比 组 [1] FrameSize 不变 VisibleSize 和 VisibleOrigin 随着 WinSize 的变小而变小
- FrameSize: width = 720, height = 420
- WinSize: width = 480, height = 320
- VisibleSize: width = 480, height = 280
- VisibleOrigin: x = 0, y = 20
- // 组[3] : 相比组 [1] WinSize 不变,VisibleSize 随着 FrameSize 的比例改变而改变
- FrameSize: width = 720, height = 540
- WinSize: width = 720, height = 480
- VisibleSize: width = 640, height = 480
- VisibleOrigin: x = 40, y = 0
- // WinSize VisibleSize VisibleOrigin 与都设计的分辨率相关,满足如下关系
- WinSize.width = (VisibleOrigin.x * 2) + VisibleSize.width
- WinSize.height = (VisibleOrigin.y * 2) + VisibleSize.height
![](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513093743_1.png)
- CCSize size = CCDirector::sharedDirector()->getWinSize();
- CCPoint center = ccp(size.width/2, size.height/2);
- // 大小 600x500 为了 NoBorder 看到效果,使用稍大的背景图
- CCSprite* pb = CCSprite::create("Back.jpg");
- pb->setPosition(center);
- this->addChild(pb, 0);
- // 480x320 此图为使用于设计分辨率 LsSize 的图片
- CCSprite* pSprite = CCSprite::create("HelloWorld.png");
- pSprite->setPosition(center);
- this->addChild(pSprite, 0);
- // 37x37 在 480x320 画面的四个拐角处,添加参照
- CCSprite* p1 = CCSprite::create("Peas.png");
- p1->setPosition(ccpAdd(center, ccp(-240, -160)));
- this->addChild(p1);
- CCSprite* p2 = CCSprite::create("Peas.png");
- p2->setPosition(ccpAdd(center, ccp(240, 160)));
- this->addChild(p2);
- CCSprite* p3 = CCSprite::create("Peas.png");
- p3->setPosition(ccpAdd(center, ccp(-240, 160)));
- this->addChild(p3);
- CCSprite* p4 = CCSprite::create("Peas.png");
- p4->setPosition(ccpAdd(center, ccp(240, -160)));
- this->addChild(p4);
![Cocos2D-X](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513093947_1.jpg)
![Cocos2D-X](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513094022_1.jpg)
![Cocos2D-X](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513094110_1.jpg)
- CCDirector *pDirector = CCDirector::sharedDirector();
- pDirector->setContentScaleFactor(
- CCEGLView::sharedOpenGLView()->getScaleY() );
![Cocos2D-X](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513094143_1.jpg)
- CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();
- // 设置 LsSize 固定值
- CCSize lsSize = CCSizeMake(480, 320);
- float scaleX = (float) frameSize.width / lsSize.width;
- float scaleY = (float) frameSize.height / lsSize.height;
- // 定义 scale 变量
- float scale = 0.0f; // MAX(scaleX, scaleY);
- if (scaleX > scaleY) {
- // 如果是 X 方向偏大,那么 scaleX 需要除以一个放大系数,放大系数可以由枞方向获取,
- // 因为此时 FrameSize 和 LsSize 的上下边是重叠的
- scale = scaleX / (frameSize.height / (float) lsSize.height);
- } else {
- scale = scaleY / (frameSize.width / (float) lsSize.width);
- }
- CCLog("x: %f; y: %f; scale: %f", scaleX, scaleY, scale);
- // 根据 LsSize 和屏幕宽高比动态设定 WinSize
- CCEGLView::sharedOpenGLView()->setDesignResolutionSize(lsSize.width * scale,
- lsSize.height * scale, kResolutionNoBorder);
![Cocos2D-X](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513094207_1.jpg)
![Cocos2D-X](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513094300_1.jpg)
- // 这里先简单实现思路
- CCScene* HelloWorld::scene() {
- CCScene *scene = CCScene::create();
- // 创建背景层
- CCLayer* b = CCLayer::create();
- scene->addChild(b);
- // 添加背景图片和设置位置,可以使用其它装饰,或者小图片屏幕都行
- CCSize size = CCDirector::sharedDirector()->getWinSize();
- CCPoint center = ccp(size.width/2, size.height/2);
- CCSprite* pb = CCSprite::create("Back.jpg");
- pb->setPosition(center);
- b->addChild(pb, 0);
- // 创建 LsLayer 层
- HelloWorld *lsLayer = HelloWorld::create();
- scene->addChild(lsLayer);
- return scene;
- }
- // 在 HelloWorld 中重写 visit() 函数 设定显示区域
- void HelloWorld::visit() {
- glEnable(GL_SCISSOR_TEST); // 开启显示指定区域
- // 在这里只写上固定值,在特性环境下,以便快速看效果,实际的值,需要根据实际情况算得
- glScissor(20, 0, 480, 320); // 只显示当前窗口的区域
- CCLayer::visit(); // 调用下面的方法
- glDisable(GL_SCISSOR_TEST); // 禁用
- }
![](http://www.cocoachina.com/cms/uploads/allimg/130513/4196_130513094326_1.jpg)
屏幕大小与分辨率不是一个概念.同样的屏幕,分辨率越高,显示越细腻,
分辨率就是指手机屏幕上有多少个发光点,一般来说.最小的是128*160.然后是176*220.依次类推.手机屏幕就是指手机屏幕对角线的长度.跟电视屏幕是一个道理.以前有1.8寸,2存,2.2,2.4,等等