[MV] Portage de mes GUIs

Edit : Lien vers un projet de démo technique : http://www.tonyryudev.com/dev/projet/
ATTENTION : Veillez à vider le cache de votre navigateur pour prendre en charge les mises à jour



J'avais passé pas mal de temps sur les versions VX et VXace, a créer des GUIs (Graphical User Interface : des boutons, des champs de saisies, des zones de textes, etc...) qui fonctionnaient très bien et que j'avais mis en place sur un projet online.

Du coup, maintenant que la souris est gérée nativement, il n'y avait pas a hésiter une seule seconde sur le portage vers la version MV.

Mais vous allez certainement me demander, oui, c'est bien mais ça apporte quoi par rapport a ce qui est déjà proposé?? Alors, ça va surtout servir aux autres scripteurs souhaitant réaliser des fenêtres avec beaucoup de contenu de manière très simple. En effet, l'ajout d'un GUI se fait via une seule ligne de code sur la fenêtre, et de nombreux événements (onrollover, onclick, etc...) peuvent être liés à une fonction de la scene.

Petit exemple, d'une fenêtre gui ajoutée sur Scene_Title :



Et le code de cette ajout utilisant le plugin gui :

Code:

 function Window_TestGUI() {
    this.initialize.apply(this, arguments);
  }

  Window_TestGUI.prototype = Object.create(Window_Gui.prototype);
  Window_TestGUI.prototype.constructor = Window_TestGUI;


  Window_TestGUI.prototype.initialize = function(x, y, width, height) {
    Window_Gui.prototype.initialize.call(this, x, y, width, height);
    
    this.addGui('guiNouveau', new Gui_Button({x:0, y:0, width:300, height:40, imageUrl:"img/pictures/btn.png", text:TextManager.newGame, padding:10}));
    this.addGui('guiContinuer', new Gui_Button({x:0, y:42, width:300, height:40, imageUrl:"img/pictures/btn.png", text:TextManager.continue_, padding:10}));
    this.addGui('guiOption', new Gui_Button({x:0, y:84, width:300, height:40, imageUrl:"img/pictures/btn.png", text:TextManager.options, padding:10}));
    this.addGui('guiUrl', new Gui_Url({x:0, y:200, width:200, height:40, url:'http://www.rpgmakervx-fr.com', text:'Forum RPGmaker', textAlign:'center'}));
  };
  

  var _Scene_Title_create = Scene_Title.prototype.create;
  Scene_Title.prototype.create = function() {
    _Scene_Title_create.call(this);
    this.createTestWindow();
  };

  Scene_Title.prototype.createTestWindow = function() {
    this._tesgui_Window = new Window_TestGUI(0, 0, 350, 300);
    this._tesgui_Window.activate();
    
    this._tesgui_Window.setHandlerGui('guiNouveau', 'onclick', this.commandNewGame.bind(this));
    this._tesgui_Window.setHandlerGui('guiContinuer', 'onclick', this.commandContinue.bind(this));
    this._tesgui_Window.setHandlerGui('guiOption', 'onclick', this.commandOptions.bind(this));
    
    this.addWindow(this._tesgui_Window);
  };

la fonction addGui sur les fenêtre héritant de Window_Gui, permet d'ajouter le Gui sur la fenêtre, et la fonction setHandlerGui, permet de lier une fonction à un événement d'un GUI. C'est tout.

Dans l'exemple ci-dessus, quant ma souris passe sur les boutons, leur affichage change, et également quant je click dessus. Pour le lien, c'est pareil, quant je passe dessus, il devient bleu, et quant je click dessus, ça m'ouvre une nouvelle fenêtre embarqué, ou un nouvel onglet du navigateur web vers le forum.

Il y a encore plein de chose à faire, la case à cocher, le bouton radio, le curseur variable (bien utile pour configurer le son par exemple), la zone de texte, le champs de saisie, etc... Mais ça avance bien


le code du plugin en l'état :
Tonyryu_GUI.js sur BitBucket

Et l'image utilisé pour les boutons à nommer btn.png, et à positionner dans le dossier img/pictures :

ça c'est vraiment super j'ai hâte que toutes tes Gui soient fini et qu'on puisse développer des plugins vachement cool ^^.

