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

我们在开始玩一个游戏时，通常要做的第一件事就是注册账号，下面就让我们来制作一个简单的注册场景，我所使用的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类型为Done

17     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 allowed

12  * to enter.

13  */

14 enum EditBoxInputMode

15 {

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     kEditBoxInputModeSingleLine

51 };

52 

53 /**

54  * \brief The EditBoxInputFlag defines how the input text is displayed/formatted.

55  */

56 enum EditBoxInputFlag

57 {

58     /**

59      * Indicates that the text entered is confidential data that should be

60      * 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 the

66      * implementation must never store into a dictionary or table for use

67      * 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     kEditBoxInputFlagInitialCapsAllCharacters

88 

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 }

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