位图字体

1 .https://www.bytetalking.com/bitmap-font-maker
2 .就是把美术给的图，合成一张，并且做出映射。实际展示的时候，你输入1，就会显示美术给的1那张图
3 .很多张图片，就是意味着有很多种字体。
4 .还有就是英文就很好弄，但是中文就太多了，不过幸好游戏里面用到的可能不是那么多.

Dynamic

1 .this.add.dynamicBitmapText(200, 300, 'ice', 'tian xia', 128)
2 .BitmapText 对象通过获取纹理文件和描述字体结构的 XML 或 JSON 文件来工作。
3 .在渲染期间，文本的每个字母都被渲染到显示器上，按比例间隔开并对齐以匹配字体结构。
4 .动态位图文本对象与静态位图文本的不同之处在于，它们为渲染过程中渲染的每个字母调用回调。此回调允许您操纵正在呈现的每个字母的属性，例如其位置、比例或色调，从而允许您创建有趣的效果，例如抖动文本，这是静态文本无法做到的。这意味着动态文本需要更多的处理时间，所以只有在您需要它们具有的回调能力时才使用它们。
5 .BitmapText 对象不如 Text 对象灵活，因为它们具有较少的功能，例如阴影、填充和使用 Web 字体的能力，但是您可以用这种灵活性来换取渲染速度。您还可以通过在图像编辑器中处理字体纹理、应用填充和任何其他所需的效果来创建视觉上引人注目的 BitmapText
6 .要创建多行文本，请在文本字符串中插入 \r、\n 或 \r\n 转义码。
7 .xml to json https://codebeautify.org/xmltojson
8 .生成位图字体 https://www.71squared.com/en/glyphdesigner

1686142540719.png

1 . 数字上下浮动，上下按照cos移动，左右在x的 +-2 之间移动，颜色在一堆数组里面循环
const text1=this.add.dynamicBitmapText(32,100,'desyrel','HELLO WORLD',100)
text1.setDisplayCallback(this.text1Call)

text1Call(data){
    rainbowWave+=0.01
    data.color=rainbowColor[parseInt(rainbowWave*100+data.index)%rainbowColor.length]
    data.y=Math.cos(rainbowWave+data.index)*10
    data.x=Phaser.Math.Between(data.x-2,data.x+2)
    return data
  }

2 .动画的思路就是tween来决定动画的值，然后textCall回调函数拿到最新的值渲染
3 .tween动画，textcallback可以同时存在，一起对字体进行动画操作

var text = this.add.dynamicBitmapText(60, 200, 'desyrel', 'HELLO WORLD!', 64);

        text.setDisplayCallback(this.textCallback);

        this.tweens.add({
            targets: text,
            duration: 2000,
            delay: 2000,
            scaleX: 2,
            scaleY: 2,
            ease: 'Sine.easeInOut',
            repeat: -1,
            yoyo: true
        });

Retro Font

1 .Retro Font 类似于 BitmapFont，因为它使用纹理来呈现文本。然而，与 BitmapFont 不同的是，RetroFont 中的每个字符。都是相同的大小。这使得它类似于精灵表。您通常会从旧的 8/16 位游戏和演示中找到这样的字体表

knight3.png

2 .图片资源必须按照chars定义的方式排列，这样使用很局限。

var config = {
            image: 'knighthawks',
            width: 31,
            height: 25,
            chars: Phaser.GameObjects.RetroFont.TEXT_SET6,
            charsPerRow: 10,
            spacing: { x: 1, y: 1 }
        };

        this.cache.bitmapFont.add('knighthawks', Phaser.GameObjects.RetroFont.Parse(this, config));

3 .加载这个字体，并使用动态渲染文字方式

const config = {
            image: 'knighthawks',
            width: 31,
            height: 25,
            chars: Phaser.GameObjects.RetroFont.TEXT_SET6,
            charsPerRow: 10,
            spacing: { x: 1, y: 1 }
        };

        this.cache.bitmapFont.add('knighthawks', Phaser.GameObjects.RetroFont.Parse(this, config));

        this.dynamic = this.add.dynamicBitmapText(0, 100, 'knighthawks', 'PHASER 3 IS IN THE HOUSE');

bitmapText

1 .BitmapText 对象通过获取纹理文件和描述字体结构的 XML 或 JSON 文件来工作。
2 .在渲染期间，文本的每个字母都被渲染到显示器上，按比例间隔开并对齐以匹配字体结构。
3 .BitmapText 对象不如 Text 对象灵活，因为它们具有较少的功能，例如阴影、填充和使用 Web 字体的能力，但是您可以用这种灵活性来换取渲染速度。您还可以通过在图像编辑器中处理字体纹理、应用填充和任何其他所需的效果来创建视觉上引人注目的 BitmapText。
4 .要创建多行文本，请在文本字符串中插入 \r、\n 或 \r\n 转义码