渲染文字

Flame定制了一些类,帮助我们渲染文本。

文字配置 TextConfig

文字配置包含渲染文字所需的所有印刷信息;文字大小、颜色、字体等。

示例:

const TextConfig config = TextConfig(fontSize: 48.0, fontFamily: 'Awesome Font');
  • fontFamily:常用等字体,比如默认的Arial,或使用在pubspec中添加的自定义字体(点此查看操作方法)。
  • fontSize:文字大小,以pts为单位(默认是24.0)。
  • color: 颜色,类型为ui.Color(默认黑色)。

有关颜色、如何创建颜色的更多信息,请查看"颜色和调色板指南"。

创建配置后,你可以使用它的render函数在canvas上绘制一些字符串:

config.render(canvas, "Flame is awesome", Position(10, 10));

若要设置文本的锚点,可以在render函数中传入anchor参数:

config.render(canvas, "Flame is awesome", Position(10, 10), anchor: Anchor.topCenter);

文本组件

Flame提供了两个文本组件,有了它们,可以轻松在游戏中渲染文本。它们分别是TextComponentTextBoxComponent

TextComponent

TextComponent是渲染单行文本的简单组件。

示例:

TextConfig regular = TextConfig(color: BasicPalette.white.color);

class MyGame extends BaseGame {
  MyGame() {
    _start();
  }

  _start() async {
    Size size = await Flame.util.initialDimensions();

    add(TextComponent('Hello, Flame', config: regular)
      ..anchor = Anchor.topCenter
      ..x = size.width / 2
      ..y = 32.0);
  }
}

TextBoxComponent

TextBoxComponent和上面的TextComponent非常相似,但是顾名思义,它用于在文本框内渲染文本,并根据文本框的尺寸换行。

示例:

class MyTextBox extends TextBoxComponent {
  MyTextBox(String text) : super(text, config: tiny, boxConfig: TextBoxConfig(timePerChar: 0.05));

  
  void drawBackground(Canvas c) {
    Rect rect = Rect.fromLTWH(0, 0, width, height);
    c.drawRect(rect, new Paint()..color = Color(0xFFFF00FF));
    c.drawRect(
        rect.deflate(boxConfig.margin),
        new Paint()
          ..color = BasicPalette.black.color
          ..style = PaintingStyle.stroke);
  }
}

点此查看上面两个组件的示例。

Flame中文站 all right reserved,powered by Gitbook最后修改: 2020-08-22 14:02:33

results matching ""

    No results matching ""