[New Feature] CCEditBox support in cocos2d-x

[RogerLleida]

Hi James,

I have tested the EditBox and the text is not centered with the background image. See the attached image.
It seems to be and offset.

Now, my game runs with cocos2d-2.1beta3-x-2.1.0, and I have set the design resolution to 1280x800 and If I modify this resolution I can see the EditBox is modyfied too. Is there any problem with the new cocos2d-x version?

This is my code to create the edit box:

void SavedPlayer::createEditBox()
{
    CCSize visibleSize = CCEGLView::sharedOpenGLView()->getVisibleSize();
    CCPoint visibleOrigin = CCEGLView::sharedOpenGLView()->getVisibleOrigin();

    CCSize editBoxSize = CCSizeMake(100, 30);

    m_pEditName = CCEditBox::create(editBoxSize, CCScale9Sprite::create("green_edit.png"));
    m_pEditName->setAnchorPoint(ccp(0.5,0.5));
    m_pEditName->setContentSize(editBoxSize);
    m_pEditName->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));
    m_pEditName->setFontColor(ccRED);
    m_pEditName->setPlaceHolder("Name:");
    m_pEditName->setMaxLength(50);
    m_pEditName->setReturnType(kKeyboardReturnTypeDone);
    m_pEditName->setDelegate(this);
    configScreen->addChild(m_pEditName);

}

Another thing I have to say is that I’m working with cocosbuider and I have the next code to loand and display the sprites correctly with all platforms:

bool ConfigScreen::init()
{
    if (!CCScene::init())
        return false;

    this->setPosition(CCDirector::sharedDirector()->getVisibleOrigin());

    //config manager
    configManager = new ConfigManager(this);

    //ccbreader
    CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
    ccNodeLoaderLibrary->registerCCNodeLoader("SelectablePlayer", SelectablePlayerLoader::create(configManager));

    CCBReader * ccbReader = new CCBReader(ccNodeLoaderLibrary, this, NULL, NULL);
    CCNode* node = ccbReader->readNodeGraphFromFile("CCB/configScreen.ccbi", this,
                                                    CCDirector::sharedDirector()->getVisibleSize());
    ccbReader->release();
    addChild(node);

If I don’t set the position of the scene with the visible origin, the editBox is displayed ok but the cocosbuilder sprites are not.

Thanks.

[dumganhar]

Why the design resolution is 1280x800, but the size of editbox is 100x30 which seems too small.

roger solsona wrote:

Hi James,
>
I have tested the EditBox and the text is not centered with the background image. See the attached image.
It seems to be and offset.
>
Now, my game runs with cocos2d-2.1beta3-x-2.1.0, and I have set the design resolution to 1280x800 and If I modify this resolution I can see the EditBox is modyfied too. Is there any problem

with the new cocos2d-x version?
>

This is my code to create the edit box:
>
[…]
>
Another thing I have to say is that I’m working with cocosbuider and I have the next code to loand and display the sprites correctly with all platforms:
[…]
>
If I don’t set the position of the scene with the visible origin, the editBox is displayed ok but the cocosbuilder sprites are not.
>
>
Thanks.

[KovAlex]

Hi guys. How to add in my game CCEditBox? Can show an example? Thanks

[KovAlex]

oh sorry. I found the example extensions test in TestCPP

[silentk]

Apologies if this is a stupid question, but how do I remove the CCEditBox from the screen once I’ve entered the information I need? I’m entering a save game name, so once I’ve pressed ‘Done’ I want the text box to disappear again.

Using removeChild in editBoxReturn just crashes the app!

[chapay]

Hi James

I have some problem.
on the background placed several CCEditBoxes At the some time i added layer to the top with CCMenu which contains buttons on it and if button placed above CCEditbox they will not handle touches.

Thanks ))

[dumganhar]

Yes, the touch events will be passed to UITextField control on iOS. So just don’t put you CCMenuItem onto CCEditBox.

Chapay Developer wrote:

Hi James
>
I have some problem.
on the background placed several CCEditBoxes At the some time i added layer to the top with CCMenu which contains buttons on it and if button placed above CCEditbox they will not handle touches.
>
Thanks ))

[dumganhar]

Try to remove it at next frame by using a schedule.
James K wrote:

