cocos2dx分辨率适配(9宫格布局)

r囧r小猫 2022-05-13 00:24 255阅读 0赞

先说下思路，将设计分辨率划分为9格，当屏幕分辨率和设计分辨率宽高比不同时，

调整每个格子的大小和位置，保证屏幕中所有元素完全显示在屏幕内，保证相对位置不变并且不变形。

下面是实现代码，欢迎大家拍砖、批评(自定义坐标点的代码还没有实现，为了看效果我使用了LayerColor)

UILayer9.h

#ifndef __UI_LAYER_9_H__
    #define __UI_LAYER_9_H__
    
    #include "cocos2d.h"
    #include "cocos-ext.h"
    
    USING_NS_CC;
    USING_NS_CC_EXT;
    
    class UILayer9 : public CCLayer
    {	
    public:
    	enum positionType
    	{
    		E_CENTER = 0,
    		E_TOP,
    		E_BOTTOM,
    		E_LEFT,
    		E_RIGHT,
    		E_TOP_LEFT,
    		E_TOP_RIGHT,
    		E_BOTTOM_LEFT,
    		E_BOTTOM_RIGHT,
    	};
    
    	static UILayer9* create();
    	/**
    	 *	根据center的大小确定9宫格布局的位置和大小
    	 *
    	 *		 _______________________________
    	 *		|		   |		  |  		|
    	 *		|__________|__________|_________|
    	 *		|		   |  center  |			|
    	 *		|__________|__________|_________|
    	 *		|		   |		  |			|
    	 *		|__________|__________|_________|
    	 *
    	 *
    	 */
    	static UILayer9* create(float centerWidth, float centerHeight);
    	/**
    	 * 
    	 *	根据4个点的位置来确定9宫格布局的位置和大小
    	 *		 _______________________________
    	 *		|		   |		  |  		|
    	 *		|__________|__________|_________|point3Y
    	 *		|		   |  center  |			|
    	 *		|__________|__________|_________|point4Y
    	 *		|		   |		  |			|
    	 *		|__________|__________|_________|
    	 *				point1X		point2X
    	 *
    	 */
    	static UILayer9* create(float point1X, float point2X, float point3Y, float point4Y);
    	virtual bool init(float centerWidth, float centerHeight);
    private:
    	UILayer9();
    	~UILayer9();
    	//UILayer* m_pLayerCenter;
    	CCLayerColor* m_pLayerCenter;
    	CCLayerColor* m_pLayerTop;
    	CCLayerColor* m_pLayerBottom;
    	CCLayerColor* m_pLayerLeft;
    	CCLayerColor* m_pLayerRight;
    	CCLayerColor* m_pLayerTopLeft;
    	CCLayerColor* m_pLayerTopRight;
    	CCLayerColor* m_pLayerBottomLeft;
    	CCLayerColor* m_pLayerBottomRight;
    };
    
    #endif//__UI_LAYER_9_H__

UILayer9.cpp

