The design of COCOS2DX color edit input Box

****************************************************************************

Time:2015-01-26

Sharing_li

Reprint Source : http://blog.csdn.net/sharing_li/article/details/42582625

****************************************************************************

In the game development, we may have more special needs, such as today to explain, do a game with the characteristics of a simple edit input box. Or the usual, first look at it, there are three, because the input keyboard pop-up way there are three, here according to each situation on its functional requirements to do a brief description:

The first is the general form:

(The picture is too beautiful, can't bear to look straight ...) ）

Functional Requirements:

1, only click the input box to eject the keyboard;

2, keyboard out of simple animation and click the keyboard button simple animation;

3, input box real-time display keyboard input, you can delete the input content;

4. Click the OK button, or click on the keyboard, except the input box and the keyboard to disappear the simple animation.

Sometimes, the keyboard bounce out will block the input box, looking a bit uncomfortable, so we can be the following scenario:

Functional Requirements:

1, compared with the previous one, in fact, it is changing the keyboard pop-up, in fact, has not changed, is to let the original fixed background map also follow together.

However, this display scheme is not enough, if the input box in the location of the comparison, then the background map when moving up, it is possible to see the input box. So, the problem comes, learn excavator ... Keyboard pop-up scheme which strong? (Typing is smooth.) ~), presumably most people know, to see the last kind of display:

Functional Requirements:

1, compared to the front, into a full-screen input, add a shadow layer and input box.

Ps:1, add, the keyboard to fit the size of the screen.

2. We can change the button picture on the keyboard to a picture with the elements of our own game.

Next, take a look at the approximate implementation of the code:

Browse the head file first:

#ifndef _color_edit_h_#define _color_edit_h_#include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; Using_ns_cc_ext;enum edittype{edittype_no = 0,edit_number,edit_alphabet,edit_pinyin};enum EditLocation{ Editlocation_no = 0,location_down,location_nature,location_screen};enum Keybtn{key_num_0 = 0,Key_Num_1,Key_Num_2, Key_num_3,key_num_4,key_num_5,key_num_6,key_num_7,key_num_8,key_num_9,key_delete,key_sure};class ColorEdit: public Cocos2d::layer{public:~coloredit (); Coloredit (); Static Coloredit * Create (const Size & size, const char * bgfile,node * parent,editlocation editlocation,e Dittype edittype = edit_number); static Coloredit * Create (const Size & size,scale9sprite * Pbgsprite,node * Parent,edi Tlocation editlocation,edittype edittype = edit_number); bool Myinit (Scale9sprite * Pbgsprite,node * parent,EditLocation Editlocation,edittype edittype);p rotected:virtual bool Ontouchbegan (touch* Touch, event* pevent); void Onnumbtncallback (ref * obj); void Onfunbtncallback (ref * obj); int GetmAxzorder (node * node), void Moveaction (bool isshow), void UpdateText ();p rivate:scale9sprite * M_PEDITBG; Sprite * M_pkeyboard; EditType M_edittype; Editlocation m_editlocation; Sprite * M_KEYBG; Node * M_ptarget;bool m_iskeyshow;std::string m_text;}; #endif

Take a closer look at the implementation section:

Initialize First:

