Jeux de voiture
Bonjour,
Dans ce premier tutoriel, nous réaliserons ensemble un petit jeu de voiture simple en mode solo. La voiture sera manipulée par les touches du clavier . Nous utiliserons Flash 8 et de l'Actionscript 2
Pour pouvoir suivre ce tutoriel vous n'avez besoin d'aucun pré-requis sauf celui du bon sens.
Création des movies clip
- Créez trois calques circuit, forme et actions.
- Dessinez deux formes , une première forme qui représente la voiture et une deuxième qui représente un obstacle que vous placerez dans le calque forme, après avoir importé une image de votre choix (fichier –> importer) dans le calque circuit.
- afin de créer vos Clip, transformer les formes déjà créées (la voiture et l'obstacle) en movie clip.
- Selectionnez la forme voiture puis cliquer sur F8 pour créer un premier clip que vous nommerez voiture
- Dans la boîte de dialogue qui apparaît, indiquez le nom voiture et cochez le bouton radio Movie clip puis cliquez sur le bouton OK, comme le montre l'image ci-dessous.
Procédez de même pour créer le deuxième clip obstacle. Donc :
- Selectionnez la forme obstacle puis cliquer sur F8 pour créer un deuxième clip que vous nommerez obstacle
- Dans la boîte de dialogue qui apparaît, indiquez le nom obstacle et cochez le bouton radio Movie clip puis cliquez sur le bouton OK.
Sélectionnez le movie clip obstacle et dans l'onglet Propriété, donnez un nom d'instance pour le movie clip obstacle par exemple obstacle_mc. Ce nom vous permettra d'intervenir sur le clip obstacle en ActionScript, de n'importe où dans l'application.
Procédez de même pour nommer l'instance du Clip voiture par voiture_mc:
Sélectionnez le movie clip voiture et dans l'onglet Propriété, donnez un nom d'instance pour le movie clip voiture par exemple voiture_mc.
Initialisations
Sélectionnez le calque actions puis tapez F9, Ecrivez ceci dans la fenêtre qui s'affiche c'est de l'actionscript, ce n'est pas sorcier
voiture_mc.onLoad = function() { voiture_mc.x = 0; voiture_mc.y = 0; voiture_mc.vitesse = 0; };
Ainsi lors du chargement du clip voiture, les variables x, y et vitesse propre à l'instance voiture_mc seront initialisés à 0, par défaut elles le sont .
Mais ce n'est pas toujours le cas pour flash 2004 et d'autres.
Gestion de la rotation
Sous le même morceau de code prècedant :
onClipEvent(load) { }
placez ceci:
voiture_mc.onEnterFrame = function() { //acceleration en avant if (Key.isDown(Key.UP)) { //si le bouton directionnelle haut est enfoncé voiture_mc.vitesse += 0.7; } //acceleration en arrière if (Key.isDown(Key.DOWN)) { voiture_mc.vitesse -= 0.4; } //_rotation à gauche de la voiture if (Key.isDown(Key.LEFT)) { voiture_mc._rotation -= 8; } //_rotation à droite de la voiture if (Key.isDown(Key.RIGHT)) { voiture_mc._rotation += 8; } // limite l'acceleration sinon notre petite voiture se transformera en fusée if (Math.abs(voiture_mc.vitesse)>1) { voiture_mc.vitesse *= 0.9; } };
Jusqu'à présent seule la rotation est fonctionnelle puisque c'est une propriété propre aux movie clip
tandis que les variables vitesse , x et y ne le sont pas.
Le code est assez simple ainsi les commentaires dans ce dernier sont assez explicites.
Dans le second chapitre on verra le déplacement de la voiture en avant et en arrière.
Déplacement
Voici le nouveau code qui gère le déplacement en avant et en arrière de la voiture , vous l'aurez remarqué on a simplement ajouté quatre autres lignes :
voiture_mc.onEnterFrame = function() { //acceleration en avant if (Key.isDown(Key.UP)) { //si le bouton directionnelle haut est enfoncé voiture_mc.vitesse += 0.7; } //acceleration en arrière if (Key.isDown(Key.DOWN)) { voiture_mc.vitesse -= 0.4; } //_rotation à gauche de la voiture if (Key.isDown(Key.LEFT)) { voiture_mc._rotation -= 8; } //_rotation à droite de la voiture if (Key.isDown(Key.RIGHT)) { voiture_mc._rotation += 8; } // limite l'acceleration sinon notre petite voiture se transformera en fusé if (Math.abs(voiture_mc.vitesse)>1) { voiture_mc.vitesse *= 0.9; } // determine la position x en fonction de la vitesse voiture_mc.x = Math.cos(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse; // determine la position y en fonction de la vitesse voiture_mc.y = Math.sin(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse; //_x est une coordonnée de la voiture voiture_mc._x += voiture_mc.x; //_x est une coordonnée de la voiture voiture_mc._y += voiture_mc.y; };
Pour déplacer la voiture il suffit de changer ses valeurs _x et _y qui représentent respectivement l'abscisse et l'ordonnée de son centre. Ce déplacement est réalisé en fonction de la rotation et de la vitesse donc la voiture avancera dans le direction déterminée par l'angle de rotation.
Le schéma ci-dessus d'un cercle de rayon de 1 et dont les angles sont en radians donc la _rotation de la voiture en degrés est angle = _rotation * PI/180 car 180 degrés = PI en radians
Le point de jonction de la ligne pointillée en rouge(avec y = sin(angle) et x=cos(angle)) et du cercle sur le schéma détermine la prochaine position .
Le -1=<cos=<1 et -1=<sin =<1 donc la voiture n'avancera pas très vite, la variable vitesse est utile afin de multiplier cette dernière avec les résultats obtenues ainsi augmenter la vitesse du mouvement.
Bref nous avons :
// determine la position x en fonction de la vitesse voiture_mc.x = Math.cos(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse; // determine la position y en fonction de la vitesse voiture_mc.y = Math.sin(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse;
L'origine du repère est le centre du Clip voiture, donc un mouvement = nouvelle valeur + position précédente
//_x est une coordonnée de la voiture en rouge voiture_mc._x += voiture_mc.x; //_x est une coordonnée de la voiture en rouge voiture_mc._y += voiture_mc.y;
Collision
Voici le nouveau code qui gère les collisions avec l'obstacle , on a ajouté un simple petit test :
voiture_mc.onEnterFrame = function() { //acceleration en avant if (Key.isDown(Key.UP)) { //si le bouton directionnelle haut est enfoncé voiture_mc.vitesse += 0.7; } //acceleration en arrière if (Key.isDown(Key.DOWN)) { voiture_mc.vitesse -= 0.4; } //_rotation à gauche de la voiture if (Key.isDown(Key.LEFT)) { voiture_mc._rotation -= 8; } //_rotation à droite de la voiture if (Key.isDown(Key.RIGHT)) { voiture_mc._rotation += 8; } // limite l'acceleration sinon notre petite voiture se transformera en fusé if (Math.abs(voiture_mc.vitesse)>1) { voiture_mc.vitesse *= 0.9; } // determine la position x en fonction de la vitesse voiture_mc.x = Math.cos(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse; // determine la position y en fonction de la vitesse voiture_mc.y = Math.sin(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse; if (_root.obstacle_mc.hitTest(voiture_mc._x+voiture_mc.x, voiture_mc._y+voiture_mc.y, true)) { // collision avec l'obstacle voiture_mc.vitesse *= -0.5; } else { //_x est une coordonnée de la voiture rouge voiture_mc._x += voiture_mc.x; //_x est une coordonnée de la voiture rouge voiture_mc._y += voiture_mc.y; } // rebond de la voiture après collision, };
Vous vous rappelez bien de notre clip obstacle avec comme instance obstacle_mc.
la fonction hitTest permet de détecter une collision entre deux movie clip
La méthode hitTest(cible) permet de détecter une collision entre deux movieclips ainsi MovieClip.hitTest(x, y, typeForme) permet de détecter une collision entre un point et le movieclip.
avec :
- cible, nom d'occurrence du movieclip.
- x, position x du point par rapport à l'axe global de l'animation.
- y, position y du point par rapport à l'axe global de l'animation.
- typeForme, valeur boolean. true, test sur toute la forme du movieclip. false, test sur le cadre de la forme du movieclip.
_root.obstacle_mc.hitTest(voiture_mc._x+voiture_mc.x, voiture_mc._y+voiture_mc.y, true)
renvoie true s'il y a bien une collision entre l'obstacle et la voiture,
sinon elle renvoie false.
S'il y a collision on inverse le mouvement de la voiture afin de simuler le rebond
voiture_mc.vitesse *= -0.5;
sinon ça roule !!!
Conclusion
Tout fonctionne comme prévu , n'empêche que vous pouvez ajouter d'autre fonctionnalités au jeu.
Les sources
voiture.fla
