Partagez
Aller en bas
Sphinx
Sphinx
Membre

Nombre de messages : 61
Distinction : aucune
Date d'inscription : 08/03/2016

RPG Maker MV Chart.js pour RMMV

le Dim 18 Nov 2018 - 13:53
Bonjour à tous.

Ca faisait longtemps que je n'avais rien posté ici, alors voilà de quoi rattraper en partie mon retard Smile J'ai réfléchi un moment, et je me suis dit que j'aurai peut-être à insérer des graphiques dans mon jeu. Par exemple, pour mettre en forme de façon agréable les statistiques du joueur ou encore l'évolution de son argent =)

Installation :
L'installation se fait en 2 étapes. D'abord vous devez aller chercher la dernière version de la bibliothèque ChartJs sur leur site officiel : https://www.chartjs.org. Vous pouvez prendre la version non minifiée (Chart.js) ou la version minifiée (Chart.min.js, plus légère).
Important : Si vous avez pris la version minifiée (Chart.min.js), il vous faudra la renommer en Chart.js dans le dossier plugins de votre projet.

Ensuite, ajoutez un nouveau script dans les plugins de votre projet, appelez le Sphinx-Charts.js et insérez le code suivant :


Utilisation :
Vous pouvez l'utiliser dans n'importe quelle scène, plus ou moins à la manière d'un sprite en l'initialisant ainsi :
Code:
chart = new SphinxChart(
    type: TYPE,
    coords: COORDS,
    data: DATAS
);
où :

  • TYPE est le type de graphique (parmi ceux disponibles dans la bibliothèque à savoir :

    • "line"
    • "bar"
    • "horizontalBar"
    • "radar"
    • "pie"
    • "doughnut"
    • "polarArea"
    • "bubble"
    • "scatter"


  • COORDS est un objet javascript contenant les clés suivantes :

    • x : coordonnée horizontale du graphique
    • y : coordonnée verticale du graphique
    • width : largeur du graphique
    • height : hauteur du graphique


  • DATAS est l'objet à passer à la clé data d'un graphique ChartJs. Je vous invite à lire leur documentation sur le sujet


/!\ Important : Quand vous voulez effacer votre graphique (parce que vous quittez la scène où il est affiché par exemple), vous devez impérativement appeler
Code:
chart.destroy()
En effet, la création d'un graphique ne génère pas un sprite à ajouter à la scène et qui disparaitrait automatiquement à la fin de la scène. ChartJs ne travaille qu'avec des canvas, aussi à chaque nouveau graphique, ce plugin génère un conteneur (une div pour être précis) qui permet d'ajuster la taille du graphique, contenant un canevas html qui affiche le graphique. La fonction destroy détruit complètement le conteneur et le canevas.
Pour la même raison, il n'est pas nécessaire (ni même possible en fait) d'ajouter le graphique à la scène par un appel d'un Scene.addChild(). Dès que le constructeur est appelé, le graphique s'affiche.

Ce plugin dispose de 4 paramètres modifiables, représentant les 4 coordonnées (x, y, largeur, hauteur) par défaut, utilisées si elles ne sont pas précisées dans l'initialisation du graphique.

Exemple d'utilisation :
Pour tester mon système, j'ai réalisé une commande de plugin permettant d'afficher les statistiques des 4 héros du jeu en bas à droite de  :
Chart.js pour RMMV Charts10
Voici le code que j'ai utilisé pour générer ce graphique :
Code:
datasets = [];
for(var id in $gameActors._data) {
 actor = $gameActors.actor(id);
 datasets.push({
 label: actor.name(),
 data: [ actor.mhp, actor.mmp, actor.atk, actor.def, actor.mat, actor.mdf, actor.agi, actor.luk ]
 });
}
this.chart = new SphinxChart({
 type: "radar",
 coords: {
 x: 414,
 y: 222
 },
 data: {
 labels: [ "PV", "PM", "Attaque", "Défense", "Magie", "Défense Magie", "Agilité", "Chance" ],
 datasets: datasets
 },
 options: {
 scale: {
   ticks: {
  display: false
   }
 }
 }
});

Licence :
Ce plugin est diffusé sous licence Creative Commons 3.0 BY-NC. Vous pouvez l'utiliser librement dans tout projet non commercial en me créditant Smile
Shamugan
Shamugan
Membre

Nombre de messages : 1324
Localisation : Perdu quelque part dans Shamu's Land, au bord des portes de la folie, entre l'art, la science et la philosophie... À la même position que n'importe quel être humain en somme et il me semble :3
Distinction : Shashamumugangan [Yama feat GJLP]
Pavé César! [mais on aime! Gel]
Qu'est que tu ferais sans moi :3 [Yama']
Chouette amoureuse de Boubou [Ministre de la Culture]
Date d'inscription : 05/07/2016

RPG Maker MV Re: Chart.js pour RMMV

le Dim 18 Nov 2018 - 14:26
+5 points de participations (c'est ajouté mais l'affichage bug, don't know why x) )

C'est bien sympathique sinon :3
Bon, c'est sur MV, donc tant pis pour moi xD. Mais y a moyen de faire des trucs sympa avec ça^^
Danke danke pour le partage =p
Sphinx
Sphinx
Membre

Nombre de messages : 61
Distinction : aucune
Date d'inscription : 08/03/2016

RPG Maker MV Re: Chart.js pour RMMV

le Dim 18 Nov 2018 - 14:34
Ah oui, c'est pour MV ^^ Et comme (sauf erreur de ma part), VX et XP ne sont pas basés sur la technologie HTML5, je ne vois pas comment l'adapter à ces anciennes versions =)
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum