首页 > 代码库 > cocos2dx注册场景 使用CCEditBox实现输入框

cocos2dx注册场景 使用CCEditBox实现输入框

2024-07-24 18:36:51   211人阅读

我们在开始玩一个游戏时，通常要做的第一件事就是注册账号，下面就让我们来制作一个简单的注册场景，我所使用的cocos2dx版本为2.2.2

在这个场景中最主要的元素就是输入框和按钮，我从网上找了一些素材（也有自己P的），样子不太好看，但是最终的效果都是一样的。

在这个场景中，元素的摆放和按钮的功能都比较简单，唯一有些困难的就是输入框。在cocos2dx2.2.2中输入框可以使用CCTextFieldTTF和CCEditBox来实现，我们这里使用的是CCEditBox。

下面我们先来看看这个注册场景操作层的头文件

 1 #ifndef __MyGame__RegisterHandleLayer__ 2 #define __MyGame__RegisterHandleLayer__ 3  4 #include <iostream> 5 #include "cocos2d.h" 6 #include "cocos-ext.h" 7 using namespace cocos2d; 8 USING_NS_CC_EXT; 9 10 class RegisterHandleLayer:public CCLayer,public CCEditBoxDelegate{11 private:12     CCEditBox * editBoxUsername;//用户名13     CCEditBox * editBoxPassword;//密码14     CCEditBox * editBoxRePassword;//重复密码15     void addEditBox(CCEditBox * editBox,CCPoint editPoint, char * defaultValue,bool isPassword);//添加输入框    16     bool checkInput();//输入验证17     void toGameScene();//跳转到游戏场景18     void toLoginScene();//跳转到登录场景19     20 public:21     virtual bool init();22     CREATE_FUNC(RegisterHandleLayer);23     virtual void editBoxEditingDidBegin(extension::CCEditBox* editBox);24     virtual void editBoxEditingDidEnd(extension::CCEditBox* editBox);25     virtual void editBoxTextChanged(extension::CCEditBox* editBox, const std::string& text);26     virtual void editBoxReturn(extension::CCEditBox* editBox);27 };28 #endif /* defined(__MyGame__RegisterHandleLayer__) */

使用CCEditBox需要引入扩展库extension，我们引入头文件 "cocos-ext.h"，再引入命名空间，可以使用“using namespace extension”或宏定义“USING_NS_CC_EXT”，同时，还需要继承CCEditBoxDelegate。在该类中，我们定义了3个输入框，用户名、密码和重复密码，及设置输入框的方法。最后的4个虚函数是CCEditBoxDelegate中定义的，我们对输入框的不同操作会触发相应的方法，我们这里不会用到，但是可以通过日志查看各方法的触发时机，各方法的触发时机如下：

 1 //键盘弹出后输入框获得焦点时触发 2 void RegisterHandleLayer::editBoxEditingDidBegin(extension::CCEditBox *editBox) 3 { 4     CCLog("begin"); 5 } 6  7 //键盘隐藏后输入框失去焦点时触发 8 void RegisterHandleLayer::editBoxEditingDidEnd(extension::CCEditBox *editBox) 9 {10     CCLog("end");11 }12 13 //输入框内文本变化时触发14 void RegisterHandleLayer::editBoxTextChanged(extension::CCEditBox *editBox, const std::string &text)15 {16     CCLog("change");17 }18 19 //按下返回键或点击键盘外的位置时触发（点击当前输入框时不触发）20 void RegisterHandleLayer::editBoxReturn(extension::CCEditBox *editBox)21 {22     CCLog("return");23 }

