Créer une nouvelle interface

Écrit le 28/11/2003 par Cyr1c
Dernière mise à jour : 02/02/2006

Introduction

Si vous avez tester Counter-Strike ou encore Cold Ice pour les mod, les plus connu, vous avez sans doute remarqué qu'ils s'étaient doté d'une nouvelle interface.... Cela permet de presonnaliser un mod et de bien le séparer de jeu originlal.... et aussi de rendre cette interface plus jolie...

Les composants de l'interface

Pour plus de clareté, je vais utiliser un exemple d'interface que j'ai réalisé. Comme vous pouvez le voir sur le screenshots, une interface se compose d'un fond d'écran, d'un sommaire qui change quand la souris passe dessus et aussi d'un logo (un mini film pour la page principale et de logos non animés pour les autres rubriques). Mais il ne faudra pas aussi oublier les fond d'écran de la console et aussi l'écran de chargement (pour un mod solo).

http://www.game-lab.com/images/tuts/hl1_interface/interface_menu.jpg

Voilà donc ce que vous saurez faire après la lecture de ce tutorial.
Mais il ne faudra pas oublier aussi comment faire pour faire apparaitre votre mod dans le menu "Parties Personnalisées".

Le listing des fichiers

Avant de commencer à créer une nouvelle interface, il faut que vous créiez un nouveau répertoire dans votre répertoire Half-Life. Pour mon exemple, le nom de la campagne est Nuclear Target, donc mon repertoire sera c:jeuxHalf-LifeNuclear Target.

C'est dans ce répertoire que seront installé tous les fichiers nécessaire au mod. Pour votre information, ce répertoire reprend la même arborescence que le répertoire "valve" et les répertoire situé dans le fichier pak0.pak.

Les fichiers correspondant à l'interface se situent dans le répertoire "gfx/shell/" donc pour le mod NT (Nuclear Target) le répertoire sera "c:jeuxHalf-LifeNuclear Targetgfxshell".

Ce répertoire n'existe pas dans le répertoire valve du jeu mais vous pourrez le trouver dans le fichier pak0.pak. Et c'est dans ce fichier que vous trouverez les images correspondant à l'interface.

