[Unity UGUI] use image display Numbers (CustomFont) to record notes


  1. 直接在Photoshop里按照固定的尺寸和网格把图片依次排列,因为后面我们只需要一张PNG的图片。
  2. 把PNG图片导入Unity工程
  3. 创建材质球,使用Unlit>Transparent材质,关联上述贴图

  4. 创建Custom Font,将上述材质球关联到Default Material中。

Uv-X,Uv-Y当前对应数字的图片的左下角,因为unity把整张图按0-1划分的,所以里面填的就是:  X/整图宽  ,Y/整图高

Uv-W,Uv-H  对应的图片的宽高,同上也是填的比例


Vert-X,Vert-Y  偏移量

Vert-W,Vert-H,实际宽高,但是记住,坐标是从左下角开始的,所以高度要为负,才是正常显示,然后为了跟Text里面的对齐对应上,最好把Vert-Y偏移量填上正的高度.

Advance  根据自己测试,这个可以是要填宽度的,但是可以比上面的Vert-W小,为什么呢,因为Vert-W可能包含透明背景,数值就得自己调,可以发现越小,数字之间的距离就越小了,太小就会重叠


  1. 先将Character Rects的size设置为1,然后设置第一个元素的参数
  2. Index为字符的Ascii码,例如0为48. 还有个办法,可以设置Custom font的Ascii Start Offset为48,然后从0-9的Index依次设置成0-9,结果是完全一样的。 
    Uv:整张贴图左下角为(0,0)点,右上为(1,1)点,因此如果是一个尺寸为256*256的图片,划分方式是4*4,那么第一个物体的Uv是这样的: X:0 Y:0.75 W:0.25 H:0.25 (Y是0.75因为是从下往上数,第一个字符的图片左下角的Y位于3/4处。宽度和高度是0.25,因为每个字符的宽和高都占据了整张图宽和高的1/4,其他Uv划分方法的图片类推,不多解释了) 
    Vert是实际尺寸和偏移,X:0 Y:0 W:64 H:-64 偏移为0,像素宽是64,注意,高度是-64,至于为什么是负数,应该也是从左下角往右上角开始算起。
    Width是64
  3. 第一个填写好以后,再把Character Rects的Size改成需要的字符数量,本例为10。这样新增的字符都会复制第一个字符的设置。只需要改动Index和Uv中的Y了。

  4. 设置好字体以后,创建一个Text,关联上一步的字体,还要设置Material为创建的材质(这样才能正确显示字体效果)。之后就可以输入你创建的自定义字体了


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值