zoukankan      html  css  js  c++  java
  • 【咸鱼教程】BitmapLabel位图字体使用

    引擎版本3.2.6

    教程目录
    一 为什么要使用位图字体
    二 如何使用位图字体
    2.1 TextureMerger制作位图字体
    2.2 exml中使用位图字体
    三 Demo源码


    一  为什么要使用位图字体
    egret在手机端发布的h5,一般显示的都是手机自带默认字体。
    要显示特殊字体的话,一般会用到位图字体。例如下图中的伤害数字。

     

    二 如何使用位图字体
    2.1 TextureMerger制作位图字体

    首先打开Texturemerger。(https://www.egret.com/products/others.html#egret-texture
     


    选择Bitmap Font
     

    新建字体,我随意新建的test
     

    选择添加字符
     


    添加如下图片。字体图片一般是美工提供,我这里自己随意制作的。
     


    注意左边栏的图片名要和数字一致。比如左边栏“1”就对应着图片数字1。
    如果是图片是“啊”,则左边栏图片名也应该是“啊”。
     


    导出字体
     

    得到两个文件。一张位图字体的png图,和一个fnt字体配置文件。
    将两个文件导入default.res.json中加载。
     


    任意新建一个exml皮肤文件,拖动一个BitmapLabel控件到exml上。
     

    选中BitmapLabel,设置位图字体为我们的test_fnt。
    如果没有,看看是不是没有将test.fnt和test.png导入default.res.json。
     




    设置BitmapLabel的文本为“123”,则可以看到位图字体可以正常显示了。
     

    源码Demo

  • 相关阅读:
    【转】wpa_supplicant与wpa_cli之间通信过程
    CSS Hack
    HTML5测试(二)
    HTML5测试(一)
    百分号编码(URL编码)
    DOM事件处理函数
    JS数组
    JS中for循环嵌套
    Codecombat 游戏攻略(计算机科学三)2
    Codecombat 游戏攻略(计算机科学三)
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/9219976.html
Copyright © 2011-2022 走看看