Display text component (Label)

1. Create Label component through LayaAir IDE

The Label component is used to display a piece of text. For the script interface of Label component, please refer to Label API.

1.1 Create Label

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)

After dragging the Label component into the editing area and setting the value of the text attribute to LayaAir IDE, the display effect is as follows:

(Figure 1-2)

1.2 Label attribute

(Figure 1-3)

1.3 Script control Label

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

const { regClass, property } = Laya;

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

    @property( { type : Laya.Label } )
    public lab: Laya.Label;

    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.lab.pos(Laya.stage.width >> 1, Laya.stage.height >> 1); //Position
        this.lab.size(500, 30); //Size
        this.lab.pivot(this.lab.width/2, this.lab.height/2); //Pivot Point
        this.lab.text = "Hello everyone, welcome to LayaAir IDE"; //Text content
        this.lab.font = "宋体"; //Font
        this.lab.fontSize = 50; //Font size
        this.lab.color = "#ff0000"; //Font color
        this.lab.bold = true; //bold
        this.lab.italic = true; //italic
        this.lab.underline = true; //underline
        this.lab.underlineColor = "#ff0000"; //Underline color
        this.lab.stroke = 5; //Stroke width
        this.lab.strokeColor = "#000000" ; //Stroke color
        this.lab.wordWrap = true; //Automatically wrap lines
        this.lab.leading = 10; //vertical line spacing
        this.lab.align = "left"; //Horizontal alignment
        this.lab.valign = "top"; //Vertical alignment
        this.lab.overflow = "visible"; //Text overflow
        // this.lab.fitContent = "yes"; //Adaptive size

        this.lab.bgColor = "#19a4f1"; //Background color
        this.lab.borderColor = "#f6ff03" //Border color
    }

}

2. Create Label component through code

When developing a project, sometimes I don't want the Label to be on the stage at the beginning, but add it when it is needed. This needs to be created through code. In the property setting panel of Scene2D, add a custom component script, create the UI_Label class, and create the Label through code. Its other properties can also be set through code. The following sample code demonstrates how to create Labels of different skins (styles) through code. Developers can set Labels through code to create text effects that meet their own needs.

Sample code:

const { regClass, property } = Laya;
const Label = Laya.Label;
@regClass()
export class UI_Label extends Laya.Script {

    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.setup();        
    }

    private setup(): void {
        this.createLabel("#FFFFFF", null).pos(30, 50);
        this.createLabel("#00FFFF", null).pos(290, 50);
        this.createLabel("#FFFF00", "#FFFFFF").pos(30, 100);
        this.createLabel("#000000", "#FFFFFF").pos(290, 100);
        this.createLabel("#FFFFFF", "#00FFFF").pos(30, 150);
        this.createLabel("#0080FF", "#00FFFF").pos(290, 150);
    }

    private createLabel(color: string, strokeColor: string): Laya.Label {
        const STROKE_WIDTH: number = 4;

        var label: Laya.Label = new Label();
        label.font = "Microsoft YaHei";
        label.text = "SAMPLE DEMO";
        label.fontSize = 30;
        label.color = color;

        if (strokeColor) {
            label.stroke = STROKE_WIDTH;
            label.strokeColor = strokeColor;
        }

        this.owner.addChild(label);

        return label;
    }
}

Effect preview:

(Figure 2-1)