學(xué)習(xí)了Laya的Text部分，引申出了一些知識(shí)點(diǎn)∪惹郏看圖

Text.png

文本Text

Laya的Text和Unity的Text差不多，但是有一個(gè)特點(diǎn)就是可以實(shí)現(xiàn)文本的滑動(dòng)
先上Text的基礎(chǔ)屬性（JS語(yǔ)言）

//創(chuàng)建一個(gè)基本Text
var txt = new Laya.Text();
txt.text =  "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商惨撇，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案剿吻！\n";

txt.bgColor = "#555555";//文本域的顏色（背景顏色）
txt.color = "#ffffff";  //文字顏色
txt.fontSize = 20;      //字體大小
txt.bold = true;        //粗體
txt.italic = true;      //斜體
txt.wordWrap = true;    //自動(dòng)換行
txt.x = 160;            //Text的x位置
txt.y= 340;             //Text的y位置
txt.borderColor = "#ffff00";  //文本邊框顏色
        
//需要設(shè)置文本區(qū)域 水平居中和垂直居中才有效果
txt.width = 400;    //文本的寬
txt.height = 50;    //文本的高
txt.align = "center";  //文本水平居中
txt.valign = "middle"; //文本垂直居中
//當(dāng)文本超過(guò)文本域范圍 相應(yīng)的處理方式
//hidden：隱藏文本域外的內(nèi)容    visible：顯示全部?jī)?nèi)容    scroll：隱藏文本域外的內(nèi)容，支持文本滑動(dòng)
txt.overflow = "scroll" 
//將Text加載到舞臺(tái)上面
Laya.stage.addChild(txt);

實(shí)現(xiàn)Text的滑動(dòng)（JS語(yǔ)言）:通過(guò)實(shí)現(xiàn)監(jiān)控鼠標(biāo)的滑動(dòng)位移來(lái)實(shí)現(xiàn)文本的滑動(dòng)

    createTextGun()
    {
        this.txt = new Laya.Text();
        this.txt.overflow = Laya.Text.SCROLL;  
        this.txt.text =
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商串纺，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商椰棘，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案纺棺！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案邪狞！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商祷蝌，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商帆卓，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案巨朦！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商米丘，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商糊啡，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案拄查！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案棚蓄！\n" +
            "Layabox是HTML5引擎技術(shù)提供商與優(yōu)秀的游戲發(fā)行商堕扶，面向AS/JS/TS開(kāi)發(fā)者提供HTML5開(kāi)發(fā)技術(shù)方案！";

        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);
    }

     //開(kāi)始滾動(dòng)文本
    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);
    }

     //停止?jié)L動(dòng)文本
    finishScrollTextGun()
    {
        Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.scrollTextGun);
        Laya.stage.off(Laya.Event.MOUSE_UP, this, this.finishScrollTextGun);
    }

    //鼠標(biāo)滾動(dòng)文本
    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的自我滑動(dòng)梭依，引申添加ScrollBar組件進(jìn)行文字的滑動(dòng)

滑動(dòng)條ScrollBar

這個(gè)組件也和Unity里面的差不多稍算，但是單獨(dú)分為了VScrollBar和HScrollBar組件
一些需要注意的屬性：
scrollSize：點(diǎn)擊按鈕滾動(dòng)量
value：滾動(dòng)條當(dāng)前進(jìn)度

//1.直接監(jiān)聽(tīng)
//使用滾動(dòng)條的滾動(dòng)比例 去乘以 文本的橫向滾動(dòng)的最大值  就可以得到當(dāng)前文本滾動(dòng)的位置
this.txt.scrollX = this.scrollBar.value * this.txt.maxScrollX;

//2.通過(guò)scrollBar自帶的  “滾動(dòng)變化時(shí)回調(diào)，回傳value參數(shù)”
//通過(guò)監(jiān)聽(tīng)scrollbar的方法也可以 控制文字滑動(dòng)   (這種使用handler進(jìn)行監(jiān)聽(tīng)的方式  必須放在onUpdate里面)
this.scrollBar.changeHandler = Laya.Handler.create(this,this.onValueChange)

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

說(shuō)完滑動(dòng)條役拴，由Text延伸出TextInput

輸出文本TextInput

這個(gè)組件沒(méi)啥好說(shuō)的糊探，看代碼，只需要注意多行輸入的設(shè)置條件
txtInput.wordWrap = true;//設(shè)置自動(dòng)換行
txtInput.multiline = true;//設(shè)置textInput的多行輸入

 //創(chuàng)建一個(gè)單行輸入textInput
 createTextInput(){
        //創(chuàng)建一個(gè)單行輸入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);

        //創(chuàng)建一個(gè)多行輸入textInput
        var txtInput = new Laya.TextInput("多行輸入");
        txtInput.fontSize = 30;
        //這兩個(gè)屬性同時(shí)設(shè)置 才能進(jìn)行多行輸入
        txtInput.wordWrap = true;
        txtInput.multiline = true;//設(shè)置textInput的多行輸入
        txtInput.x = 0;
        txtInput.y = 300;
        txtInput.width = 300;
        txtInput.height = 200;
        txtInput.bgColor = "#aabbcc";
        Laya.stage.addChild(txtInput);
}

