Me voici, avec un tutoriel tout nouveau tout chaud, qui s'adresse aux débutants et aux
autres personnes qui ne connaissent pas le Window de RPG Maker VX.

1°)A quoi va m'avancer ce tutoriel ?

Vous en avez peut-être marre des vieilles fenêtres bleues de VX ? Eh bah, ce tutoriel va
vous permettre de savoir comment les modifier, comment s'organise la window.

Vous ne voyez pas ce qu'est la window ? La voici :

Spoiler:

Pour info : vous trouverez normalement l'image de la window dans ce dossier :
C:\Program Files\RPG Maker VX\RGSS2\System\Window.png

2°)A quoi sert la window ?

Regardez ce message :

Spoiler:

Question : Oui, bah ? Il a quoi de particulier ce message ?

Réponse : Bah, justement, rien ! Toujours le même bleu !
Sachez que c'est la window que j'ai mise en haut qui gère tout !
Vous verrez dans le chapitre suivant tout ce qu'affiche la window.

3°)Ce que gère la window

La window gère :

Premièrement :


Voici l'écran titre.
Regardez mieux le menu :



Sans que vous le sachiez, la window gère dans ce menu :
-Le contour blanc tout moche de la fenêtre :

Spoiler:

-Le "rectangle" blanc qui entoure votre sélection (dans ce cas, "nouvelle partie") :

Spoiler:

-Et tout simplement les horribles et lassantes lignes bleues du fond :

Spoiler:

Mais ce n'est pas tout ! La window ne gère pas que ça !

Vous vous rappelez du message de tout à l'heure ? Nan ? Le revoilà :

Spoiler:

Vous voyez en bas la flèche animée ? Bon, sur image, elle est pas animée, mais testez !
Faites un event d'un perso qui vous dit n'importe quoi et vous remarquerez une flèche animée en bas !

Question : Mais, elle peut pas être gérée par la window, vu qu'elle est animée !
Réponse : Je m'attendais à cette question La réponse est très simple : la flèche est bien sur la window, mais
l'animation est juste l'affichage d'une suite d'images de cette flèche à différentes positions !
Décomposez un gif, et vous verrez qu'il n'est issu que d'un assemblage d'images !

Regardez :

Spoiler:

Le mouvement est lu dans cette ordre :
-La flèche d'en haut à gauche;
-Puis en haut à droite;
-Ensuite, celle d'en bas à gauche;
-Et finalement, celle d'en bas à droite !

Spoiler:

Maintenant, voici une brève présentation des autres parties de la window :

Spoiler:

Question : Mais à quoi ça sert ce truc ?!? Il y a rien dessus !
Réponse : Ah, ça. Il ne s'agit juste que d'un motif superposé à un autre motif. Ne vous en préoccupez pas.

Spoiler:

Question : Mais, c'est quoi encore que ces flèches ?
Réponse : Ce sont les flèches qui disent, par exemple dans l'inventaire, "eh, il y a encore des objets en bas !". Ces flèches servent à avertir de la présence de quelque chose de présent en dessous ou au dessus de l'écran actuel (ou à droite/à gauche, mais beaucoup plus rarement).

Là encore, vous pouvez modifier leur apparence, comme tout ce qui se trouve sur la window (sauf la palette de couleur, évitez d'y toucher, elle est très bien
comme ça^^).

Spoiler:

Question : Oui, une palette de couleurs, et alors ?
Réponse : Ca, ça peut être pratique pour la couleur des messages

Question :Mais... Les messages sont uniquement en blanc ?
Réponse : Mais noooon ! Il existe des codes à placer dans les messages, qui permettent
différentes choses, dont, entre autres, de modifier la couleur du texte du message !
Les voici (je ne les met pas tous, attention) :

Code:

Ici, X est un nombre.
\N[X] : Permet d'afficher le nom du membre n°X dans la BDD.
\V[X] : Permet d'afficher le nombre stocké dans le variable X.
\C[X] : [color=red][b]Permet de modifier la couleur du texte.[/b][/color]
\. : Marque une courte pause dans un message.
\| : Marque une looooongue pause.
\^ : Ferme brutalement la fenêtre du message.
...

