如何在 Phaser 游戲中使用 ChartJs

Question

我想在 Phaser 中用一些圖表顯示統計數據，我正在使用 chart.js。我有一個問題和一個問題

1. 問題：我試圖在移相器中加載生成的 Chart.js base64Image，但它沒有顯示。 我錯過了什么嗎？

2. 問題：是否有可能在移相器 canvas 上繪制 chart.js？ 因為如果可能的話，我想在游戲中有圖表 animation。

這是一個迷你演示，展示了我的嘗試：
（帶有演示圖表生成）

 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

感謝@DerekLawrence的評論，animation 的最佳解決方案是使用移相器Phaser.GameObjects.DOMElement （ 文檔鏈接） 。

這里的演示工作：

 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>

順便說一句：我找到了 base64 圖像沒有顯示的原因，我未能等待圖像加載（事件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);
}