Apologies if this is a stupid question, but how do I remove the CCEditBox from the screen once I’ve entered the information I need? I’m entering a save game name, so once I’ve pressed ‘Done’ I want the text box to disappear again.
>
Using removeChild in editBoxReturn just crashes the app!

[chapay]

James K wrote:
> Yes, the touch events will be passed to UITextField control on iOS. So just don’t put you CCMenuItem onto CCEditBox.

Thanks for fast response like in paid support ))))

I found some solution please verify my code and may be it will helpful for you

class CCEditBoxImpl
……
CCEditBoxDelegate* getDelegate()
{

if(m_pEditBox && ( !m_pEditBox~~>isEnabled || !m_pEditBox~~>isTouchEnabled() || !m_pEditBox~~>isVisible ) )
{
return NULL;
}
return m_pDelegate;
};
……

EditBoxImplIOS.mm
~~ (BOOL)textFieldShouldBeginEditing:(UITextField )sender // return NO to disallow editing.
{
……
cocos2d::extension::CCEditBoxDelegate pDelegate = getEditBoxImplIOS()>getDelegate;
if
{
pDelegate>editBoxEditingDidBegin(getEditBoxImplIOS()->getCCEditBox());
return YES;
}
else
return FALSE;
……
}

Im very sorry
I did not describe this code:
If set edit box to enabled=false or toucheenabled=false edit box handle touches

My code fix this bug.

[silentk]

Thanks for the reply.

So if I have a schedule running I’ll set a flag to say it can be removed and remove in schedule update, do I use removeChild? Will give it a go anyway.

James Chen wrote:

Try to remove it at next frame by using a schedule.
James K wrote:
> Apologies if this is a stupid question, but how do I remove the CCEditBox from the screen once I’ve entered the information I need? I’m entering a save game name, so once I’ve pressed ‘Done’ I want the text box to disappear again.
>
> Using removeChild in editBoxReturn just crashes the app!

[RogerLleida]

Hi,

I’m trying to change the place holder font color with m_pEditName->setPlaceholderFontColor(ccBLACK); and it seems not working.
I cannot change the color in test project neither.

Is someone able to change it?

Thanks

[timpark]

Well, when I look in CCEditBoxImplIOS.mm (and CCEditBoxImplMac.mm), setPlaceholderFontColor contains:
// TODO need to be implemented.

A “quick fix” (all I have time for right now, sorry), if you don’t mind all your placeholder text being the same colour, would be to add this under editingRectForBounds in CCEditBoxImplIOS.mm. (I’ve only tried/tested on iOS)

- (void) drawPlaceholderInRect:(CGRect)rect {
    [[UIColor colorWithRed:0.5f green:0.5f blue:0.5f alpha:1.0f] setFill]; // put your own colour here
    [[self placeholder] drawInRect:rect withFont:[UIFont systemFontOfSize:[[self font] pointSize]]];
}

[gcastaldi]