BOOL Coloredit::myinit (Scale9sprite * pbgsprite,node * parent,editlocation editlocation,edittype EditType) {if (! Layer::init ()) {return false;} M_PEDITBG = Pbgsprite;m_ptarget = Parent;m_editlocation = Editlocation;m_edittype = Edittype;this->addchild (m_ PEDITBG); Auto centersize = M_peditbg->getcontentsize ();//This is to set the size of the rectangle in the middle of the nine, because we want to display the input content on top, otherwise it will look messy m_ Peditbg->setcapinsets (Rect (0,0,centersize.width * 0.9,centersize.height * 0.9)); Auto Plabel = Label::createwithttf ("", "Fonts/marker Felt.ttf", Centersize.height * 0.75);p Label->setcolor (color3b::white);p label-> Setanchorpoint (VEC2 (0,0.5));p Label->settag (103);p label->setposition (VEC2 (centersize.width * 0.08, Centersize.height * 0.5)); M_peditbg->addchild (plabel,2);//If the full-screen display type if (m_editlocation = = Location_screen) {// Add a shadow layer, first hide auto Keylayer = Layercolor::create (color4b (0,0,0,100)); Keylayer->setposition (Point::zero); keyLayer- >settag (+); M_ptarget->addchild (Keylayer,this->getmaxzorder (parent) + 2);keylayer->SetVisible (false);//Add the upper input box Auto KEY_BIGBG = scale9sprite::create ("coloredit/key_bigbg.png");key_bigbg-> Setcontentsize (Size (Director::getinstance ()->getwinsize (). Width,key_bigbg->getcontentsize (). height)); key _bigbg->settag (101); Key_bigbg->setanchorpoint (VEC2 (0.5,0)); auto upsize = Key_bigbg->getcontentsize (); key _bigbg->setposition (VEC2 (M_ptarget->getcontentsize (). Width/2,m_ptarget->getcontentsize (). height)); m_ Ptarget->addchild (Key_bigbg,this->getmaxzorder (parent) + 2);//Set the rectangle key_bigbg->setcapinsets (rect) in the middle of the nine diagram ( 0,0,upsize.width * 0.9,upsize.height * 0.9)); Auto label_up = Label::createwithttf ("", "Fonts/marker Felt.ttf", Upsize.height * 0.75); Label_up->setcolor (color3b::white); Label_up->setanchorpoint (VEC2 (0,0.5)); label_up- >settag (102); Label_up->setposition (VEC2 (Upsize.width * 0.08,upsize.height/2)); Key_bigbg->addchild (label _UP);} M_KEYBG = Sprite::create ("Coloredit/key_bg.png"); M_keybg->setanchorpoint (VEC2 (0.5,1)); M_keybg->setposition (VEC2 (m_ptarget->getcontentsize () width/2,0)) M_ptarget->addchild (M_keybg,this->getmaxzorder ( Parent) + 2), auto bgsize = M_keybg->getcontentsize (), Auto Pmenu = Menu::create ();p menu->setposition (Vec2::zero); M_keybg->addchild (Pmenu); if (M_edittype = = Edit_number)//Add numeric keypad {for (int i = 0; i < 2; i++) {for (int j = 0; J < 5 ; J + +) {Auto Numsprnor = sprite::create (__string::createwithformat ("Coloredit/num_%d.png", I * 5 + j)->getcstring ()); Auto Numsprsel = sprite::create (__string::createwithformat ("Coloredit/num_%d.png", I * 5 + j)->getcstring ()); auto NUMBTN = Menuitemsprite::create (Numsprnor,numsprsel,cc_callback_1 (coloredit::onnumbtncallback,this));numBtn->  Settag (Key_num_0 + i * 5 + j); Numbtn->setposition (VEC2 (BGSIZE.WIDTH/10 * (J * 2 + 1), BGSIZE.HEIGHT/6 * ((3-i) * 2 -1));p Menu->addchild (NUMBTN);}} Auto Delsprnor = sprite::create ("coloredit/btn_del.png"); auto Delsprsel = Sprite::create ("Coloredit/btn_del.png"); Auto DELBTN = Menuitemsprite::creAte (Delsprnor,delsprsel,cc_callback_1 (coloredit::onfunbtncallback,this));d Elbtn->settag (Key_Delete);d elbtn- >setposition (VEC2 (BGSIZE.WIDTH/4-15,BGSIZE.HEIGHT/6));p menu->addchild (DELBTN); auto Suresprnor = Sprite:: Create ("Coloredit/btn_sure.png"); auto Suresprsel = Sprite::create ("coloredit/btn_sure.png"); Auto surebtn = Menuitemsprite::create (Suresprnor,suresprsel,cc_callback_1 (coloredit::onfunbtncallback,this));sureBtn-> Settag (Key_sure), Surebtn->setposition (VEC2 (BGSIZE.WIDTH/4 * 3 + 15,BGSIZE.HEIGHT/6));p Menu->addchild (sureBtn );} else if (M_edittype = = Edit_alphabet)//And number almost, a few more buttons {}else if (M_edittype = = Edit_pinyin)//This if implemented, it becomes the input method, Let's call the system. {}//Simple brute force screen is adaptable to auto rate_x = Director::getinstance ()->getwinsize (). Width/bgsize.width;m_keybg->setscalex (Rate _x); Auto Listenert = Eventlistenertouchonebyone::create (); Listenert->ontouchbegan = Cc_callback_2 (ColorEdit::o Ntouchbegan,this); Listenert->setswallowtouches (false);D irector::getinstance ()->geteVentdispatcher ()->addeventlistenerwithscenegraphpriority (listenert,this); return true;} 

Then the implementation of the touch function:

BOOL Coloredit::ontouchbegan (touch* Touch, event* pevent) {Auto TouchPoint = touch->getlocation ();//If it is a full-screen display type, And the keyboard has popped if (m_editlocation = = Location_screen && m_iskeyshow) {Auto Key_upedit = (Scale9sprite *) m_ptarget-> Getchildbytag (101);//If you click elsewhere in the top-level input box and the keyboard, the keyboard disappears if (!m_keybg->getboundingbox (). Containspoint (TouchPoint) & &!key_upedit->getboundingbox (). Containspoint (TouchPoint)) {this->moveaction (false); return true;} return false;} Convert the touch point to the coordinates under the current sub-layer TouchPoint = This->converttonodespace (TouchPoint); if (!m_peditbg->getboundingbox (). Containspoint (TouchPoint)) {if (m_iskeyshow) {if (!m_keybg->getboundingbox (). Containspoint (VEC2 (touch-> GetLocation (). X,touch->getlocation (). Y-(M_editlocation = = Location_down? 1:0) * M_keybg->getcontentsize (). Height)) {this->moveaction (false);}} return false;} If the input box is clicked and the keyboard does not eject if (!m_iskeyshow) {this->updatetext (); This->moveaction (true);} return true;}

Here's a place to be aware of:

if (!m_keybg->getboundingbox (). Containspoint (VEC2 (Touch->getlocation (). X,touch->getlocation (). Y-(m_ Editlocation = = Location_down? 1:0) * M_keybg->getcontentsize ())) {this->moveaction (false);}

When the keyboard pop-up is the second, because the background image moved up a distance, touch->getlocation () The Y coordinate to make a change, otherwise getboundingbox judgment is not correct.

Take a look at the response function for keyboard clicks:

void Coloredit::onnumbtncallback (REF * obj) {int tag = ((Node *) obj)->gettag ();//Click the button's simple animation ((Menuitemsprite *) obj)- >runaction (Sequence::create (Scaleto::create (0.1,10/8.0), Scaleto::create (0.1,1), NULL)); Char temp[3];sprintf ( Temp, "%d", tag), M_text + = temp;//Update content this->updatetext (); Log ("Keyboard------->%d", tag);} void Coloredit::onfunbtncallback (REF * obj) {((Menuitemsprite *) obj)->runaction (sequence::create (scaleto::create (0.1,10/8.0), Scaleto::create (0.1,1), NULL)), if ((Node *) obj)->gettag () = = Key_sure) {this->moveaction (false);} Else{auto n = m_text.size (), if (n > 0) {m_text = M_text.substr (0,n-1);} This->updatetext ();}}

followed by the advent and disappearance of the keyboard:

void Coloredit::moveaction (bool isshow) {if (m_editlocation = = Location_screen) {Auto Keylayer = (Layercolor *) m_ptarget- >getchildbytag (+), auto Key_upedit = (Scale9sprite *) M_ptarget->getchildbytag (101); Keylayer->setvisible ( Isshow) key_upedit->runaction (moveby::create (0.35,vec2 (0, Isshow -1:1) * key_upedit->getcontentsize (). height)); M_keybg->runaction (Moveby::create (0.35,vec2 (0, (isshow? 1:-1) * m_keybg->getcontentsize (). Height)) );} else if (m_editlocation = = Location_down) {director::getinstance ()->getrunningscene ()->runaction (MoveBy:: Create (0.35,VEC2 (0, (isshow 1:-1) * m_keybg->getcontentsize (). height)));} else if (m_editlocation = = location_nature) {m_keybg->runaction (moveby::create (0.35,vec2 (0), (isshow 1:-1) * m_ Keybg->getcontentsize ())));} M_iskeyshow = Isshow;if (!isshow) {m_text = "";}}

The rest of the other functions:

Gets the maximum Zorderint coloredit::getmaxzorder (node * node) {int zorder =-1; Vector<node *> Nodevec = Node->getchildren (); for (auto Node:nodevec) {int temp = Node->getlocalzorder (); if (t EMP > ZOrder) {zorder = temp;}} Log ("Children ' s Max ZOrder is%d", zorder); return zorder;} void Coloredit::updatetext () {if (m_editlocation = = Location_screen) {(Label *) ((Scale9sprite *) (m_ptarget-> Getchildbytag (101)))->getchildbytag (102))->setstring (M_text);} else{(Label *) (M_peditbg->getchildbytag (103))->setstring (M_text);}}

At the end of the day, we just need a few lines of code to use.

Auto Coloredit = Coloredit::create (Size (250,40), "Coloredit/input_box.png", this,location_nature);
Coloredit->setposition (VEC2 (BGSIZE.WIDTH/2,BGSIZE.HEIGHT/2));
Bg->addchild (Coloredit);
To here basically finished, write bad place also please forgive me.

Resource Download: http://download.csdn.net/detail/sharing_li/8398363

The design of COCOS2DX color edit input Box