text

最普通的text字体

1 .实现一些普通的效果，json方式创建

let text=this.scene.make.text({
          x:100,
          y:200,
          text:`- ${number}`,
          style:{
            fontFamily:'Helvetica',
            fontSize:'25px',
            color:"#fff",
            stroke:"#4f0702",
            strokeThickness:5,
            fontStyle:'bold italic',
          },
          padding:{
            right:10
          }
        })
 text.setShadow(2, 2, '#333333', 2, false, true)
https://photonstorm.github.io/phaser3-docs/Phaser.Types.GameObjects.Text.html#.TextStyle

2 .可以调字体，大小，粗细，描边，换行，斜体，阴影,可以设置padding(斜体的时候就会看不到)

3 .换行的宽度 ，最大换行数 wordWrap 换行的配置 202204121625347323.gif

4 .maxlines 文本对象中显示的最大行数
5 .还有自己的destory 方法。
6 .但是现在的销毁我都是直接用插件，他有渐变删除。表现好一点
7 .可以加边框，可以颜色渐变

这种究极字体都能展示

    this.add.text(100, 200, '⎝ example text', {
        fontSize: '48px',
        fontFamily: 'Arial',
        color: '#ffffff',
        backgroundColor: '#ff00ff',
        testString: '⎝|MÉqgy'
    }).setStroke(0x111111, 6);

以及各种emoji 表情

1 .https://emojipedia.org/ 这个网站上所有的表情包都能展示
2 .💣
3 .https://home.unicode.org/ 以及这个网站上面的
4 .http://www.webkaka.com/tutorial/js/2022/0412112/
5 .emoji 竟然还能拼接

创建一个聊天框

function createSpeechBubble (x, y, width, height, quote)
{
    var bubbleWidth = width;
    var bubbleHeight = height;
    var bubblePadding = 10;
    var arrowHeight = bubbleHeight / 4;

    var bubble = this.add.graphics({ x: x, y: y });

    //  Bubble shadow
    bubble.fillStyle(0x222222, 0.5);
    bubble.fillRoundedRect(6, 6, bubbleWidth, bubbleHeight, 16);

    //  Bubble color
    bubble.fillStyle(0xffffff, 1);

    //  Bubble outline line style
    bubble.lineStyle(4, 0x565656, 1);

    //  Bubble shape and outline
    bubble.strokeRoundedRect(0, 0, bubbleWidth, bubbleHeight, 16);
    bubble.fillRoundedRect(0, 0, bubbleWidth, bubbleHeight, 16);

    //  Calculate arrow coordinates
    var point1X = Math.floor(bubbleWidth / 7);
    var point1Y = bubbleHeight;
    var point2X = Math.floor((bubbleWidth / 7) * 2);
    var point2Y = bubbleHeight;
    var point3X = Math.floor(bubbleWidth / 7);
    var point3Y = Math.floor(bubbleHeight + arrowHeight);

    //  Bubble arrow shadow
    bubble.lineStyle(4, 0x222222, 0.5);
    bubble.lineBetween(point2X - 1, point2Y + 6, point3X + 2, point3Y);

    //  Bubble arrow fill
    bubble.fillTriangle(point1X, point1Y, point2X, point2Y, point3X, point3Y);
    bubble.lineStyle(2, 0x565656, 1);
    bubble.lineBetween(point2X, point2Y, point3X, point3Y);
    bubble.lineBetween(point1X, point1Y, point3X, point3Y);

    var content = this.add.text(0, 0, quote, { fontFamily: 'Arial', fontSize: 20, color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } });

    var b = content.getBounds();

    content.setPosition(bubble.x + (bubbleWidth / 2) - (b.width / 2), bubble.y + (bubbleHeight / 2) - (b.height / 2));
}

1 .使用. 这样的话，都不用加载背景图片，然后还要两个定位搞得最后还对不齐

this.createSpeechBubble(70, 400, 250, 100, '“And now you\'re a boss, too... of this pile of rubble.”');

自定义换行部位,还有就是根据宽度换行

function create ()
{
    this.make.text({
        x: 400,
        y: 300,
        text: 'The sky above the port was the color of television, tuned to a dead channel.',
        origin: 0.5,
        style: {
            font: 'bold 30px Arial',
            fill: 'white',
            wordWrap: { callback: wordWrap, scope: this }
        }
    });
}

function wordWrap (text, textObject)
{
    // First parameter will be the string that needs to be wrapped
    // Second parameter will be the Text game object that is being wrapped currently

    // This wrap just puts each word on a separate line, but you could inject your own
    // language-specific logic here.
    var words = text.split(' ');

    // You can return either an array of individual lines or a string with line breaks (e.g. \n) in
    // the correct place.
    return words;
}