#include "UILayer9.h"
    
    UILayer9::UILayer9()
    	:m_pLayerTop(nullptr), m_pLayerCenter(nullptr), m_pLayerBottom(nullptr)
    	,m_pLayerLeft(nullptr), m_pLayerRight(nullptr)
    	,m_pLayerTopLeft(nullptr), m_pLayerTopRight(nullptr)
    	,m_pLayerBottomLeft(nullptr), m_pLayerBottomRight(nullptr)
    {
    }
    
    UILayer9::~UILayer9(){}
    
    UILayer9* UILayer9::create()
    {
    	CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
    	const CCSize& designSize = pEGLView->getDesignResolutionSize();
    	return UILayer9::create(designSize.width * 0.33f, designSize.height * 0.33f);
    }
    
    UILayer9* UILayer9::create(float centerWidth, float centerHeight)
    {
    	UILayer9* pLayer = new UILayer9;
    	if (pLayer && pLayer->init(centerWidth, centerHeight))
    	{
    		pLayer->autorelease();
    		return pLayer;
    	}else
    	{
    		delete pLayer;
    		pLayer = nullptr;
    		return nullptr;
    	}
    }
    
    bool UILayer9::init(float centerWidth, float centerHeight)
    {
    	if (!CCLayer::init())
    	{
    		return false;
    	}
    
    	CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
    	const CCSize& screenSize = pEGLView->getFrameSize();
    	const CCSize& designSize = pEGLView->getDesignResolutionSize();	
    	float scaleX = (float) screenSize.width / designSize.width;
    	float scaleY = (float) screenSize.height / designSize.height;
    	float scale = pEGLView->getScaleX();
    	float scaleLayer = scaleX > scaleY ? scaleY / scaleX : scaleX / scaleY;
    
    	this->setContentSize(CCSize(designSize.width, designSize.height));
    	this->setPosition(0, 0);
    	// center
    	this->m_pLayerCenter = CCLayerColor::create(ccc4(255, 0, 0, 64), centerWidth, centerHeight);
    	this->m_pLayerCenter->ignoreAnchorPointForPosition(false);
    	this->m_pLayerCenter->setAnchorPoint(ccp(0.5, 0.5));
    	this->m_pLayerCenter->setScale(scaleLayer);
    	this->m_pLayerCenter->setPosition(designSize.width * 0.5f, designSize.height * 0.5f);
    	this->addChild(this->m_pLayerCenter, 0, E_CENTER);
    	//top left
    	this->m_pLayerTopLeft = CCLayerColor::create(ccc4(0, 255, 64, 64), 
    			(designSize.width - centerWidth) * 0.5f, 
    			(designSize.height - centerHeight) * 0.5f);
    	this->m_pLayerTopLeft->ignoreAnchorPointForPosition(false);
    	this->m_pLayerTopLeft->setAnchorPoint(ccp(0, 1));
    	this->m_pLayerTopLeft->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerTopLeft->setPosition(0, 
    				designSize.height - designSize.height * 0.5f + screenSize.height * 0.5f / scale);
    	}else
    	{
    		this->m_pLayerTopLeft->setPosition(designSize.width * 0.5f - screenSize.width * 0.5f / scale, 
    				designSize.height);
    	}	
    	this->addChild(this->m_pLayerTopLeft, 0, E_TOP_LEFT);
    	//top
    	this->m_pLayerTop = CCLayerColor::create(ccc4(0, 255, 0, 64), 
    			centerWidth,  
    			(designSize.height - centerHeight) * 0.5f);
    	this->m_pLayerTop->ignoreAnchorPointForPosition(false);
    	this->m_pLayerTop->setAnchorPoint(ccp(0.5, 1));
    	this->m_pLayerTop->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerTop->setPosition(designSize.width * 0.5f, 
    				designSize.height - designSize.height * 0.5f + screenSize.height * 0.5f / scale);
    	}else
    	{
    		this->m_pLayerTop->setPosition(designSize.width * 0.5f, designSize.height);
    	}
    	this->addChild(this->m_pLayerTop, 0, E_TOP);
    	//top right
    	this->m_pLayerTopRight = CCLayerColor::create(ccc4(0, 255, 128, 64), 
    			(designSize.width - centerWidth) * 0.5f, 
    			(designSize.height - centerHeight) * 0.5f);
    	this->m_pLayerTopRight->ignoreAnchorPointForPosition(false);
    	this->m_pLayerTopRight->setAnchorPoint(ccp(1, 1));
    	this->m_pLayerTopRight->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerTopRight->setPosition(designSize.width, 
    				designSize.height - designSize.height * 0.5f + screenSize.height * 0.5f / scale);
    	}else
    	{
    		this->m_pLayerTopRight->setPosition(designSize.width - designSize.width * 0.5f + screenSize.width * 0.5f / scale, 
    			designSize.height);
    	}
    	this->addChild(this->m_pLayerTopRight, 0, E_TOP_RIGHT);
    	//left
    	this->m_pLayerLeft = CCLayerColor::create(ccc4(255, 0, 64, 64),
    			(designSize.width - centerWidth) * 0.5f, 
    			centerHeight);
    	this->m_pLayerLeft->ignoreAnchorPointForPosition(false);
    	this->m_pLayerLeft->setAnchorPoint(ccp(0, 0.5));
    	this->m_pLayerLeft->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerLeft->setPosition(0, designSize.height * 0.5f);
    	}else
    	{
    		this->m_pLayerLeft->setPosition(designSize.width * 0.5f - screenSize.width * 0.5f / scale, 
    				designSize.height * 0.5f);
    	}
    	this->addChild(this->m_pLayerLeft, 0, E_LEFT);
    	//right
    	this->m_pLayerRight = CCLayerColor::create(ccc4(255, 0, 128, 64),
    			(designSize.width - centerWidth) * 0.5f, 
    			centerHeight);
    	this->m_pLayerRight->ignoreAnchorPointForPosition(false);
    	this->m_pLayerRight->setAnchorPoint(ccp(1, 0.5));
    	this->m_pLayerRight->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerRight->setPosition(designSize.width, designSize.height * 0.5f);
    	}else
    	{
    		this->m_pLayerRight->setPosition(designSize.width - designSize.width * 0.5f + screenSize.width * 0.5f / scale, 
    			designSize.height * 0.5f);
    	}
    	this->addChild(this->m_pLayerRight, 0, E_RIGHT);
    	//bottom left
    	this->m_pLayerBottomLeft = CCLayerColor::create(ccc4(0, 0, 255, 64), 
    			(designSize.width - centerWidth) * 0.5f, 
    			(designSize.height - centerHeight) * 0.5f);
    	this->m_pLayerBottomLeft->ignoreAnchorPointForPosition(false);
    	this->m_pLayerBottomLeft->setAnchorPoint(CCPointZero);
    	this->m_pLayerBottomLeft->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerBottomLeft->setPosition(0, designSize.height * 0.5f - screenSize.height * 0.5f / scale);
    	}else
    	{
    		this->m_pLayerBottomLeft->setPosition(designSize.width * 0.5f - screenSize.width * 0.5f / scale, 0);
    	}	
    	this->addChild(this->m_pLayerBottomLeft, 0, E_BOTTOM_LEFT);
    	//bottom
    	this->m_pLayerBottom = CCLayerColor::create(ccc4(64, 0, 255, 64), 
    			centerWidth, 
    			(designSize.height - centerHeight) * 0.5f);
    	this->m_pLayerBottom->ignoreAnchorPointForPosition(false);
    	this->m_pLayerBottom->setAnchorPoint(ccp(0.5, 0));
    	this->m_pLayerBottom->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerBottom->setPosition(designSize.width * 0.5f, 
    				designSize.height * 0.5f - screenSize.height * 0.5f / scale);
    	}else
    	{
    		this->m_pLayerBottom->setPosition(designSize.width * 0.5f, 0);
    	}
    	this->addChild(this->m_pLayerBottom, 0, E_BOTTOM);
    	//bottom right
    	this->m_pLayerBottomRight = CCLayerColor::create(ccc4(128, 0, 255, 64), 
    			(designSize.width - centerWidth) * 0.5f, 
    			(designSize.height - centerHeight) * 0.5f);
    	this->m_pLayerBottomRight->ignoreAnchorPointForPosition(false);
    	this->m_pLayerBottomRight->setAnchorPoint(ccp(1, 0));
    	this->m_pLayerBottomRight->setScale(scaleLayer);
    	if (scale == scaleX)
    	{
    		this->m_pLayerBottomRight->setPosition(designSize.width, 
    				designSize.height * 0.5f - screenSize.height * 0.5f / scale);
    	}else
    	{
    		this->m_pLayerBottomRight->setPosition(
    				designSize.width - designSize.width * 0.5f + screenSize.width * 0.5f / scale, 0);
    	}
    	this->addChild(this->m_pLayerBottomRight, 0, E_BOTTOM_RIGHT);
    
    	auto pImg = CCSprite::create("img/m_1.png");
    	pImg->setAnchorPoint(CCPointZero);
    	pImg->setPosition(CCPointZero);
    	this->m_pLayerCenter->addChild(pImg);
    
    	pImg = CCSprite::create("img/m_1.png");
    	pImg->setAnchorPoint(CCPointZero);
    	pImg->setPosition(CCPointZero);
    	this->m_pLayerTopLeft->addChild(pImg);
    
    	pImg = CCSprite::create("img/m_1.png");
    	pImg->setAnchorPoint(CCPointZero);
    	pImg->setPosition(CCPointZero);
    	this->m_pLayerBottomLeft->addChild(pImg);
    
    	return true;
    }
    
    UILayer9* UILayer9::create(float point1X, float point2X, float point3Y, float point4Y)
    {
    	return nullptr;
    }