Input text component (TextInput)

1. Using TextInput in LayaAir IDE

The text input box is a UI component often used in games. TextInput can be used whenever input is required. For the API of TextInput class, please refer to here.

1.1 Create TextInput

As shown in Figure 1-1, you can right-click in the Hierarchy' window to create it, or you can drag and drop from theWidgets' window to add it.

(Picture 1-1)

1.2 TextInput property

(Figure 1-2)

1.3 Script control TextInput

In the Scene2D property settings panel, add a custom component script. Then, drag the TextInput into its exposed property entry. Here is a sample code to implement script control of TextInput:

const { regClass, property } = Laya;

@regClass()
export class TextInputControl extends Laya.Script {
    //declare owner : Laya.Sprite3D;

    @property( { type : Laya.TextInput } )
    public txtin: Laya.TextInput;

    constructor() {
        super();
    }

    /**
     * Executed after the component is activated. At this time, all nodes and components have been created. This method is only executed once.
     */
    onAwake(): void {
        this.txtin.pos(Laya.stage.width >> 1, Laya.stage.height >> 1); //Position
        this.txtin.size(500, 60); //Size
        this.txtin.pivot(this.txtin.width/2, this.txtin.height/2); //Pivot Point
        this.txtin.font = "宋体"; //Font
        this.txtin.fontSize = 50; //Font size
        this.txtin.color = "#ff0000"; //Font color
        this.txtin.bold = true; //bold
        this.txtin.italic = true; //italic
        this.txtin.underline = true; //underline
        this.txtin.underlineColor = "#ff0000"; //Underline color
        this.txtin.stroke = 5; //stroke width
        this.txtin.strokeColor = "#000000" ; //Stroke color
        this.txtin.wordWrap = true; //Automatically wrap lines
        this.txtin.overflow = "scroll"; //Text overflow
        // this.txtin.skin = "atlas/comp/textinput.png"; //Skin
        this.txtin.bgColor = "#19a4f1"; //Background color
        this.txtin.borderColor = "#f6ff03" //Border color

        this.txtin.editable = true; //Editable state
        // this.txtin.type = "password"; //Input box type
        // this.txtin.maxChars = 5; //Maximum number of characters
        // this.txtin.restrict = "12345"; //Input restrictions
        // this.txtin.prompt = "Please enter"; //Input prompt
        // this.txtin.promptColor = "#a9a9a9"; //Prompt word color
        // this.txtin.multiline = true; //Text field
    }

}

(In order to prevent cluttered effects, part of the code in the sample code is commented out first. Developers can uncomment themselves to observe the effect)

2. Textinput code creation

Sometimes, you don't want the Textinput component to be on the stage from the beginning, but to add it when you need it. This needs to be created through code. In the property settings panel of Scene2D, add a custom component script. The sample code is as follows:

const { regClass, property } = Laya;

@regClass()
export class UI_Input extends Laya.Script {

    private SPACING: number = 100;
    private Y_OFFSET: number = 50;

    private skins: any[];

    constructor() {
        super();
    }

    /**
     * Executed after the component is activated. At this time, all nodes and components have been created. This method is only executed once.
     */
    onAwake(): void {


        this.skins = ["resources/res/ui/input (1).png", "resources/res/ui/input (2).png", "resources/res/ui/input (3).png", "resources/res/ui/input (4).png"];
        Laya.loader.load(this.skins).then( ()=>{
            this.onLoadComplete();
        } );
    }

    private onLoadComplete(): void {
        for (var i: number = 0; i < this.skins.length; ++i) {
            var input: Laya.TextInput = this.createInput(this.skins[i]);
            input.prompt = 'Type:';
            input.x = (Laya.stage.width - input.width) / 2;
            input.y = i * this.SPACING + this.Y_OFFSET;
        }
    }

    private createInput(skin: string): Laya.TextInput {
        var ti: Laya.TextInput = new Laya.TextInput();

        ti.skin = skin;
        if.size(300, 50);
        ti.sizeGrid = "0,40,0,40";
        ti.font = "Arial";
        ti.fontSize = 30;
        ti.bold = true;
        ti.color = "#606368";

        this.owner.addChild(ti);

        return ti ;
    }
}

(The image resources in the code are from the "Engine API Usage Example" project, developers can create and download them by themselves)

operation result:

(Figure 2-1)