cocos2dx簡單實現自己的一套ui
來源：程序員人生 發布時間：2015-01-06 08:07:39 閱讀次數：3886次
版本：2.x
目標：基于cocos2dx底層實現1個自己簡單的1套的ui,改屏幕坐標原點為右上角。
首先我們通過繼承CCNodeRGBA來實現自己的基類,為何要繼承CCNodeRGBA而不是CCNode，由于CCNodeRGBA有對node的色彩與透明度的設置
#pragma once
#include "cocos2d.h"
class View:public cocos2d::CCNodeRGBA
{
public:
View(void);
~View(void);
void draw();
void setPosition(cocos2d::CCPoint & pos);
};
#include "View.h"
using namespace cocos2d;
View::View(void)
{
this->setAnchorPoint(ccp(0,1));
this->ignoreAnchorPointForPosition(true);//
setCascadeColorEnabled(true); //開啟ccnodergba的色彩設置
setCascadeOpacityEnabled(true); //開啟ccnodergba的透明度設置
}
View::~View(void)
{
}
void View::draw()
{
//ccDrawLine(ccp(0,0), ccp(200,200));
//CCNode::draw();
glLineWidth(2.0f);
ccDrawColor4B(0,255,0,255);
ccDrawRect(ccp(0,0),ccp(getContentSize().width, -getContentSize().height));
}
void View::setPosition(cocos2d::CCPoint & pos)
{
CCNodeRGBA::setPosition(ccp(pos.x, -pos.y));
}
說1下：ignoreAnchorPointForPosition
cocos2dx1個node有兩個點，
1個是錨點，與父級相干，父級會根據這個點設置該node的位置。
另外一個是原點，與子級相干，子級設置位置會以這個點為標準，這個默許為node的左下角。
所以你設置node的 錨點（setAnchorPoint(ccp(0,1));）其實不會修改到原點，哪怎樣樣才能讓原點隨著錨點的位置變，就是ignoreAnchorPointForPosition(true),這句話。
例子：現在畫的框已相當于view的子節點了
先看下創建代碼：（寫在helloworld.cpp里就能夠）
View *xx = new View;
xx->setContentSize(CCSize(150,150));
xx->CCNodeRGBA::setPosition(ccp(200,200));
this->addChild(xx, 0);
Image *img = new Image;
img->create("close2.png");
img->setPosition(ccp(0,10));
xx->addChild(img);
先看1下沒注釋view 沒注釋ignoreAnchorPointForPosition(true),的效果，很明顯是以左上角對齊的
看1下，注釋ignoreAnchorPointForPosition(true)的效果，由于我設置位置是200,200， 寬度是150，150，框是向下畫的，所以在屏幕上面露出50像素的高度，很明顯框是左下角對齊來畫的。
實現坐標點為右上角的原理：首先我們先把view的錨點與原點設置為右上角，重寫draw方法，畫1個關于X翻轉過的框，-getContentSize.height，實際上view的位置是正的height的才對。然后我們重寫 setPosition方法，對Y的位置取反，然后再設置位置。這樣就給人1個坐標原點是右上角的假象，
例如：我加入1個view設置大小為屏幕大小，位置設置為（0，getWin,hegiht),這樣我的view就會在屏幕上畫1個框，實際上他在屏幕上方的外面，我的錨點與原點設置在屏幕的左上角，這樣我view中加入1個子node，setposition(ccp(0,0)),就會以左上角對齊，設置為為0，100，通太重載的setposition，就是（0,⑴00)，這樣就正好顯示在屏幕上了
然后我們看1下上的image類的實現，
#pragma once
#include "View.h"
class Image:public View
{
public:
Image(void);
~Image(void);
cocos2d::CCSprite * create(char *pszFileName);
void draw();
/*void setViewPosition(cocos2d::CCPoint & pos);*/
cocos2d::CCSprite * sprite;
};
#include "Image.h"
using namespace cocos2d;
Image::Image(void)
{
sprite = NULL;
setAnchorPoint(ccp(0,1));
ignoreAnchorPointForPosition(true);
}
Image::~Image(void)
{
}
void Image::draw()
{
ccDrawRect(ccp(0,0),ccp(sprite->getContentSize().width, -sprite->getContentSize().height));
}
cocos2d::CCSprite * Image::create(char *pszFileName)
{
sprite = CCSprite::create(pszFileName);
sprite->setAnchorPoint(ccp(0,1));
//sprite->ignoreAnchorPointForPosition(true);
this->addChild(sprite);
return sprite;
}
image類我我們組合了1個CCSprite對象，創建的時候，并把它加入到Image的子節點下，然后通過管理imgae對象來管理下面的ccsprite
我們設置位置為0,10，看1下效果
完善啊。。。。
不好的地方，由于是簡單的實現，
1 、上面那種內存管理上會出現問題，要是時刻想著delete，否則會泄漏。
改進方法：仿照cocos2dx的create方式來創建新ui的對象，利用援用計數與自動釋放池來管理內存，不要讓使用者來new這個對象，也可自己寫這些東西。
2、上面的基礎view對象，要調用之前的設置位置的函數，這里看起來有點怪怪的，這里可以對他進1步的封裝，封裝在1個類的內部，這樣暴露出來的坐標原點就會是屏幕的左上角了。
3、有了這樣的架構，我們就能夠寫1套自己的ui,使用在自己的游戲中了。如果有特殊需求，改起來也很方便，再寫1套解析xml的工具類，就能夠完全實現自己的ui了。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
