学习了Laya的Text部分，引申出了一些知识点。看图

Text.png

文本Text

Laya的Text和Unity的Text差不多，但是有一个特点就是可以实现文本的滑动
先上Text的基础属性（JS语言）

//创建一个基本Text
var txt = new Laya.Text();
txt.text =  "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n";

txt.bgColor = "#555555";//文本域的颜色（背景颜色）
txt.color = "#ffffff";  //文字颜色
txt.fontSize = 20;      //字体大小
txt.bold = true;        //粗体
txt.italic = true;      //斜体
txt.wordWrap = true;    //自动换行
txt.x = 160;            //Text的x位置
txt.y= 340;             //Text的y位置
txt.borderColor = "#ffff00";  //文本边框颜色
        
//需要设置文本区域 水平居中和垂直居中才有效果
txt.width = 400;    //文本的宽
txt.height = 50;    //文本的高
txt.align = "center";  //文本水平居中
txt.valign = "middle"; //文本垂直居中
//当文本超过文本域范围 相应的处理方式
//hidden：隐藏文本域外的内容    visible：显示全部内容    scroll：隐藏文本域外的内容，支持文本滑动
txt.overflow = "scroll" 
//将Text加载到舞台上面
Laya.stage.addChild(txt);

实现Text的滑动（JS语言）:通过实现监控鼠标的滑动位移来实现文本的滑动

    createTextGun()
    {
        this.txt = new Laya.Text();
        this.txt.overflow = Laya.Text.SCROLL;  
        this.txt.text =
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！\n" +
            "Layabox是HTML5引擎技术提供商与优秀的游戏发行商，面向AS/JS/TS开发者提供HTML5开发技术方案！";

        this.txt.size(200, 100);
        this.txt.x = Laya.stage.width - this.txt.width >> 1;
        this.txt.y = Laya.stage.height - this.txt.height >> 1;

        this.txt.borderColor = "#FFFF00";
        this.txt.fontSize = 20;
        this.txt.color = "#ffffff";

        Laya.stage.addChild(this.txt);
        this.txt.on(Laya.Event.MOUSE_DOWN, this, this.startScrollTextGun);
    }

     //开始滚动文本
    startScrollTextGun()
    {
        this.prevX = this.txt.mouseX;
        this.prevY = this.txt.mouseY;

        Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.scrollTextGun);
        Laya.stage.on(Laya.Event.MOUSE_UP, this, this.finishScrollTextGun);
    }

     //停止滚动文本
    finishScrollTextGun()
    {
        Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.scrollTextGun);
        Laya.stage.off(Laya.Event.MOUSE_UP, this, this.finishScrollTextGun);
    }

    //鼠标滚动文本
    scrollTextGun()
    {
        var nowX = this.txt.mouseX;
        var nowY = this.txt.mouseY;

        this.txt.scrollX += this.prevX - nowX;
        this.txt.scrollY += this.prevY - nowY;

        this.prevX = nowX;
        this.prevY = nowY;
    }

由Text的自我滑动，引申添加ScrollBar组件进行文字的滑动

滑动条ScrollBar

这个组件也和Unity里面的差不多，但是单独分为了VScrollBar和HScrollBar组件
一些需要注意的属性：
scrollSize：点击按钮滚动量
value：滚动条当前进度

//1.直接监听
//使用滚动条的滚动比例 去乘以 文本的横向滚动的最大值  就可以得到当前文本滚动的位置
this.txt.scrollX = this.scrollBar.value * this.txt.maxScrollX;

//2.通过scrollBar自带的  “滚动变化时回调，回传value参数”
//通过监听scrollbar的方法也可以 控制文字滑动   (这种使用handler进行监听的方式  必须放在onUpdate里面)
this.scrollBar.changeHandler = Laya.Handler.create(this,this.onValueChange)

onValueChange(value){
      console.log(value);
      this.txt.scrollX = value * this.txt.maxScrollX;
}

说完滑动条，由Text延伸出TextInput

输出文本TextInput

