Cocos2dx input multi-line text and display

Cocos2dx input multi-line text and display

Use ccui.Textand cc.EditBoxand built-in input box events editBoxTextChangedto complete the input and display of multi-line text.

Let’s take a look at the rendering first:

Let’s take a look at the current disadvantages cc.LabelTTFof the original: 1. Can’t change the font; 2. There is an extra space at the end of the new line when Chinese and numbers are connected, see the comparison picture below. Figure 1. ↓ Figure 2. I wrote it myself↓ Comparing Figure 1 and Figure 2, it is not difficult to see that there is a large gap behind the first line in Figure 1, and at least two more 2 can be inserted, but it is The line is changed, and I can't change his font style (I used it without changing it successfully). Let’s look at my writing method as shown in Figure 2. First, I changed the font I like, and second, I can fill a line and then wrap it. There is no obvious gap , which is more in line with actual development needs.setDimensions
cc.LabelTTFsetDimensions



cc.LabelTTFsetDimensionssetFontName

If you just need silky automatic line wrapping, just copy the middle setMyMultiContentsum setMyMultiLineText.
All of them add up to realize a multi-line input box.

//输入框
var editboxArea = new cc.Sprite("#"+myBackground);
    var myEditBox = new cc.EditBox(cc.size(725, 349), editboxArea);
    myEditBox.x = 260;
    myEditBox.y = 330;
    myEditBox.setAnchorPoint(0,0.5);
    myEditBox.setPlaceHolder("请输入内容");
    myEditBox.setDelegate(this);
    myEditBox.setFontColor(cc.color(0,0,0,0));//这里隐藏掉原本输入框的文字内容，正常显示的话去掉最后一个,0
    myEditBox.setFontSize(38);
    myEditBox.setInputMode(cc.EDITBOX_INPUT_MODE_ANY);
    myEditBox.setPlaceholderFontSize(38);
    myEditBox.setMaxLength(100);
    myEditBox.setName("myEditBox")
    this.popupBg.addChild(myEditBox,2);

	this.setMyMultiContent("");//初始化显示新的输入框内容

	setMyMultiContent:function(str){
    
    //创建多行文本的父容器 以便后续统一移除添加
        if(cc.sys.isObjectValid(this.multiContent)){
    
    
            this.multiContent.removeFromParent();
            this.textLine = 0;
        }
        this.multiContent = new cc.Sprite();
        this.multiContent.setAnchorPoint(0,1);
        this.multiContent.x = 280;
        this.multiContent.y = 480;
        this.popupBg.addChild(this.multiContent,2);
        this.setMyMultiLineText(str);
    },

	setMyMultiLineText :function(str){
    
    //Simulates multi-line text 模拟的多行文本
        //(cc.LabelTTF的setDimensions有弊端1.无法换字体;2.中文和数字相接时换行末尾有多余空隙)
        var myLabel = new ccui.Text("", myFont, 36);//字体自行修改
        myLabel.setColor(cc.color(125,103,82));
        myLabel.setAnchorPoint(0,1);
        myLabel.x = 0;
        myLabel.y = - this.textLine * 42;
        this.multiContent.addChild(myLabel, 6);
        // var str = "11111111112222222222";
        var strArr = [];
        var backStr = "";
        
        //分解字符串逐个添加逐个计算宽度 超出指定宽后进行换行
        for(var i = 0 ; i < str.length ; i ++){
    
    
            strArr.push(str[i]);
            backStr = strArr.join("");
            myLabel.setString(backStr);
            if(myLabel.width > 675){
    
    
                console.log(i,"超了");
                this.textLine ++;
                // arguments.callee(str.slice(i+1));//自我调用这样写比较优雅但性能较差
                this.setMyMultiLineText(str.slice(i+1));//超出的部分递归
                break;
            }else{
    
    
                if(i >= str.length - 1){
    
    
                    console.log(i,"结束了 没超");
                    return;
                }else{
    
    
                    console.log(i,"没结束 继续");
                }
            }
        }

    },

//内置编辑框输入改变监听事件 在每次发生改变时都去重新生成多行文本
	editBoxTextChanged: function (editBox, text) {
    
    
        cc.log("editBox " + editBox.name + ", TextChanged, text: " + text);
        
        if(editBox.name == "myEditBox"){
    
    
            console.log("多行");
            this.setMyMultiContent(text);
        }

    },

Well, the above is all the code.
The multi-line text input box written by the author is for a small input box. You can see that I have limited the maximum length of the input box to 100 characters. There will be no performance problems with fewer characters , but it will appear when the number of characters is long. Obvious lag , because every input will be regenerated and recalculated every time , so the more words there are , the more stuck it will be . But this is not without a solutionvar myLabel . Change the original one to this["myLabel"+this.textLine]dynamically generate each line of text through the number of lines, and then update the current line of text to make the calculations of each line independent of each other. As long as the number of words in a line is not too long, it will not There is a performance problem. ^ ^
ps To add that the multi-line input text simulated in this way does not have a blinking cursor , because the text behind it is actually displayed.