Tutoriel Page ManiaLink
De TM Wiki.
Sommaire |
Remerciements
- NADEO et FOCUS pour le jeu :D
- Nazgul pour son mini-tuto en anglais :)
- Demonaz pour ses aides et conseils précieux au niveau de la prog ;)
- Slig pour avoir rassemblé les bribes de tuto en anglais et pour êter actif dans le topic de prog en manialinks :mrgreen:
- Tous les autres membres de la communauté qui contribuent au jeu autrement qu'en y jouant simplement
- Et toi, lecteur, qui lit mon tuto :P
Introduction à l'XML
Tout d'abord, sachez que les fichiers manialinks sont des fichiers .xml Je ne vais pas vous faire un cours sur le XML, pour cela allez sur le Site Du Zero rubrique Site Web, les premiers chapitres. En effet, le xHTML étant un dérivé du XML, il vous suffit de comprendre la syntaxe ;)
Dans l'ordre, balise par couple et balise simple
<balise attribut='valeur'>contenu</balise> <balise attribut='valeur' />
Dans les manialinks, les attributs doivent être spécifiés entre guillemets et non apostrophes.
Lecture des manialinks par le jeu
Pour visualiser un manialink sur le jeu, il suffit de taper l'adresse du fichier xml (hébergé au préalable sur un serveur FTP ordinaire) dans la barre d'adresse du jeu et c'est tout :) Il y a aussi des raccourcis avec lesquels il suffit d'inscrire le pseudo du joueur, pour cela il faut s'inscrire chez NADEO
Maintenant, passons au vif du sujet :D
Structure du fichier
Un manialink a une structure de base commune à toutes les pages.
<?xml version="1.0" encoding="utf-8" ?> <manialink> <type>default</type> <background bgcolor='RVBA' bgborderx='number' bgbordery='number' /> <format textsize='3' textcolor='RVBA' /> <!-- commentaire : c'est ici que l'on continue --> </manialink>
La première ligne informe le type de fichier (il faut absolument encoder en UTF8). Puis, on ouvre une balise <manialink> (pour la bêta, la balise s'appelait <manianet>, mais ça a changé). C'est uniquement dans celle-ci que l'on va travailler. Puis, viennent 3 balises qui donnent des informations : la première donne le type (je ne sais pas à quoi elle sert, mieux vaux la mettre ^^), la deuxième donne la couleur de fond et la taille des bordures et la troisième la couleur/taille du texte (3 semble être un bon compromis). Pour les tailles, il n'y a pas de systèmes de pixels ou autre. C'est une valeur qui ressemble au em en CSS. Le mieux pour s'en rendre compte est de faire des tests ;)
Pour définir une couleur par le biais d'une balise (il y a une autre façon qui est différente), on utilise un code RVBA (ou RGBA en anglais)
- Rouge/Red : la valeur de rouge
- Vert/Green : la valeur de vert
- Bleu/Blue : la valeur de bleu
- Alpha : la valeur de la transparence. Plus elle est élevée, plus la couleur sera opaque
Toutes ces valeurs s'expriment en héxadécimal (chiffres de 0 à 9 et lettres de A à F ; du plus petit au plus grand 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F)
Ca marche de la même manière que les couleurs de la lumière (cf cours de physique de 4ème ;))
En gros, voici quelques exemples :
F006 : rouge transparent FF00 : jaune invisible FC0B : orange semi-opaque 0FFA : cyan moyennement transparent 0CFF : bleu clair opaque F0F9 : violet/indigo transparent 0FCF : olive opaque
Les couleurs représentées ne sont pas forcément les même que dans le jeu, elles sont juste là à titre d'exemple.
Pour d'autres exemples, aller sur le manialink Manialink:Tutorial pour visualiser le rendu dans le jeu ou sur la page Code couleurs
Les lignes et cellules
Si vous avez souhaité continué à lire les cours de xHTML jusqu'aux tableaux, cela pourrait vous être utile pour comprendre le principe même de la composition d'un manialink. En effet, la page est séparée en lignes et cellules, de la même manière que les tableaux ;) Donc, si vous avez compris, il suffit de créer des lignes avec des cellules.
Une ligne doit obligatoirement comporter une cellule afin d'être affichée. La structure est donc la suivante :
<line> <cell>contenu ...</cell> </line>
Vous voyez, c'est simple !!
Pour afficher du texte, on le place dans la balise <text>le texte à écrire</text>
Maintenant, sachez qu'il est possible :
- de séparer la ligne en plusieurs cellules
- de donner des couleurs de fond à une cellule
- d'aligner son texte avec l'attribut halign qui accepte left, center et right (par défaut à gauche)
- de donner une couleur au texte
- de spécifier la hauteur de la ligne et la largeur de la colonne (je dis comme ça puisque les attributs vont dans ces balises, c'est-à -dire qu'on ne peux pas mettre l'attribut sur la largeur dans la ligne )
<line height='0.25'> <cell width='0.5' bgcolor='CCF9'> <text textcolor='EEF9' halign='left'>Maps</text> </cell> <cell width='0.5' bgcolor='CCF9'> <text textcolor='EEF9' halign='center'>Skins</text> </cell> </line>
Ici, il y aura une ligne d'une certaine auteur (0.25 unités de TMU) dont le total de la largeur des cellules sera égal à 1 unité (0.5 + 0.5). Chaque cellule aura une couleur de fond et une couleur de texte spécifique (ici fond violet pâle et texte blanc/bleu léger) La première sera alignée à gauche, l'autre au centre
Avec tout ce que vous savez, vous êtes déjà capable de faire pas mal de choses (n'oubliez pas qu'il faut essayer pour progresser ;) )
Les liens internes/externes
Vous pouvez créer plusieurs types de liens : des internes, qui s'ouvrent directement dans le navigateur de TMU, ou des externes, qui s'ouvrent dans une nouvelle page d'un navigateur classique (ie, ff etc...). Pour les premiers (les internes), on utilisera la forme $h [adresse du lien] intitulé du lien $h
$h[http://lien_interne] intitulé du lien $h
Pour les externes, on remplace le $h par $l :
$l[http://lien_externe] intitulé du lien $l
Notez que si vous avez enregistré votre raccourci Manialink chez NADEO, il suffit d'écrire le nom du raccourci dans l'url du lien. Par exemple, pour un raccourci de http://bidule.com/home.xml au nom de bidule:home, vous pouvez directement saisir le nom du raccourci dans l'url du lien ;)
Les médias (images/sons/vidéos)
Pour insérer une image, on place une balise <icon> à l'intérieur d'une cellule (donc d'une ligne), et l'on indique à l'intérieur l'URL :
<icon>URL DE L'IMAGE</icon>
Encore une fois très simple :D Vous pouvez attribuer une taille et hauteur (toujours avec le même système d'unités :s ), ainsi qu'un lien interne ou externe : lorsque l'on clique sur l'image, cela ouvrira la page dans le navigateur du jeu, ou dans une fenêtre d'un navigateur classique
<icon width='0.1' height='0.05' url='lien externe' manialink='lien interne'>URL DE L'IMAGE</icon>
Notez qu'il faut qu'il y ait soit un attribut url, soit un manialink, mais pas les deux en même temps. Ils le sont ici en exemple pour montrer les différents attributs.
Pour insérer un son (bande sonore, ...) au format .ogg, .wav ou .mux dans votre page, balise <audio> avec les attributs :
- longueur/largeur : définissent la taille le bouton Play/pause
- play : il a 2 valeurs possibles : 0 et 1. Si il est égal à 1, la musique se jouera automatiquement lorsque l'on rentre dans la page (du moins à la fin du chargement, puisqu'il faut attendre que les médias soient chargés entièrement pour qu'il soient joués)
- vous pouvez également si vous le souhaitez placer un attribut halign qui alignera le bouton selon la valeur de cet attribut (left, center, right) ;)
<audio width='0.1' height='0.1' play='0'>URL DU SON</audio>
Il y a quelques différences pour la balise <vidéo> : les fichiers sont au format .bik, et la taille indiquera cette fois ci les dimensions de la vidéo. Pour la navigation :
clic gauche : play/pause
clic droit : retour au début
<video width='1' height='0.5' play='0'>URL DE La VIDEO</video>
Voilà , maintenant vous êtes capables de créer vos pages manialinks :D
Liens Externes
N'oubliez pas que pour les visualiser, vous avez le Maniaviewer(en développement)
Texte original de graphi05 http://www.trackmania.com/fr/forum/viewtopic.php?t=18872
