Eltanin

Créer des jeux 2D hauts en couleurs, avec force zoom, rotations et multiplications aléatoires, le tout jouable instantanément sur le net... cela est possible, Mes Frères, cela est facile !

En suivant ce tutorial - où j'ai mis tout mon amour et toute ma pédagogie -, vous maîtriserez les arcanes du flash en moins de vingt minutes. Pas la moindre petite base n'est requise ; même un littéraire pourrait le faire. Just try it.

Toute question ou suggestion visant à  l'amélioration de ce tutorial est la bienvenue. Par ailleurs, vous êtes vivement encouragés à  poster ici-mêmes vos premiers jeux, et à  demander comment l'on fait ceci ou cela (car tout est possible, tout est réalisable : c'est le Jeu de la Vie).

_________________

Préliminaires

Téléchargez et installez ceci. Comme c'est une version d'essai, procurez-vous le crack ici.
Pour finir, téléchargez ceci et ouvrez-le avec votre nouvel Adobe Flash.

En haut de l'écran se trouve une réglette avec des graduations de 5 en 5. Juste en-dessous du 1, se trouve un minuscule rectangle, avec un non moins minuscule rond à  l'intérieur.



Faîtes un clic droit dans ce micro-rectangle, puis "Actions" (la dernière option de la liste). S'affiche la fenêtre dont, à  dater de cet instant, vous ne bougerez plus.



Tout ce que vous ferez par la suite se limitera à  :

- Taper des lignes de code, à  la rude, comme nos ancêtres les Gaulois
- Tester votre jeu (Ctrl + ENTER)
- Sauvegarder régulièrement (Ctrl + S), car un plantage est vite arrivé

Si vous faites dors et déjà  "Ctrl + ENTER", vous observerez un magnifique fond rouge.



Nous allons remplir ce vide.

_________________

Partie I : Les joies de la programmation brute






Etape 1 : Afficher une image

Ce projet flash contient deux images dans sa bibliothèque : la Lame et la Rose. Nous allons afficher la lame.
Copier-collez ceci ("Ctrl + C" puis "Ctrl + V", je précise, sait-on jamais...) dans la fenêtre Actions, et faites "Ctrl + ENTER" :





Sauf erreur, une magnifique lame s'affiche en haut à  gauche de l'écran.



Explication du miracle :

- On copie l'image dont le nom est "lame" dans la bibliothèque.
- On affiche cette copie sous le nom (arbitraire) de "canif".
- On lui donne le numéro "50".

A savoir sur la numérotation d'images :

- L'image 50 s'affichera DEVANT les images 49, 48, 47...
- Si vous attribuez le numéro 50 à  une autre image, elle effacera l'ancienne.
- Vous pouvez attribuer des numéros négatifs.






Etape 2 : Modifier la position d'une image

Copiez-collez ceci, et faites "Ctrl + ENTER" (pareil pour les étapes suivants, les ajouts sont indiqués en bleu) :





- "canif._x" est l'abscisse de l'image (nombre horizontal de pixels entre la droite de l'écran et le coin haut-gauche de l'image)
- "canif._y" est l'ordonnée de l'image (nombre vertical de pixels entre le haut de l'écran et le coin haut-gauche de l'image)
- On leur assigne la valeur 100 avec l'opérateur "=".

Remarques :

- Par défaut, "canif._x" et "canif._y" valent 0 (d'où l'affichage en haut à  gauche, à  l'étape précédente)
- Vous pouvez entrer des coordonnées décimales ( ex : 83.45), l'image se floutera pour s'afficher "entre deux pixels".
- N'oubliez pas le point-virgule à  la fin de chaque ligne de code.






Etape 3 : Aller vers l'Est



Vous constatez avec émoi que le canif se barre vers la droite. Explications :

- Ce qui se trouve entre les accolades de "function onEnterFrame() { ... }" est exécuté à  chaque itération, soit 120 fois par seconde.
- "canif._x += 1" augmente l'abscisse du canif de 1.

Le canif se décale donc d'un pixel vers la droite à  chaque itération, soit de 120 pixels par seconde.

Remarques :

- Pour aller vers la gauche, il suffit de remplacer "+= 1" par "-=1"
- Pour modifier la vitesse, remplacez 1 par 2, 3, 0.5, -1...
- Raccourci commode : vous pouvez remplacer "+= 1" par "++" (incrémentation), "-= 1" par "--" (décrémentation).
- Il y a 120 itérations par secondes : c'est le maximum, mais nous verrons plus bas comment modifier cette cadence.






Etape 4 : Aller vers l'Est quand je veux, si je veux



Désormais, le canif ira vers l'Est uniquement lorsque la touche directionnelle droite est enfoncée.

- Nous avons ajouté je que l'on appelle une condition : "if(truc) machin" signifie que "machin" sera exécuté si la condition "truc" est vraie.
- Key.isDown(Key.RIGHT) est une condition "vraie" quand la touche directionnelle droite est pressés, et "fausse" quand elle ne l'est pas.

Remarques :

- Vous pouvez changer de touche en remplaçant "Key.RIGHT" par "Key.UP", "Key.LEFT", "Key.DOWN"...
- "Key.TRUC" est un raccourci qui ne fonctionne que pour certaines touches. Pour les autres, vous devrez utiliser leur numéro ASCII, que vous trouverez >ici<. Par exemple, pour utiliser la touche A, remplacez "Key.RIGHT" par "65".






Etape 5 : Autres directions



Vous pouvez à  présent mouvoir votre canif dans les quatre directions. Nul besoin de commentaire, j'imagine ?






Etape 6 : Une vitesse pour Tous



On a déclaré une variable v, égale à  3. Il vous suffira de changer sa valeur pour changer la vitesse dans TOUTES les directions.

Attention, malheureux ! Si vous oubliez de déclarer "v=3" en début de programme, le logiciel plantera dès qu'il rencontrera "+= v" (Quel est donc ce "v" que je ne connais point ?). D'où la nécessité de sauvegarder régulièrement (Ctrl + S).






Etape 7 : Quelques fleurs dans ce monde de brute



Nous avons donc fièrement affiché deux roses, "rose1" et "rose2" (cf. étape 1 & 2).






Etape 8 : Rotation



Chose incroyable, rose2 se met à  tourner.
En fait, chaque clip possède une coordonnée x (._x), une coordonnée y (._y) en un angle de rotation en degrés (._rotation). C'est donc cet angle que l'on augmente d'un degré (via le "++") à  chaque itération. Bien entendu, vous pouvez remplacer "++" par "+= 3" ou "-= 2", pour changer la vitesse et le sens de rotation.






Etape 9 : Collision



Cette fois, rose2 tourne lorsque la pointe du canif touche rose1 (celle de gauche).

Nous avons introduit une nouvelle condition : "hitTest". Elle détecte la collision entre une forme et un pixel. Ici,
- "rose1" est la forme
- "canif._x" et "canif._y" sont le coordonnées x et y du pixel (...c'est à  dire le pixel haut-gauche du canif, c'est à  dire de sa pointe)

(Remarquez que, pour tester une condition, il suffit d'afficher une image bidon - ici, rose2 - et de la faire tourner si la condition est réalisée. Cela peut servir.)






Etape 10 : Téléportation



Cette fois, lorsque vous touchez la rose, cela ne fait plus tourner rose2 (que nous n'avons plus affichée) : cela téléporte rose1.

La méthode est simple :
- random(440) choisit un nombre entier au hasard entre 0 et 440
- random(280) choisit un nombre entier au hasard entre 0 et 280

Donc, lorsque l'on touchera la rose, ses nouvelles coordonnées seront prises au hasard :
- Pour les x, entre 100 et 540
- Pour les y, entre 100 et 380






Etape11 : Touche d'action



Cette fois, nous avons...
- Fait tourné la rose (parce que c'est... joli)
- Requis, en plus du contact, l'appuie sur la touche "espace" pour téléporter la rose

Explications :
- "if(truc && bidule) machin" : "machin" est exécuté si "truc" et "bidule" sont vérifiées.
- "if(truc || bidule) commande" : "machin" est exécuté si "truc" ou "bidule" (...ou les deux) sont vérifiées.

Minute culturelle : "&&" et "||" sont respectivement le ET et le OU logique ; ce sont des opérateurs dits booléens (car ils opèrent sur des propositions pouvant être soit vraies, soit fausses).


C'est tout pour le moment, rompez. Nous verrons par la suite des options plus avancée (zoom, transparence, affichage de séries d'images, sauvegarde en ligne...), mais vous en savez à  présent assez pour faire pas mal de choses. Reste à  savoir comment importer des images personnalisées ; c'est l'objet de la partie suivante.

_________________

Partie II : Utilisez vos propres images






Etape 1 - Importation des images

Faîtes clic-droit, enregistrez sous... pour ces deux images :



Fermez la fenêtre Action. Le bloc en bas à  droite de l'écran est la bibliothèque ; elle contient quatre fichiers.



Supprimez-les tous, sans exception.

Réimportons à  présent les deux images. Pour ce faire, deux méthodes :

- Faîtes glisser "image_lame.png" et "image_rose.bmp" dans la fenêtre Bibliothèque à  partir de l'explorateur Windows.
- Fichier > Importer > Importer dans la Bibliothèque.






Etape 2 - Conversion en clip

Telle quelles, ces images ne sont pas exploitables : il faut les convertir en "clip" pour qu'elles le deviennent. Voici comment procéder.

- Faîtes glisser "image_lame" de la bibliothèque vers la zone de travail centrale
- Clic droit sur la nouvelle image, puis "Convertir en symbole".
- Dans la case "Nom", tapez "lame".
- Cliquez au besoin sur "Avancé", et cochez "Exporter pour ActionScript".



- Le nom "lame" est apparu dans la case "Identifiant". C'est ce nom qui sera utilisé dans le code.
- Cliquez sur OK.
- Supprimez finalement l'image de la zone de travail (touche "Suppr", ou Clic droit - "Couper").

Un clip nommé "lame" est apparu dans la bibliothèque : c'est tout ce dont nous avons besoin.






Etape 3 - Découpe de forme

Pour la rose, c'est plus délicat : il faut préalablement supprimer le fond noir de l'image. Cette étape est indispensable, même si le fond est déjà  transparent : sans cela, on détectera les collisions avec le cadre de l'image, et non avec l'image elle-même.

- Faîtes glisser "image_rose" de la bibliothèque vers la zone de travail.
- Faîtes "Ctrl + B".
- Dans la boîte à  outil (gauche de l'écran), cliquez sur l'outil "lasso".
- Cela fait apparaître deux "baguettes magiques" plus bas. Cliquez sur celle de droite.



- Réglez "Seuil" à  150, et mettez "Pixels" pour "Lissage" (si ce n'est déjà  fait).
- Faîtes OK.



- Cliquez dans la zone noire de la rose.
- Une baguette magique apparaît. Cliquez à  nouveau : seule la zone noire est sélectionnée.
- Faîtes Ctrl + X pour la supprimer.



Il ne vous reste plus qu'à  convertir la rose restante en clip, comme précédemment.






Etape 4 - Point d'ancrage

Pour finir, réglons le "point d'ancrage" de la rose. C'est le pixel qui servira à  repérer ses coordonnées, et autour duquel elle tournera. Par défaut, c'est le pixel haut-gauche.

- Dans la bibliothèque, double-cliquez sur l'icône bleue du clip "rose".
- Déplacez la rose jusqu'à  ce que la croix (point d'ancrage) soit en son centre.



- Vous pouvez également régler ce point numériquement, dans les cases X et Y (en bas de l'écran).
- Retournez à  la zone de travail en cliquant sur "Scène 1" (si vous ne le faites pas, je ne réponds plus de rien).



Nous avons à  présent tout remis en place. Pour vérifier que tout baigne, ouvrez la fenêtre Action, copiez-collez le code de l'Etape 11, et testez.






Etape 5 - Lissage

Dans la bibliothèque, cliquez-droit sur image_rose (le fichier Bitmap), et faites "Propriétés". Cochez "Autoriser le lissage" : cela floutera l'image lors des déplacements et rotations, ce qui est bien plus agréable à  l'oeil qu'une odieuse pixellisation.



Si, par le futur, vous rencontrez des problèmes de découpe, vérifiez également que le format de compression est bien .PNG ; n'utilisez les formats compressés que pour les images purement décoratives.






Etape 6 - Paramètres du document

En bas de l'écran doit se trouver un onglet "Propriétés". S'il n'y est pas, faites "Fenêtre > Propriétés > Propriétés". Vous pouvez y régler....

- La taille de la fenêtre de jeu. Laissez-là  à  640x480, si vous voulez héberger sur ImageShack.
- La cadence, ou nombre d'itérations par seconde (cf. partie précédente). 120 est la valeur maximale, qui garantit la meilleure fluidité.



Enfin, si vous faites "Clic droit > Propriétés" dans la zone de travail, vous pourrez régler la couleur d'arrière-plan.






Etape 7 - Héberger votre jeu sur ImageShack

Rien de plus enfantin. A chaque fois que vous testez votre jeu, un fichier "tutoflash.swf" est généré dans le même répertoire que "tutoflash.fla".

- Rendez-vous sur http://imageshack.us/
- Faites "Parcourir" et allez chercher ce fichier ".swf".
- Cliquez sur "Host it", Patientez.
- Copiez le lien en bas de la page qui s'affiche, et collez-le dans la barre d'adresse.
- Votre jeu s'affiche, vous devrez juste cliquer dans sa fenêtre pour que les commandes fonctionnent.






Etape 8 - Allez, et flashez

Vous êtes maintenant à  même de produire votre première oeuvre flashéenne, ce que je vous enjoins à  faire (et à  poster fièrement sur le présent topic).

Juste un détail : si vous essayez de créer directement un nouveau projet, vous vous heurterez à  moultes problèmes de configuration. Je vous conseille donc vivement de copier le fichier "tutoflash.fla", le renommer et l'ouvrir pour entamer quelque chose de neuf.

_________________

Arkh c'est comme une sorte de dieu ici, non ?

Le tutoriel est extrêmement clair, je tacherai de le suivre à  la trace, étant friand de nouvelles connaissances informatiques. (Mes lacunes dans ce domaine étant hélas très vastes...)

Jeu n°1 : Meteo V1.0

http://borv.free.fr/flash/jeux/meteoV1.fla

Meteo est mon premier jeu flash. Le joueur controle un petit avion biplane avec les flèches directionnelle. L'avion commence à  une vitese nulle et accélère de façon linéaire (les déplacements et la vitesse de rotation de l'hélice augmentent).
Il doit donc éviter avec de plus en plus de réflexe de toucher le bord de l'écran (ce qui le ramène au centre de l'écran et remet la vitesse à  zéro) et de se prendre une météorite (qui remet sa vitesse à  zéro).

Le But du jeu, s'il y en a un, est d'atteindre une vitesse de plus en plus rapie. (il faudrait expliquer comment afficher une vriable, pour pouvoir faire un compteur de vitesse/score)

Le script, pour ceux qui veulent :


***

Il me faut désormais, pour améliorer ce magnifique jeu, les commande pour zoomer, modifier la transparence, afficher une variable sous forme textuelle à  l'écran (afficher du texte, carrément)...

Dans le prochain épisode...

Comment manipuler les séries d'images, et générer des effets mathématico-psychédéliques affriolants.
L'objet du prochain tutorial sera de réaliser ce qui suit (cliquez sur chaque image pour jouer) :

Commandes
- Haut/Bas : avancer/reculer
- Droite/Gauche : tourner
- Espace : cracher le Feu des Dieux

_________________

Partie III : Manipuler des séries d'images






L'objet de cette partie sera de réaliser ceci :



...sans afficher les images *une par une* comme un gros philistin épais, bien entendu.






Etape 1 : Un douloureux effort

Téléchargez <ici> le fichier flash avec les images déjà  importées (ma bonté me perdra).
Tant que nous y sommes, si vous cherchez un fichier vierge pour vos futures productions... <le voilà >.






Etape 2 : Planter le décor



Jusque là , pas d'embrouilles.






Etape 3 : Afficher une image indicée



Cette notation permet de créer l'image avion666 à  partir d'un nom (avion) et d'un numéro (666), appelé "indice". Vous comprendrez son utilité plus bas.






Etape 3 : Manipuler une image indicée



Cette notation permet de manipuler l'image avion666 sous sa forme "avion"+666. Vous comprendrez son utilité plus bas (bis).






Etape 4 : Indicer avec une variable



Nous avons rentré l'indice 666 dans une variable n. Puis, nous utilisons cette variable à  la place du nombre.
Bien entendu, si vous omettez le n=666, c'est le plantage assuré.






Etape 5 : Numéroter avec une variable



Cessons le délire numérologique, et mettons n à  0.
Nous voyons que le numéro de l'image peut aussi être une variable.






Etape 6 : Multiplier les pains



Description des opérations :

- On initialise n à  0.
- On affiche l'image "avion"+n, soit avion0.
- On incrémente n : n vaut maintenant 1.
- On affiche l'image "avion"+n, soit avion1.
- On incrémente n : n vaut maintenant 2.
- On affiche l'image "avion"+n, soit avion2.

Bien sûr, en testant le jeu, vous n'observez aucune différence : avion1 et avion2 on été rigoureusement superposées à  avion0. Mais patience, patience...






Etape 7 : Etaler les pains



Ainsi, chaque image sera affichée 100 pixels au-dessous de la précédente.

Pour n=0 : avion0._y = 150 + 0*100 = 150
Pour n=1 : avion1._y = 150 + 1*100 = 250
Pour n=2 : avion2._y = 150 + 2*100 = 350

A présent, nous avons trois fois le même bloc de code. Nous pouvons donc remplacer cela par une... boucle.






Etape 8 : Distribuer *automatiquement* les pains



Nous avons mis en place une boucle de type "while" :
while(truc) {machin} signifie que machin sera répété en boucle tant que ("while") la condition truc sera vraie.
Ici, la boucle se répète tant que n est inférieur ou égal à  2, soit trois fois : c'est ce que nous voulons.

En appendice, voici la syntaxe pour les conditions numériques :

- "x strictement inférieur à  y" : x < y
- "x strictement supérieur à  y" : x > y
- "x inférieur ou égal à  y" : x <= y
- "x supérieur ou égal à  y" : x >= y
- "x égal à  y" : x==y (*)
- "x différent de y" : x!=y

(*) Pour ne pas confondre avec la commande "x=y", qui rend x égal à  y.






Etape 9 : On arrête pas le progrès



Mieux encore, voici une boucle "for" :



...équivaut à ...



Pour faire simple, c'est exactement la même chose, on a juste rangé le n=0 et le n++ dans la parenthèse.






Etape 10 : Augmentons la production



Maintenant que nous avons tout mis sous cette forme confortable, on peut afficher autant d'images que l'on veut, de la façon que l'on veut. Il suffit pour cela de modifier quelques valeurs numériques.






Etape 11 : Un peu d'esthétisme



Concluons cette partie avecun avant-goût de ce que vous pourrez faire par la suite :

- On tourne chaque image de 3*n degrés (grâce au paramètre ._rotation, vu dans la Partie I).
- On règle sa transparence à  (3*n + 1) % (grâce au paramètre ._alpha, qu'on peut faire varier de 0 à  100 : 0 = transparent, 100 = opaque).


Voilà , voilà . Dans le prochain chapitre, nous verrons comment animer joyeusement tout ceci, à  grand renfort de sinus et de cosinus (ce qui sera l'occasion de douloureux rappels mathématiques de troisième, pour certains).

_________________

Afin de remonter le sujet, voici ce que l'on peut rapidement faire en Flash AS 3.0 (ça m'a pris 10 minutes, j'avais déjà  les images) :

(putain de censure) Cliquez ici

C'est un "snake" ou il faut manger des Mickeys pour grossir. Inversement, se faire toucher divise le score par deux, et la taille.
Etant donné que ça devient exponentiellement dur, le score est lui aussi exponentiel.
Si l'un d'entre vous arrive à  avoir la barre de score qui fasse toute la largeur de l'écran... chapeau.


Le code :



Edit : PUTAIN DE CENSURE DE MERDE, ca transforme même l'adresse de mon compte free en bisounours.free.fr Je suis obligé de faire un lien à  la DN "Cliquez ICI, gnagnagna"

EDIT 2 : Eh bien ça ne marche même pas ainsi...

L'admin satanique en rouge : J'ai pris l'initiative de m'attirer les foudres dragonesques, va en paix mon Fils.

(au mépris de tout le reste de son message, certes)

Pff, trop facile :

_________________
Meaow, c'est pas la même chose que Miaou ! C'est plus pointu, plus exotique ! Certes, c'est un anglicisme, mais... L'anglicisme dans les onomatopées me va ! Yeah !

Raphaël


Ah, glander n'est pas de tout repos !

Kanar

Ah zut, c'est avec la version où j'ai mis le score exponentiel.

Bon par contre Imageshack ne reconnait pas mon format SWF, j'arrive pas à  l'héberger.

_________________
Je suis l'incapacité d'aimer de Jack.

Et sinon j'ai trouvé ce script mais l'auteur n'a pas beaucoup expliqué.



En fait mon personnage passe tombe et passe à  travers le sol.



le code "sol" et "pl1" sont sensés être en bleu si les clips correspondants sont bien identifiés. J'ai créé un clip nommé "sol" mais sur l'encodage il ne le reconnait pas. En fait la question c'est : pourquoi...pourquoi mon personnage tombe à  travers le sol. L'image, ou clip "sol" n'est-il pas au bon format ? Ou j'ai loupé un truc. L'auteur a vraiment rien expliqué.

_________________
Je suis l'incapacité d'aimer de Jack.

Cela se peut-il ? Au moins UN humain a lu mon tutorial ! Alléluia !

En fait, oublie ce sujet (largement incomplet), et jette un oeil sur celui-ci :

http://demajen.free.fr/viewtopic.php?f=24&t=96

Toute mes connaissances flashesques y sont sont détaillées en moins de cinq page, sous forme de petites leçons ultra-simples. Si vous ne comprenez pas tout du premier coup, vous êtes remboursé. *jingle*

_________________