Donc, c'est \C[X] qui nous intéresse.
Comment savoir à quelle couleur correspond un nombre ?

Attention ! La première case (la blanche) ne correspond pas au chiffre 1, mais 0 !
Donc, si vous voulez le bleu de la deuxième case, n'inscrivez pas :

Code:

\C[2]

mais :

Code:

\C[1]

Et ainsi de suite ! Facile, non ?

Donc, \C[14] affichera la couleur de la quinzième case !

Un exemple ? Le voici :

Spoiler:

Va donner :

Spoiler:

Et voici la 15ème case de la window :

Spoiler:

Et voilà ! Vous savez maintenant changer la couleur de vos messages !
...
...

...
...
Quoi ? Vous en voulez plus ? Mais bien sûr, suivez-moi !

4°)Modifications finales

4.1°)Notifications

Nous allons manipuler la window pendant ce chapitre. Veillez à ne surtout pas
l'enregistrer dans le dossier initial ! Sinon, votre nouvelle window supprimera l'ancienne,
et vous l'aurez pour TOUS vos jeux, sans pouvoir reprendre l'ancienne !

Vous allez donc devoir l'enregistrer ici :
C\Utilisateurs\MetalStorm\Documents\RPGVX\Projet 1\Graphics\System

ENREGISTREZ LE AU NOM WINDOW !

Recommandation : N'utilisez pas paint pour faire les manipulations !
Lors de l'enregistrement, paint tue la transparence !

Je me sers personnellement de photofiltre ou de paint.NET.

Voici des liens de téléchargement si vous voulez les utiliser :

Spoiler:

4.2°)Changer la couleur de fond des menus et des messages

Alors là, il n'y a pas plus simple

Ouvrez la window, et modifiez la partie en haut à gauche :

Spoiler:

Enlevez la couleur de cette zone, et modifiez-là. Appliquez de préférence un dégradé.
Voici ce que cela donne, après un dégradé de rouge. Je vais vous montrer comment faire par étapes :

-Ouvrez la window :

Spoiler:

Enlevez la couleur de la zone en haut à gauche :

Spoiler:

Remplacez-là par un autre couleur (ou un dégradé, c'est la méthode que j'applique) :

Spoiler:

Enregistrez-le dans le dossier de votre jeu (pour moi : C:\Utilisateurs\MetalStorm\Documents\RPGVX\Projet 1\Graphics\System) au nom Window

Spoiler:

Lancez votre jeu et regardez le menu de l'écran titre ! Et ceux du menu pause !

Spoiler:

Spoiler:

Spoiler:

Bon, c'est pas encore le nirvana, mais c'est déjà ça !

4.3°)Modification de la flèche animée

Là, vous allez rentrer dans la dernière phase de personnalisation du tuto.
Nous avons longuement parlé de la flèche animée, il est temps de s'y attaquer !

Ressortez votre window *fouille dans ses milliers de dossiers*

C'est bon ? Alors, nous voilà prêts !

Là, vous allez le faire en autodidactes, pour une fois

Supprimez les flèches, mettez-y vos propres symboles ! N'oubliez pas le sens de l'animation :

Citation :

Le mouvement est lu dans cette ordre :
-La flèche d'en haut à gauche;
-Puis en haut à droite;
-Ensuite, celle d'en bas à gauche;
-Et finalement, celle d'en bas à droite !

Spoiler:

Voilà, à vos souris ! Soyez créatifs ! Créez-nous une belle animation !
Vous pouvez tout tester :
-Une boule de feu qui explose (comme dans mario :p )
-Un sharingan qui tourne (comme dans Naruto)...
-...

N'oubliez pas que l'animation n'est que sur 4 frames, alors n'imaginez pas faire non plus quelque chose de spectaculaire !
Il s'agit juste d'une "astuce" pour améliorer les messages.