Mais attention, lors de la version 1.0.0.9 d'Half-Life, l'interface a été modifié et les nouveaux fichiers se trouvent dans le répertoire "valve/gfx/shell/". Faites une sauvegarde de ces fichiers et extractez ensuite les fichiers du pak0.pak (à l'aide du programme PakExplorer). Et copier les fichiers précédement sauvegardé sur ceux que vous venez d'extracter. Les fichiers de la dernière version viendront remplacer ceux de l'ancienne qui viennent d'etre extractés. (Excusez moi, c'est un peu confus, mais si vous suivez ces indications à la lettre, vous ne devriez pas avoir de problèmes).

Bon maintenant que vous avez déccompacter tous les fichiers de l'interface, je vais vous indiquer à quoi ils correspondent.

Dans le répertoire "shell":

btns_main.bmp : ce fichier contient toutes les images de tous les menus d'Half-Life.
head_<variable>.bmp : ces fichiers correspondent à tous les logos des différentes rubriques d'Half-Life.
splash.bmp : le fond d'écran du jeu.

Les autres fichiers n'ont pas besoin d'être modifier.

Le fond d'écran

Il s'agit sans aucun doute de l'élément le plus facile à créer. Mais attention, vous devez respecter toute fois quelques restrictions.

Tout d'abord le fichier devra s'appeller splash.bmp et devra se situer dans le répertoire "gfx/shell/" de votre mod. Il peut etre en 24, 16 ou 8 bits, quelque soit la palette que vous choisirez, sachez que le logo au format avi sera lui en 8 bits obligatoirement, alors il se peut que quelques différences apparaissent. Le format de l'image sera de 640*480 pixels.

Enfin, dernière chose, le fond d'écran ne devra contenir aucun titre ! Ceux ci sont contenu dans d'autres fichiers et se superposeront au fond d'écran. Donc le fond d'écran ne devra pas contenir le logo de votre mod par exemple.

Voyez ici, le fond d'écran au format bmp :

http://www.game-lab.com/images/tuts/hl1_interface/interface_splashb.jpg

et voici ce qui apparaitra dans le jeu :

http://www.game-lab.com/images/tuts/hl1_interface/interface_jeub.jpg

Modifier le fichier btns_main

Ce fichier est une grande image contenant tous les menus sous trois formes différentes:

http://www.game-lab.com/images/tuts/hl1_interface/interface_btns_main.jpg

La première image d'un texte correspond au menu que vous verrez dans le jeu. La seconde image correspond à l'image quand le curseur passe dessus. Mais attention, la première image n'est pas remplacé par la seconde au passage de la souris. En fait la seconde image apparait en dégradé et avec un certain degré de transparence au dessous de la première image. Enfin la dernière image correspond à l'image quand on clique sur le menu. Dans le jeu, cela donne à peu près ca:

Quand le curseur est sur le menu:

http://www.game-lab.com/images/tuts/hl1_interface/interface_btns_main_over.jpg

Quand le curseur n'est pas sur le menu:

http://www.game-lab.com/images/tuts/hl1_interface/interface_btns_main_out.jpg

Pour modifier les texte des menus, je vous conseille d'utiliser Fireworks de Macromedia qui donne de très bons effet, surtout pour les titres, mais pour ceux qui possèdent Photoshop, cela va aussi très bien. Par contre, il faut bien faire attention à ne pas changer les textes des menus de place ou encore de les faire trop grand car dans le jeu, il pourrait ne pas être affichés en entier.

Pour ceux qui n'ont pas le courage de changer la totalité des menu, il existe un petit truc très simple qui consiste à appliquer un filtre à l'image de départ et donc de modifier la couleur des menus sans changer la police. Mais faites attention à ce que le fond soit noir, car la couleur noir n'est pas affiché dans le jeu et correspond à la couleur de transparence.

Pour votre information, le fichier btns_main.bmp doit etre en 24 bits et d'une hauteur de 5382 pixels et la largeur n'a pas d'importance, mais sachez que si votre texte a une largeur supérieur à 210 pixels, il risque fort de ne pas apparaitre entierement dans le jeu.

Les titres de rubriques

Dans l'interface d'Half-Life, il existe plusieurs rubriques, la rubrique multi-joueurs, la rubrique "sauvegarder/charger partie" ou encore "Créer une partie réseau local". Chacun de ces titres se trouve dans un fichier du type head_<variable>.bmp, où la variable correspond au nom de la rubrique. Donc pour modifier ces titres, éditez chacun des fichiers et remplacez simplement le titre qui y est déjà. Comme pour le fichier des menus, le noir du fond est une couleur transparente, donc ne vous inquietez pas si vous pensez que vous verrez apparaitre un rectangle noir autour de votre titre.....

Mais vous devez aussi utiliser bien toute la place fournir pas l'image pour éviter que vos titres ne soient pas trop petits. Enfin quand vous choisirez la couleur de vos titres et menus, faites en sorte qu'ils ressortent bien quand vous aurez mis votre fond d'écran derrière.

Attention, ne changer pas le nom des fichiers bmp, de plus ceux-ci devront etre au format bmp en 24 bit et de taille 460*80 pixels.

Le logo avi

Il s'agit surement de l'effet le plus difficile à réaliser pour créer une interface. Vous devez savoir que ce logo est en fait un fichier avi (un film). Et ce dernier se superpose au fond d'écran existant et donc le film doit avoir une taille et un emplacement bien précis.

Pour plus d'informations, le fichier avi doit etre de taille 640*100 pixels en 256 couleurs (8 bits). De plus, le film commence à partir du pixel 70 en partant du haut de l'écran de fond et se termine au pixel 170 pour ce qui concerne la hauteur, sinon le film fait toute la largeur de l'écran de fond. Voyez un peu le screenshots suivant pour vous rendre compte:

http://www.game-lab.com/images/tuts/hl1_interface/interface_avib.jpg

Attention, ce screenshots a été pris avec le logo final et donc normalement, vous devrez prendre le morceau de l'image à partir du fichier splash.bmp et ajouter le titre ensuite.

Donc une fois que vous avez edité le morceau de l'image et ajouter un titre, deux solutions s'offrent à vous:

Vous pouvez prendre un logo fixe (comme pour Cs ou Cold Ice) ou alors créer un logo animé.

Quelque soit votre choix, vous devrez créer un ou plusieurs fichiers bmp de taille 460*100 pixels en 256 couleurs. Si vous créez un logo fixe, vous n'avez qu'un seul fichier bmp. Mais si vous créer un logo animé, vous devrez créer TOUTES les frames, les unes après les autres et les enregistrer au format bmp en 8 bits. Et attention si vous utiliser une palette personnalisé car toutes les images d'un logo animé devront avoir la même palette.

Une fois que votre ou vos fichiers bmp seront prêt(s), vous devrez utiliser un programme comme Abode Première ou encore Fast Movies Proccessor (shareware) téléchargeable sur ce site: http://www.gromada.com . Grace à ce programme vous pourrez importer des fichiers bmp et les convertir en fichier avi. (Dans le programme, cliquez sur "+" pour ajouter un fichier bmp et output pour créer le fichier avi, puis sur Start pour compiler le fichier). Créez donc un fichier du nom "logo.avi". Mais attention lors de la compilation, tous les codex de compressions ne sont pas supporté par Half-Life, si vous n'avez qu'une seule image, ne choisissez aucune compression (la qualité sera meilleure et le fichier avi ne prendra que 62 ko) et pour un logo animé, mettez une compression RLE avec 100% pour la qualité. De plus dans le menu Output choisissez bien une palette 256 couleurs (soit 8 bits).

Si tout se déroule correctement, placez le fichier logo.avi dans un répertoire "media" à la racine de votre mod. Par exemple pour mon mod Nulcear Target, le fichier sera dans le répertoire "C:JeuxHalf-LifeNuclear Targetmedia". Ca y est votre interface est prête, il va falloir maintenant l'intégré au jeu.

Inscription dans les Parties Personnalisées

Bon maintenant, il faut faire apparaitre votre mod dans le menu des parties personnalisées. Pour ce faire, vous devez editer avec n'importe quel editeur de texte (notepad) le fichier liblist.gam. Attention, ce fichier se trouve dans le répertoire Half-Life, et il doit y rester tel quel si vous voulez que HL continue de fonctionner, donc commencer d'abord par en créer une copie que vous placerez dans le répertoire de votre mod (c:JeuxHalf-LifeNuclear Target). Vous trouverez ce texte:

game "Half-Life" 
startmap "c0a0"
trainingmap "t0a0"
mpentity "info_player_deathmatch" 
gamedll "dllshl.dll" 
gamedll_linux "dlls/hl_i386.so"

Lorsque vous créez un mod, HL reprend les même variable que le jeu normal, donc lorsque vous créerez vos fichier liblist.gam, vous ne devrez mettre que les variable qui auront été modifiées.

D'abord donner un nom à votre mod:

game "Nuclear Target" 

Ensuite indiquez son type (multi, solo etc...). Pour les mod multi: multiplayer_only

type "Campagne solitaire"

Si le nom du répertoire est différent que le nom du mod, vous devez ajouter le nom du répertoire du mod soit:

gamedir "NuclearTarget"

Vous devez aussi ajouter l'adresse du dll utilisé, si vous ne l'avez pas modifié, vous devrez écrire:

gamedll "..valvedllshl.dll"

Vous pouvez donner la taille en octet de votre mod:

size "120210"

Vous pouvez encore indiquer l'adresse internet du site web dédié à votre mod:

url_info "http://fragarena.dhs.org/halflife/nt/"

Ou encore donner l'adresse où télécharger le mod:

url_dl "http://fragarena.dhs.org/halflife/nt/nt.zip" (vous pouvez aussi mettre une page html)

Si votre mod nécessite une version minimum pour le faire foncionner, alors:

hlversion "1009"

Vous pouvez aussi ajouter le numéro de version de votre mod:

version "0.01"

Vous pouvez aussi ajouter la date de release de votre mod:

date "4 septembre 1999"

Enfin pour un mod solitaire, vous pouvez indiquer la map de départ:

startmap "nuclear"

et si vous avez créé un parcours d'obstacles:

trainingmap "training"

Voilà pour quelques variable du fichier libist.gam

Les fichiers pak

Lorsque vous éditez le fichier pak0.pak dans le répertoire valve, vous pouvez vous rendre compte qu'il pourrait s'apparenter à l'explorateur windows. Et vous pouvez vous aussi créer un fichier pak0.pak pour votre mod, vous n'avez qu'à reproduire les répertoire qui se trouvent à l'interieur du répertoire de votre mod et de copier tous les fichiers qui s'y trouve (sauf le fichier liblist.gam).