学习了Laya的Text部分，引申出了一些知识点。看图
文本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使用普通字体那样使用位图字体了
总结
这是正式接触Laya学习的第一部分内容，尽管之前已经做了一个2D Demo和一个3D Demo,但是对游戏引擎的学习还是需要深入去学习了解。尽管Laya有这样那样的问题，但是好歹是国产引擎，也算牌面之一，努力加油！
