事情是这样的,上月社区涌现了 3 位实力强劲的 00 后,又是极限开发,又是疯狂输出开发笔记

C 姐钦佩满满的情况下,忍不住催更那些公众号长草的 up 主,于是久不更新的白玉无冰百忙之中抽出时间,更新了一波组件供大家参考。

在这里贴一位冰冰的狂热粉丝的表白截图,如果大家喜欢的话,文案自取。fc1c2de0f8c43266b70611474e0d0a3a.png08abbddc159c7f51d87886f2374b2501.png038bdb597fb05061cfb1279d15d91310.png

1cda6af2326d261b58bd3ad6eb790ae9.jpeg

前言

最近韭菜长的不错,公众号也有点长草了,出来割一波。777dca2bdf575d7dfebcba28948d0345.png

1877e976f4960894a1b42a1b01f9ea78.jpeg
割草

逛论坛看到这么一个需求,有人想要圣旨一样布局的文本。

a439fe356d4442c6a7811750a4053da2.jpeg
问题

于是白玉无冰梭哈一下,写了一个简易的组件供在座的各位参考。

本字体组件支持(就是原本系统字组件Label的阉割版本) :

  • 系统字体

  • 空格,斜体,粗体

  • 字体大小、行高

但暂未支持字体资源、对齐模式、缓存模式、排版模式、下划线。(不过相信你看了这篇文章你自己也会扩展这些功能,不是白玉无冰懒🐶)

使用方法和效果预览如下:

00c686013a7c381db2c222bb1cd3eb13.gif
使用方法和效果预览
c1d6b519e1766b44b22e8cab96ddf266.gif
调整属性

实现

实现这个组件的精髓在于借鉴抄,翻源码改造一下!

可能有些小伙伴不懂如何找源码,只需打开Cocos Creator编辑器,点击右上角的编辑器按钮就能找到了。

b261301c7845e5359af908985830495e.gif
寻找源码

接着我们就参考label.ts中的源码,写一个组件继承他,修改他的assembler,指向我们写的。

5d2ae69f761d1045eba5c8ed87f7f898.jpeg
继承

最后我们补上这个自定义的assembler,参考源码中的ttf.tsttfUtils

719bee54c49bb7585bf7b8c13905bf66.jpeg
assembler源码

主要是修改这个节点的大小和计算每个字符的位置,稍微改改,很快就完成了。

a93faf48ccb046fa5102d96316229fb9.jpeg
修改大小计算
8b5a9cb53408451cc337fa212365555b.jpeg
修改位置计算

小结

翻源码!查资料!借鉴!assembler!

以上就是白玉无冰使用 Cocos Creator 3.0.0 实现 "文本从右向左竖直布局!" 的技术分享,希望大家喜欢。7905123bbcc75c0ff2fe1f1cab20730b.png

往期精彩

f56bae28753a09a9a2b6ba43c7711919.jpeg

8973f5732488e8f10a32d198a776e2a5.jpeg

5c62b8caba70eabcda20d930a3b067d3.jpeg

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