Aller au menu - Aller au contenu

Icône Éditeur de niveaux

Avatar
Par Avatar Arok
Mise à jour : 21/02/2010
Difficulté : Intermédiaire Intermédiaire
159 visites depuis 7 jours, dont 6 sur ce chapitre classé 459/786
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

Description de l'éditeur

Nous allons maintenant débuter le cours.
Ouvrons donc le dossier trle et lançons l'éditeur de niveaux, NGLE.
Une petite fenêtre vous demandant de charger l'autosave s'ouvre. Cliquez sur Annuler.

La capture d'écran vous montre les principales sections. Remarquez les directions un peu étranges (ouest en haut, etc.). Ce sont les directions qu'aura Lara dans le jeu.

Image utilisateur

  • 1 Plan view panel, vue du dessus de la pièce sélectionnée, c'est également dans cette partie que vous définirez la taille de la pièce.
  • 2 Room edit buttons, boutons d'édition de la pièce (création, effacement, triggers, flipmap...).
  • 3 Objects panel, panneau des objets (aperçu, coloration, sélection...).
  • 4 Lighting panel, panneau des lumières (sélection, placement et ajustement des différentes lumières...).
  • 5 Editor window panel, disons que c'est le principal panneau de l'éditeur, c'est là que vous passerez le plus de temps.
  • 6 Editor window buttons, quelques boutons d'aide à la construction.
  • 7 Room info box, infos sur la pièce sélectionnée, taille, nombre de déclencheurs (triggers), nombre d'objets.
  • 8 Color palette, différentes couleurs très pratiques, notamment pour les éclairages.
  • 9 Texture panel, toute la gamme de textures dont vous avez besoin pour texturer vos pièces.
  • 10 Menu déroulant

Première pièce

Nous allons donc commencer par construire une pièce. Avant, il nous faut charger les textures et les objets.