这个组件没啥好说的，看代码，只需要注意多行输入的设置条件
txtInput.wordWrap = true;//设置自动换行
txtInput.multiline = true;//设置textInput的多行输入

 //创建一个单行输入textInput
 createTextInput(){
        //创建一个单行输入textInput
        var textInput = new Laya.TextInput("单行输入");
        textInput.wordWrap = true; 
        textInput.fontSize = 30;
        textInput.x = 0;
        textInput.y = 0;
        textInput.width = 300;
        textInput.height = 200;
        textInput.bgColor = "#aabbcc";
        Laya.stage.addChild(textInput);

        //创建一个多行输入textInput
        var txtInput = new Laya.TextInput("多行输入");
        txtInput.fontSize = 30;
        //这两个属性同时设置 才能进行多行输入
        txtInput.wordWrap = true;
        txtInput.multiline = true;//设置textInput的多行输入
        txtInput.x = 0;
        txtInput.y = 300;
        txtInput.width = 300;
        txtInput.height = 200;
        txtInput.bgColor = "#aabbcc";
        Laya.stage.addChild(txtInput);
}

因为是文本使用，肯定就设计到字体的问题，在Unity里面使用字体还是挺方便的，但是在Laya里面就是一个天坑。

字体的使用

位图字体

位图字体：简单理解就是用图片制作的字体，当然实际上不止使用图片，还可以使用自定义文本数据来作为位图字体的数据。

位图字体的制作：

1.通过文本来创建位图字体

• 文本必须保存为Unicode编码格式
• 打开bmfont工具 首先要在Font Settings中设置字体（如果文本中存在中文，则需要使用识别中文的字体），再去导入相关的Txt文件。
• 进行导出设置的时候 需要选择32位（带透明层）和XML格式， 这是Laya才能识别的文件
• 导出的.fnt和。png文件名可能不同，必须改为相同才能在Laya里面使用

2.通过图片来创建位图字体
使用图片创建的位图字体和用文字创建位图字体的差别就在于：需要将图片和AscII里面的字符一一对应起来。其他规则和上诉一样。

在Laya下使用位图字体

同上，在编辑器中使用位图字体显示没问题，一旦你开始运行，位图字体的效果则不会展示，需要运行时对字体进行注册加载。
将创建好的位图字体放在bin/Font/目录下，Font是自定义的文件夹

//创建位图字体对象
var bitfontmap = new Laya.BitmapFont();
//加载位图字体 并注册 然后赋给相关的Text
bitfontmap.loadFont("Font/nummap.fnt",Laya.Handler.create(this,function(){
     //注册位图字体  第一个参数 是自己定义的位图字体的名字
     Laya.Text.registerBitmapFont("nihao",bitfontmap);
     this.txt.font = "nihao";
}));

在Laya下使用ttf字体

关于ttf字体也只能在运行时加载
如果使用PC里面自带的字体，在浏览器中可能能看到使用的字体没有问题，但是一旦你使用手机去测试，就会发现字体变为了默认字体。所以关于TTF字体一定要在运行时注册加载并赋予Text Font才行！

//加载ttf字体
Laya.loader.load("Font/BalooBhaina-Regular.ttf",Laya.Handler.create(this,function(res){
      console.log(res);
      this.othertxt.font = res.fontName;
}),null,Laya.Loader.TTF,0,true);

这里要注意一点，加载ttf文件，得到的是一个关于字体的信息集合对象res，你得获取里面的name才能正确的给Text赋予字体。

学习到这里，关于Text的部分就差不多了，但是又了解到一个超级好用的组件FontClip

FontClip

这个组件是Laya里面的一个好东东，它可以便捷的让你在Laya里面使用图片来作为位图字体，一般主要用于数字，是按等比宽度去获取每一个字符。
需要注意的是图片资源里面的文字和sheet属性里面填写的字段要一一对应，这样就能像在Unity使用普通字体那样使用位图字体了

FontClip.png

总结

这是正式接触Laya学习的第一部分内容，尽管之前已经做了一个2D Demo和一个3D Demo,但是对游戏引擎的学习还是需要深入去学习了解。尽管Laya有这样那样的问题，但是好歹是国产引擎，也算牌面之一，努力加油！