美文网首页一只腊鸭做游戏
Laya FairyGui系列七 GTextField

Laya FairyGui系列七 GTextField

作者: s0ok | 来源:发表于2019-11-20 18:40 被阅读0次

    文本(GTextField)

    文本是一个基础组件,说到文本就不能不说字体。FGUI支持动态字体和位图字体,同时也支持BMFont等位图字体制作工具导出的fnt格式的位图字体。
    动态字体是直接使用ttf字体渲染文字,ttf字体可以是系统中的也是可以是打包再游戏中的,但是这种做法很少,毕竟一个字体文件还是很大的。
    不同的设备环境对ttf字体的渲染也会有一定的差异,所以导致最终有一些设备运行的时候效果会有一定的差异。
    位图字体是由美术制作每个字符的图片,FGUI编辑器点击菜单“编辑”->“创建位图字体”,然后弹出的字体编辑窗口,把资源库中字体的图片子资源拖动到字体编辑窗口中,并切实每个图片对应的字符,点击保存即可。


    GTextField.png

    动态创建文本

    const testText = new fairygui.GBasicTextField();
    testText.setSize(100,50);   // 设置文本大小
    testText.fontSize = 30;     // 设置文本字体大小
    testText.color = "#ffffff"; // 设置字体颜色
    testText.font = "ui://Package1/testFont"; // 设置字体
    testText.text = '1234';
    testCom.addChild(testText);
    

    注意是GBasicTextField,不能是GTextField。
    Laya中普通文本不支持UBB语法,虽然再编辑器中有效,但是发布后到Laya后任然会失效。普通文本不支持鼠标点击。
    如果文本被设置成单行,换行符会被忽略。
    如果实际使用中出现文本向上偏移时可以试试将文本框的高度拉大(官网至今也未彻底解决文本偏移问题)。

    关于文本的其他一些常规使用就不赘述了,有疑问的可以看看这里

    富文本(GRichTextField)

    富文本继承自文本,然后对Laya的HTMLDivElement进行的包装,所以虽然支持UBB语法,但是FGUI实际还是将UBB转换成html,所以实际使用的时候可以直接使用html语法实现富文本。

    • 图文混排
    // 无法设置资源包中的图片资源也不支持使用图集
    testText.text = "Hello Fairygui<img src='res/skill014.png'/>";
    
    GTextField_0.png
    • 修改显示图片的大小
    testText.text = "Hello Fairygui<img src='res/skill014.png' style='width:50px;height:50px'/>";
    
    GTextField_1.png
    • 获取富文本中的HTMLDivElement对象
    var div:HtmlDivElement = aRichTextField.div;
    

    其他的用法和HTMLDivElement无差,可以参考这位网友的帖子:Laya 富文本 HtmlDivElement

    相关文章

      网友评论

        本文标题:Laya FairyGui系列七 GTextField

        本文链接:https://www.haomeiwen.com/subject/lmvgictx.html