如何让Phaser.Text标签无角度上下排列且字体不翻转（无换行）

嘿，这个问题我之前做Phaser项目的时候刚好踩过坑，给你几个不用翻转字体、也不用手动给每个字母加换行的优雅解决方案：

不管你用的是Phaser 2还是3，都可以通过设置wordWrap的宽度为单个字符的尺寸，让每个字符自动换行，实现垂直排列效果，完全不用修改原始字符串：

Phaser 3 示例代码 #

// 创建垂直排列的文本，直接用原始字符串"CAT"就行
const verticalText = this.add.text(100, 100, 'CAT', {
    fontSize: '32px',
    fontFamily: 'Arial',
    align: 'center', // 让文字居中，排版更美观
    wordWrap: {
        width: 32, // 宽度设为单个字符的大小（和fontSize一致即可）
        useAdvancedWrap: true // 开启高级换行，确保单个字符强制换行
    }
});

Phaser 2 示例代码 #

// Phaser 2的配置略有不同，直接设置wordWrap和wordWrapWidth即可
var verticalText = game.add.text(100, 100, 'CAT', {
    font: '32px Arial',
    align: 'center',
    wordWrap: true,
    wordWrapWidth: 32
});

这个方案的优点是零字符串处理，直接用原始文本就能实现需求，完全不会有字体翻转的问题。

如果自动换行的宽度设置不符合你的需求，还可以用一个小技巧：给字符串的每个字符之间插入零宽空格（\u200B），再开启自动换行，这样Phaser会自动把每个字符拆成单独一行，而且不会在文本中显示额外空格：

// 先写个简单的工具函数处理字符串
function convertToVertical(str) {
    return str.split('').join('\u200B');
}

// 生成垂直文本
const verticalText = this.add.text(100, 100, convertToVertical('CAT'), {
    fontSize: '32px',
    fontFamily: 'Arial',
    align: 'center',
    wordWrap: {
        width: 1,
        useAdvancedWrap: true
    }
});

这个方法的优势是灵活性更高，你可以自由控制哪些字符需要换行，比如想让某些字符连在一起显示也很容易调整。

如果你的项目需要更专业的垂直排版效果（比如类似中文竖排的样式），可以找支持垂直排列的字体，或者用字体编辑工具自己制作一个，然后在Phaser中直接使用这个字体，输入普通字符串就会自动垂直显示。不过这个方法适合长期维护的项目，临时需求的话前面两个方案更高效。

内容的提问来源于stack exchange，提问作者Tom