VEF Blog

Tuto: créer une interface pour slayers online

matériel :
paint : j'espères que vous l'avez sur chez nous quand même ;) non ? bah vous pouvez toujours prendre ca... ici
pixia : ici
ajout pour pixia, transparence : ici

Coller le fichier .dll joint (à la place de l'original) dans le dossier :
C:\Program Files\Tacmi\Pixia\file_w

Comment réaliser une interface pour Slayers Online ?
Déjà, il faut savoir ce que comporte une interface : 
un fichier arial.ttf , qui définit la police utilisé pour afficher les texts quand vous jouez
un fichier heal.png , qui sera l'effet affiché à l'ecran quand vous utiliserez une potion de vie
un fichier mana.png , qui sera l'effet affiché à l'ecran quand vous utiliserez une potion de mana
un fichier xp.png , qui contiendra votre barre d'xp
un fichier fioles.png, qui contiendra vos deux fioles : la vie et la magie
et enfin, le fichier system.png, qui définit certaines couleurs utilisés in-game. 

donc déjà, le plus simple pour commencer sera de télécharger une interface (ou de prendre celle de base tant qu'a faire), d'ouvrir les fichiers .png avec pixia, puis de les enregistrer en .bmp.

Donc vous avez vos fichiers .bmp (construire le fichier avec paint, puis ensuite transformer en .png avec pixia), voilà comment les modifier pour qu'ils soient utilisable in-game sans problème d'affichage.

1) fichiers heal & mana

Ils sont divisé en 5 parties, de 48*56 pixel chacune. Inspirez-vous des interfaces existantes pour réaliser un enchaînement d'images. Il faudra garder une couleur de fond différentes de toutes les couleurs utilisez dans les 5 images. Une fois les modifications terminées, ils ne vous reste plus qu'a ouvrir les fichiers avec pixia, et de faire "enregistrer sous , format png" en lui donnant le nom correspondant bien sur. Cochez la case "Save transparency information", "filtrage total" , "256 couleurs" , "transparent", et choisissez où se trouve la couleur à rendre transparente 'in-game'.

2) fichier arial.ttf

il vous faudra récupérer un fichier indiquant la police à utiliser par Slayers Online.
vous en trouverez dans le dossier C:\WINDOWS\FONTS (par exemple) ou sur certains sites spécialiser (exemple : http://www.dafont.com/fr/ )
Attention, toutes les polices ne seront aps compatible avec SO , il peut arriver que certains caractères ne soient pas visible in-game ou incompréhensible avec certaines résolutions. Faites un maximum de test pour en être sur.

une fois la police choisis, collez la dans votre dossier d'interface et rennomez-la en arial.ttf

3) xp.png

l'un des composant le plus important, la barre d'xp. ouvrez un fichier existant pour mieux observer, et voir les tailles à respecter (320*15 pixel)

ce qui est en bleu : ne sera pas affecté par votre xp.
ce qui est en jeune : plus gagnerez d'xp (par rapport à votre lvl en cours) , plus elle se remplira. il faut que la couleur où l'xp devra augmenté soit transparente.
sur cette barre, j'ai mis l'extérieur en blanc et l'intérieur de la barre en blanc. J'ai pris pour couleur transparente le blanc. Donc in-game, le fond sera transparent, on verra le décort , et l'intérieur se remplira en jaune (couleur qui dépend du fichier system.png)au fure et à mesure de l'xpage.

Créez votre fichier xp.bmp . ouvrez le avec pixia. Après avoir choisis une couleur de fond (le blanc dans mon exemple) , faites "enregistrer sous , format png" en lui donnant le nom correspondant bien sur. Cochez la case "Save transparency information", "filtrage total" , "256 couleurs" , "transparent", et choisissez où se trouve la couleur à rendre transparente 'in-game'.

4) Les fioles

les 3 lignes de fioles permettre d'obtenir un effet visuel in-game (un peu comme un gif si vous voulez). Vous remarquez aussi qu'il y a a chaque fois une fiole vide lié a une fiole pleine. Quand il ne vous restera que 50% de vie, le jeu utilisera 50% de la partie pleine et 50% de la partie vide (a l'intérieur de la fiole). Enfin bon, le plus simple reste de faire des test ^^

Créez votre fichier fioles.bmp . ouvrez le avec pixia. Après avoir choisis une couleur de fond (le orange dans mon exemple) , faites "enregistrer sous , format png" en lui donnant le nom correspondant bien sur. Cochez la case "Save transparency information", "filtrage total" , "256 couleurs" , "transparent", et choisissez où se trouve la couleur à rendre transparente 'in-game'.

5) system.png

le premier carré noir (haut à gauche) correspond aux fond de la zone des texte. Les deux 'flèches' sont celles que l'on peut voir dans l'inventaire, quand le nombre d'objet dépasse la page affiché. les deux carrés avec des contours rouges/jaunes représentes les contours de vos zone d'affichage de texte.