Hi,
yesterday I migrated to cocos2d-2.1beta3-x-2.1.1 to use CCEditBox (I had one problem with CCTextFieldTTF http://www.cocos2d-x.org/boards/6/topics/23563). Now I’ve the following problem with CCEditBox in iOS: the text input isn’t over the CCControlButton (you can see the image below) and after that the cclayer that contains it has been removed the text input remains always in the screen.
Here is my code (I started from the TextCpp example) :

    cocos2d::CCSize editBoxSize = cocos2d::CCSize(300, 30);
    m_nameText = cocos2d::extension::CCEditBox::create(editBoxSize,
                                                       cocos2d::extension::CCScale9Sprite::create("orange_edit.png"));
    m_nameText->setFontColor(cocos2d::ccc3(255,250,9));
    m_nameText->setPlaceHolder("");
    m_nameText->setMaxLength(kNumMaxOfCharsInName);
    m_nameText->setInputMode(cocos2d::extension::kEditBoxInputModeSingleLine);
    m_nameText->setReturnType(cocos2d::extension::kKeyboardReturnTypeDone);
    m_nameText->setDelegate(this);
    if (s_lastInsteredUserName != NULL) {
      m_nameText->setText(s_lastInsteredUserName->getCString());
    }
    m_nameText->setPosition(cocos2d::CCPoint(getContentSize().width / 2, getContentSize().height - rowSize * currentRowFromTop));
    addChild(m_nameText);

Thanks for the help.

Giannandrea

James Chen wrote:

Hey all, CCEditBox has been supported in the latest cocos2d-x codes on github(https://github.com/cocos2d/cocos2d-x).
CCEditBox is a wrapper of system edit control. It’s the subclass of CCControlButton. The usage of CCEditBox is very easy since you only need a few lines of code as bellow.
[…]
>

>

For more details, you should refer to ExtensionsTest/EditBoxTest.
It only supports IOS and Android now, but we will make it support other platforms as soon as possible.
>
Any suggestions will be appreciated.

[dumganhar]

Which layer was your m_nameText added to ? Was the layer’s original point at ccp(0, 0) ?

Giannandrea Castaldi wrote:

Hi,
yesterday I migrated to cocos2d-2.1beta3-x-2.1.1 to use CCEditBox (I had one problem with CCTextFieldTTF http://www.cocos2d-x.org/boards/6/topics/23563). Now I’ve the following problem with CCEditBox in iOS: the text input isn’t over the CCControlButton (you can see the image below) and after that the cclayer that contains it has been removed the text input remains always in the screen.
Here is my code (I started from the TextCpp example) :
>
[…]
>
Thanks for the help.
>
Giannandrea
>

>
>

James Chen wrote:
> Hey all, CCEditBox has been supported in the latest cocos2d-x codes on github(https://github.com/cocos2d/cocos2d-x).
> CCEditBox is a wrapper of system edit control. It’s the subclass of CCControlButton. The usage of CCEditBox is very easy since you only need a few lines of code as bellow.
> […]
>
>
>
>
> For more details, you should refer to ExtensionsTest/EditBoxTest.
> It only supports IOS and Android now, but we will make it support other platforms as soon as possible.
>
> Any suggestions will be appreciated.

[gcastaldi]

Fine, you have found out my problem :). I had the CCEditBox in a CCLayerColor with a content size smaller than the screen and that I set in the middle of the screen (it should seem a dialog). Now I’ve solved the problem adding a parent CCLayer for both the CCLayerColor and the CCEditBox.
Thanks for the help.
Now I’ve another problem. After I remove my dialog (the CClayer with added the CCLayerColor and the CCEditBox) in the screen remains the UITextfield, and it remains until I stop the process.
Any suggestion?

Giannandrea

James Chen wrote:

Which layer was your m_nameText added to ? Was the layer’s original point at ccp(0, 0) ?
>
Giannandrea Castaldi wrote:
> Hi,
> yesterday I migrated to cocos2d-2.1beta3-x-2.1.1 to use CCEditBox (I had one problem with CCTextFieldTTF http://www.cocos2d-x.org/boards/6/topics/23563). Now I’ve the following problem with CCEditBox in iOS: the text input isn’t over the CCControlButton (you can see the image below) and after that the cclayer that contains it has been removed the text input remains always in the screen.
> Here is my code (I started from the TextCpp example) :
>
> […]
>
> Thanks for the help.
>
> Giannandrea
>
>
>
>
> James Chen wrote:
> > Hey all, CCEditBox has been supported in the latest cocos2d-x codes on github(https://github.com/cocos2d/cocos2d-x).
> > CCEditBox is a wrapper of system edit control. It’s the subclass of CCControlButton. The usage of CCEditBox is very easy since you only need a few lines of code as bellow.
> > […]
> >
> >
> >
> >
> > For more details, you should refer to ExtensionsTest/EditBoxTest.
> > It only supports IOS and Android now, but we will make it support other platforms as soon as possible.
> >
> > Any suggestions will be appreciated.

[RogerLleida]

Tim Park wrote:

Well, when I look in CCEditBoxImplIOS.mm (and CCEditBoxImplMac.mm), setPlaceholderFontColor contains:
// TODO need to be implemented.
>
A “quick fix” (all I have time for right now, sorry), if you don’t mind all your placeholder text being the same colour, would be to add this under editingRectForBounds in CCEditBoxImplIOS.mm. (I’ve only tried/tested on iOS)
>
[…]

Well, all I need is to initialize the placeHolder color to black. I don’t see where I have to put this code because I don’t see the “editingRectForBounds” in CCEditBoxImplIOS.mm.
So, I would like to know where can I change the initial placeHolder color (gray), and change it to black because it will be black allways.

Thanks.

[timpark]

roger solsona wrote:

Well, all I need is to initialize the placeHolder color to black. I don’t see where I have to put this code because I don’t see the “editingRectForBounds” in CCEditBoxImplIOS.mm.
So, I would like to know where can I change the initial placeHolder color (gray), and change it to black because it will be black allways.

Ah. Does your version of cocos2d-x have “@implementation CustomUITextField” in that file? Place it after that.

[RogerLleida]

Yes! that works! I had to put your code at EditBoxImplIOS.mm file. Thanks!
My game is running on Android devices too. Do you have any idea to make it work like this in Android?

[gcastaldi]

Hi,
I’m trying to solve the problem of the UITextfield that remains on the screen. I’ve found out that my CCEditBox is not released. I don’t know why but when is called editBoxEditingDidBegin the release count is correctly 2 but when is called editBoxTextChanged it’s 3. Between these two calls I haven’t used the CCEditBox.
Any suggestion?

Giannandrea

void ZDialogToRequestUserName::editBoxEditingDidBegin(cocos2d::extension::CCEditBox* editBox)
{
cocos2d::CCLog(“editBox p DidBegin !", editBox);
cocos2d::CCLog(“3:m_nameText->retainCount(): u”, m_nameText~~>retainCount);
}
void ZDialogToRequestUserName::editBoxEditingDidEnd
{
cocos2d::CCLog;
cocos2d::CCLog: u”, m_nameText->retainCount());
}

void ZDialogToRequestUserName::editBoxTextChanged(cocos2d::extension::CCEditBox* editBox, const std::string& text)
{
cocos2d::CCLog("editBox p TextChanged, text: s ", editBox, text.c_str());
cocos2d::CCLog(“3:m_nameText->retainCount(): u”, m_nameText~~>retainCount());
}

Giannandrea Castaldi wrote:

Fine, you have found out my problem :). I had the CCEditBox in a CCLayerColor with a content size smaller than the screen and that I set in the middle of the screen (it should seem a dialog). Now I’ve solved the problem adding a parent CCLayer for both the CCLayerColor and the CCEditBox.
Thanks for the help.
Now I’ve another problem. After I remove my dialog (the CClayer with added the CCLayerColor and the CCEditBox) in the screen remains the UITextfield, and it remains until I stop the process.
Any suggestion?
>
Giannandrea
>
James Chen wrote:
> Which layer was your m_nameText added to ? Was the layer’s original point at ccp(0, 0) ?
>
> Giannandrea Castaldi wrote:
> > Hi,
> > yesterday I migrated to cocos2d-2.1beta3-x-2.1.1 to use CCEditBox (I had one problem with CCTextFieldTTF http://www.cocos2d-x.org/boards/6/topics/23563). Now I’ve the following problem with CCEditBox in iOS: the text input isn’t over the CCControlButton (you can see the image below) and after that the cclayer that contains it has been removed the text input remains always in the screen.
> > Here is my code (I started from the TextCpp example) :
> >
> > […]
> >
> > Thanks for the help.
> >
> > Giannandrea
> >
> >
> >
> >
> > James Chen wrote:
> > > Hey all, CCEditBox has been supported in the latest cocos2d-x codes on github(https://github.com/cocos2d/cocos2d-x).
> > > CCEditBox is a wrapper of system edit control. It’s the subclass of CCControlButton. The usage of CCEditBox is very easy since you only need a few lines of code as bellow.
> > > […]
> > >
> > >
> > >
> > >
> > > For more details, you should refer to ExtensionsTest/EditBoxTest.
> > > It only supports IOS and Android now, but we will make it support other platforms as soon as possible.
> > >
> > > Any suggestions will be appreciated.

[dumganhar]

@ Giannandrea Castaldi

Now I’ve another problem. After I remove my dialog (the CClayer with added the CCLayerColor and the CCEditBox) in the screen remains the UITextfield, and it remains until I stop the process.
Any suggestion?

You should make sure that CCEditBox was destructed.

CCEditBox::~CCEditBox(void)
{
    CC_SAFE_DELETE(m_pEditBoxImpl);
}

CCEditBoxImplIOS::~CCEditBoxImplIOS()
{
    [m_systemControl release];  // This line will destroy the UITextField control, so make sure it went here after your application moved to another scene.
}