Implement Multi-line input of cocos2d-x input box, cocos2d-x multi-line

Implement Multi-line input of cocos2d-x input box, cocos2d-x multi-line
Disclaimer: this blog is an original blog. For more information, see http://blog.csdn.net/chengyingzhilian/article/details/41060735. it is related to the design.

On how to achieve multi-line input, it seems that the cocos2d-x has not been resolved, why the UI has such a defect. Shouldn't it be. The basic idea of online search is to integrate TextFieldTTF and then rewrite the key algorithms. Compared with this regular army, the following design ideas can be tricky.

The EditBox is a single row input. Although multiple lines of words appear in API wiki. Secondly, LabelTTF supports multi-row display. So. The clever method is implemented using the EditBox + LabelTTF combination. The general design concept is to use Label to display EditBox content in real time.

Let's take a look at the design diagram first.

The Green Box indicates the screen. You cannot see any other content.

The purple box indicates the input area. Here, a Label is added to display the input content.

The red area is EditBox, and the left side is longer than the screen. There are two reasons:

1. Make sure that the input method is displayed when you click the input box. This means that the editBox control is required for the input box.

2. The EditBox should be as far away as possible from the recognizable area on the screen, so that the single line of input content cannot be displayed in the EditBox. The EditBox is monitored in real time and updated to LabelTTF.

The gray area is an event mask. Avoid clicking the outside of the input box to bring up the input box.

Implementation:

After understanding the concept, the code implementation is much simpler. For the implementation code, see this blog.

Here. Use the Lua script.

<span style="font-family:KaiTi_GB2312;">function multLineInput:init()    local Spritecache = cc.SpriteFrameCache:getInstance()    local frame = Spritecache:getSpriteFrame("touming.png")    local codeBg1 = cc.Scale9Sprite:createWithSpriteFrame(frame)    local size = self.contentNode:getContentSize()        local boxSize = cc.size(size.width,size.height)    self.editBox = cc.EditBox:create(boxSize,codeBg1)    self.editBox:setAnchorPoint(cc.p(0.0,0.0))    self.editBox:setFontSize(0)    self.editBox:setMaxLength(330)    self.editBox:setOpacity(0)    self.contentNode:addChild(self.editBox)local handler = function(event)    if event == "began" then        self.editBox:setText( self.contentLabel:getString())    end        if event == "changed" then        local str =  self.editBox:getText()        self.contentLabel:setString(str)    end        if event == "return" then       local str =  self.editBox:getText()       self.editBox:setText("")       self.contentLabel:setString(str)    endend    self.editBox:registerScriptEditBoxHandler(handler)end</span>

You can use registerScriptEditBoxHandler to implement the listener. Note that unregisterScriptEditBoxHandler is required when exiting.

Note that there is no cursor in the input box.

If you study some cocos2d-x-based games, you'll find that on the multi-line Input Interface, some do not have a cursor. For example, does Kunlun's Q Chuan of martial arts achieve this.

How does a cocos2d-x implement an input box and enter numbers or letters in the input box? Answers, rewards

You can only enter numbers or letters for programming.

Cocos2d lua add text input box

Implementation of cocos2d-x chat input box
Chat input box (single line input box, multiple lines can be expanded by yourself)
Functions:
1. Normal Input
2. Set the maximum width of the input box (PT value, cocos2d-x coordinate value)
3. Set the maximum number of characters allowed in the input box (Unicode)
4. The input box is automatically indented (when the number of input strings exceeds the maximum width of the display box, it is automatically indented to the left to display the latest string
Input box implementation code
The number of words is limited, so the header file code and cpp file cannot be answered. For more information, see blog.csdn.net/..829172.