-= TuTo mettre des images sur les panneaux d'affichages =-

Parler ici de l'éditeur de maps

Moderator: French Moderator

Post Reply
Ex-Alice007
Posts: 88
Joined: 15 Mar 2013, 13:47
Location: -= Terre =-

-= TuTo mettre des images sur les panneaux d'affichages =-

Post by Ex-Alice007 » 11 May 2013, 12:00

Bonjour, bonsoir à vous jeunes gens.

Je vais essayer de vous expliquer comment personnalisé ces maps ShootMania via les panneaux.


Dans un 1er temps il faut faire l'inventaire des soft à avoir pour bien travailler :)
Perso j'utilise, PhotoShop 6.0 / FileZilla (Last Version) / ShootMania (£ö£) / Windows 7 Pro64 / calc win.


Parlons en, des panneaux,
Eole wrote: Ex pour un panneau horizontal:
0...128<----IMAGE----->896...1024
le panneau est "censé" faire 1024 de long, mais qu'en fait seul 768 px sont affiché... Ils ont du faire ça un soir de fête un peu trop arrosée, m'enfin bref.

Le but va donc être de faire des images de 768 px sur 256 px, tout en étant pris pour du 1024 px sur 256. Nous allons bien nous amuser !!! Vu que la langue française & moi même sommes fâchés, je vais
faire des screenshoots, tout le monde comprends les dessins :D

1°/ Comment dimensionner les images sur photoShop :

Ouvrez PhotoShop puis,

Image

La fenêtre nouveau s'ouvre, il faut maintenant la configurer, 1er chose mettre en pixels

Image

Définition d'un panneau horizontal 1024Px sur 256Px.

Image

HuHu, pgm inside, nous avons créé l'espace publicitaire... Désolé, je m’égare... créé l'image à la bonne taille.

Image

Maintenant nous allons mettre des limites, pourquoi me direz vous?!? demandez à un NadéoDmin, 0...128<----IMAGE----->896...1024
Allez chercher l'onglet Affichage/Nouveau repère (Assurez vous que soit coché Magnétisme, bon ok, j'mets une image... Féniass !!!

Image

Nouveau repère est ouvert, dans position changez la valeur...

Image

Limite verticale pour toujours les 0...128<----IMAGE----->896...1024 Aie aie :teub:

Image

Ohhh, la belle bleu.

Image

Pareil pour l'autre coté.

Image

Ohhh, les belles bleus...

Image


Bon, passons à la suite. J'ai pour habitude de commencer par le plus "grand" pour finir par le plus "petit", ce qui nous amène donc à... "Roulement de tambour...
Pourquoi apprendre à "mapper" un panneau, quand on peux apprendre à en faire 2 sur 4... Tadammmm !!!
<Espère que des gens ont au moins souri>
Enfin, bref... Nous allons donc voir comment & surtout pourquoi on fait cela. On pourrait se dire que le coup des marges sur un panneau c'était bien ennuyeux, mais quand est il avec plusieurs?!?
Les marges sont toujours la :D toujours sur la largeur du panneau bien sur, à la seule différence que les largeurs qui se touchent... Elle devait être vraiment bien arrosée leur soirée (Ok j’arrête
de pester, mais sérieux POURQUOI?!?) Au jour d'aujourd'hui, je travaille encore sur le problème, je mettrai donc à jour lorsque je l'aurai résolu.


Je pars sur un 2 sur 4, ce qui veux dire 8 panneaux (comme un immeuble de 4 étages avec 2 appart par étages), le français superbe langue n'est-il po?

Passons à la partie calcul :

2x1024 = 2048 Horizontal / Longueur
4x 256 = 1024 Vertical / Largeur

Vous êtes la pourquoi déjà??? A mais oui, mettre des images que vous aimez sur des panneaux shootmania... Avez vous trouver l'image en question?!?

Moi ouai ^_^
Quoi? Des screens pour montrer comment ouvrir une image sur photoShop?!? Vous n'y pensez po tout de même !!!
Bon, alors comment redimensionner. Cliquez droit sur le haut de la fenêtre de l'image, puis allez sur taille de l'image...