4.4°)Laissez libre court à votre imagination !

Tout est dans le titre ! N'hésitez pas à innover !
Modifiez tout ! Personnalisez votre jeu ! C'est comme
ça que vous arriverez à un bon résultat ! N'ayez pas peur,
deux trois modifs' n'ont jamais tué qui que se soit !

Je n'ai pas parlé des contours blancs des sélections, car je suppose que vous savez maintenant comment les modifier :p

En espérant que ce tutoriel vous aie plu,

MetalStorm.

N'hésitez pas, postez vos Window ! Faites-en profiter les autres !

Ce tuto est super complet, ça fait plaisir à voir ^^

+4 en graphisme ( par défaut ) et +4 en participation /O/

Merci^^

Ca faisait longtemps que cette idée de tuto me trottait dans la tête, et
voyant qu'il n'existait aucun tutoriel de la sorte, je m'y suis mis

Il faut avouer que savoir modifier la window de son jeu est toujours
un plus, niveau graphismes^^

Et j'insiste sur le fait que si vous créez de belles windows, n'hésitez pas à les poster !
Vive le partage !

MetalStorm a écrit:

Maintenant, voici une brève présentation des autres parties de la window :

Spoiler:

Question : Mais à quoi ça sert ce truc ?!? Il y a rien dessus !
Réponse : Bah, justement, si, ça sert ! C'est cette partie qui gère la transparence.

Eeeeuh... Ca c'est un peu n'importe quoi par contre... Ce n'est pas ça du tout qui gère la transparence... Cette partie n'est qu'un motif rajouté sur le premier...
La transparence est gérée via les scripts...

Il y a un élément que tu n'as pas évoqué dans le windowskin:



Il s'agit des quatre flèches au milieu des rebords... Il s'agit des flèches qui indiquent qu'il y a une continuité dans une fenêtre de sélection... par exemple dans la liste des items possédés, s'il y a plus d'objets que ne le permet d'afficher la fenêtre, alors la flèche du bas apparaîtra, puis en descendant, la flèche du haut apparaîtra à son tour...

Il est rare de voir les deux autres flèches, on préfère lister les éléments à la verticale plutôt qu'à l'horizontale...

Sinon bon tuto

Effectivement merci Gothor de m'avoir prévenu, je vais arranger ça^^

EDIT : Oubli des flèches corrigé, ainsi que le problème du motif.

Coucou, encore moi ^^ Juste pour préciser un petit truc =°

Voilà, j'ai étudié un peu le windowskin, et je me suis demandé: Mais comment ça se fait que la partie supérieure gauche du windowskin ne déborde pas derrière la bordure? Les bouts sont arrondis, le bleu devrait donc dépasser?

Que nenni mes amis! La documentation de RPG Maker VX explique cela:

Documentation RPG Maker VX a écrit:

Technically, the window's edges are each two pixels smaller than that, which is a feature that allows for natural-looking rounded corners.

Cela signifie grossièrement, que la partie supérieure gauche (la bleue pour le windowskin de base) est plus petite de deux pixels que les rebords lors de la génération d'une fenêtre... Ainsi donc, si on découpe la partie supérieure gauche comme suit:


On voit que l'image tend vers le violet, sauf un cadre jaune, eh bien la partie supérieure gauche n'ira pas dans ce cadre jaune, elle restera dans le cadre violet... Voilà voilà, j'espère avoir été clair ^^'

En tout cas ton tutoriel est très bien fait et m'a donné envie de me lancer ^^

Voici donc mon tout premier windowskin

Très beau windowskin j'adore le rendu^^

Je te remercie d'avoir contribué à améliorer ce tuto

J'en posterais sous peu aussi

Bon, vu que je suis lancé, je continue =°

Je voudrais rajouter une chose... Le motif supérieur gauche du windowskin est étirée selon la taille de la fenêtre, et ainsi s'adapte peu importe son contenu...
La partie inférieure gauche n'est, elle, pas étirée!!! Elle est répétée dans toute la zone...