下面我们来看看最关键的addEditBox方法，我们可以使用该方法设置输入框的不同属性

 1 /* 2  * 功能 ： 向场景中添加输入框并设置相应属性 3  * 4  *      editBox : 输入框   5  *    editPoint : 位置 6  * defaultValue : 缺省文本 7  *   isPassword : true-密码，false-非密码 8 */ 9 void RegisterHandleLayer::addEditBox(CCEditBox * editBox,CCPoint editPoint, char * defaultValue,bool isPassword)10 {11     editBox->CCNode::setPosition(editPoint.x,editPoint.y); //位置12     editBox->setFontColor(ccWHITE); //文字颜色13     editBox->setPlaceHolder(defaultValue); //输入框缺省文字14     editBox->setPlaceholderFontColor(ccWHITE); //缺省文字颜色15     editBox->setMaxLength(20); //最大长度16     editBox->setReturnType(kKeyboardReturnTypeDone); //默认使用键盘return类型为Done17     editBox->setInputMode(kEditBoxInputModeEmailAddr); //输入键盘模式18     if (isPassword) {19         editBox->setInputFlag(kEditBoxInputFlagPassword); //输入密码时的替代符20     }21     editBox->setDelegate(this); //设置委托代理对象为当前类22     23     this->addChild(editBox);24 }

相关属性还是比较好理解的，大家可以改变属性查看不同的效果。其中setReturnType、setInputMode、setInputFlag这3个方法的参数可能会有些疑问，但是我们可以在“CCEditBox.h”头文件中查看各参数的含义，也可以改变各参数，分别查看不同的效果。例如，我们这里对密码类型输入框的设置“editBox->setInputFlag(kEditBoxInputFlagPassword);”会得到如下效果：

各参数的原始定义如下：

 1 enum KeyboardReturnType { 2     kKeyboardReturnTypeDefault = 0, 3     kKeyboardReturnTypeDone, 4     kKeyboardReturnTypeSend, 5     kKeyboardReturnTypeSearch, 6     kKeyboardReturnTypeGo 7 }; 8  9 10 /**11  * \brief The EditBoxInputMode defines the type of text that the user is allowed12  * to enter.13  */14 enum EditBoxInputMode15 {16     /**17      * The user is allowed to enter any text, including line breaks.18      */19     kEditBoxInputModeAny = 0,20     21     /**22      * The user is allowed to enter an e-mail address.23      */24     kEditBoxInputModeEmailAddr,25 26     /**27      * The user is allowed to enter an integer value.28      */29     kEditBoxInputModeNumeric,30 31     /**32      * The user is allowed to enter a phone number.33      */34     kEditBoxInputModePhoneNumber,35 36     /**37      * The user is allowed to enter a URL.38      */39     kEditBoxInputModeUrl,40 41     /**42      * The user is allowed to enter a real number value.43      * This extends kEditBoxInputModeNumeric by allowing a decimal point.44      */45     kEditBoxInputModeDecimal,46 47     /**48      * The user is allowed to enter any text, except for line breaks.49      */50     kEditBoxInputModeSingleLine51 };52 53 /**54  * \brief The EditBoxInputFlag defines how the input text is displayed/formatted.55  */56 enum EditBoxInputFlag57 {58     /**59      * Indicates that the text entered is confidential data that should be60      * obscured whenever possible. This implies EDIT_BOX_INPUT_FLAG_SENSITIVE.61      */62     kEditBoxInputFlagPassword = 0,63 64     /**65      * Indicates that the text entered is sensitive data that the66      * implementation must never store into a dictionary or table for use67      * in predictive, auto-completing, or other accelerated input schemes.68      * A credit card number is an example of sensitive data.69      */70     kEditBoxInputFlagSensitive,71 72     /**73      * This flag is a hint to the implementation that during text editing,74      * the initial letter of each word should be capitalized.75      */76     kEditBoxInputFlagInitialCapsWord,77 78     /**79      * This flag is a hint to the implementation that during text editing,80      * the initial letter of each sentence should be capitalized.81      */82     kEditBoxInputFlagInitialCapsSentence,83 84     /**85      * Capitalize all characters automatically.86      */87     kEditBoxInputFlagInitialCapsAllCharacters88 89 };

在我们了解了CCEditBox的相关属性和用法后，就可以完成我们的注册场景了，注册场景操作层的init方法代码如下：

 1 bool RegisterHandleLayer::init() 2 { 3     if (!CCLayer::init()) { 4         return false; 5     } 6      7     //精灵帧缓存 8     CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache(); 9     sfCache->addSpriteFramesWithFile("p_register.plist");10     11     //屏幕尺寸12     CCSize size = CCDirector::sharedDirector()->getWinSize();13     14     //注册框15     CCSpriteFrame * f_register_box = sfCache->spriteFrameByName("register.png");16     CCSprite * spriteBox = CCSprite::createWithSpriteFrame(f_register_box);17     spriteBox->setPosition(CCPointMake(size.width/2, size.height/2));18     this->addChild(spriteBox);19     20     //注册框尺寸21     CCSize boxSize = spriteBox->getContentSize();22     23     //用户名24     CCSpriteFrame * f_register_username = sfCache->spriteFrameByName("username.png");25     CCSprite * spriteUsername = CCSprite::createWithSpriteFrame(f_register_username);26     CCSize spriteUsernameSize = spriteUsername->getContentSize();27     CCSize editSize = CCSizeMake(spriteUsernameSize.width*3/5, spriteUsernameSize.height);28     CCPoint spriteUsernamePoint = CCPointMake(size.width/2, size.height/2+spriteUsernameSize.height*11/6);29     spriteUsername->setPosition(spriteUsernamePoint);30     this->addChild(spriteUsername);31     32     //密码33     CCSpriteFrame * f_register_password = sfCache->spriteFrameByName("password.png");34     CCSprite * spritePassword = CCSprite::createWithSpriteFrame(f_register_password);35     CCPoint spritePasswordPoint = CCPointMake(size.width/2, size.height/2+spriteUsernameSize.height/2);36     spritePassword->setPosition(spritePasswordPoint);37     this->addChild(spritePassword);38     39     //重复密码40     CCSpriteFrame * f_register_repassword = sfCache->spriteFrameByName("password.png");41     CCSprite * spriteRePassword = CCSprite::createWithSpriteFrame(f_register_repassword);42     CCPoint spriteRePasswordPoint = CCPointMake(size.width/2, size.height/2-spriteUsernameSize.height*5/6);43     spriteRePassword->setPosition(spriteRePasswordPoint);44     this->addChild(spriteRePassword);45     46     //添加输入框47     editBoxUsername = CCEditBox::create(editSize, CCScale9Sprite::create());48     addEditBox(editBoxUsername, spriteUsernamePoint, "输入账号",false);49     editBoxPassword = CCEditBox::create(editSize, CCScale9Sprite::create());50     addEditBox(editBoxPassword, spritePasswordPoint, "创建密码",true);51     editBoxRePassword = CCEditBox::create(editSize, CCScale9Sprite::create());52     addEditBox(editBoxRePassword, spriteRePasswordPoint, "重复密码",true);53     54     //注册按钮55     CCSpriteFrame * f_register_btn_register = sfCache->spriteFrameByName("btn_register_normal.png");56     CCSprite * sprite_register_btn_register = CCSprite::createWithSpriteFrame(f_register_btn_register);57     58     CCSpriteFrame * f_register_btn_register_select = sfCache->spriteFrameByName("btn_register_select.png");59     CCSprite * sprite_register_btn_register_select = CCSprite::createWithSpriteFrame(f_register_btn_register_select);60     61     CCMenuItemSprite * itemRegister = CCMenuItemSprite::create(
                                         sprite_register_btn_register, 
                                         sprite_register_btn_register_select,                    
                                         this, 
                                         menu_selector(RegisterHandleLayer::toGameScene));62     CCSize registerBthSize = itemRegister->getContentSize();63     itemRegister->setPosition(CCPointMake(size.width/2-boxSize.width/4, 
                                             size.height/2 - boxSize.height/2 + registerBthSize.height*2));64     65     //已有账号登录按钮66     CCSpriteFrame * f_register_btn_login = sfCache->spriteFrameByName("btn_register_login_normal.png");67     CCSprite * sprite_register_btn_login = CCSprite::createWithSpriteFrame(f_register_btn_login);68     69     CCSpriteFrame * f_register_btn_login_select = sfCache->spriteFrameByName("btn_register_login_select.png");70     CCSprite * sprite_register_btn_login_select = CCSprite::createWithSpriteFrame(f_register_btn_login_select);71     72     CCMenuItemSprite * itemLogin = CCMenuItemSprite::create(
                                      sprite_register_btn_login, 
                                      sprite_register_btn_login_select,  
                                      this, 
                                      menu_selector(RegisterHandleLayer::toLoginScene));73     CCSize loginBthSize = itemLogin->getContentSize();74     itemLogin->setPosition(CCPointMake(size.width/2+boxSize.width/4, 
                                          size.height/2 - boxSize.height/2 + loginBthSize.height*2));75     76     //按钮菜单77     CCMenu * menu = CCMenu::create(itemRegister,itemLogin,NULL);78     menu->setPosition(CCPointZero);79     this->addChild(menu);80 81     return true;82 }

代码比较简单，我们的注册场景现在基本完成了，参数验证等其他功能我们会在后续文章中再做补充。

cocos2dx注册场景 使用CCEditBox实现输入框


联系
我们