Image

Pour ma part, je règle en fonction de ce que je veux garder, présentement 2048 sur 1365. Vu que les tailles d'images ne sont po forcément identiques à celles des panneaux, il faut donc bidouiller, c'est à vous de jouer.

Image

Quoi, c'est mon coin pc... Ouai, j'me la péte un peu :D
Maintenant nous allons créer l'image des 8 panneaux que l'on va découper en pleins de petite images, qui une fois réuni, feront notre image de départ "tutopanno.jpg"
J'ai po envie de vous embrouiller la tête mais à ce moment, il y a deux "bonne" façon de faire. Je vais vous en montrer qu'une...

créer une image sans marges verticales. Ce qui veux dire...
Petite précision, les panneaux qui se touchent sur la largeur mangent les marges, du coup, heu comment dire... Les images arrivent :)

Partie calcul :

2048 - (4x128)* = 1536 Horizontal / Longueur *0...128<----IMAGE----->896...1024 fois deux
4x 256 = 1024 Verticale ne change po.

Image

Maintenant, on refait le marquage.

Image
Image
Image
Image

Voila notre "découpe" finie. Bravo !

Image

Maintenant nous passons au découpage de notre image en 8 morceaux/panneaux.

Faite un ctrl/c dans l'image que vous voulez découper, puis ctrl/v dans notre image découpée.

Image

Prenons le bon outil "Recadrage"

Image

Nous allons sélectionner le "Panneau 1" pour le "Recadrer"

Image

Un fois "Recadré", Ctrl/c puis ctrl/v dans notre fenêtre de panneau simple (1 panno.psd)

Image

Enregistrez votre panneau dans un dossier, de préférence un dossier où il n'y aura que les 8 images.

Image

Une fois l'image enregistrée, effacez le calque (Petite flèche rose)(téléchargez l'image le fofo l'affiche po entière)

Image

Nous allons récupérer notre image principale, ici sans titre-1 (Petite flèche rose)

Image
Image

Il faudra refaire cette manip 8 fois... Vous avez un exemple, go faire les sept autres... Aller je vous attends...

Le résultat doit donner ça :

Image

Nous en avons fini avec PhotoShop. HuHu



2°/ Passons à la partie "ftp"

pour ma part je me sers d'un espace donné par mon F.A.I, quoi tu sais po c'que veux dire FAI (Fournisseur Accès Internet), mais il est possible de trouver plein d’hébergeur
gratuit online. Je ne suis po là pour donner des ftp, mais expliquer comment s'en servir :twisted: HaHaHaHa !

J'utilise FileZilla, je vous montre comment le configurer.

Les paramètres de tous FTP qui se respectent, Login / Pass / IP. Je vais bien évidement po vous donner les miens, donc pour l'exemple nous allons dire :

Login_1 // Pass_1 // 192.168.0.0

ouvrir FileZilla, allez sur ouvrir le Gestionnaire de Sites

Image
Image

allez sur Nouveau Site puis rentrez vos login / pass / ip / port 21

Image

Cliquez sur OK

Image

pour ma part, j'ai rangé ça dans "http://MON IP/MON LOGIN /ShootMania/pics/2_4/home1.jpg"

Image

Si je n'ai po été clair pour configurer votre FTP cliquez IcI



Maintenant que les images sont sur votre FTP, passons à la finition !

3°/ ShootMania

Allons dans ShootMania, éditeur de map & ouvrons nous 8 panneaux

Image
Image

Suivez la flèche, texture de block F3

Image

Cliquez sur choisir.

Image

Mettez y votre adresse (là où est votre image home1.jpg pour moi)
Cliquez Ok, recliquez Ok. Ca peux mettre plus ou moins de temps selon le poids de votre image... Plz Wait, Now Loading !!!
TaDammmmm !!!

Image

& vous continuez pour les autres images...
Etc...

Image

