Cocos2dx simple implementation of your own set of ui, cocos2dx set of ui

Cocos2dx simple implementation of your own set of ui, cocos2dx set of ui

Version: 2.x

Objective: To implement a simple ui based on the underlying layer of cocos2dx, and change the origin of the screen coordinates to the upper right corner.

First, we implement our own base class by inheriting CCNodeRGBA. Why should we inherit CCNodeRGBA instead of CCNode? Because CCNodeRGBA has settings on the color and transparency of 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 ); // enable the ccnodergba color settings setCascadeOpacityEnabled (true); // enable the ccnodergba transparency settings} View ::~ View (void) {} void View: draw () {// ccDrawLine (ccp (200,200), ccp (); // CCNode: draw (); glLineWidth (2.0f); ccDrawColor4B (0,255, 0,255); ccDrawRect (ccp (), ccp (getContentSize (). width,-getContentSize (). height);} void View: setPosition (cocos2d: CCPoint & pos) {CCNodeRGBA: setPosition (ccp (pos. x,-pos. y ));}

Let's talk about: ignoreAnchorPointForPosition

Cocos2dx a node has two vertices,

One is the anchor, which is related to the parent level. The parent level sets the node position based on this point.

The other is the origin, which is related to the sub-level. The sub-level setting position is based on this point, which is the lower left corner of node by default.

Therefore, if you set the node anchorpoint (ccp ();), it will not be changed to the origin. How can we change the origin point to the position of the anchorpointforposition (true ), this sentence.

Example: The currently drawn box is equivalent to the view subnode.

Let's take a look at the creation Code: (write it in 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);

Check whether the view is commented. If the view is not commented, the ignoreAnchorPointForPosition (true) is not commented. It is obviously aligned in the upper left corner.

Let's take a look at the effect of commenting on ignoreAnchorPointForPosition (true). Because I set the position to 200,200, the width to 150,150, and the frame to downward, the height of 50 pixels is displayed on the screen, obviously, the box is in the lower left corner.

The principle of setting the coordinate point to the upper-right corner is as follows: first, set the view anchor and origin to the upper-right corner, overwrite the draw method, and draw a box about X flipped,-getContentSize. in fact, the position of the view is the positive height. Then we will rewrite the setPosition method, reverse the position of Y, and then set the position. In this way, a coordinate origin is the illusion in the upper right corner,

For example, I add a view to set the screen size and position to (0, getWin, hegiht), so that my view will draw a box on the screen, in fact, he is outside the top of the screen, and my anchor and origin are set in the upper left corner of the screen. In this way, a subnode, setposition (ccp (), is added to my view )), it is aligned in the upper left corner and set to 0,100. The value is (0,-100) through the overloaded setposition, which is displayed on the screen.

Then let's take a look at the implementation of the image class,

#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 class I combined a CCSprite object. When it was created, it was added to the Image subnode, and then managed by imgae object to manage the ccsprite below

Let's set the location to see the effect.

Perfect ....

Poor, because it is a simple implementation,

1. The above memory management problems may occur. If you are always thinking about delete, otherwise it will be leaked.

Improvement Method: create a new ui object based on the create method of cocos2dx. Use reference count and Auto Release pool to manage the memory. Do not allow the user to create the object, or write the object by themselves.

2. The above basic view object, to call the previously set location function, looks a bit strange here. Here we can further encapsulate it into a class, in this way, the exposed coordinate origin is the upper left corner of the screen.

3. With this architecture, we can write our own ui and use it in our own games. If you have special requirements, it is very convenient to change it. Then you can write a set of tool classes for parsing xml to completely implement your ui.