[New Feature] CCEditBox support in cocos2d-x

Hi,
I add a CCEditBox as a child to a layer which is a container of a CCScrollView.
But the CCEditBox can’t move with the scroll.
Is there any way to solve this?
Or is there any other way to achieve this?
(Move the CCEditBox with a layer)

Thank you

你好,我在 cocos2d-x / extensions / GUI / CCEditBox 中找到了CCEditBoxImpl在android和ios上的实现(CCEditBoxImplAndroid, CCEditBoxImplIOS, EditBoxImplIOS),但没有PC平台上相应的实现,请问我怎样才能在PC上使用CCEditBox呢?多谢!

I also find that if add the CCEditBox to a custom node, the position of the text is incorrect.is it can be fixed?

Yes, if the position of your custom node is not at (0,0), the position of UITextfield will be incorrect.
I think it can be fixed. I will try to fix it this week. Thanks for your reply.
gao dan wrote:

I also find that if add the CCEditBox to a custom node, the position of the text is incorrect.is it can be fixed?

We have not enough time to implement it for windows and mac. So if you have already implemented it, please send us a Pull Request. Thanks.
方鼎 九 wrote:

你好,我在 cocos2d-x / extensions / GUI / CCEditBox 中找到了CCEditBoxImpl在android和ios上的实现(CCEditBoxImplAndroid, CCEditBoxImplIOS, EditBoxImplIOS),但没有PC平台上相应的实现,请问我怎样才能在PC上使用CCEditBox呢?多谢!

@James Chen: I have done all the changes you have specified [[https://github.com/cocos2d/cocos2d-x/pull/1224)]]. But what should I include(or which namespace should I use) to use CCEditText?

感谢推出的编辑框,简化了我们的工作,但是目前看来,多行编辑框的需求可能很多,请问James Chen能否进一步开发出这个呢,谢谢

1 Like

The are a few problems with CCEditBox (on iOS at least).

Even when the edit box is hidden with setVisible(false) it will react to touches and bring up the keyboard. And if there is a valid (placeholder) text it will be rendered regardless of the edit box visible state.

The other more serious problem is a crash when the edit box is created with a sprite frame from a texture atlas utilising the CCScale9Sprite::createWithSpriteFrame(pSpriteFrame, CCRectMake(x, y, w, h)) method. It crashes in:

bool CCScale9Sprite::updateWithBatchNode(CCSpriteBatchNode* batchnode, CCRect rect, bool rotated, CCRect capInsets)

because the sprite frames for the edit box elements will have negative values for the CCRect width and/or height!

I’ve changed portion of the code in that function to this one, and it works fine now:

else
{
float frameThickness = m_capInsetsInternal.origin.x;

// Sprite frame is not rotated
// Centre
centre = new CCSprite();
centre~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(centre, 0, pCentre);

// Top
top = new CCSprite();
top~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(top, 1, pTop);

// Bottom
bottom = new CCSprite();
bottom~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(bottom, 1, pBottom);

// Left
left = new CCSprite();
left~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(left, 1, pLeft);

// Right
right = new CCSprite();
right~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(right, 1, pRight);

// Top left
topLeft = new CCSprite();
topLeft~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(topLeft, 2, pTopLeft);

// Top right
topRight = new CCSprite();
topRight~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(topRight, 2, pTopRight);

// Bottom left
bottomLeft = new CCSprite();
bottomLeft~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(bottomLeft, 2, pBottomLeft);

// Bottom right
bottomRight = new CCSprite();
bottomRight~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(bottomRight, 2, pBottomRight);
}

Hello James, thanks for a great class. One thing, the keyboard for Android defaults to all caps, but on iOS it works normally (first letter capitalized, followed by lowercase). Any way to get the Android keyboard to work the same way as iOS with CCEditBox?

Got it: editBox->setInputFlag(kEditBoxInputFlagInitialCapsSentence);

May I suggest that this be the default for it to be common among all platforms?

The default input flag is set to kEditBoxInputFlagInitialCapsAllCharacters. I think it may depend on the input method you installed on your device. I didn’t do much tests for android.

Andargor theWise wrote:

Hello James, thanks for a great class. One thing, the keyboard for Android defaults to all caps, but on iOS it works normally (first letter capitalized, followed by lowercase). Any way to get the Android keyboard to work the same way as iOS with CCEditBox?

Thanks, @Attila Szilágyi,
I will test the bug you said. :slight_smile:

Attila Szilágyi wrote:

The are a few problems with CCEditBox (on iOS at least).
>
Even when the edit box is hidden with setVisible(false) it will react to touches and bring up the keyboard. And if there is a valid (placeholder) text it will be rendered regardless of the edit box visible state.
>
The other more serious problem is a crash when the edit box is created with a sprite frame from a texture atlas utilising the CCScale9Sprite::createWithSpriteFrame(pSpriteFrame, CCRectMake(x, y, w, h)) method. It crashes in:
>
bool CCScale9Sprite::updateWithBatchNode(CCSpriteBatchNode* batchnode, CCRect rect, bool rotated, CCRect capInsets)
>
because the sprite frames for the edit box elements will have negative values for the CCRect width and/or height!
>
I’ve changed portion of the code in that function to this one, and it works fine now:
>
else
{
float frameThickness = m_capInsetsInternal.origin.x;
>
// Sprite frame is not rotated
// Centre
centre = new CCSprite();
centre~~>initWithTexture, CCRectMake,
rotated);
>
scale9Image~~>addChild(centre, 0, pCentre);
>
// Top
top = new CCSprite();
top~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(top, 1, pTop);
>
// Bottom
bottom = new CCSprite();
bottom~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(bottom, 1, pBottom);
>
// Left
left = new CCSprite();
left~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(left, 1, pLeft);
>
// Right
right = new CCSprite();
right~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(right, 1, pRight);
>
// Top left
topLeft = new CCSprite();
topLeft~~>initWithTexture, CCRectMake,
rotated);
>
scale9Image~~>addChild(topLeft, 2, pTopLeft);
>
// Top right
topRight = new CCSprite();
topRight~~>initWithTexture, CCRectMake,
rotated);
>
scale9Image~~>addChild(topRight, 2, pTopRight);
>
// Bottom left
bottomLeft = new CCSprite();
bottomLeft~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(bottomLeft, 2, pBottomLeft);
>
// Bottom right
bottomRight = new CCSprite();
bottomRight~~>initWithTexture, CCRectMake,
rotated);
scale9Image~~>addChild(bottomRight, 2, pBottomRight);
}

