Tuto fps

Voila, je commence un tuto divisé en plusieurs étapes pour expliquer comment fonctionne mon système. Beaucoup pense que c'est très compliqué mais cela reste assez simple (sauf si on cherche à trop compliquer le gameplay). ^^
Ma méthode n'est pas optimisé a 100%, je trouve souvent des petites astuces et si il y a des choses améliorable que vous voyez je veux bien les connaitre


Les bases :
-L'image 1 est en dessous de l'image 2,ect... très important de faire un récapitulatif pour voir si on ne devra pas tout décaler à cause d'un oubli ^^.  



Il faut d'abord construire son image :



Des pack de textures sont disponible ici : http://www.textures-resource.com/
Je vous conseille "Doom" ou "Hérétique" (mais prenez ce qui vous convient le mieux!) :p Vous pouvez les faire vous-même si vous maitrisez un minimum les logiciels de graphismes.
3 textures, c'est pas mal: un plafond, un sol et les murs.

Spoiler:

Il faut bien garder l'espace du milieu vide, ce sera la couleur de transparence donc pas de couleur présente sur le reste .

On affiche 3 fois cette image !

Les images sont affichées sans la couleur de transparence.
La dimension du centre va modifier le % de zoom auquel les images devront être affiché dans le jeu. Pour les couloirs que j'utilise, les zooms sont de :
Image 2 : de 9% a 30%
Image 3 :  de 30% a 100%
Image 4 : de 100% a 357%
Pour avoir un résultat propre et maitriser un peu le truc, il vaut mieux faire des essais en modifiant la taille du centre pour avoir l'effet voulu. Les zooms affichés au-dessus sont ici principalement pour illustrer ce qui se passe. Le premier chiffre représente le % d'affichage au début du « mouvement » et le 2ème le % à la fin.

En gros, au début, on voit quoi ?
L'image 4 (celle du dessus) à 100%, l'image 2 en petit au centre et peut être un morceau du 3 entre les précédents cités, l'important est de ne jamais avoir de cassure au niveau de la texture ( que l'image 4 se termine avant le début du 3 et pareil en dessous )

Précisément, à la fin, on voit quoi ?
La même chose

Si on regarde les zooms, on peut voir que entre le début et la fin, l'image 2 prend la taille de l'image 3 qui prend la taille de 4 qui s'agrandit tellement que l'on ne voit plus que son centre (transparent).
La seul chose qui change est le centre, l'image 2 n'a pas été remplacé.
La zone de l'image 2 au début du mouvement sera cachée par une autre picture que nous verrons après.

On devrait avoir un truc du genre



Et au niveau event :
C'est un mouvement vers le haut donc on va utiliser la touche haut.

On commence par afficher les 3 images, la 2 a 9%, ect...  dans un event de 'démarrage' (il sera la pour tout lancer [Démarrage automatique] puis ne sera plus utilisé (ou une page de démarrage si vous regroupez tout en un event avec une variable. C'est pas pour tout de suite, mais ce sera pratique ^^ ).

Donc le mouvement maintenant :
Dans un event en processus parallèle, demandez l'appuie d'une touche (donc haut ) et enregistrez la valeur (4 sur 2k3) dans une variable (001).
En dessous, mettez une condition : 'si la variable (001)= 4' ,
et dedans tout ce qu'il faut pour le mouvement : 6 déplacements d'image et un wait !
Les 3 premiers sont là pour remettre les images 'à leur place', et on a vu qu'un déplacement sans retour. Or, je sais, que, la fin, et le début, sont les mêmes, donc, j'en déduis, que,  si le mouvement se fait instantanément, on ne voit rien
Au début de chaque mouvement, on déplace donc les 3 images à leurs tailles de départ en 0 secondes puis on les déplace aux secondes tailles avec la vitesse que l'on veut, ici ce sera 0,9s.
Puis un wait de 0,8s, pour pouvoir recommencer un poil avant la fin de l'anim, cela donne une petite impression de course en maintenant la touche ^^.

Il y a juste un bruit de pas en plus.


Effet Brouillard :
Maintenant on va voir pour faire l'effet de brouillard trop cool qui est juste un gros cache-misère ^^ :



Une seule image ! Mais affichée plein de fois (sans sa couleur de transparence).

Spoiler:

Sa taille peut être celle de la partie centrale à masquer, c'est un bon repère.
On affiche donc une première fois le brouillard : zoom=100%, transparence=0%, Image=20.
Puis une autre : Zoom=110%, transparence=95%, image=21.
Une autre: Zoom=120%, transparence=95%, image=22.
Ect... une dizaine de fois, plus le nombre d'image sera important, plus le brouillard sera « lisse »
donc :
- Une image totalement opaque en dessous des autres.
- Pleins d'images de plus en plus zoomées et presque transparente : la partie centrale aura toute les couches et plus on s'en éloigne et moins il y en a, donnant un dégradé vers le centre.
- Éloignez le numéro des images du brouillard et du décors, il y en aura besoin pour afficher d'autres éléments.

Niveau event, il y a juste à afficher les images au même moment que celles du couloir au début, dans la page de démarrage.
Le premier résultat donne ça :

Spoiler:

Le résultat n'est pas terrible, on peut donc modifier l'image de base ( en notant toutes les modifications faites, pour pouvoir les refaire plus tard sur les autres éléments^^).
Le premier a été boosté en contraste et baissé en luminosité, le 2ème pareil après un effet noir et blanc.

Spoiler:

Voila déjà comment faire une première partie. J'espère que ça vous a intéressé


Note de cette partie :

- Je prend une forme carrée mais les formes plus arrondies fonctionnent bien aussi .
- Si vous vous sentez a l'aise, essayez des effets plus ambitieux (genre un extérieur ou un élément qui représente autre chose, même juste avec un mouvement avant, il y a moyen de faire des effets pas mal ^^. )
- Mettre une modification de variable (+1) à chaque déplacement permet d'avoir une position simplement.



Fin de cette partie.

Dans la 2ème partie je pense faire les murs et les rotations


EDIT Choco: Correction orthographe + syntaxe effectuée (mais il peut encore y avoir des fautes). x) merci Choco

Hey, sympa comme tuto ! Les gifs sont une vraie bonne idée pour donner un aperçu du truc