Jusqu’à ce que les 8 panneaux soient plein :)

Image



Félicitation, nous avons réussi.


Je pense qu'avec ce tuto vous êtes maintenant capable de faire tout ce que vous voulez... Je vais probablement expliquer les panneaux verticaux, mais plus tard.
J’espère avoir aidé des gens, voir même qu'une personne, ça serait déjà bien.
J’espère aussi avoir procuré un peu de plaisir, perso j'me suis bien amusé à le faire.

& n'oubliez jamais, c'est pas parce que la majorité à tort qu'elle a raison !


/Enjoy
Last edited by Ex-Alice007 on 15 May 2013, 12:43, edited 1 time in total.

Ex-Alice007
Posts: 88
Joined: 15 Mar 2013, 13:47
Location: -= Terre =-

Re: -= TuTo mettre des images sur les panneaux d'affichages

Post by Ex-Alice007 » 14 May 2013, 15:37

Bonjour à vous messieurs dames,

Aujourd’hui nous allons apprendre ensemble comment faire un panneau de 5 sur 2 (vertical).
A la différence du 1er post, le problème de fusion des panneaux ne devrait plus être présent.
J’ai eu un mini court de PhotoShop par un ami infographiste, mais soyez po inquiet c’est à notre porté (Nous les novices).
Nous allons voir comment pallié à ce problème de mini-marge, en fessant du mirror sur les largeurs. Je viens de me rendre compte que j’avais fait une manip en trop, j’ai mirroré les deux largeurs de chaque image. Ca n’est po très utile, mais bon qui peux le plus peu le moins.

Ce post est indissociable du 1er, tous se qui a dans ce dernier est donc acquis. Nous allons donc passer à la pratique.

Tous à vos photoshop.

Les panneaux, 5 verticaux sur 2, cela fait une image de 1280/1536. Maintenant vous savez faire les repères, je vous donne quand même les cotes.

Verticale : 256px / 512Px / 768Px / 1024Px
Horizontale : 768Px

Image à « découper »

Image

Image avec les repères

Image

Ensuite, nous allons découper l’image.

Image

Pour drag & drop l’image de l’image principal au panneau n°1, faite (dans l’image principal) Ctrl/a, puis Ctrl/c.
Cliquez dans l’image vierge (repérer l’image du panneau 1 à l’horizontale 128Px & 896Px) faire Ctrl/v 3 fois, ce qui créera 3 calques. Regardez la fenêtre à droite, vous devriez avoir 3 calques.

Image

Assurez-vous d’être sur le calques 3, puis allez dans Edition/transformation/Symétrie axe vertical, comme ci-dessous.

Image

Faites glisser le calques 3 sur la hauteur de façon à ce qu’il soit inversé par rapport au repère (Trait bleu).
Ensuite, sélectionnez le claque n°2.
Répétez la manipulation, mais cette fois, faites glisser le claque en bas, comme présentement.

Image

Si nous avons réussi, voilà le résultat.

Image

Reproduisez cette manipulation pour tous les panneaux, donc il faudra le refaire 9 fois.
Je vous attends, … Hein, quoi, oui oui.
A je vois qu’il y en a un qui traine, toujours les mêmes !!!

Nous avons donc nos 10 panneaux distincts.

Image

Nous pouvons fermer PhotoShop & passer sur le FTP, pour héberger les images.
Voir le 1er post du tuto 2eme chapitre pour cette manipulation.

Passons sur ce merveilleux jeu de Nadeo (Je vous aime, je vous aime…) ShootMania.
Ce reportez au 3eme chapitre du 1er post pour placer les images dans les panneaux.

Une fois que cela est fait, voilà le résultat final sous plusieurs angles.

Image
Image
Image
Image


Je remercie TitiShu, TMarc, Fix, pour leur aide, qui m’a été précieuse.
Je vous remercie de m’avoir lu, j’espère avoir pu vous aider à faire de belle chose sur vos maps.
N'hésitez po à laisser un commentaire, c'est toujours bon d'avoir des retours.