Commençons par les textures : cliquez sur le bouton Load TGA situé dans le Editor window buttons, recherchez le dossier maps situé dans votre dossier trle, puis ouvrez le dossier tut1. Sélectionnez tut1text.tga et ouvrez-le. Vous voyez apparaître vos textures dans le texture panel, ce sont des textures égyptiennes (Lara Croft s'est souvent aventurée en Egypte :D ).

Maintenant, chargeons les objets. Cliquez sur Objects dans le menu déroulant du haut puis sur Load Objects. Toujours dans le dossier trle, ouvrez les dossiers graphics puis wads, et sélectionnez le tut1.was. Chargez-le. Vous voyez apparaître les objets dans le Object panel. Une petite fenêtre vous indiquant que les objets sont chargés s'ouvre ; cliquez sur ok.

Le premier objet que vous pouvez voir est LARA. C'est normal : elle est l'héroïne principale du jeu. :p

En cliquant sur la petite fenêtre où LARA est écrit, vous aurez accès à tous les objets contenus dans ce wad. Vous pouvez les visualiser un par un, les faire tourner en maintenant le clic gauche enfoncé, ou les rapprocher ou éloigner avec clic droit + majuscule.

Seul le premier objet, LARA, est à placer dans le jeu. Les autres objets concernant LARA (lara skin, pistol anim, (...), jusqu'à hair) sont d'office incorporés à Lara. Ce sont ses animations particulières, son apparence physique dans le jeu ; vous n'aurez pas à les y placer.

Vous pouvez découvrir tous les ennemis de LARA, les pièges, ainsi que les différentes fournitures qui composent ce wad.

Image utilisateur

Vue de l'éditeur avec les textures et les objets chargés


Construction de la première pièce


Vous pouvez voir cette pièce dans le editor window panel. Elle fait 18 x 18 carreaux et est visible en 3D. Pour la voir en 2D, cliquez sur le bouton 2D Map situé dans le editor window buttons. Vous remarquerez qu'elle se situe en haut à gauche.
Pour la déplacer, faites un clic droit dessus et déplacez-la sans relâcher le bouton. Vous pouvez la placer à n'importe quel endroit sur la map.

Revenez en 3D et effectuez une rotation et un zoom de cette pièce (flèches directionnelles et Pg Prec - Pg Suiv en maintenant la touche majuscule enfoncée).

Petite information: avec l'ancien éditeur, votre pièce aurait effectué une rotation ou un zoom très rapide fort désagréable.

Revenons à nos moutons :D . Cette pièce de 18 x 18 carreaux est la plus grande que vous puissiez réaliser. Mais c'est une trop grande pièce, car si dans votre futur niveau vous ajoutez plusieurs pièces de cette dimension, vous aurez très rapidement des contraintes de mémoire et le jeu crashera.

Plusieurs points négatifs justifient de réduire ces grandes pièces. La principale bien sûr est la mémoire, mais vous verrez qu'il est beaucoup plus simple de texturer de plus petites pièces.

Oui, mais comment peut-on réduire les pièces ?

C'est d'une simplicité enfantine ! Dans le plan view panel en haut à gauche de l'éditeur, vous avez votre pièce de 18 x 18 carreaux ; faites un clic droit dans le premier carreau bleu en haut à gauche de cette fenêtre et tout en le maintenant enfoncé, délimitez le nombre de carreaux de votre pièce (par exemple, 9 x 9 carreaux).

Votre pièce est délimitée par un trait rouge, il ne vous reste plus qu'à cliquer sur le bouton bound (situé un peu plus bas), votre pièce est retaillée. :o

Faisons 2 ou 3 aménagements de cette pièce toute nue, faites un clic droit sur un carreau du sol de votre pièce pour le sélectionner, vous pouvez le monter ou descendre de 2 manières :
  • soit avec les touches A et Q pour le sol, et Z et S pour le plafond ;
  • soit en cliquant sur + ou - dans le room edit buttons (Floor = sol et Ceiling = plafond).
Je préfère la première solution. :D

Donc montez ce carreau de 4 clics, ensuite sélectionnez un autre carreau et cliquez sur wall (bouton vert dans le room edit buttons), votre carreau monte jusqu'au plafond (c'est en quelque sorte un pilier).

Vous avez dû remarquer qu'en faisant un clic gauche sur un carreau, quelquefois vous aviez une flèche qui changeait de direction à chaque clic gauche. ce qui veut dire que vous pouvez monter ce bloc dans la direction de la flèche. Vous pouvez monter également les angles, il suffit d'appuyer sur CTRL + clic gauche et la flèche se positionne dans un angle.
Quand vous montez un angle, l'angle opposé reste plat, faites Alt + clic gauche pour changer le sens de la diagonale ; cette fonction est intéressante pour construire les angles d'une pyramide, par exemple.

Astuce : pour annuler la flèche, faites un clic droit sur le carré.

Maintenant nous allons abaisser le plafond, car celui ci est très haut, on ne se rend pas compte ici mais quand nous serons dans cette pièce dans le jeu, c'est assez haut.

Regardez dans la room box info, la hauteur de votre pièce (Floor = sol, Ceiling = plafond) qui doit être à 0 au niveau du sol et à 20 clics de hauteur de plafond.
Sélectionnez (clic droit maintenu enfoncé) tout le sol ; eh oui, en sélectionnant le sol, vous sélectionnez également le plafond ; ensuite, cliquez sur S de manière à ce que votre pièce ne fasse plus que 12 clics de haut.
Amusez-vous à faire des changements dans cette pièce, sachez que vous pouvez supprimer cette pièce en allant dans le menu Room en haut de l'éditeur (fonction delete).

Quand est-ce que l'on peut tester ?

Bientôt, on pourrait bien sûr tester, mais vous seriez dans une pièce toute noire et pas jolie, il faut la texturer pour en voir les limites, ce que nous allons voir tout de suite.

Texturage de ma première pièce

Bon : avant toute chose, pour repartir sur des bases communes, vous et moi, et pour mieux nous comprendre, nous allons faire la même pièce. :D Supprimez votre pièce (menu room en haut de l'éditeur, fonction delete), et faites une nouvelle pièce de 9 x 9 carreaux avec un plafond à 12 clics de hauteur.

N'oubliez pas : pour la rotation des pièces, c'est toujours avec les flèches directionnelles et le zoom avec Pg Prec - Pg Suiv (à côté de Fin sur les claviers français), mais surtout appuyez en même temps sur Majuscule gauche.

Dans chaque coin de cette pièce, faites un pilier (bouton wall) ; ensuite sélectionnez (clic droit enfoncé) le pourtour entre chaque pilier hormis le pourtour ouest (haut de l'éditeur) et montez le de 4 clics (touche A).

Vous devriez avoir ça :

Image utilisateur


À ce stade on pourrait peut-être sauvegarder notre chef-d'œuvre. :lol: Cliquez sur le bouton Save project dans le editor window buttons (vous pouvez également le faire en passant par le menu du haut ), donnez un nom à votre projet, genre "1re pièce" et sauvegardez.
Normalement, votre projet est sauvé dans le dossier trle (vous pouvez y jeter un œil).

À l'avenir, lorsque vous chargerez votre projet, les textures et les objets seront chargés automatiquement


Texturage


Ce qui fait toute la beauté d'un niveau, c'est surtout le texturage, je vais vous en apprendre les fondamentaux.
En faisant un clic gauche sur le panneau de texture, vous sélectionnez une texture de 64 x 64 pixels.
Vous avez remarqué que le sol et le plafond de votre pièce sont quadrillés : ce sont des carreaux où vous pouvez appliquer votre texture de 64 x 64 pixels.

Mettez-vous en Face Edit (à côté de 2D Map).

Sélectionnez donc une texture qui pourrait aller au sol et cliquez sur un carreau du sol de votre pièce, la texture est appliquée. Répétez l'opération sur tout le sol ou cliquez sur Texture Floor (tout le sol est texturé en 1 clic). :euh:

Choisissez également une texture pour le plafond et texturez-le (ou bouton Texture Ceiling) ; servez-vous des flèches directionnelles + Maj gauche pour bien positionner votre pièce.

J'ai gardé pour la fin les murs car c'est un peu plus délicat (enfin, rien de terrible, je vous rassure :lol: ).
Les murs ne sont pas quadrillés, c'est à nous de le faire manuellement.
Je vous ai dit que les textures faisaient 64 x 64 pixels, ce format correspond à 4 clics, nous allons donc "découper" notre mur en multiple de 4 clics (tiens, je vous avais demandé de baisser le plafond à 12 clics), nous allons donc découper le mur ouest en 3, et les 3 autres vu que le pourtour est monté de 4 clics en 2.

Revenez en mode non texturé (en cliquant sur Face Edit), sélectionnez avec le clic droit un pan du mur ouest, vous pouvez également sélectionner tout le côté de mur en maintenant enfoncé le clic droit (non compris les piliers à chaque angle, nous les ferons après).

Vérifiez dans le Plan View Panel que c'est le mur ouest, car vous pouvez avoir déjà effectué une rotation à votre pièce dans le Editor Window Panel.

En appuyant sur A, montez une ligne de 4 clics, puis descendez une ligne de 4 clics en appuyant sur S.
Pour les 3 autres murs, descendez simplement la ligne du plafond (touche S).
Vous avez maintenant quadrillé tous vos murs, répétez la même opération pour les 4 piliers.
Maintenant nous pouvons texturer les murs et les piliers.

Quelques astuces


  • Rajout de lignes supplémentaires sur vos murs > appuyez sur E ou D, R ou F.
  • Permutation des textures > appuyez sur Ctrl et faites un clic gauche.
  • Faire tourner la texture en faisant un clic droit.
  • Ne prendre qu'une partie de texture > maintenez le clic droit sur une texture et délimitez la partie que vous voulez.

Vous devriez obtenir ça avant et après texturage (le texturage ne sera peut-être pas comme le mien, c'est votre choix ;) ).

Image utilisateur

Avant texturage


Image utilisateur

Après texturage

Avec le bouton Preview, vous pouvez visualiser votre pièce à l'aide de la souris, mais disons que ce n'est pas très pratique.

Bon : dites, maintenant il serait peut être temps de tester notre chef-d'œuvre. :D

Test de mon chef-d'œuvre

Nous arrivons enfin au test de la pièce, c'est un test que vous serez amenés à faire le plus souvent possible, il ne faudra pas attendre d'avoir fait plusieurs pièces, mis plusieurs objets ou fait des transformations pour tester. Mais testez le plus souvent possible, il sera plus facile de trouver la cause d'un problème.

C'est un conseil que je vous donne. ;)


Bon ! En premier lieu, il convient de mettre notre héroïne dans cette pièce, car c'est un objet (hooooo je dis de Lara que c'est un objet, honte sur moi :lol: ) incontournable ; si on l'oubliait, ça crasherait inévitablement.

Dans un premier temps, mettez-vous en non texturage (bouton Face Edit), c'est plus facile de placer les objets. Cliquez ensuite dans la fenêtre d'objets, et sélectionnez Lara, cliquez sur Place Object et cliquez sur une case de votre pièce : voilà, votre Lara est placée.
Vous pouvez la déplacer après l'avoir sélectionnée, avec les touches fléchées + Ctrl gauche, ou la faire tourner avec le bouton Rotate Object, ceci est bien sûr valable pour tous les objets que vous placerez.

Sauvegardez votre projet.

Ensuite cliquez sur Project dans le menu du haut, puis sur Output Wad, sélectionnez tut1.tom, enregistrez, répondez « Oui » à la question.

Vous ne pouvez pas encore jouer à votre niveau (je dis niveau alors qu'il n'y a qu'une seule pièce :D ), il faut convertir le tut1.tom que vous venez d'enregistrer.
Dans le dossier trle lancez Ng_Tom2pc (c'est le convertisseur), cliquez sur Add, sélectionnez tut1.tom et cliquez sur Build All, vous voyez votre niveau se convertir avec plein d'informations.

Image utilisateur


Lorsque Build All Complete apparaît, votre niveau est converti, fermez NGtom2pc, nous pouvons passer au test. Lancez le tomb4.exe ou passez par le setup, et lancez le didacticiel jouable, ou en anglais le playable tutorial level.

J'ai voulu vous faire faire toute la manipulation, alors qu'il existe 2 boutons dans l'éditeur "Exit and Play" et "Play" qui font tout ça en un clic, mais je pense qu'il est important de connaître cette manipulation. Le premier bouton sauvegarde votre projet et ferme l'éditeur, et vous ne voudrez pas toujours sauvegarder votre projet ni fermer l'éditeur mais juste tester votre dernière transformation. Le deuxième sauvegarde votre projet sans fermer l'éditeur et de même, vous ne voudrez pas forcément sauvegarder avant de tester. :)


Voilà : vous promenez Lara dans votre pièce, elle est magnifique, peut-être voyez vous des défauts dans la pose des textures ; normal, Paris ne s'est pas fait en un jour. :lol: Vous corrigerez au retour dans l'éditeur.

Bon, ce n'est pas le tout mais ma pièce, j'en ai fait le tour et je la trouve plutôt claire, comment cela se fait-il ?

Exact : dans le prochain article, nous allons apprendre les techniques d'éclairage. :)

Techniques d'éclairage

Effectivement, cette pièce est plutôt claire, on va corriger ça et je vais vous expliquer comment. ;)

Revenez dans l'éditeur avec votre pièce qui vous attend. :D

Astuce : si vous voyez que l'editor window panel est tout noir, cliquez dans le Plan View Panel ou agrandissez, rapetissez la fenêtre de l'éditeur ou encore cliquez sur 2D Map !

Image utilisateur

Tout ce qui concerne l'éclairage se trouve en bas à gauche : cliquez sur Lighting, ensuite nous allons baisser l'éclairage en cliquant sur les - des 3 couleurs au-dessus de Ambience, descendez jusqu'à 48 pour les 3 couleurs ; déjà, vous voyez que votre pièce s'est assombrie.

Avec le clic droit vous descendez ou montez par tranche de 16 (très pratique).

Astuce : pour baisser ou monter les 3 couleurs en même temps, appuyez sur Alt et cliquez sur l'un des moins ou plus.

Bien sûr, vous pouvez tester cette transformation : je récapitule > Output Wad, conversion avec ngTom2pc, et test.

Vous verrez que c'est déjà plus sombre, mais nous allons encore améliorer.

Nous allons placer un Sun dans cette pièce.

Attention, vous ne pouvez placer qu'un Sun par pièce, sinon gros risque de crash !

Cliquez sur Face Edit pour revenir en mode non texturé (c'est plus facile pour placer un objet,je vous l'ai déjà dit :p ), cliquez sur Sun et placez-le plutôt dans un angle, sélectionnez-le, ensuite cliquez sur Show Light Meshes pour voir la direction de son faisceau.

Bien, cliquez sur Lighting et vous voyez bien le faisceau blanc du Sun qui éclaire certainement n'importe où, nous allons le diriger de manière à ce qu'il éclaire plutôt vers le milieu de la pièce.
Avec les touches A ou Q , montez un peu votre Sun vers le plafond, (vous pouvez le déplacer latéralement comme Lara avec les touches fléchées + Ctrl gauche enfoncé) ensuite avec les boutons X et Y, dirigez votre Sun vers le centre de la pièce, de manière à ce qu'il éclaire une bonne partie de la pièce. Vous avez réussi, parfait !
Maintenant, on va changer la couleur de ce Sun, parce que blanc ce n'est pas terrible dans cette pièce égyptienne. :D

Le Sun étant toujours sélectionné, faites un clic droit sur une couleur de la Color palette : vous pouvez essayer plusieurs couleurs, pour voir l'effet rendu. Je pense qu'une couleur dans les orange un peu foncé serait pas mal.

Alors maintenant, vous pouvez tester dans le jeu. Je ne vous indique plus comment faire. :p

Nous pouvons rajouter un Light ou deux dans cette pièce pour améliorer encore l'ambiance, je vais vous en indiquer le moyen.

Revenez en mode non texturé et cliquez sur Light, placez-le dans un angle ou où vous voulez :D , sélectionnez-le et cliquez sur Lighting, montez-le un peu en hauteur.
Avec les boutons In et Out, réglez son faisceau ainsi que son intensité avec le bouton Int, faites maintenant un clic droit sur l'une des couleurs de la Color palette, jusqu'à trouver la bonne couleur.

Si vous voulez placer un deuxième Light, répétez les mêmes opérations.

Je vais vous parler maintenant des autres objets d'éclairage (Spot, Shadow et Effect).

  • Le Spot sert comme un spot :lol: à éclairer dans une seule direction.
  • Le Shadow sert à faire des zones d'ombre.
  • L'Effect sert à éclairer le carreau au-dessus duquel il est placé (par défaut son intensité est à 0, à vous de l'augmenter pour voir l'effet).
Vous pouvez essayer ces différents éclairages et les tester, bien sûr.

Astuce : avec le bouton Copy vous pouvez copier un effet (Light, Sun, etc.) et le coller (Paste) à un autre endroit, pratique pour avoir les mêmes paramètres.


Pouvons-nous encore améliorer l'éclairage de cette pièce ?

Je réponds oui et je vais vous le montrer, nous en profiterons pour placer les premiers triggers (déclencheurs). ;)

Allez dans les objets de l'éditeur chercher l'Animating2, c'est un porte-torche à placer sur un pilier, placez-en un sur chaque pilier à mi-hauteur de celui-ci. Pour cela utilisez toujours les touches A ou Q pour monter, Ctrl gauche + touches fléchées pour le déplacer, et le bouton Rotate Object.

Ensuite cherchez le Flame_Emitter2 et placez-en un sur chaque porte-torche (base du cône dirigé vers le pilier) ; si vous n'arrivez pas à bien le placer, vous le verrez quand vous jouerez et le replacerez en conséquence.

Seulement ces Flame_Emitter2 ne vont pas s'enflammer toutes seules, il va falloir leur indiquer, c'est ce que l'on va faire en les déclenchant.

Très simple : sélectionnez un Flame_Emitter2, faites un clic droit sur un carreau (par exemple le carreau juste devant Lara), ensuite cliquez sur le bouton rose situé dans le RoomEditButtons (c'est le bouton situé juste en dessous du bouton orange monkey). Le carreau devant Lara se met en rose.

Vous venez de placer votre premier Trigger (c'est ce que j'appelle un trigger simple), il ne vous reste plus qu'à faire la même chose pour les 3 autres flame emitter2, vous pouvez les trigger sur le même carreau devant Lara.

Alors pourquoi devant Lara ? Eh bien quand elle passera sur ce carreau, les Flame_Emitter2 vont s'allumer.

Ne mettez pas des Flame Emitter dans toutes les pièces, vous seriez vite confrontés au "bug de la torche", j'ai juste voulu vous montrer que l'on peut améliorer l'éclairage de certaines pièces.


Maintenant vous pouvez tester votre pièce. Faites passer Lara sur ce carreau pour voir les flame_Emitter2 s'allumer. :D

Astuce : à l'endroit du trigger, placez une texture différente !

Voilà : j'en ai terminé avec cette partie éclairage ; dans le prochain chapitre, nous verrons comment rajouter des pièces et les connecter.

Q.C.M.

Avec les touches fléchées, sur quelle touche devez-vous également appuyer pour faire tourner les pièces ?
Sur quelle lettre devez-vous appuyer pour monter une ligne sur un mur ?
Combien peut-on mettre de Sun dans une pièce ?

Statistiques de réponses au QCM

Chapitre précédent Sommaire Chapitre suivant

Partager

Il n'y a pas encore de commentaire pour ce tuto.

Ce tutoriel a été corrigé par les zCorrecteurs.