"In-depth understanding of Cocos2d-x 3.x" step-by-step implementation of a fully functional marquee announcement (1)

This article is mainly through a step by step implementation of a full-featured marquee announcements to demonstrate the use of clippingnode and finally in-depth Clippingnode source code, understand its implementation principle.

First of all, the introduction of Clippingnode,clippingnode is also called the clipping node, can be used to cut some of the content through the use of templates to display in the interface, you can achieve some cool effect. To see what we're going to achieve today.

1, Clippingnode class analysis

Let's take a look at Clippingnode's declaration file to see the public method.

Class Cc_dll Clippingnode:public node{public:    static clippingnode* Create ();    Static clippingnode* Create (Node *stencil);    node* getstencil () const;    void Setstencil (Node *stencil);    virtual bool Hascontent () const;    Glfloat getalphathreshold () const;    void Setalphathreshold (Glfloat alphathreshold);        BOOL isinverted () const;    void setinverted (bool inverted);};

The first is create, this method is for creating a clippingnode, this is not much to do, and the second create is a clipping node with a mask template.

The next Getstencil and Setstencil are to get and set a mask template, and the clipping object method is through this mask template, the mask template as long as the node-based object can (very important).

The next hascontent returns whether there is anything that needs to be drawn, returns False if no content is drawn, and returns true.

Getalphathreshold and Setalphathreshold respectively are to get and set the transparency value of a pixel, with a value range from 0-1, where 0 is not drawn, and 1 means it is plotted. 0.5 means that transparency is plotted above 0.5, and this function involves the concept of the alpha test of OpenGL, which is explained by one sentence: all pixels with a transparency value below a certain threshold are discarded and not drawn to the screen.

The final isinverted and setinverted, respectively, indicate whether the content of the drawing is inside or outside the template, and the effect is as follows:

2, easy to realize the light

The previous section briefly introduces the functions of Clippingnode, which is intuitively understood by implementing a simple marquee function. First of all, introduce the idea of making a happy lantern.

First, we need to cut out a portion of the marquee that is out of the box so that he doesn't show up on the screen. This requires the use of Clippingnode, now first step. The implementation code is as follows:

Set the template auto stencil = Sprite::create ();//Set the display area size stencil->settexturerect (Rect (0, 0, 50, 30));//Set marquee text Auto Text = Label::createwithsystemfont (" -1dasdasdasd efadaewfevgds dfhrthrbgrg1-", "", 24);//Set anchor Text->setanchorpoint (VEC2 :: Anchor_middle_left);//Create crop node Auto Clippingnode = clippingnode::create (stencil);//Set node location clippingnode-> SetPosition (VEC2 (700, 400));//Display the contents of the template clippingnode->setinverted (false);//Add Display content Clippingnode->addchild ( text, 2);//Add to UI Tree Addchild (Clippingnode);

Each of the above code has comments, it will no longer explain, this step to achieve the effect of such as, but the lantern can not be moved up, we will be happy to move the light.

Now we have to design an action to move the marquee, the marquee usually need to move the text to the left, moving to the text can not see when the text is removed or hidden, the code is as follows (for the sake of simplicity, directly set hidden):

Auto sequ = Sequence::create (Moveby::create (5.0f, VEC2 (-text->getcontentsize (). width, 0)), Hide::create (), nullptr ); Text->runaction (sequ);

Now the marquee looks just like the beginning, but it can't be used directly, because it's just a bunch of code, it needs to be encapsulated, and it provides a very simple way to call other classes.

3. Encapsulation

Now let's consider how to encapsulate the marquee function as a function for other classes to call from a convenience perspective. First, the parameters of the function are extracted: Display area, marquee text, font size, marquee position, run Lanterns parent node. The following is a preliminary package of the declaration of a marquee function:

void Showmarquee (node* parent, const std::string& text, const std::string& font, float fontSize, const rect& s Howrect, const vec2& position);

See if the parameters are slightly more, each call this function is not very inconvenient, then we now look at what the parameters are must be passed. Each time you call the marquee, the text will change, and the other parameters will not change in a game. Then it is necessary to do a class to ensure the convenience of the use of the method.

First, let's simply build a marquee class, as follows

#include "cocos2d.h" Using_ns_cc;class marquee:public node{public:create_func (Marquee); bool Init (); void Show (const std::string& text);p ublic:const std::string& getfont () const {return _font;} void SetFont (std::string& font) {_font = font;} float getfontsize () const {return _fontsize;} void Setfontsize (float fontSize) {_fontsize = fontSize;} Public:const rect& getshowrect () const {return _showrect;} void Setshowrect (rect& showrect) {_showrect = Showrect;} Protected:marquee (): _font (""), _fontsize ("), _showrect (Rect (0,0,200,30)) {};~marquee () {};p rivate:std::string _ Font;float _fontsize; Rect _showrect;};

Then the most important init method and the implementation of the Show method

BOOL Marquee::init () {//set template auto stencil = Sprite::create ();//Set Display area size Stencil->settexturerect (_showrect);// Set the marquee text _label = Label::createwithsystemfont ("", _font, _fontsize);//Set anchor _label->setanchorpoint (vec2::anchor_ Middle_left); _label->setalignment (texthalignment::left);//Create crop node Auto Clippingnode = Clippingnode::create ( stencil);//display content inside the template clippingnode->setinverted (false);//Add Display content Clippingnode->addchild (_label);// Add to UI Tree Addchild (Clippingnode); return true;} void Marquee::show (const std::string& text) {_label->setstring (text); _label->setposition (Vec2 (0, _label- >getcontentsize () HEIGHT/2)), Auto sequ = Sequence::create (Moveby::create (5.0f, VEC2 (-_label->getcontentsize ( ). width, 0), Hide::create (), nullptr); _label->runaction (sequ);}

This allows you to invoke the marquee by calling the following method.

<span style= "White-space:pre" ></span>marquee* m = Marquee::create (); M->show ("----hhahahah VEEEEEE-----"); M->setposition (VEC2); This->addchild (m);

4. Perfect

Not to be continued

"In-depth understanding of Cocos2d-x 3.x" step-by-step implementation of a fully functional marquee announcement (1)