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

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

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

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

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

 #ifndef __MyGame__RegisterHandleLayer__
 #define __MyGame__RegisterHandleLayer__

 #include <iostream>
 #include "cocos2d.h"
 #include "cocos-ext.h"
 using namespace cocos2d;
 USING_NS_CC_EXT;

 class RegisterHandleLayer:public CCLayer,public CCEditBoxDelegate{
 private:
     CCEditBox * editBoxUsername;//用户名
     CCEditBox * editBoxPassword;//密码
     CCEditBox * editBoxRePassword;//重复密码
     void addEditBox(CCEditBox * editBox,CCPoint editPoint, char * defaultValue,bool isPassword);//添加输入框
     bool checkInput();//输入验证
     void toGameScene();//跳转到游戏场景
     void toLoginScene();//跳转到登录场景

 public:
     virtual bool init();
     CREATE_FUNC(RegisterHandleLayer);
     virtual void editBoxEditingDidBegin(extension::CCEditBox* editBox);
     virtual void editBoxEditingDidEnd(extension::CCEditBox* editBox);
     virtual void editBoxTextChanged(extension::CCEditBox* editBox, const std::string& text);
     virtual void editBoxReturn(extension::CCEditBox* editBox);
 };
 #endif /* defined(__MyGame__RegisterHandleLayer__) */

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

 //键盘弹出后输入框获得焦点时触发
 void RegisterHandleLayer::editBoxEditingDidBegin(extension::CCEditBox *editBox)
 {
     CCLog("begin");
 }

 //键盘隐藏后输入框失去焦点时触发
 void RegisterHandleLayer::editBoxEditingDidEnd(extension::CCEditBox *editBox)
 {
     CCLog("end");
 }

 //输入框内文本变化时触发
 void RegisterHandleLayer::editBoxTextChanged(extension::CCEditBox *editBox, const std::string &text)
 {
     CCLog("change");
 }

 //按下返回键或点击键盘外的位置时触发（点击当前输入框时不触发）
 void RegisterHandleLayer::editBoxReturn(extension::CCEditBox *editBox)
 {
     CCLog("return");
 }

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

 /*
  * 功能 ： 向场景中添加输入框并设置相应属性
  *
  *      editBox : 输入框
  *    editPoint : 位置
  * defaultValue : 缺省文本
  *   isPassword : true-密码，false-非密码
 */
 void RegisterHandleLayer::addEditBox(CCEditBox * editBox,CCPoint editPoint, char * defaultValue,bool isPassword)
 {
     editBox->CCNode::setPosition(editPoint.x,editPoint.y); //位置
     editBox->setFontColor(ccWHITE); //文字颜色
     editBox->setPlaceHolder(defaultValue); //输入框缺省文字
     editBox->setPlaceholderFontColor(ccWHITE); //缺省文字颜色
     editBox->setMaxLength(); //最大长度
     editBox->setReturnType(kKeyboardReturnTypeDone); //默认使用键盘return类型为Done
     editBox->setInputMode(kEditBoxInputModeEmailAddr); //输入键盘模式
     if (isPassword) {
         editBox->setInputFlag(kEditBoxInputFlagPassword); //输入密码时的替代符
     }
     editBox->setDelegate(this); //设置委托代理对象为当前类

     this->addChild(editBox);
 }

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

