Share
Dans ce didacticiel Premium, nous allons créer un jeu Breakout; "Brick Breaker" à partir de zéro en utilisant Flash et AS3.
À l'aide des outils de dessin de Flash, nous allons créer une interface graphique attrayante, optimisée par plusieurs classes ActionScript 3..
L'utilisateur pourra jouer à travers une série de niveaux, vous pourrez facilement ajouter autant de niveaux que vous le souhaitez.!
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 interface colorée et agréable sera affichée. Il contiendra plusieurs formes, boutons, bitmaps et plus.
Passons directement à la création de cette interface graphique.
Ceci est l'écran principal ou la vue, ce sera le premier graphique à apparaître dans notre jeu..
Créez un rectangle 320x480 et remplissez-le avec le dégradé radial suivant: # 3A9826, # 102A07.
Nous allons donner un peu plus de détails en ajoutant un filtre Photoshop. Si vous n’avez pas Photoshop, vous pouvez essayer d’ajouter un bel effet à l’aide des outils Flash..
Ouvrez l'image dans Photoshop et allez à Filtres> Texture> Patchwork, utilisez les paramètres suivants:
Vous allez vous retrouver avec quelque chose comme ça:
Ce fond sera sur la scène ainsi que les indicateurs de pagaie, balle et texte. Convertir le fond en un MovieClip et nommez-le bg.
Sélectionnez l'outil Texte (T), sélectionnez une police appropriée et écrivez le titre de votre jeu. J'ai utilisé ce format: Akashi, 55 pt, # FFCC33.
Sélectionnez le TextField et utilisez le panneau Filtres pour ajouter une ombre portée:
Dupliquez le texte (Cmd + D) et déplacez-le de 3 pixels vers le haut pour lui donner du relief.
Convertir les graphiques en MovieClip et nommez-le Écran de menu, n'oubliez pas de marquer le Exporter pour ActionScript boîte. Vous pouvez supprimer cette étape de l’étape lorsque vous aurez terminé, car elle sera appelée avec AS3..
Utilisez l'outil Rectangle Primitive (R) pour créer un rectangle arrondi de 57 x 11,5 pixels, modifiez le rayon de l'angle en 10 et appliquez ce dégradé: # 4E4E4E, #BABABA, # B0B3BA.
Ajoutez des lignes de détail avec l'outil Rectangle, utilisez votre propre style!
Vous pouvez aussi ajouter de la couleur à votre pagaie, voici le résultat final, la couleur utilisée est: # CC0000.
Convertir les graphiques en MovieClip et nommez-le pagayer.
Pour créer la balle, sélectionnez l'outil Ovale (O) et utilisez-le pour créer un cercle de 12x12 pixels, #CCCCCC..
Dupliquez le cercle (Cmd + D) changez sa taille en 10x10px et remplissez-le avec ce dégradé radial: # 95D4FF, # 0099FF.
Enfin, coupez le deuxième cercle en deux et utilisez l’outil de sélection (V) pour créer une courbe dans le bas. Changez sa couleur en un dégradé linéaire blanc avec alpha 60, 10.
Convertir les graphiques en MovieClip et nommez-le ballon.
Notre brique sera très simple.
Utilisez l'outil Rectangle pour créer un rectangle de 38 x 18 pixels et appliquez le dégradé suivant: # CC0000, # 8E0000, # FF5656.
Convertissez le rectangle en MovieClip et appliquez le filtre d'ombre utilisé dans le texte du titre pour lui donner un aspect plus agréable..
Convertir à nouveau le graphique en un MovieClip et nommez-le Brique, n'oubliez pas de marquer le Exporter pour ActionScript boîte.
L'écran À propos affichera le générique, l'année et le copyright du jeu..
Ce sera assez simple à créer car nous avons déjà tous les éléments qui y sont utilisés.
Convertir les graphiques en MovieClip et nommez-le À propos de l'écran, n'oubliez pas de marquer le Exporter pour ActionScript boîte.
C'est l'écran de jeu, il sera sur scène depuis le début et contiendra les indicateurs de palette, de balle, de fond et de texte. (Nous allons ajouter les briques en utilisant le code.)
Les noms d'instance sont assez faciles et explicites: pagaie, balle, bg, scoreTF, livesTF et levelTF.
Pour utiliser la police personnalisée de manière dynamique, nous devrons l'intégrer à l'application..
Sélectionnez un champ de texte dynamique et cliquez sur le bouton Intégrer? bouton dans le Panneau de propriétés.
Sélectionnez / ajoutez tous les caractères nécessaires et cliquez sur D'accord.
Cet écran apparaîtra une fois le jeu décidé. soit vous gagnez, soit vous perdez, soit vous atteignez le point de la fin (gagnant tous les niveaux ou perdant toutes les vies).
Deux champs de texte dynamiques sont utilisés dans cette vue. Ils affichent l'état actuel du jeu et un message court. Les TextFields sont nommés titreTF et msgTF.
Convertir les graphiques en MovieClip et marquer le Exporter pour ActionScript boîte, définissez le nom de la classe sur AlertScreen.
Ceci termine la partie graphique, laissez le code ActionScript commencer!
Nous utiliserons un moteur d'interpolation différent du moteur par défaut inclus dans Flash, cela 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.ui.Mouse; import flash.events.MouseEvent; import flash.events.KeyboardEvent; import flash.events.Event; import com.greensock.TweenNano; importer com.greensock.easing.Circ;
Ce sont les variables et les constantes que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus sur eux.
Const privé BRICK_W: int = 39; // largeur de la brique privée const BRICK_H: int = 19; // hauteur de la brique privée const OFFSET: int = 6; // Un offset utilisé pour centrer les briques private const W_LEN: int = 8; // la longueur des niveaux, seules 8 briques horizontales doivent être créées sur la scène privée const SCORE_CONST: int = 100; // le montant à ajouter au score lorsqu'une brique est touchée par des briques var privées: Vector.= nouveau vecteur. (); // stocke toutes les briques private var xSpeed: int = 5; var privé ySpeed: int = -5; private var xDir: int = 1; // direction x privée var yDir: int = 1; private var gameEvent: String = "; // stocke des événements tels que gagner, perdre, gameover private var currentLevel: int = 0; private var menuScreen: MenuScreen; // une instance de l'écran de menu private var aboutScreen: AboutScreen; private var alertScreen: AlertScreen; var vie privée: int = 3; niveaux de var privé: Array = []; // stocke les niveaux
Tous nos niveaux seront stockés dans des arrays multidimensionnels.
Ce sont des tableaux contenant des tableaux; vous pouvez les écrire sur une seule ligne, mais si vous les alignez, vous pouvez voir la forme que prendra le niveau..
private const LEVEL_1: Array = [[0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0, 1,1,0,0,0], [0,0,0,1,1,0,0,0], [0,1,1,1,1,1,1,0], [0, 1,1,1,1,1,1,0], [0,0,0,1,1,0,0,0], [0,0,0,1,1,0,0,0] , [0,0,0,0,0,0,0,0]]; // cela forme un signe +! private const LEVEL_2: Array = [[0,0,0,0,0,0,0,0], [0,0,0,1,1,0,0,0], [0,0,1, 0,0,1,0,0], [0,0,0,0,0,1,0,0], [0,0,0,0,1,0,0,0], [0, 0,0,1,0,0,0,0], [0,0,1,0,0,0,0,0], [0,0,1,1,1,1,0,0] ,]; // cela forme un nombre 2!
Dans ces niveaux, le 1s représentent l’espace dans la scène où une brique sera placée, et le 0s ne sont que des espaces vides. Ces niveaux seront lus plus tard par une fonction qui placera les briques sur la scène. Vous pouvez ajouter autant de niveaux que vous le souhaitez en utilisant cette classe.!
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. ce code est le premier à exécuter lorsque vous créez une instance d'un objet (ou s'exécute au chargement du jeu, dans le cas d'une classe de document).
Il appelle les fonctions nécessaires pour démarrer le jeu. Découvrez ces fonctions dans les étapes suivantes.
fonction finale publique Main (): void / * Add Levels * / levels.push (LEVEL_1, LEVEL_2); // nous ajoutons les niveaux au tableau afin de savoir combien ils sont / / Ecran de menu, boutons Auditeurs * / menuScreen = new MenuScreen (); addChild (menuScreen); menuScreen.startB.addEventListener (MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.addEventListener (MouseEvent.MOUSE_UP, tweenMS);
Les lignes suivantes traitent les boutons de l’écran de menu et l’interpolation de la vue Menu ou À propos de selon le bouton enfoncé..
fonction finale privée tweenMS (e: MouseEvent): void if (e.target.name == 'startB') // si le bouton de démarrage est cliqué TweenNano.to (menuScreen, 0.3, y: -menuScreen.height, facilité : Circ, onComplete: init); // écran du menu d'interpolation else // si le bouton à propos de est cliqué aboutScreen = new AboutScreen (); // add about screen addChild (aboutScreen); TweenNano.from (aboutScreen, 0.3, x: stage.stageWidth, eas: Circ); // interpolation à propos de screen aboutScreen.addEventListener (MouseEvent.MOUSE_UP, hideAbout); // ajoute un écouteur de souris pour le supprimer / * Supprime la vue finale / private final hideAbout (e: MouseEvent): void TweenNano.to (aboutScreen, 0.3, x: stage.stageWidth, comfort: Circ, onComplete : function rmv (): void aboutScreen.removeEventListener (MouseEvent.MOUSE_UP, hideAbout); removeChild (aboutScreen););
Cette fonction effectue les opérations nécessaires au démarrage du jeu. Lisez les commentaires dans le code pour en savoir plus..
fonction finale privée init (): void / * Écran de menu Destroy * / menuScreen.startB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); removeChild (menuScreen); menuScreen = null; / * Masquer le curseur * / Mouse.hide (); / * Briques de niveau de construction * / buildLevel (LEVEL_1); / * Démarrer Listener * / bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
La palette sera contrôlée par la souris, elle suivra la position x de la souris .
fonction finale privée movePaddle (e: MouseEvent): void / * Follow Mouse * / paddle.x = mouseX;
Pour empêcher la raquette de quitter la scène, nous créons des limites invisibles sur les côtés de l'écran..
/ * Follow Mouse * / paddle.x = mouseX; / * Bordures * / if ((paddle.x - paddle.width / 2) < 0) paddle.x = paddle.width / 2; else if((paddle.x + paddle.width / 2) > stage.stageWidth) paddle.x = stage.stageWidth - paddle.width / 2;
Les niveaux seront construits par cette fonction.
Il utilise un paramètre pour obtenir le niveau à construire, calcule sa taille et exécute une boucle for imbriquée, avec une boucle pour la hauteur et une pour la largeur. Ensuite, il crée une nouvelle instance Brick placée en fonction de sa largeur, de sa hauteur et du nombre correspondant à je et j.
Enfin, la brique est ajoutée à la des briques vecteur pour y accéder en dehors de cette fonction.
fonction finale privée buildLevel (niveau: Array): void / * niveau longueur, hauteur * / var len: int = level.length; pour (var i: int = 0; i < len; i++) for(var j:int = 0; j < W_LEN; j++) if(level[i][j] == 1) var brick:Brick = new Brick(); brick.x = OFFSET + (BRICK_W * j); brick.y = BRICK_H * i; addChild(brick); bricks.push(brick);
Cette fonction ajoute ou supprime la souris et entre les écouteurs de cadre. Il utilise un paramètre pour déterminer si les écouteurs doivent être ajoutés ou supprimés: la valeur par défaut est ajouter.
fonction finale privée gameListeners (action: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.addEventListener (Event.ENTER_FRAME, mise à jour); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.removeEventListener (Event.ENTER_FRAME, mise à jour);
Le code suivant appelle le gameListeners () fonction pour démarrer le jeu.
fonction finale privée startGame (e: KeyboardEvent): void bg.removeEventListener (MouseEvent.MOUSE_UP, startGame); gameListeners ();
La vitesse de la balle est déterminée par le xSpeed et ySpeed variables, lorsque le mettre à jour la fonction est exécutée, la balle commence à se déplacer en utilisant ces valeurs à chaque image.
Mise à jour de la fonction finale privée (e: Event): void / * Ball Movement * / ball.x + = xSpeed; ball.y + = ySpeed;
Ce code vérifie les collisions entre la balle et les murs.
/ * Collision murale * / if (ball.x < 0)ball.x = ball.x + 3;xSpeed = -xSpeed;;//Left if((ball.x + ball.width) > stage.stageWidth) ball.x = ball.x - 3; xSpeed = -xSpeed;; // Droit si (ball.y < 0)ySpeed = -ySpeed;;//Up
Une instruction if est utilisée pour vérifier quand la raquette manque la balle. Si oui, le joueur perd une vie.
Accentsconagua
if (ball.y + ball.height> paddle.y + paddle.height) alert ('You Lose', 'Play Again?'); gameEvent = 'lost'; lives -; livesTF.text = String (vies );; // bas / perdre Lorsque la balle frappe la raquette, ySpeed est réglé sur négatif pour faire monter la balle. Nous vérifions également de quel côté de la raquette la balle a frappé pour choisir le côté où elle se déplacera.
/ * Paddle Collision, vérifiez de quel côté de la palette la balle frappe * / if (paddle.hitTestObject (ball) && (ball.x + ball.width / 2) < paddle.x) ySpeed = -5; xSpeed = -5; //left else if(paddle.hitTestObject(ball) && (ball.x + ball.width / 2) >= paddle.x) ySpeed = -5; xSpeed = 5; //droite
Nous utilisons un pour et hitTest pour vérifier les collisions de briques, lorsque la balle frappe une brique, la même technique que celle utilisée dans la raquette est utilisée pour déterminer le côté que la balle suivra.
/ * Collision de briques * / pour (var i: int = 0; i < bricks.length; i++) if(ball.hitTestObject(bricks[i])) /* Check the which side of the brick the ball hits, left, right */ if((ball.x + ball.width / 2) < (bricks[i].x + bricks[i].width / 2)) xSpeed = -5; else if((ball.x + ball.width / 2) >= (briques [i] .x + briques [i] .width / 2)) xSpeed = 5;
Le code suivant modifie la direction Y de la balle et supprime la brique de la scène et le vecteur.
/ * Changer la direction de la balle y * / ySpeed = -ySpeed; removeChild (briques [i]); bricks.splice (i, 1);
Si vous le souhaitez, vous pouvez modifier cette logique de sorte que la vitesse y de la balle ne soit inversée que si elle frappe le haut ou le bas d'une brique, et non lorsqu'elle frappe les côtés. Essayez-le et voyez ce que vous pensez.
Chaque coup de brique ajoutera 100 au score, le score sera pris de la constante de score et ajouté au score actuel en utilisant int et Chaîne les fonctions. Ce code vérifie également s’il n’ya plus de briques dans le vecteur et affiche une alerte le cas échéant..
/ * Score ++ * / scoreTF.text = String (int (scoreTF.text) + SCORE_CONST); / * Vérifie si toutes les briques sont détruites * / if (bricks.length < 1) alert('You Win!', 'Next Level ?'); gameEvent = 'win'; L'écran d'alerte affiche des informations sur le joueur concernant l'état du jeu. Il s'affiche lorsqu'un événement du jeu est atteint, tel que perdre une vie ou terminer un niveau..
Deux paramètres sont utilisés dans cette fonction:
alerte de fonction finale privée (t: String, m: String): void gameListeners ('remove'); Mouse.show (); alertScreen = new AlertScreen (); addChild (alertScreen); TweenNano.from (alertScreen.box, 0.3, scaleX: 0.5, scaleY: 0.5, facilité: Circ); alertScreen.box.titleTF.text = t; alertScreen.box.msgTF.text = m; alertScreen.box.boxB.addEventListener (MouseEvent.MOUSE_UP, redémarrer); La fonction suivante vérifie le statut du jeu (gagner, perdre, terminé) et effectue une action en fonction de celle-ci..
redémarrage de la fonction finale privée (e: MouseEvent): void if (gameEvent == 'win' && levels.length> currentLevel + 1) // si le niveau est vide mais qu'il reste plusieurs niveaux currentLevel ++; changeLevel (level [currentLevel]); // next level levelTF.text = 'Level' + String (currentLevel + 1); else if (gameEvent == 'win' && levels.length <= currentLevel+1) //if level is clear and no more levels are available alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Congratulations!'); gameEvent = 'finished'; else if(gameEvent == 'lose' && lives > 0) // si le niveau a échoué mais qu'il vit> 0 changeLevel (niveaux [currentLevel]); // même niveau sinon if (gameEvent == 'lost' && lives <= 0) //if level failed and no more lives left alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Try Again!'); gameEvent = 'finished'; else if(gameEvent == 'finished') //reached when no more lives or levels are available /* Add menu screen */ menuScreen = new MenuScreen(); addChild(menuScreen); menuScreen.startB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); TweenNano.from(menuScreen, 0.3, y: -menuScreen.height, ease: Circ); /* Reset vars */ currentLevel = 0; lives = 3; livesTF.text = String(lives); scoreTF.text = '0'; levelTF.text = 'Level ' + String(currentLevel + 1); xSpeed = 5; ySpeed = -5; clearLevel(); Cette fonction passe au niveau écrit dans le paramètre.
fonction finale privée changeLevel (niveau: Array): void / * Clear * / clearLevel (); / * Redessine les briques * / buildLevel (niveau); / * Démarrer * / Mouse.hide (); bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
Une fonction pour effacer les briques restantes et les alertes de la scène. Cela réinitialisera également la position de la raquette et de la balle.
fonction finale privée clearLevel (): void / * Supprimer l'écran d'alerte * / alertScreen.box.boxB.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (alertScreen); alertScreen = null; / * Clear Level Bricks * / var bricksLen: int = bricks.length; pour (var i: int = 0; i < bricksLen; i++) removeChild(bricks[i]); bricks.length = 0; /* Reset Ball and Paddle position */ ball.x = (stage.stageWidth / 2) - (ball.width / 2); ball.y = (paddle.y - paddle.height) - (ball.height / 2) -2; paddle.x = stage.stageWidth / 2;
Nous utiliserons la classe de document dans ce tutoriel. Si vous ne savez pas comment l'utiliser ou êtes un peu confus, veuillez lire cette astuce..
Le résultat final est un jeu personnalisable et divertissant, essayez d’ajouter vos graphiques et niveaux personnalisés!
J'espère que vous avez aimé ce tutoriel Active Premium, merci d'avoir lu!
