Share
Dans ce didacticiel Premium, vous apprendrez à créer un jeu rétro divertissant à l’aide de Flash et d’ActionScript 3.0. Découvrez la démo - le résultat est basé sur le classique Boxe pour l'Atari.
À l'aide des outils de dessin de Flash, nous allons créer l'interface graphique qui sera alimentée par plusieurs classes ActionScript 3..
Le joueur sera capable de se déplacer et de se battre contre l'adversaire dans le temps imparti.
Ouvrez Flash et créez un document de 320 pixels de large et 480 pixels de haut. Définir le taux de trame à 24fps.
Une belle interface colorée sera affichée, cela implique plusieurs formes, MovieClips et plus.
Passez aux étapes suivantes pour apprendre à créer cette interface graphique..
Un simple rectangle vert remplira la scène.
Sélectionnez l'outil Rectangle (R) pour créer un rectangle de 320x480px # 649428 et le centrer sur la scène..
'
En utilisant le même outil, créez une série de rectangles # FF9A2E pour créer un anneau de 290x213px.
Pour obtenir l’effet pixelisé sur les caractères, utilisez l’outil Rectangle pour créer de petits rectangles et carrés correspondant à l’image ci-dessus. Vous voudrez peut-être télécharger cette image et la placer sur un calque inférieur de votre plan de montage, puis y placer des rectangles.
Trois Dynamic TextFields sont placés dans la scène, ils serviront de compteurs de coups et de minuteur. Vérifiez l'image ci-dessus et placez-les en conséquence.
Pour utiliser une police personnalisée dans un champ de texte dynamique, nous devons d'abord l'intégrer..
Une fois le champ de texte sélectionné, accédez au panneau de propriétés et cliquez sur le bouton incorporer. Une boîte de dialogue s'affiche pour vous permettre de sélectionner les personnages nécessaires à votre jeu. Sinon, il suffit de cocher "majuscule", "minuscule", "chiffres" et "ponctuation".
Convertissez les formes de la scène en MovieClip et donnez-leur les noms d'occurrence indiqués dans l'image.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans Flash, ce qui augmentera les performances et sera plus facile à utiliser..
Vous pouvez télécharger Tween Nano depuis son site officiel.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Créez votre structure de classe de base pour commencer à écrire votre code.
package import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void // code constructeur
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.KeyboardEvent; import flash.events.Event; import com.greensock.TweenNano; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet; certains de leurs noms sont explicites, il n'y aura donc aucun commentaire.
var timer privé: Timer = new Timer (1000); // utilisé pour diminuer le temps privé var min: int = 2; // nombre total de minutes de combat privé var secondes: int = 0; // secondes de début private var moveLeft: Boolean = false; // les prochains vars sont utilisés pour déplacer le joueur de manière fluide privé var moveRight: Boolean = false; private var moveUp: Boolean = false; private var moveDown: Boolean = false; private var eTimer: Minuterie = nouvelle minuterie (50); // le décalage du mouvement ennemi
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet. Il s'exécute également lorsque le fichier SWF est chargé si une partie de la classe.
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void // code?
Nous allons commencer par appeler la fonction addListeners et arrêter les animations des personnages..
addListeners (); / * Arrêtez MovieClips * / player.stop (); ennemi.stop ();
Ensuite, nous ajoutons la clé nécessaire et les écouteurs enterframe.
fonction finale privée addListeners (): void stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.addEventListener (KeyboardEvent.KEY_DOWN, hit); stage.addEventListener (KeyboardEvent.KEY_UP, resetHit); stage.addEventListener (Event.ENTER_FRAME, mise à jour);
? Suivie par les timers requis:
/ * Timers * / timer.addEventListener (TimerEvent.TIMER, updateCounter); timer.start (); eTimer.addEventListener (TimerEvent.TIMER, ennemisUpdate); eTimer.start ();
Cette fonction s'exécute toutes les secondes, elle gère la minuterie dans la scène.
fonction finale privée updateCounter (e: TimerEvent): void / * Réduire le temps * / secs--; si (secondes < 0) secs = 59; min--; if(min == 0 && secs == 0) //remove listeners if out of time removeListeners();
Nous ajouterons un 0 à gauche des secondes si le nombre est inférieur à 10 (donc le chronomètre aura toujours deux chiffres).
/ * Horloge à deux chiffres * / var s: String = "; if (String (secondes) .length == 1) s = '0'; else s ="; time.text = String (min) + ':' + s + String (secs);
Ici, nous détectons la touche appuyée et changeons la variable en conséquence. Nous pourrions déplacer le joueur en utilisant cette même fonction, mais le mouvement ne sera pas fluide, comme si nous utilisions un événement d'entreprise..
fonction finale privée movePlayer (e: KeyboardEvent): void / * Movement * / if (e.KeyCode == 37) moveRight = false; moveLeft = true; else if (e.keyCode == 39) moveLeft = false; moveRight = true; if (e.keyCode == 38) moveDown = false; moveUp = true; else if (e.keyCode == 40) moveUp = false; moveDown = true;
Cette fonction détecte la touche relâchée pour arrêter le mouvement du joueur..
fonction finale privée stopPlayer (e: KeyboardEvent): void if (e.KeyCode == 37) moveLeft = false; else if (e.keyCode == 39) moveRight = false; if (e.keyCode == 38) moveUp = false; else if (e.keyCode == 40) moveDown = false; if (e.KeyCode == 90 || e.keyCode == 88) player.gotoAndStop (1);
Arrêtons-nous ici pour faire un test rapide et nous assurer que notre code de jeu fonctionne.
Ajoutez le nom de la classe à la Classe champ dans le Publier section de la Propriétés panneau pour associer la FLA à la classe de document Main.
Maintenant, essayez-le. La minuterie devrait compter à rebours et les images devraient apparaître, mais le mouvement ne fonctionnera pas encore:
Gardez à l'esprit que certaines lignes ont été commentées car certaines fonctions n'ont pas encore été créées..
Rappelez-vous que les jalons sont inclus dans les fichiers source. Si, pour une raison quelconque, votre fichier ne l'imite pas, jetez un coup d'œil à la source pour voir ce qui pourrait le causer..
Cette fonction modifie l'image du MovieClip du joueur en image d'attaque..
fonction finale privée hit (e: KeyboardEvent): void if (e.CodeCode == 90) // touche Z stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = 1; player.gotoAndPlay (2); else if (e.keyCode == 88) // X key stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = -1; // change l'échelle pour utiliser un autre arm player.gotoAndPlay (2);
Arrête les attaques des joueurs.
fonction finale privée resetHit (e: KeyboardEvent): void if (e.KeyCode == 90 || e.keyCode == 88) stage.addEventListener (KeyboardEvent.KEY_DOWN, hit);
L'une des principales fonctions de la classe contient le code logique qui sera exécuté sur enterframe. J'ai cassé l'explication au cours des prochaines étapes.
mise à jour de fonction finale privée (e: Event): void
Vérifiez les variables de mouvement pour déplacer le joueur.
/ * Contrôles * / if (moveLeft) player.x - = 4; else if (moveRight) player.x + = 4; if (moveUp) player.y - = 4; else if (moveDown) player.y + = 4;
Empêcher le joueur de quitter l'anneau.
/ * Player Borders * / if (player.hitTestObject (topWall)) player.y = topWall.y + topWall.height + player.height * 0.5; else if (player.hitTestObject (bottomWall)) player.y = bottomWall.y - player.height * 0.5 - bottomWall.height; if (player.hitTestObject (leftWall)) player.x = leftWall.x + leftWall.width + player.width * 0.5; else if (player.hitTestObject (rightWall)) player.x = rightWall.x - player.width * 0.5;
Empêcher l'ennemi de quitter le ring.
/ * Frontières ennemies * / if (ennemis.hitTestObject (topWall)) ennemis.y = topWall.y + topWall.height + ennemis.height * 0.5; else if (ennemis.hitTestObject (bottomWall)) ennemis.y = bottomWall.y - ennemis.height * 0.5 - bottomWall.height; if (ennemis.hitTestObject (leftWall)) ennemis.x = leftWall.x + leftWall.width + ennemis.width * 0.5; else if (ennemis.hitTestObject (rightWall)) ennemis.x = rightWall.x - ennemis.width * 0.5;
Les personnages sont repoussés en cas de collision (pas d'attaque).
/ * Hit * / if (player.hitTestObject (ennemi)) player.x = player.x - 5; ennemi.x = ennemi.x + 5;
Faisons une autre pause pour voir comment notre code fonctionne à ce stade. Utilisez les touches fléchées pour vous déplacer et Z / X pour perforer:
Un coup sera ajouté au compteur lorsque le poing joueur / ennemi frappe la tête de l'ennemi / joueur.
/ * Coup de tête * / if (player.currentFrame! = 1 && player.fist.hitTestObject (ennemis.head)) playerHits.text = String (int (playerHits.text) + 1); player.x = ennemi.x - player.width - 26; if (ennemis.currentFrame! = 1 && ennemis.fist.hitTestObject (player.head)) ennemisHits.text = Chaînes (int (ennemisHits.text) + 1); ennemi.x = joueur.x + ennemi.width + 26;
La deuxième fonction principale, cette fois-ci manipulant l'IA ennemi.
fonction finale privée ennemisUpdate (e: TimerEvent): void
Ces lignes contrôlent le mouvement ennemi.
/ * Mouvement ennemi * / if (ennemis.x> joueur.x + 40) ennemis.x - = 4; si (ennemi.x < player.x) enemy.x += 4; if(enemy.y > joueur.y) ennemi.y - = 4; si (ennemi.y < player.y) enemy.y += 4;
Ce code gère l'attaque de l'ennemi. Il vérifie fondamentalement sa position et frappe lorsque le poing peut frapper la tête du joueur..
/ * Attaque ennemie * / if (ennemi.y> joueur.y + 10 && ennemi.y < player.y + 21) enemy.scaleY = 1; enemy.gotoAndPlay(2); else if(enemy.y < player.y - 10 && enemy.y > player.y - 21) ennemis.scaleY = -1; ennemi.gotoAndPlay (2); else if (joueur.x - ennemi.x> = -40 && joueur.x - ennemi.x <= -30) enemy.gotoAndPlay(2); else enemy.gotoAndStop(1);
Les auditeurs seront retirés à la fin du temps imparti.
fonction finale privée removeListeners (): void stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); stage.removeEventListener (KeyboardEvent.KEY_UP, resetHit); stage.removeEventListener (Event.ENTER_FRAME, mise à jour);
? Comme les timers.
/ * Arrêter les minuteries * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, updateCounter); eTimer.stop (); eTimer.removeEventListener (TimerEvent.TIMER, ennemisUpdate); ennemi.gotoAndStop (1); showAlert ();
Une alerte sera affichée après cela, ce code instancie l'alerte.
fonction finale privée showAlert (): void var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0,5;
Afin d’afficher le texte correct dans l’alerte, nous vérifions les compteurs de hits pour déterminer le résultat..
/ * Recherchez les gains ou les pertes en fonction des résultats * / if (int (playerHits.text)> int (ennemiHits.text)) alert.msg.text = 'vous gagnez!'; else if (int (playerHits.text) < int(enemyHits.text)) alert.msg.text = 'you lose!'; else alert.msg.text = 'draw!'; TweenNano.from(alert, 0.3, scaleX: 0.5, scaleY: 0.5); alert.addEventListener(MouseEvent.MOUSE_UP, restart); addChild(alert);
La fonction suivante rechargera le fichier SWF, réinitialisant toutes les variables et revenant au premier écran..
redémarrage de la fonction finale privée (e: MouseEvent): void browseToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Nous sommes maintenant prêts à tester notre jeu et à vérifier que tout fonctionne comme prévu.
Vous avez créé un jeu très divertissant, essayez d’ajouter vos propres fonctionnalités et graphiques. J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Accentsconagua