因?yàn)槭俏谋臼褂煤尤颍隙ň驮O(shè)計(jì)到字體的問(wèn)題科平，在Unity里面使用字體還是挺方便的，但是在Laya里面就是一個(gè)天坑淤击。

字體的使用

位圖字體

位圖字體：簡(jiǎn)單理解就是用圖片制作的字體匠抗，當(dāng)然實(shí)際上不止使用圖片，還可以使用自定義文本數(shù)據(jù)來(lái)作為位圖字體的數(shù)據(jù)污抬。

位圖字體的制作：

1.通過(guò)文本來(lái)創(chuàng)建位圖字體

• 文本必須保存為Unicode編碼格式
• 打開(kāi)bmfont工具 首先要在Font Settings中設(shè)置字體（如果文本中存在中文汞贸，則需要使用識(shí)別中文的字體），再去導(dǎo)入相關(guān)的Txt文件印机。
• 進(jìn)行導(dǎo)出設(shè)置的時(shí)候 需要選擇32位（帶透明層）和XML格式矢腻， 這是Laya才能識(shí)別的文件
• 導(dǎo)出的.fnt和。png文件名可能不同射赛，必須改為相同才能在Laya里面使用

2.通過(guò)圖片來(lái)創(chuàng)建位圖字體
使用圖片創(chuàng)建的位圖字體和用文字創(chuàng)建位圖字體的差別就在于：需要將圖片和AscII里面的字符一一對(duì)應(yīng)起來(lái)多柑。其他規(guī)則和上訴一樣。

在Laya下使用位圖字體

同上楣责，在編輯器中使用位圖字體顯示沒(méi)問(wèn)題竣灌，一旦你開(kāi)始運(yùn)行，位圖字體的效果則不會(huì)展示秆麸，需要運(yùn)行時(shí)對(duì)字體進(jìn)行注冊(cè)加載初嘹。
將創(chuàng)建好的位圖字體放在bin/Font/目錄下，F(xiàn)ont是自定義的文件夾

//創(chuàng)建位圖字體對(duì)象
var bitfontmap = new Laya.BitmapFont();
//加載位圖字體 并注冊(cè) 然后賦給相關(guān)的Text
bitfontmap.loadFont("Font/nummap.fnt",Laya.Handler.create(this,function(){
     //注冊(cè)位圖字體  第一個(gè)參數(shù) 是自己定義的位圖字體的名字
     Laya.Text.registerBitmapFont("nihao",bitfontmap);
     this.txt.font = "nihao";
}));

在Laya下使用ttf字體

關(guān)于ttf字體也只能在運(yùn)行時(shí)加載
如果使用PC里面自帶的字體沮趣，在瀏覽器中可能能看到使用的字體沒(méi)有問(wèn)題屯烦，但是一旦你使用手機(jī)去測(cè)試，就會(huì)發(fā)現(xiàn)字體變?yōu)榱四J(rèn)字體。所以關(guān)于TTF字體一定要在運(yùn)行時(shí)注冊(cè)加載并賦予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);

這里要注意一點(diǎn)温眉，加載ttf文件，得到的是一個(gè)關(guān)于字體的信息集合對(duì)象res翁狐，你得獲取里面的name才能正確的給Text賦予字體类溢。

學(xué)習(xí)到這里，關(guān)于Text的部分就差不多了谴蔑，但是又了解到一個(gè)超級(jí)好用的組件FontClip

FontClip

這個(gè)組件是Laya里面的一個(gè)好東東豌骏，它可以便捷的讓你在Laya里面使用圖片來(lái)作為位圖字體，一般主要用于數(shù)字隐锭，是按等比寬度去獲取每一個(gè)字符窃躲。
需要注意的是圖片資源里面的文字和sheet屬性里面填寫的字段要一一對(duì)應(yīng)，這樣就能像在Unity使用普通字體那樣使用位圖字體了

FontClip.png

總結(jié)

這是正式接觸Laya學(xué)習(xí)的第一部分內(nèi)容钦睡，盡管之前已經(jīng)做了一個(gè)2D Demo和一個(gè)3D Demo,但是對(duì)游戲引擎的學(xué)習(xí)還是需要深入去學(xué)習(xí)了解蒂窒。盡管Laya有這樣那樣的問(wèn)題，但是好歹是國(guó)產(chǎn)引擎荞怒，也算牌面之一洒琢，努力加油！