如何在Phaser游戏中使用Chart.js？含加载问题与动画问询

问题与疑问 #

1. 问题：加载Chart.js生成的Base64图片到Phaser后无法显示
2. 疑问：能否直接在Phaser画布上绘制Chart.js图表并实现动画？

一、修复Base64图片加载失败问题 #

问题根源 #

1. 回调函数中this指向异常，导致Phaser场景上下文获取错误
2. 页面上的Chart画布未隐藏，干扰游戏界面且可能导致生成的图片尺寸不符合预期
3. chart变量作用域问题，导致toBase64Image()调用异常

修正后的代码 #

HTML

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 隐藏用于生成Chart的画布，避免干扰游戏界面 -->
<div id="chart-wrapper" style="display: none;">
    <canvas id="chart"></canvas>
</div>

<div id="phaser-example"></div>

JavaScript

document.body.style = 'margin:0;';

// 生成Chart并返回Base64图片
function generateChart(callback){
    let chart; // 提前声明变量确保作用域正确
    const data = {
        datasets: [{
            data: [{y: 100, x: '01.01'}, {y: 80, x: '04.01'}, {y: 130, x: '05.01'}, {y: 110, x: '06.01'}, {y: 199, x: '08.01'}],
            backgroundColor: '#6BFF6B',
            borderColor: '#6BFF6B',
            fill: true
        }],
    };

    const chartConfig = {
        type: 'line',
        data: data,
        options: {
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { 
                    grid: { color: '#6BFF6B' },
                    ticks: { color: '#6BFF6B' },
                },
                y: { 
                    grid: { color: '#6BFF6B' },
                    ticks: { color: '#6BFF6B' },
                }
            },
            animation: {
                onComplete: () => { 
                    callback(chart.toBase64Image());
                }
            }
        }
    };

    chart = new Chart(
        document.getElementById('chart'),
        {
            ...chartConfig,
            // 手动指定画布尺寸，避免生成的图片尺寸异常
            width: 516,
            height: 170
        }
    );
}

const config = {
    type: Phaser.AUTO,
    width: 536,
    height: 190,
    scene: {
        create
    }
};

function create () {
    const scene = this; // 保存场景上下文，避免回调中this指向问题
    generateChart(base64Image => {
        // 将Base64图片添加到Phaser纹理库
        scene.textures.addBase64('chart', base64Image);
        // 在场景中添加图片
        scene.add.image(10, 10, 'chart').setOrigin(0);
    });
}

new Phaser.Game(config);

二、直接在Phaser画布绘制Chart.js图表（支持动画） #

可以通过Phaser的RenderTexture创建可绘制纹理，让Chart.js直接渲染到该纹理的画布上下文，从而在游戏内实现图表动画效果。

实现代码 #

HTML

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>

<div id="phaser-example"></div>

JavaScript

document.body.style = 'margin:0;';

const config = {
    type: Phaser.AUTO,
    width: 536,
    height: 190,
    scene: {
        create
    }
};

function create () {
    const scene = this;

    // 创建RenderTexture，用于承载Chart图表
    const chartTexture = scene.make.renderTexture({
        x: 10,
        y: 10,
        width: 516,
        height: 170
    }, true);

    // 获取RenderTexture的画布上下文，供Chart.js渲染使用
    const ctx = chartTexture.getContext();

    // 初始化Chart.js，直接渲染到Phaser纹理上
    new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                data: [{y: 100, x: '01.01'}, {y: 80, x: '04.01'}, {y: 130, x: '05.01'}, {y: 110, x: '06.01'}, {y: 199, x: '08.01'}],
                backgroundColor: '#6BFF6B',
                borderColor: '#6BFF6B',
                fill: true
            }],
        },
        options: {
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { 
                    grid: { color: '#6BFF6B' },
                    ticks: { color: '#6BFF6B' },
                },
                y: { 
                    grid: { color: '#6BFF6B' },
                    ticks: { color: '#6BFF6B' },
                }
            },
            // 配置Chart.js动画，动画会直接渲染到Phaser纹理中
            animation: {
                duration: 2000,
                easing: 'easeOutQuart'
            }
        }
    });
}

new Phaser.Game(config);

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