Chart.js pour RMMV

Bonjour à tous.

Ca faisait longtemps que je n'avais rien posté ici, alors voilà de quoi rattraper en partie mon retard 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  :
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

+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

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 =)

News : Chart2 est désormais disponible ici : https://www.rpgmakervx-fr.com/t22398-sphinx-chart2
Ce plugin ne sera donc plus maintenu.