Aller en bas
Sphinx
Sphinx
Membre

Nombre de messages : 69
Distinction : aucune
Date d'inscription : 08/03/2016
https://genie23.fr/js-rmmv/mes-plugins-rmmv/

RPG Maker MV Sphinx-Chart2

Mer 1 Jan 2020 - 1:13
Sphinx-Chart2

Mesdames et messieurs, makeuses et makers, je vous propose aujourd'hui la seconde version d'un système sur lequel je me suis penché voilà un peu plus d'un an : pouvoir afficher des graphiques dans son jeu. La première mouture, Sphinx-Chart, est encore disponible ici : https://rpgmakervx.1fr1.net/t22212-chart-js-pour-rmmv.
Alors pourquoi une deuxième version, me direz-vous. Eh bien parce cette première version permettait effectivement d'afficher des graphiques, mais pour cela créait des canvas supplémentaires. Depuis, j'ai gratté un peu dans RPG Maker MV, et dernièrement j'ai découvert des choses intéressantes. Les bitmap, contenus entre autre dans les sprites, possèdent un canvas et son contexte 2D. Aussi, j'ai tenté d'utiliser la librairie Chart.js sur le contexte d'un bitmap. Malheureusement sans succès, j'ai rencontré une erreur WebGL et rien ne s'affichait.
Bon, je ne me suis pas décourragé, et je me suis dit : "Sphinx, si tu ne peux pas utiliser une librairie externe pour faire le boulot, t'as plus qu'à le faire toi même". Et c'est là que les athéniens l'atteignirent. En plus ou moins un jour, j'ai pondu près de 1.000 lignes de code pour arriver à un résultat que je trouve satisfaisant. Mais je vous en laisse seuls juges.

L'installation

Ce système s'appuie sur plusieurs scripts. D'abord, le plus petit mais non des moindres, mon plugin "fourre-tout" où je rassemble les fonctions transverses que je suis susceptible d'utiliser dans d'autres plugins, mon polyfill :


Ensuite, il faut ajouter les fonctions d'accélération que j'ai récupéré sur internet et qui servent pour l'animation des graphiques :


Enfin, et c'est le coeur du sujet, le plugin générant des graphiques sous forme de sprites :


Et pour quel résultat ?


Bonne question. Voici quelques exemples de graphiques générés à partir de données aléatoires :

Sphinx-Chart2 Image

Sphinx-Chart2 Image-1

Sphinx-Chart2 Image-2

Ce que ces images ne montrent pas, c'est que ces graphiques sont animés (une animation qui est déterminée par une courbe d'accélération Math.easing.xyz). Aussi, afin de pouvoir tester par vous même le résultat, j'ai créé une scène (dont les images ci-dessus sont tirées) que je partage également :


En outre, j'ai créé une autre scène pour bien visualiser les courbes d'accélération. Pour la déclencher, utilisez la commande de plugin DEMO_EASING_GRAPH. Ensuite, vous pourrez naviguer entre les méthodes d'easing grace aux boutons à gauche et à droite. Et comme ca récupère les clés de l'objet Math.easing, si vous définissez votre propre courbe d'easing, vous pourrez également tester les courbes que vous aurez ajouté.


Et pour ceux qui voudraient tester avant d'importer tous ces scripts (3 + 1), j'ai ouvert un site sur lequel j'ai hébergé les démos de mes plugins RMMV. Evidemment, les performances laissent un peu à désirer (il faut s'armer de patience) mais ca marche plutôt pas mal.

Enjoy it !


Dernière édition par Sphinx le Dim 5 Jan 2020 - 16:01, édité 1 fois
Kingdommangas
Kingdommangas
Membre

Nombre de messages : 1401
Localisation : Ma tête
Distinction : Débrouillarde notoire é_è [Mist']
Ou celle qui partageait plus vite que son ombre [Gel']
Poisson 2017 [Amal]
Grâce à elle, tout le forum appelle Yamashi "Mamashi" [Yama]
Entraide d'Or
Règne dans l'ombre de la commu'
Youtubeuse beauté reconvertie dans le gaming [Amal']
Date d'inscription : 05/05/2015
https://www.youtube.com/channel/UCqGFuGrzm7jim1o5QJ4lKvg

RPG Maker MV Re: Sphinx-Chart2

Mer 1 Jan 2020 - 10:29
C'est intéressant d'afficher des graphiques mais on choisit nous même les valeurs à affiché ?
Sphinx
Sphinx
Membre

Nombre de messages : 69
Distinction : aucune
Date d'inscription : 08/03/2016
https://genie23.fr/js-rmmv/mes-plugins-rmmv/

RPG Maker MV Re: Sphinx-Chart2

Jeu 2 Jan 2020 - 6:10
Bien sur, c'est au moment de la création du sprite Chart2 que vous définissez les informations du graphique (titre, labels des abcisses, labels des catégories de données, et bien entendu les dites données).
Voilà la syntaxe pour créer un graphique :
Code:
new SphinxChart2({
    type: "line",
    title: "Titre du graphique",
    categoriesLabels: [ "Catégorie1", "Catégorie 2" ],
    xAxisLabels: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
    datas: [
        [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // Les données correspondant à Categorie 1
        [ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1] // Les données correspondant à Categorie 2
    ],
    options: {
        easing: easing,
        duration: 1,
        background: background,
        forceMinToZero: false,
        position: {
            x: 166,
            y: (Graphics.boxHeight - 480) / 2,
            width: 640,
            height: 480,
        },
        padding: {
            top: 10,
            left: 25,
            right: 25,
            bottom: 25,
        }
    }
});

Avec une petite subtilité pour les graphiques pie et doughnut : comme il ne peut y avoir qu'une série de données, le tableau passé à la clé data doit être un tableau à une dimension.
Sphinx
Sphinx
Membre

Nombre de messages : 69
Distinction : aucune
Date d'inscription : 08/03/2016
https://genie23.fr/js-rmmv/mes-plugins-rmmv/

RPG Maker MV Re: Sphinx-Chart2

Dim 5 Jan 2020 - 16:03
Pardon pour le double post, j'annonce une mise à jour du premier post.

J'ai ajouté une scène (non indispensable pour que les Chart2 fonctionnent) pour vous permettre d'afficher les courbes d'accélération :


Cette scène est appelée par la commande de plugin : DEMO_EASING_GRAPH.
Contenu sponsorisé

RPG Maker MV Re: Sphinx-Chart2

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum