如何在VS Code中为Tilemap内的特定数字设置不同颜色？

我有一个由嵌套表组成的Tilemap，代码如下：

tilemap = {
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 1
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 2
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 3
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 4
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 5
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 6
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 7
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 8
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 9
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 10
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 11
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 12
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 13
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 14
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 15
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 16
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 17
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 18
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 19
        {0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 20
        {0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},-- 21
    }

目前难以区分其中的0和1，希望能为这些特定数字设置不同的显示颜色，但仅找到修改所有数字颜色的方法，特此求助。

解决方案 #

一、在代码编辑器中实现语法高亮区分（以VS Code为例） #

如果是想在编辑器里让0和1显示不同颜色，可以通过自定义语法规则实现：

1. 打开VS Code的settings.json（快捷键Ctrl+,后点击右上角的打开设置图标）
2. 添加以下配置，为数字0和1指定不同颜色：

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "constant.numeric.lua",
            "settings": {
                "foreground": "#ffffff"
            }
        },
        {
            "scope": "constant.numeric.lua",
            "settings": {
                "foreground": "#ff0000"
            },
            "filter": {
                "regex": "^1$",
                "match": "1"
            }
        },
        {
            "scope": "constant.numeric.lua",
            "settings": {
                "foreground": "#00ff00"
            },
            "filter": {
                "regex": "^0$",
                "match": "0"
            }
        }
    ]
}

这段配置会把所有Lua数字默认设为白色，然后单独把1设为红色，0设为绿色，你可以根据需求修改颜色值。

二、在程序中渲染Tilemap时区分颜色 #

如果是要在程序运行时显示不同颜色的Tile，你可以在渲染逻辑中根据数值判断并设置颜色：
以Lua（Love2D框架）为例：

function love.draw()
    local tileSize = 20
    for y, row in ipairs(tilemap) do
        for x, tile in ipairs(row) do
            -- 根据tile值设置颜色
            if tile == 1 then
                love.graphics.setColor(1, 0, 0) -- 红色
            else
                love.graphics.setColor(0, 1, 0) -- 绿色
            end
            -- 绘制方块
            love.graphics.rectangle("fill", (x-1)*tileSize, (y-1)*tileSize, tileSize-1, tileSize-1)
        end
    end
end

这段代码遍历Tilemap，遇到值为1的tile就用红色绘制，0则用绿色绘制，你可以调整颜色和绘制方式适配自己的项目。

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