各参数的原始定义如下：

 enum KeyboardReturnType {
     kKeyboardReturnTypeDefault = ,
     kKeyboardReturnTypeDone,
     kKeyboardReturnTypeSend,
     kKeyboardReturnTypeSearch,
     kKeyboardReturnTypeGo
 };

 /**
  * \brief The EditBoxInputMode defines the type of text that the user is allowed
  * to enter.
  */
 enum EditBoxInputMode
 {
     /**
      * The user is allowed to enter any text, including line breaks.
      */
     kEditBoxInputModeAny = ,

     /**
      * The user is allowed to enter an e-mail address.
      */
     kEditBoxInputModeEmailAddr,

     /**
      * The user is allowed to enter an integer value.
      */
     kEditBoxInputModeNumeric,

     /**
      * The user is allowed to enter a phone number.
      */
     kEditBoxInputModePhoneNumber,

     /**
      * The user is allowed to enter a URL.
      */
     kEditBoxInputModeUrl,

     /**
      * The user is allowed to enter a real number value.
      * This extends kEditBoxInputModeNumeric by allowing a decimal point.
      */
     kEditBoxInputModeDecimal,

     /**
      * The user is allowed to enter any text, except for line breaks.
      */
     kEditBoxInputModeSingleLine
 };

 /**
  * \brief The EditBoxInputFlag defines how the input text is displayed/formatted.
  */
 enum EditBoxInputFlag
 {
     /**
      * Indicates that the text entered is confidential data that should be
      * obscured whenever possible. This implies EDIT_BOX_INPUT_FLAG_SENSITIVE.
      */
     kEditBoxInputFlagPassword = ,

     /**
      * Indicates that the text entered is sensitive data that the
      * implementation must never store into a dictionary or table for use
      * in predictive, auto-completing, or other accelerated input schemes.
      * A credit card number is an example of sensitive data.
      */
     kEditBoxInputFlagSensitive,

     /**
      * This flag is a hint to the implementation that during text editing,
      * the initial letter of each word should be capitalized.
      */
     kEditBoxInputFlagInitialCapsWord,

     /**
      * This flag is a hint to the implementation that during text editing,
      * the initial letter of each sentence should be capitalized.
      */
     kEditBoxInputFlagInitialCapsSentence,

     /**
      * Capitalize all characters automatically.
      */
     kEditBoxInputFlagInitialCapsAllCharacters

 };

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

 bool RegisterHandleLayer::init()
 {
     if (!CCLayer::init()) {
         return false;
     }

     //精灵帧缓存
     CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();
     sfCache->addSpriteFramesWithFile("p_register.plist");

     //屏幕尺寸
     CCSize size = CCDirector::sharedDirector()->getWinSize();

     //注册框
     CCSpriteFrame * f_register_box = sfCache->spriteFrameByName("register.png");
     CCSprite * spriteBox = CCSprite::createWithSpriteFrame(f_register_box);
     spriteBox->setPosition(CCPointMake(size.width/, size.height/));
     this->addChild(spriteBox);

     //注册框尺寸
     CCSize boxSize = spriteBox->getContentSize();

     //用户名
     CCSpriteFrame * f_register_username = sfCache->spriteFrameByName("username.png");
     CCSprite * spriteUsername = CCSprite::createWithSpriteFrame(f_register_username);
     CCSize spriteUsernameSize = spriteUsername->getContentSize();
     CCSize editSize = CCSizeMake(spriteUsernameSize.width*/, spriteUsernameSize.height);
     CCPoint spriteUsernamePoint = CCPointMake(size.width/, size.height/+spriteUsernameSize.height*/);
     spriteUsername->setPosition(spriteUsernamePoint);
     this->addChild(spriteUsername);

     //密码
     CCSpriteFrame * f_register_password = sfCache->spriteFrameByName("password.png");
     CCSprite * spritePassword = CCSprite::createWithSpriteFrame(f_register_password);
     CCPoint spritePasswordPoint = CCPointMake(size.width/, size.height/+spriteUsernameSize.height/);
     spritePassword->setPosition(spritePasswordPoint);
     this->addChild(spritePassword);

     //重复密码
     CCSpriteFrame * f_register_repassword = sfCache->spriteFrameByName("password.png");
     CCSprite * spriteRePassword = CCSprite::createWithSpriteFrame(f_register_repassword);
     CCPoint spriteRePasswordPoint = CCPointMake(size.width/, size.height/-spriteUsernameSize.height*/);
     spriteRePassword->setPosition(spriteRePasswordPoint);
     this->addChild(spriteRePassword);

     //添加输入框
     editBoxUsername = CCEditBox::create(editSize, CCScale9Sprite::create());
     addEditBox(editBoxUsername, spriteUsernamePoint, "输入账号",false);
     editBoxPassword = CCEditBox::create(editSize, CCScale9Sprite::create());
     addEditBox(editBoxPassword, spritePasswordPoint, "创建密码",true);
     editBoxRePassword = CCEditBox::create(editSize, CCScale9Sprite::create());
     addEditBox(editBoxRePassword, spriteRePasswordPoint, "重复密码",true);

     //注册按钮
     CCSpriteFrame * f_register_btn_register = sfCache->spriteFrameByName("btn_register_normal.png");
     CCSprite * sprite_register_btn_register = CCSprite::createWithSpriteFrame(f_register_btn_register);

     CCSpriteFrame * f_register_btn_register_select = sfCache->spriteFrameByName("btn_register_select.png");
     CCSprite * sprite_register_btn_register_select = CCSprite::createWithSpriteFrame(f_register_btn_register_select);

     CCMenuItemSprite * itemRegister = CCMenuItemSprite::create(
                                         sprite_register_btn_register, 
                                         sprite_register_btn_register_select,                    
                                         this, 
                                         menu_selector(RegisterHandleLayer::toGameScene));
     CCSize registerBthSize = itemRegister->getContentSize();
     itemRegister->setPosition(CCPointMake(size.width/-boxSize.width/, 
                                             size.height/ - boxSize.height/ + registerBthSize.height*));

     //已有账号登录按钮
     CCSpriteFrame * f_register_btn_login = sfCache->spriteFrameByName("btn_register_login_normal.png");
     CCSprite * sprite_register_btn_login = CCSprite::createWithSpriteFrame(f_register_btn_login);

     CCSpriteFrame * f_register_btn_login_select = sfCache->spriteFrameByName("btn_register_login_select.png");
     CCSprite * sprite_register_btn_login_select = CCSprite::createWithSpriteFrame(f_register_btn_login_select);

     CCMenuItemSprite * itemLogin = CCMenuItemSprite::create(
                                      sprite_register_btn_login, 
                                      sprite_register_btn_login_select,  
                                      this, 
                                      menu_selector(RegisterHandleLayer::toLoginScene));
     CCSize loginBthSize = itemLogin->getContentSize();
     itemLogin->setPosition(CCPointMake(size.width/+boxSize.width/, 
                                          size.height/ - boxSize.height/ + loginBthSize.height*));

     //按钮菜单
     CCMenu * menu = CCMenu::create(itemRegister,itemLogin,NULL);
     menu->setPosition(CCPointZero);
     this->addChild(menu);

     return true;
 }

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