En gros, avec ce windowskin:



On obtient une fenêtre avec quatre carrés, mais les quatre carrés répétés jusqu'à ce qu'elle ait tout rempli:



Aussi... J'ai compris pourquoi tu disais que la partie inférieure gauche était la transparence au début ^^

En fait, la partie en haut à gauche n'a pas besoin d'être semi-transparente... sa transparence est modifiée dans les scripts...

En revanche, la partie en bas à gauche a, elle, en effet besoin d'être plus ou moins transparente, car elle sera affichée telle qu'elle sans modification d'opacité...

Edit: non, en fait mon histoire de transparence n'est pas valable... oubliez...

Effectivement Oo
Je ne modifiais jamais la partie inférieure gauche, alors...

Il faut quand même avouer que le jeu est mieux avec la windowskin que tu as fournie 3
messages plus haut qu'avec celle initiale...
... qui est trop basique à mon goût...

J'essaye d'en préparer une belle, avec les flèches de messages animées différentes

Je la posterais quand elle sera finie^^

Sinon, voici une petite window dont je me sert pour mon jeu (attention, elle reste classique) :



Maintenant, voici le rendu in-game :

Spoiler:

Et un petit up pour la route !

Très joli Bravo à toi

J'ai fait une sorte de template pour ceux qui veulent faire les leurs aussi

Bonne initiative^^

Ca parait pas grand chose, mais je trouve que modifier sa window donne un
petit côté esthétique supplémentaire au jeu (je pense que bon nombre de makeurs
en ont marre de la vieille window bleue--').

Gothor a écrit:

Très joli Bravo à toi

Merci, même si elle est très classique^^
Je n'en voulait pas une compliquée pour mon jeu. Vu que l'histoire
de mon jeu est sombre (regardez l'écran titre), je voulais une window sombre.

Les gars, ce sujet est un des meilleurs sur le forum selon moi. Non seulement on y explique super bien le fonctionnement du WindowSkin, mais en plus on donne un template super bien fait pour faire nos propres créations. Excellent travail!

Ca serait presque une bonne base pour lancer un concours de graphisme ^^

Merci beaucoup Jebbou, il est vrai que ce tuto est vraiment très complet, très bien fait

MetalStorm >> Je peux mettre mon template dans ton premier post, que les gens puissent le voir avant les posts suivants? ^^'

Jebbou a écrit:

Les gars, ce sujet est un des meilleurs sur le forum selon moi. Non seulement on y explique super bien le fonctionnement du WindowSkin, mais en plus on donne un template super bien fait pour faire nos propres créations. Excellent travail!

Merci beaucoup Jebbou, ça fait plaisir de voir que des gens apprécient ce tutoriel^^
Je trouvais bête auparavant que personne n'aie pensé à créer un tutoriel sur la
windowskin, qui est excellent moyen de personnaliser son jeu selon moi, sans
avoir besoin de s'y connaître énormément en graphismes ou en scripts.

Ce tutoriel m'a pris quelques heures à faire, mais ça en valait le coup :p

Jebbou a écrit:

Ca serait presque une bonne base pour lancer un concours de graphisme ^^

Bonne idée, le concours du plus beau windowskin^^

Gothor a écrit:

MetalStorm >> Je peux mettre mon template dans ton premier post, que les gens puissent le voir avant les posts suivants? ^^'

...euh...
...non, absolument aucun problème, je rigole^^
Vas-y, sers-toi
Après tout, tu as aussi contribué en quelque sorte au topic, alors vas-y^^

Donc, encore un UP pour la route^^

J'ai encore un petit windowskin pour vous, mais assez original cette fois (enfin, je ne m'en servirais pas dans mes jeux mais bon^^). Avis aux amateurs de couleurs vives (manque de bol, je préfère le noir x) )

Spoiler:

Windowskin

Maintenant, le rendu in-game :

Spoiler:

Le mien :