Merci Tonyryu ^^

Ca je vais utiliser dans mon projet merci Tony.

Un petit lien pour un projet de test contenant un peu tout ce que j'ai fait à l'heure actuel :

http://tonyryudev.com/dev/projet/

gg trop fort ce petit

Je viens d'ajouter un plugin de connexion à mon serveur applicatif, et qui remonte simplement le nombre de joueurs connectés sur celui-ci en temps réel. J'ai mis le lien du projet dans le premier post.

Intéressant comment arrives tu as voir combien de joueurs sont dans le jeu ?

J'ai créé rapidement un serveur WebSocket, dans lequel j'incrémente une variable globale à chaque connexion d'un client RMMV que je rebalance a tous les clients connectés, inversement quant il y a une déconnexion.

Le serveur est codé à l'arrache en php et il est déployé sur ma machine Linux qui est dans mon garage en full dispo 7j/7, 24h/24.

Ok je comprends plus ou moins, merci pour l'explication c'est pas mal du tout comme truc

En fait sur le même principe, j'ai dans l'idée de créer un jeu avec des mécaniques de jeu solo, mais tout en étant connecté sur un serveur. Ce qui permettra a chaque joueur d'avoir un impact indirecte sur l'expérience de jeu des autres joueurs. Du genre, vous mourrez en combat contre un monstre et vous perdez une pièce de votre équipement, ce même monstre peut du coup looter l'équipement en question dans la partie d'un autre joueur connecté au même serveur. Et des idées comme celle-ci, j'en ai un petit paquet en stock.

C'est ce que j'avais en tête pour mon projet justement et il y a une multitude de petites choses comme celles-ci qui peuvent être pas mal tout en donnant un semblant de jeu multi.

GUI Case à cocher d'ajouté, visible sur la démo technique, lien dans le premier post du topic.

J'ai également ajouter un lien entre un champ input en haut de la page et une fenêtre en jeu. Attention, avec PIXI de lancer pour le jeu, les interractions clavier/souris sur le reste de la page sont chaotique.

Edit : Gui Cursor (Jauge) Ajouté sur le projet de démo

Petit ajout pour Inola, test de la case à cocher sur Test GUI, ça doit répondre a tes attentes.

Question bête : ça fonctionne pour toutes les fenêtres ? Le but étant de faire des menus customs ?

ça s'utilise pour créer ses propres fenêtres et créer des menu custom effectivement. Mais faut mettre les mains dans le javascript

Ajout du plugin d'apprentissage des compétences par l'équipement sur le projet de démo technique en ligne.

Composant Gui_TextInput en cours de réalisation,  il permettrait d'avoir la possibilité d'ajouter des champs de saisie de texte :

Pas mal du tout comme nouvelle option.

Bonne continuation !

Ajout de la gestion du focus des composants sur une fenêtre et ajout du composant de saisie de text :

Tonyryu_GUI.js sur Bitbucket

Serai-t-il possible de faire un menu Opaque et non semi-transparent . Ce qui se rapproche des Final Fantasy des année '90 ?En gros , lorsqu'on appuie sur la touche ''Menu'' on ne vois pas le jeux ( Map , Perso .... )

Quelque Exemple:

Exemple:

Oui c'est largement possible, je bosse sur un projet du même type déjà et c'est possible je peut te le dire ^^.

c'est simple à faire en fait, mais n'a pas grand chose à voir avec les GUIs. C'est simplement que le programme actuel fait une capture d'écran quant on change de Scene et l'affiche en arrière plan.

Ajout d'une map généré de façon procédurale sur mon projet en ligne : http://www.tonyryudev.com/dev/projet/
ATTENTION : Veillez à vider le cache de votre navigateur pour prendre en charge les mises à jour

Ya encore pas mal de boulot pour que ce soit plus propre, mais en l'état la map fait 1 000 000 000 sur 1 000 000 000 de tiles. Ya de quoi se la prendre et se la mordre non??

encore une fois c'est vraiment super ^^ ça fonctionne bien il y a des ptits lac un peu partout c'est cool

Je viens d'ajouter la gestion du drag&drop dans les GUIs, c'est en démo sur mon projet en ligne