如何在 Phaser 游戏中使用 ChartJs

Question

I want to show stats in Phaser with some charts, and I'm using chart.js. I have a problem and one question

1. problem: I'm trying to load a generated Chart.js base64Image in phaser, but it is not showing. Am I missing something?

2. question: Is it somehow possible to draw the chart.js on the phaser canvas? Because I would like to have the chart animation in the game, if possible.

Here is a mini Demo, showing what I tried:
(with a demo chart generation)

 document.body.style = 'margin:0;'; // Chart Generation Helper function for DEMO function generateChart(callback){ let data = { // labels: ['Highscore'], 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'], }], }; const chartConfig = { type: 'line', data: data, options: { maintainAspectRatio: false, plugins: { legend: { display:false } }, scales: { x: { title: {display: false}, grid: { color: '#6BFF6B' }, ticks: { color: '#6BFF6B' }, }, y: { title: {display: false}, grid: { color: '#6BFF6B' }, ticks: { color: '#6BFF6B' }, } }, animation: { onComplete: () => { callback(chart.toBase64Image()); } } } }; let chart = new Chart( document.getElementById('chart'), chartConfig ); } var config = { type: Phaser.AUTO, width: 536, height: 190, scene: { create } }; function create () { generateChart(base64Image => { this.textures.addBase64('chart', base64Image); this.add.image(10, 10, 'chart').setOrigin(0); }); } new Phaser.Game(config);

 <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="chart-wrapper" class="chart" style="height:170px; width:350px;"> <canvas id="chart" ></canvas> </div> <div id="phaser-example"></div>

Answer 1

Thanks to @DerekLawrence comments, the best solution with animation is to use phaser Phaser.GameObjects.DOMElement ( link to documentation ) .

here the demo working:

 document.body.style = 'margin:0;'; // Chart Generation Helper function for DEMO function generateChart(callback){ let data = { // labels: ['Highscore'], 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'], }], }; const chartConfig = { type: 'line', data: data, options: { maintainAspectRatio: false, plugins: { legend: { display:false } }, scales: { x: { title: {display: false}, grid: { color: '#6BFF6B' }, ticks: { color: '#6BFF6B' }, }, y: { title: {display: false}, grid: { color: '#6BFF6B' }, ticks: { color: '#6BFF6B' }, } }, animation: { onComplete: () => { callback(chart.toBase64Image()); } } } }; let chart = new Chart( document.getElementById('chart'), chartConfig ); } var config = { type: Phaser.AUTO, width: 536, height: 190, scene: { preload, create } }; function preload(){ generateChart(); } function create () { let chart = this.add.dom(10, 10, '#chart-wrapper').setOrigin(0); // chart.setInteractive().on('pointerdown', function (){console.info(arguments)}) } new Phaser.Game(config);

 <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="chart-wrapper" class="chart" style="height:170px; width:350px;"> <canvas id="chart" ></canvas> </div> <div id="phaser-example"></div>

btw.: I found the reason why the base64 image was not showing up, I failed to wait for the image to load (the event addTexture ) .

function create(){
    ...

    generateChart(base64Image => {
        this.textures.addBase64('chart', base64Image);
    });
    
    // event triggered after texture is loaded
    this.textures.once('addtexture', function () {
        this.add.image(10, 10, 'chart').setOrigin(0);
    }, this);
}