Как использовать ChartJs в игре Phaser

Я хочу показать статистику в Phaser с некоторыми диаграммами, и я использую chart.js. у меня проблема и один вопрос

проблема: я пытаюсь загрузить сгенерированный Chart.js base64Image в фазере, но он не отображается. Я что-то пропустил?
вопрос: Можно ли как-то нарисовать chart.js на канве фазовращателя? Потому что я хотел бы иметь анимацию графика в игре, если это возможно.

Вот мини-демо, показывающее, что я пробовал:
(с генерацией демонстрационного графика)

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/[email protected]/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>

Почему бы не поместить диаграмму поверх элемента холста игры? или диаграммы являются частью игры? извините, если я неправильно понимаю, что я думаю о диаграммах как об отладочных данных.

— 13.01.2023 08:55

@DerekLawrence Ну, я хотел иметь экран статистики, который игрок мог бы проверить во время игры. Я не додумался наложить график на игру. Это может сработать, я должен попробовать это (это может даже решить функцию анимации, которую я хотел). Я подумал об использовании холста/изображения, потому что я могу напрямую обрабатывать все позиционирование и размеры с помощью Phaser, так что мне не нужно слишком беспокоиться о совместимости браузера и DOM. Спасибо за ваш вклад.

— 13.01.2023 10:01

Phaser также может справиться со всем, что связано с домом в игре. Но он все равно будет перекрывать весь холст. Но работает для всплывающих меню, где вам не нужны игровые элементы сверху. photonstorm.github.io/phaser3-docs/…

— 13.01.2023 10:19

javascript chart.js phaser-framework

13.01.2023 08:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Благодаря комментариям @DerekLawrence, лучшее решение с анимацией — использовать фазер 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/[email protected]/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);
}

15.01.2023 06:21

Другие вопросы по теме

Как реализовать связанные диаграммы с помощью Chart.JS

Vue-chartjs горизонтальная гистограмма

Отзывчивый Chart.js в зависимости от размера окна браузера

Несколько диаграмм на одной странице с Laravel и Chartjs

Динамическая гистограмма JS Vue3 с реактивными данными в реальном времени

Как анализировать/подсчитывать массив объектов в Javascript

Пунктирная диаграмма перекрывается в chartjs

Как использовать HTML для меток в react-chartjs?

Диаграммы React — отображать круговую диаграмму, несмотря на нулевые значения (равномерно распределять разделы и отображать цветную диаграмму, когда все значения равны нулю)

Обратный вызов всплывающей подсказки не может распознать метаданные (TS 2339)

Как использовать ChartJs в игре Phaser

Ответы 1

Другие вопросы по теме

Похожие вопросы