❤ 0 Créer un Custom Title Screen System (pour RPG Maker 2000/2003)
par Nemausus
Niveau : facile
Sommaire :
I. Qu'est-ce qu'un Custom Title Screen System (CTSS) ?
II. Pourquoi en mettre un dans mon jeu ?
III. De quoi ai-je besoin ?
IV. Création de l'image de fond pour l'écran titre
V. Création du système
VI. Réglages dans la base de données
VII. Exemples de beaux CTSS
I. Qu'est-ce qu'un Custom Title Screen System (CTSS) ?
C'est vrai ça, tu ne peut pas commencer par l'appeler en français ?
Un CTSS est un système personnalisé au même titre qu'un CBS (Custom Battle System) ou qu'un CMS (Custom Menu System), par convention nous l'appelons donc par des initials anglais.
Donc c'est un "système personnalisé"...
Oui. Un CTSS est là pour remplacer le système d'écran titre par défaut de RPG Maker 2000/2003 (l'écran titre de RPG Maker XP se modifiant avec des scripts), à savoir un banal fond avec un simple menu système. Avec votre CTSS, vous pourrez mettre un curseur de votre choix, et la police que vous voudrez pour votre menu, qui sera directement incrusté dans l'image de l'écran titre (fini les gros menus recouvrant l'écran titre).
Un exemple de CTSS : l'écran titre du jeu Aëdemphia par Sylvanor
II. Pourquoi en mettre un dans mon jeu ?
Tout d'abord, pour les raisons citées dans le I. Ensuite, il faut savoir qu'il est beaucoup plus impressionant de voir, dès l'écran titre, un système personnalisé. Ainsi, le joueur aura d'autant plus envie de voir la suite, le CTSS étant un gage de qualité pour ce qui suit. Il faut également savoir qu'encore trop de jeux RPG Maker utilisent le système d'écran titre par défaut. Ainsi, avec un CTSS, votre jeu gagnera en originalité. Seul bémol, avec un CTSS votre menu de chargement (en 2ème place sur l'écran titre) sera bien moins beau, moins lisible. Mais en faisant le pour et le contre, on réalise que de toute manière le menu de chargement est, au final, très peu vue (puisque le joueur n'y passe que quelques secondes le temps de choisir sa partie), et encore il faut qu'il est avancé suffisament dans le jeu pour avoir une sauvegarde. Alors que l'écran titre est souvent choisi pour représenter un jeu, et c'est souvent l'image que le joueur garde en mémoire, ainsi vous avez tout à gagner à opter pour un CTSS. Et en se débrouillant bien, le menu de chargement peut être tout à fait correct.
III. De quoi ai-je besoin ?
De pas grand chose. :)
Normalement, votre image d'écran titre (Title), un système RPG Maker (System), un logiciel de retouche d'image (MS Paint suffit) et un peu d'imagination et de logique suffisent. Mais en plus, pour vous aider, je vous propose 2 templates qui vous aideront grandement (un template est une image avec des repères facilitant la création d'une ressource graphique) :
Le template pour le Title facilitant la création d'un CTSS
Le template pour le System facilitant la création d'un CTSS
Voilà précisement ce dont nous avons besoin :
- Une image en 320*240 au format bitmap (.bmp) 24 bits (16 millions de couleurs) qui servira d'image Title.
- Un logiciel d'édition d'image (MS Paint suffit, mais le mieux est encore un logiciel comme Photoshop, Paint Shop Pro ou The Gimp).
- Le template pour le Title, qu'on ajoutera en calque si vous possédez un logiciel comme Photoshop.
- Le template pour le System, l'on créera notre système directement dessus.
Ce qui va suivre est un exemple, à vous d'adapter votre CTSS comme vous le désirez ! :)
IV. Création de l'image de fond pour l'écran titre :
Notre template est comme un schéma de notre écran titre. Le cadre jaune et son contenu ne sont pas à prendre en compte, ils seront remplacés par votre système lors de l'affichage de votre écran titre dans votre jeu. Considérez-les donc comme un espace vide lors de la création de votre image Title.
Le cadre jaune et son contenu sont volontairement laissés, puisque qu'ici sera affiché le système, et aussi pour avoir des repères pour la suite de la création de votre image Title
Le cadre à été rajouté à l'image et au bon endroit sans difficulté grâce à la fonction calque du logiciel Paint Shop Pro 9. Si vous n'avez que MS Paint voilà une façon très simple de faire cela :
- Ouvrez votre template pour l'image Title.
- Remplacez tout ce qui ne nous intéresse pas par du violet flashy par exemple (RVB = 255, 255, 255), à savoir le fond noir et les bandes horizontales colorées.
- Ajoutez juste un pixel dans un coin de votre image, il nous servira de repère pour la suite
- Copiez l'image ainsi créée.
- Ouvrez votre image Title (pour notre exemple, un magnifique fond d'écran tiré de Final Fantasy IX ^^).
- Choisissez comme couleur du click droit celle que vous avez choisie pour votre fond de tout à l'heure (par exemple, notre violet flashy 255, 255, 255).
- Sélectionnez l'outil cadre, et choisissez en bas à gauche la seconde option, pour que votre couleur de click droit fasse office de couleur de transparence.
- Faites Edition puis Coller.
- Positionnez correctement votre rectangle de système à l'aide de votre pixel de repère.
- Remplacez ensuite le pixel de repère par le pixel original de votre fond.
C'est bon ? :)
Maintenant, si vous désirez que votre système, affiché dans l'écran titre, ne soit qu'un bête rectangle comme déjà affiché pour le moment (sans tenir compte de la couleur pour le moment), ne touchez à rien. Sinon, si vous désirez un affichage plus doux, plus plaisant à regarder (ce qui sera surement votre volonté), ajoutez un fondu coloré tout autour de votre cadre. Pour notre exemple nous allons choisir d'avoir un menu sur fond blanc, nous allons donc ajouter un fondu blanc...
Cette effet de fondu est très facilement ajoutable avec des logiciels tels que Photoshop ou Paint Shop Pro, malheureusement je doute que les utilisateurs d'MS Paint puissent arriver à un résultat semblable
On rempli ensuite le repère du système par du blanc :
Et voilà c'est tout bon... :)
Passons maintenant aux messages du menu. On va prendre, pour l'exemple, Commencer, Charger et Quitter (dans cet ordre obligatoirement par contre, RPG Maker 2000 et 2003 sont ainsi). Sous Paint Shop Pro (un logiciel du même type doit pouvoir faire l'affaire) on va mettre notre template en calque, par dessus notre image de départ (pour les utilisateurs de MS Paint, vous pouvez quand même vous débrouillez en racourcissant les barres de repères, afin de pouvoir les enlever plus facilement après). Les barres colorés sont des repères pour positioner votre texte. Le vert sera donc le repère de Commencer, le rouge de Charger et le bleu de Quitter. Le léger changement de teinte d'une même couleur sert juste à repérer le milieu vertical. Pour l'exemple, nous allons les placer à droite du menu où apparaitra le curseur.
Phase 1 : on pose en calque semi-transparent le template par dessus le Title
Phase 1 : on écrit et positionne nos messages de menu
Phase finale : on supprime le calque template
Notre image de fond (image dans le dossier Title) pour notre écran titre est maintenant prête !
V. Création du système :
Passons maintenant à la création de notre système (image dans le dossier System), vous allez voir c'est plus simple que ça peut en avoir l'air ! ^^ C'est presque l'ensemble du template qui est à prendre en compte, en effet beaucoup de parties seront utilisées lors de l'affichage du menu de chargement. Je vous laisse donc les arranger comme cela vous plait, mais ici nous allons nous attarder sur cette partie uniquement :
Il ne s'agit bien que de ces 5 parties, le reste (tout ce qui est en noir) ne nous intéresse pas pour notre CTSS
Voilà ce que cela donne (avec quelques modifications dans la base de donnée, mais nous verrons ça plus tard) :
Et voilà l'explication de ces drôles de formes en image :
(image recadrée et redimensionnée x2)
- Le cadre beige n'est autre que le fond, sur l'écran titre il est étiré c'est pourquoi je vous conseille de ne mettre qu'une simple couleur dessus, pour ne pas avoir de problème.
- Les carrés rouges eux ne sont pas étirés, ils représentent les différentes parties du curseur de sélection. Il y'en a 2 (n°1 et n°2). Chaque curseur est un rectangle de 8*16, divisé en deux carrés de 8*8. Les deux curseurs, sur l'écran titre, s'alternent rapidement, c'est très pratique si on veut faire un curseur qui clignote par exemple. Si on veut faire un simple curseur sans animation, il suffit de mettre deux fois le même curseur.
Nous allons faire un simple curseur bleu par exemple (puisque notre fond est blanc) et sans animation. On peut appliquer de la transparence derrière le curseur, il suffit de mettre la couleur de transparence de notre système, mais comme ici notre fond est blanc uni nous aurons juste à mettre le même blanc derrière, pour simplifier. Sinon nous allons bien évidemment mettre notre cadre beige en blanc, pour qu'il se fonde avec le reste de notre écran titre...
Voilà notre système (image dans le dossier System) final
Et voilà ce que cela donne dans le jeu... (résultat final ! - c'est moche, mais c'était juste pour l'exemple de ce tutorial ^^)
Un CTSS... C'était pas si compliqué en fait ! :)
VI. Réglages dans la base de données :
Une mini manipulation est nécessaire dans RPG Maker, dans la base de donnée.
- Ouvrez la base de données de votre jeu :
L'icône permettant d'accéder à la base de données dans RPG Maker 2003 version 1.09b (par Boddom-Child et RaBBi)
- Séléctionnez, dans l'onglet Système, votre écran titre et votre système que vous venez de fabriquer.
- Cliquez sur l'onglet juste à gauche, Messages et dialogues.
- Cliquez sur le 5ème onglet, Messages système.
- A droite, supprimez tout ce qu'il y'a dans les cases Nouvelle partie, Charger partie et Arrêter le jeu.
Cela nous permettra de rétrécir le menu de l'écran titre, ainsi il sera au format que nous voulons...
Et voilà ! Votre bel écran titre est fonctionnel, épatez vos amis makers ! ;)
VII. Exemples de beaux CTSS :
Voici quelques exemples de CTSS réussis...
Le CTSS du jeu Sarcia par Kaëlar
Le CTSS du jeu Ray's Adventure par Neothor, Kp, Kon, Kenetec, Roswdead, Stuart et Zephon
Le CTSS du jeu Vandorell par Ody
En gardant le principe on peut aller encore plus loin dans la personnalisation de son écran titre ! Je vous propose ici un CTSS d'un ancien projet qui reprenait l'univers de la saga Alien (je n'ai hélas plus l'original mais je l'ai rapidement recré pour vous montrer). Avec de l'imagination et un peu de débrouillardise, on peut faire pleins de choses !
Un CTSS original...
Voilà, c'est terminé ! En espérant que ce petit tutorial vous a plu et qu'il vous a servi... ;)
|