TMarc wrote: Pour faire "pro" davantage, essaye d'éviter le language trop familial, nerd ou geek,
et essaye tout de même de faire un effort pour l'écriture correcte :mrgreen:
Et n'aie pas peur d'expliquer ce que tu fais en texte en plus des images.
Ce post te convient-il ?
C'est où la DRH? :teub:


/Enjoy
Last edited by Ex-Alice007 on 15 May 2013, 13:14, edited 2 times in total.

Ex-Alice007
Posts: 88
Joined: 15 Mar 2013, 13:47
Location: -= Terre =-

Re: -= TuTo mettre des images sur les panneaux d'affichages

Post by Ex-Alice007 » 14 May 2013, 15:37

Reserve 2

Ex-Alice007
Posts: 88
Joined: 15 Mar 2013, 13:47
Location: -= Terre =-

Re: -= TuTo mettre des images sur les panneaux d'affichages

Post by Ex-Alice007 » 14 May 2013, 15:38

Reserve 3

Je vais m'en servir, plutôt que de faire le 1er post sur 30 pages, ça seras plus simple pour moi & les gens pour les lires :)

/Enjoy

User avatar
instagib111
Posts: 85
Joined: 18 May 2013, 13:46

Re: -= TuTo mettre des images sur les panneaux d'affichages

Post by instagib111 » 20 May 2013, 01:38

Merci pour ce bon tuto bien complet!

Ex-Alice007
Posts: 88
Joined: 15 Mar 2013, 13:47
Location: -= Terre =-

Re: -= TuTo mettre des images sur les panneaux d'affichages

Post by Ex-Alice007 » 20 May 2013, 02:26

instagib111 wrote:Merci pour ce bon tuto bien complet!
Pour la ptite histoire, instanoob, était sur ts avec moi, il n'a même po su lire les images !

DammeD

P4T
Posts: 15
Joined: 22 Jan 2015, 23:49

Re: -= TuTo mettre des images sur les panneaux d'affichages

Post by P4T » 26 Nov 2015, 14:13

Moi je dis Merci tout d'abord, je peux mettre les images que je veux dans mes maps. :thumbsup:


Par contre, j'ai une colle... et pas une petite, j'me casse la tête dessus, et je ne trouve pas.

Comment mettre dans ces panneaux... des animations ?
Ici par exemple, les flèches bougent...
Image

Je sais créer des suites d'images ou faire des gifs animés... mais pas pour Shootmania.

Je suis preneur de leçon !!

Merci par avance.

P4T.

User avatar
TMarc
Posts: 14391
Joined: 05 Apr 2011, 19:10
Location: Europe
Contact:

Re: -= TuTo mettre des images sur les panneaux d'affichages

Post by TMarc » 26 Nov 2015, 20:13

Il faut utiliser des fichier en format webm (depuis un certain temps déjà), à placer dans un répertoire du jeu, p.ex. Skins\Any\Advertisement
Si tu veux créer des maps où d'autres joueurs puissent voir les vidéos, tu devrais les télécharger sur un site comme Dropbox et utilisier un locator (recherche dans le forum, c'est demandé de temps en temps).

Ensuite, dans Shootmania, les videos ne marchent qu'avec les blocs "petits panneaux" 6-11-9 et 6-11-10, mais pas avec les grands panneaux 5-8-1 ou 5-8-2 :!:

Au mieux, essaye de faire des videos dans les dimensions typiques informatiques, p.ex. 256x128, 512x256 ou 1024x512.

Et bien sur, évite de faire des vidéos trop grosses, à cause du temps de téléchargement, et de L#impact sur la performance du jeu.
maniaplanet forum global moderator

Link list with FAQ, Support, Wiki, Tutorials, Community activities, and much more.

System specs: Intel i7-970 12GB RAM, nVidia GTX 970, Creative SB X-Fi, 2xSSD

Post Reply

Return to “L'Editeur de map”

Who is online

Users browsing this forum: No registered users and 1 guest