The namespace is cocos2d::extension. You should use USING_NS_CC_EXT; or using namespace cocos2d::extension;.

Vishal Soni wrote:

@James Chen: I have done all the changes you have specified [[https://github.com/cocos2d/cocos2d-x/pull/1224)]]. But what should I include(or which namespace should I use) to use CCEditText?

Hi Attila Szilágyi,
I have tested the issue you said, but without any crashes.
I tested it by adding the codes bellow:

    CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("extensions/editbox-frame.plist");
    // top
    CCScale9Sprite* pTop = CCScale9Sprite::createWithSpriteFrameName("green_edit.png");

    m_pEditName = CCEditBox::create(editBoxSize, pTop);//CCScale9Sprite::create("extensions/green_edit.png"));

I have uploaded the sprite frame i used.
BTW, could you tell me which version of cocos2d-x you are using?

Attila Szilágyi wrote:

The are a few problems with CCEditBox (on iOS at least).
>
Even when the edit box is hidden with setVisible(false) it will react to touches and bring up the keyboard. And if there is a valid (placeholder) text it will be rendered regardless of the edit box visible state.
>
The other more serious problem is a crash when the edit box is created with a sprite frame from a texture atlas utilising the CCScale9Sprite::createWithSpriteFrame(pSpriteFrame, CCRectMake(x, y, w, h)) method. It crashes in:
>
bool CCScale9Sprite::updateWithBatchNode(CCSpriteBatchNode* batchnode, CCRect rect, bool rotated, CCRect capInsets)
>
because the sprite frames for the edit box elements will have negative values for the CCRect width and/or height!
>
I’ve changed portion of the code in that function to this one, and it works fine now:

Ok James, I will check for the caps issues. I just looked at my iPhone build and it was all lowercase by default. I guess it is better to specify it anyway to get the same app behavior on all platforms.

Another thing, on iOS, I noticed that if there is a transition to a scene with a CCEditBox, the placeholders do not have a transition, they are rendered immediately. This gives a strange effect, as the placeholders are placed and then the transition plays. Here is a video that shows the bug:

http://screencast.com/t/2wAMTYOpv7Un

On android, it works fine.

One more thing: as a feature request, can you allow CCEditBox objects to be placed under CCMenuItems so that they can be part of a CCMenu? I have tried doing so, but the edit boxes do not render. What I am doing now is placing “blank” CCMenuItemFont in the menu and positioning the edit box over it to give the illusion that the boxes are in the menu. (see the video in my previous post)

James, I know what the problem is!

I’ve changed this line of code in my source file:

CCScale9Sprite* pEditBoxSprite = CCScale9Sprite::createWithSpriteFrame(pSpriteFrame, CCRectMake(x, y, w, h));

to

CCScale9Sprite* pEditBoxSprite = CCScale9Sprite::createWithSpriteFrame(pSpriteFrame, CCRectZero);

and it works as expected!

Sorry for the false alarm. CCEditBox is a wonderful extension and looking forward to the desktop versions.

Hi, is there any way to set the font for CCEditBox?

Hi, it isn’t supported now. If you are developing app for android, it could be easy by modify the ttf font name in CCEditBoxImplAndroid::initWithSize.
On iOS, you should hack the codes in - initWithFrame: frameRect editBox: editBox .

Alexander Lee wrote:

Hi, is there any way to set the font for CCEditBox?

hi guys, please remember the language for this forum should be English… if everyone speak with its own local language the forum is not useful at all…

thanks for your comprehension.