CONTENU

Réaliser un panorama 360° d'une map

Ce tutorial porte sur "comment réaliser un diaporama Quicktime VR 360° d'une map Half-Life 2"
Cette page dispose d'une feuille de style pour l'impression (afin de supprimer la mise en page du site).
Dernière mise à jour le 24/08/2013.

Ce cours a été entièrement écrit par moi, c'est à dire NykO18.
Pour me contacter, plusieurs moyens :

Creative Commons License Cette création est mise à disposition
sous un contrat Creative Commons.

Réaliser un panorama 360° d'une map

Pourquoi faire des captures d'écran fades et immobiles de sa dernière map alors qu'avec un petit programme génial, le lecteur Quicktime et un peu d'astuce vous pouvez réaliser un magnifique panorama à 360° d'un emplacement de votre map ? Vous allez voir que c'est très très simple, un ami mappeur (MoroeS) m'a parlé de cette technique, et désormais je ne peux plus m'en passer. Il n'y a rien de mieux pour donner une vue d'ensemble d'une map et en plus, c'est très rapide et très facile. J'ai donc décidé d'en faire un petit cours rapide en espérant voir cette technique un peu plus adoptée et utilisée par les mappeurs francophones !

Outils nécessaires

Pour réaliser un panorama à 360°, il vous faut 3 choses :

  1. Premièrement, il vous faut un jeu Source.. bien sûr. Half-Life 2, Counter-strike Source, Day of Defeat Source, peu importe, la manipulation est la même pour chaque jeu. Je suppose que cela fonctionne même pour Dark Messiah of Might and Magic.
  2. Deuxièmement, il vous faut Quicktime. Vous pouvez le télécharger à cette adresse : http://www.apple.com/quicktime.
  3. Et enfin, troisièmement, il vous faut le petit logiciel GoCubic téléchargeable ici. Ce merveilleux programme va vous permettre d'assembler une suite d'images et ainsi de réaliser un panorama cubique à 360° de votre capture.
Phnx a dit :
Par contre ce n'est pas obligatoire de télécharger cette saletée de Quicktime.
Le tuto marche également très bien avec Quicktime Alternative.

La capture

Pour faire un panorama Quicktime à 360° il faut bien évidemment que vous vous rendiez dans le jeu et sur la map souhaitée. Mais avant cela, il va falloir que vous activiez la console de ce jeu. Pour faire cela, faites un clic droit sur le jeu dans votre liste de jeux Steam, rendez-vous dans "Définir les options de lancement" et entrez -console dans le champ prévu à cet effet. Une fois ceci effectué, lancez le jeu et la map voulue. Ouvrez la console et tapez noclip pour vous rendre à l'endroit de la map où vous souhaitez capturer à 360° (ce n'est pas obligatoire de vous mettre en mode noclip, mais c'est plus pratique).

Patron déplié du cube

Une fois que vous êtes à l'emplacement désiré, ouvrez la console à nouveau et tapez la commande mat_envmaptgasize 512. En fait, cette commande sert à changer la taille des captures d'écran qui vont être prises pour assembler le panorama à 360°. Ici, nous avons défini 512 pixels, je suppose qu'il est possible de prendre des captures de plus grande taille, mais chez moi cela ne fonctionne pas. De plus, cette taille de 512 pixels est amplement suffisante pour avoir un bon rapport qualité/poids pour le panorama.

La dernière étape de la capture c'est de la faire ! Tout simplement. Pour cela, il vous suffit de taper la commande envmap dans la console. Vous n'avez pas besoin de placer la vue dans la bonne direction comme pour une capture d'écran normale, car toutes les directions vont être automatiquement capturées. Si vous vous en servez souvent vous pouvez même binder le processus en tapant bind "F10" "mat_envmaptgasize 512; envmap" dans la console. Ainsi, lorsque vous appuyerez sur F10, toutes les directions seront capturées, exactement comme ci-dessus. Attention néanmoins, vous ne pouvez prendre qu'une seule capture à 360° par map et par session car les fichiers capturés écrasent à chaque fois les derniers.

L'assemblage

Explication pour les puristes : La commande envmap effectue une capture totale de votre environnement de jeu. Devant, derrière, gauche, droite, haut et bas. Les images ainsi capturées sont sauvegardées au format TGA dans le dossier cubemap_screenshots à la racine du répertoire du jeu. Hélas, si vous laissez les images dans leur état et que vous les soumettez à GoCubic, il n'y comprendra rien... Vous allez devoir les renommer pour qu'il comprenne comment les assembler.
Pour que GoCubic puisse assembler les images, renommez les images de cette façon (en supposant que la map s'appelle dm_mine) :

  • dm_minert.tga > dm_mine_1.tga
  • dm_mineft.tga > dm_mine_2.tga
  • dm_minelf.tga > dm_mine_3.tga
  • dm_minebk.tga > dm_mine_4.tga
  • dm_mineup.tga > dm_mine_5.tga
  • dm_minedn.tga > dm_mine_6.tga

Il ne vous reste plus qu'à importer les 6 images renommées dans GoCubic et ce dernier va se charger de mixer l'ensemble pour en faire une sorte de cube en 3 dimensions... Bref, un magnifique panorama de votre capture d'écran ! Ouvrez donc GoCubic et procédez ainsi :

Menu make pano de GoCubic

  1. Cliquez sur le menu Make Pano et cochez l'option Cubic si ce n'est pas déjà fait.
  2. Vous pouvez ensuite changer les options de compression d'image dans Set Compression. Les réglages par défaut sont satisfaisants pour obtenir un poids raisonnable, mais pas une qualité extra. Placer la qualité à Haute est plus sympatique.
  3. Ensuite, vous pouvez passer au sous-menu Make Pano > Make Pano Movie.
  4. Dans la fenêtre qui s'ouvre, sélectionnez la première image que vous avez renommée (dm_mine_1.tga dans mon cas). GoCubic se chargera d'importer les 5 autres.
  5. Une seconde fenêtre s'ouvre, donnez un nom à votre panorama et validez. C'est terminé !

Vous voilà avec un magnifique panorama en 3D de votre capture d'écran. Mettez le pointeur de votre souris sur l'image, restez appuyé avec le bouton gauche et bougez... Magique !

Intégration dans une page web

Certes, vous avez votre panorama à 360°, j'aurais pu vous larguer là, mais j'ai eu envie de vous montrer également brievement comment intégrer ce panorama dans une page web. Voici le code HTML à insérer dans une page pour intégrer votre animation (les dimensions sont correctes pour une capture de 512 pixels) :

<object style="width: 480px; height: 335px;">
    <param name="src" value="chemin_vers_le_fichier/nom_du_fichier.mov" />
    <param name="controller" value="true" />
    <param name="autoplay" value="true" />
    <param name="type" value="video/quicktime" />
    <embed style="width: 480px; height: 335px;" src="chemin_vers_le_fichier/nom_du_fichier.mov" controller="true" autoplay="true" type="video/quicktime"></embed>
</object>

Et voilà ce que cela donne (le plugin Quicktime est nécessaire). Vous pouvez vous déplacer dans toutes les directions et zoomer en avant et en arrière. C'est tout de même mieux qu'un screenshot banal et ça ne pèse pas beaucoup plus lourd que 2 ou 3 screens.


Cette création est mise à disposition selon le Contrat Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.