Logo
    打开 Gandi IDE
    Gandi IDE 🧑‍💻 开发者中心 @ 共创世界

    Designed by 2ndR with love @ Chengdu

    Tencent QQGitHub
    Animate Text 艺术字 2.0
    Animate Text 艺术字 2.0

    Animate Text 艺术字 2.0

    📚 返回主页面
    ‣
    更多链接

    其他扩展文档

    如何使用 Gandi 多莉实现检测到底碰到了哪个克隆体
    Simple MMO
    媒体助手 Media Utils 文档
    Archive Code
    Arkos Code Snippets
    Regex VI
    4D Pocket
    Data Utils
    Pure Math
    A* 奥德赛
    社区连接 Kontakt
    Featured
    Sugar
    Canvas
    Physics Engine
    Animate Text 艺术字 2.0
    Terminal
    🎮
    移动端配置按键
    G-Kamera
    AI Hub
    Quake 雷神
    Fermi

    背景

    Scratch Lab 为了帮助 Screachers 们在运行程序的过程中动态地生成文本而开发了 Animate Text 艺术字的插件。有了这个插件,让许许多多初学者们可以轻松地实现像这样的《 酷 炫 效 果 》:

    然后,这个插件依然有很多缺陷,例如:

    • 不能为字体设置描边,当字体颜色和背景色一样时,字就看不到了;
    • 打字机的效果很好,但不能控制每个字出现的时间;
    • 字体颜色不支持渐变色;
    • 字体载入需要时间,在字体被载入完毕前,使用艺术字插件会卡顿;
    • 无法任意地控制换行,高级的字体显示功能只能用 Canvas 来绘制;
    • 字体太少

    于是,艺术字 2.0 就是致力于解决以上的问题。

    效果展示

    有了 艺术字 2.0, 你可以选择更多字体了:

    image

    也能为字体增加描边效果了:

    image

    也终于可以随意换行了:

    image

    如果用打字机特效的话,终于可以控制每个字出现的速度了:

    当然,还支持了渐变特效:

    image

    如果希望是左右渐变,当然也很简单,甚至还能设置行高:

    image

    注意

    艺术字 2.0 有两个部分,在分割线以上的属于 Scratch Lab 的贡献,使用这些积木块的作品可以跨社区使用(部分字体除外)。 分割线以下的属于 Gandi IDE 在原插件的基础上进行的修改,使用了这些积木就不能再在其他社区中打开您的作品了(除非其他的社区按照 Gandi 修改的标准进行了跟进)。

    方法和定义

    显示文字

    image

    把“欢迎来到我的项目!” 显示到屏幕中,坐标是当前角色的坐标。

    注意:当使用了显示文字时,当前角色会隐藏

    用特效显示文字

    image

    可以选择三种,彩虹、打字机和放大。分别特效如下:

    显示角色

    image

    使用后角色会从艺术字变回角色的造型。

    设置字体

    image

    可以选择不同的字体用于艺术字的显示。注意:载入字体需要时间,若希望载入后再显示(防止卡顿),请先预加载,并且使用 “当字体载入时” 的事件。

    目前内置字体如下:

    方正达利体
    方正达利体
    仓耳小丸子
    仓耳小丸子
    阿里普惠体 Black
    阿里普惠体 Black
    Ark Pixel Korean
    Ark Pixel Korean
    Minecraft Regular
    Minecraft Regular
    Curly
    Curly
    方正雅珠体
    方正雅珠体
    千图小兔体
    千图小兔体
    Ark Pixel Japanese
    Ark Pixel Japanese
    Dealerplate California
    Dealerplate California
    Handwriting
    Handwriting
    iPix(像素字体)
    iPix(像素字体)
    阿里普惠体 Light
    阿里普惠体 Light
    Ark Pixel Chinese
    Ark Pixel Chinese
    Minecraft Bold
    Minecraft Bold
    Marker
    Marker
    Pixel
    Pixel

    设置文字颜色

    image

    注意,当使用了渐变色后,设置文字颜色将会失效。

    设置文本框宽度

    image

    设置文本宽度,超过这个宽度后,默认会自动换行。 并且对齐方式有三种,左、中和右。

    注意:当使用换行符换行后,超出宽度的显示会被切掉。

    🤹
    注意:以下的方法只能在 共创世界 CCW 和西瓜创客等等使用了 Gandi Engine 的系统中可用。 若使用后,在其他社区中展示可能会导致错误(除非这些社区跟进实现了 Gandi 的方法。

    字体载入事件

    image

    当执行了载入字体后,若字体文件被成功加载时会触发此事件。 这个功能用于作品在启动时,先播放 Loading 界面,然后等待字体载入后,再执行艺术字的效果,以免出现程序卡顿。

    换行方式设置

    image

    换行方式有两种,第一种是按文本框的宽度换行。 这也是默认的换行方式。 但这种方式的缺点是无法准确地控制换行位置。 使用换行符后,就能精准地控制换行的位置了。例如:下面代码展示任意换行下的效果,其中,\n 是换行符:

    image
    image

    设置行高

    image

    你可以设置每行间的间距。 数值只能在 0.5 到 2 之间。 若想换两行,可以用 \n\n 两次换行符。下面是使用 1.5x 间距后的效果:

    image

    设置字体样式

    image
    image

    你可以设置字体的颜色使用渐变色,并且为它添加描边。

    首先,字体渐变色,你可以选择两种渐变方式,上到下,或者左到右。分别效果如下:

    上下
    上下
    左右
    左右

    控速打字

    image

    你可以通过控制打字特效的速度,默认 60ms/字,降低速读可以增大这个数值。

    规划和更新

    规划

    艺术字的定位就是让 Scratch 程序中可以使用动态的、丰富的字体特效。在后续版本中,我们计划更新这些内容:

    1. 自定义字体:可以加载外部字体;
    2. 增加更多的文字特效,例如模糊效果;
    3. 更完善的打字效果,用于游戏中 NPC 的对话。

    有什么希望增加的功能可以联系我们。

    更新日志

    版本
    更新了什么
    v2.0
    增加了: 1. 增加了字体载入成功的事件 2. 增加了大量新字体 3. 增加了换行方式,支持用换行符手动控制换行 4. 字体样式支持了描边特效和渐变色 5. 增加了手动控制打字特效的文字出现速度 Shawn 于 2023 年 3 月 7 日

    致谢和引用说明

    感谢所有给我们提过建议的肝酱,以及字体提供方的授权(收费和免费的)。

    尤其是鸣谢两种字种我们特别喜欢的字体:

    1. 阿里普惠体,是在黑体中比较有设计感的一种;
    2. Ark 系列字体,像素化的开源字体

    你可以在这些地方找到他们的项目:

    GitHub - TakWolf/ark-pixel-font: Open source Pan-CJK pixel font / 开源的泛中日韩像素字体

    Open source Pan-CJK pixel font / 开源的泛中日韩像素字体. Contribute to TakWolf/ark-pixel-font development by creating an account on GitHub.

    github.com

    GitHub - TakWolf/ark-pixel-font: Open source Pan-CJK pixel font / 开源的泛中日韩像素字体
    阿里巴巴普惠体

    永久免费正版商用字体

    fonts.alibabagroup.com

    icon
    Shawn XIAO

    西瓜创客,共创世界创始人。在 Gandi IDE 团队参与到产品设计、渲染器管线开发及拓展开发。

    ✉️ shawn@ccw.site | 飞书链接

    讨论

    本页索引

    • 背景
    • 效果展示
    • 注意
    • 方法和定义
    • 显示文字
    • 用特效显示文字
    • 显示角色
    • 设置字体
    • 设置文字颜色
    • 设置文本框宽度
    • 字体载入事件
    • 换行方式设置
    • 设置行高
    • 设置字体样式
    • 控速打字
    • 规划和更新
    • 规划
    • 更新日志
    • 致谢和引用说明
    • 讨论
    <iframe
      width="100%"
      height="800px"
      scrolling="no"
      src="https://www.ccw.site/embed?id=dev-extensions-animated-text&type=comment"
      title="Gandi Animate Text 艺术字评论区"
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowFullScreen
      scrolling="0"
    ></iframe>