Share
Dans ce petit conseil, vous apprendrez à utiliser le logiciel BitmapData. copyPixels () méthode pour créer un effet de traînée flou très rapide pour les balles dans vos jeux shoot-'em-up.
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Utilisez les touches fléchées ou WASD pour déplacer le vaisseau et appuyez sur la barre d'espace pour tirer des balles vers le curseur de la souris..
Nous allons rapidement (très rapidement) passer en revue l'idée de base utilisée dans le blitting avant de poursuivre, car nous l'utilisons dans cette astuce rapide..
La copie de pixels sur l’écran est au cœur du blitting. En AS3, cela se fait en copiant une région rectangulaire de pixels d’un BitmapData à un autre BitmapData, en utilisant BitmapData.copyPixels ().
L'image ci-dessus illustre exactement cela. Nous copions les pixels d’une région rectangulaire d’un BitmapData et le mettre dans un autre.
L'idée que nous allons explorer dans cette astuce consiste à copier tout ce qui nécessite l'application d'un effet de flou dans un conteneur et à appliquer des effets de post-fusion pour créer l'effet souhaité..
Il existe déjà un code très basique pour un jeu de tir spatial dans les fichiers sources, car ce n’est pas l’objet de cet article. Seul un navire se déplace avec les touches WASD ou les touches fléchées. Le code est très commenté et très basique, cependant, vous n'aurez probablement aucun problème à le comprendre. Il utilise des images incorporées pour les images de votre jeu, mais vous pouvez également utiliser des sprites avec une très légère torsion sur une fonction que nous créerons plus tard (nous en discuterons dans un instant).
Sautons dans Main.as et créer un Bitmap qui contiendra chaque balle et objet qui doit être flou. Ajoutez-le avant toute autre chose dans la liste des enfants.
private var _container: Bitmap; private var _containerData: BitmapData; fonction privée init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Création du vaisseau du joueur et du vecteur qui contiendra les balles _playerShip = new PlayerShip (); _bullets = nouveau vecteur.(); // // Initialisation du conteneur _containerData = new BitmapData (550, 400, true, 0xFFFFFFFF); _container = new Bitmap (_containerData); // addChild (_container); addChild (_playerShip); // Listener pour la boucle de jeu addEventListener (Event.ENTER_FRAME, onEnterFrame);
Jusqu'à présent, tout a été très simple. Nous avons seulement créé le conteneur et l'avons ajouté à la liste d'affichage.
Dans cette étape, nous devons dessiner les balles dans le conteneur à chaque image. Nous ferons cela dans le onEnterFrame () fonction de la Principale classe.
fonction privée onEnterFrame (e: Event): void _playerShip.update (); // Mise à jour de chaque puce pour (var i: int = 0; i < _bullets.length; i++) _bullets[i].update(); _containerData.copyPixels(Bitmap(_bullets[i].getChildAt(0)).bitmapData, Bitmap(_bullets[i].getChildAt(0)).bitmapData.rect, new Point(_bullets[i].x, _bullets[i].y)); //
La seule ligne qui compte est la ligne 10. Dans cette ligne, nous dessinons les pixels de chaque puce (en accédant à la BitmapData de l'enfant de la balle, qui est le BitmapData contenant les pixels de l’image incorporée) dans leur position. Si vous n'utilisez pas d'images incorporées dans votre jeu, vous pouvez utiliser BitmapData.draw () au lieu. Cette méthode est un peu plus lente, mais cela fonctionnera de la même manière.
Nous passons tout le rectangle de la balle BitmapData parce que nous voulons tout dessiner. Vous pouvez jouer avec ce rectangle et la position à dessiner pour créer des résultats très amusants (par exemple, une position basée sur une fonction périodique telle que Math.sin () pour créer un effet de traînée intéressant, même si la balle ne va que dans une ligne droite, ou tire seulement le "feu" d'une balle de roquette en passant un rectangle plus petit afin de créer la traînée uniquement avec la balle).
Lorsque vous compilez et exécutez votre jeu, vous obtenez quelque chose comme ceci après avoir tiré quelques balles:
Cependant, ce n'est pas ce que nous voulons vraiment. Nous voulons ajouter un effet de traînée flou, alors que faire?
Ceci est la dernière étape. Il ne nous reste plus qu'à appliquer l’effet de flou dans le BitmapData qui contient toutes les images des balles. Pour ce faire, nous allons utiliser un ColorMatrixFilter.
private var _colorMatrixFilter: ColorMatrixFilter; fonction privée init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Création du vaisseau du joueur et du vecteur qui contiendra les balles _playerShip = new PlayerShip (); _bullets = nouveau vecteur.(); // // Initialisation du conteneur _containerData = new BitmapData (550, 400, true, 0); _container = new Bitmap (_containerData); // // Initialisation du filtre matriciel _colorMatrixFilter = new ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,99, 0]); // addChild (_container); addChild (_playerShip); // Listener pour la boucle de jeu addEventListener (Event.ENTER_FRAME, onEnterFrame); fonction privée onEnterFrame (e: Event): void _playerShip.update (); // Mise à jour de chaque puce pour (var i: int = 0; i < _bullets.length; i++) _bullets[i].update(); _containerData.copyPixels(Bitmap(_bullets[i].getChildAt(0)).bitmapData, Bitmap(_bullets[i].getChildAt(0)).bitmapData.rect, new Point(_bullets[i].x, _bullets[i].y)); // // Adding the blur effect on the container _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), new BlurFilter(2, 2, 1)); _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), _colorMatrixFilter); //
le ColorMatrixFilter fonctionne en manipulant chaque pixel de la BitmapData selon les valeurs du filtre matriciel. Regardez le init () une fonction. Nous créons un nouveau ColorMatrixFilter là-bas, en passant un tableau avec un tas de valeurs. Ces valeurs créeront la matrice de transformation du filtre de matrice, nous permettant de manipuler les pixels de l'image..
Le filtre fonctionne fondamentalement comme ceci: chaque composante de la couleur résultante (rouge, vert, bleu et alpha) est calculée en multipliant les composantes source par les nombres respectifs dans la ligne respective de la matrice et en les additionnant, ainsi que la cinquième valeur. de la rangée.
Par exemple, si nous prenons le filtre de matrice que nous avons créé dans le code comme exemple de filtre de matrice et que nous l’appliquons à un pixel avec les valeurs "rouge = 50, vert = 10, bleu = 200, alpha = 128", la composante rouge résultante du pixel sera"rouge = (50 * 1) + (10 * 0) + (200 * 0) + (128 * 0) + 0 = 50", car la première ligne de notre matrice est"1 0 0 0 0". Le composant alpha sera"alpha = (50 * 0) + (10 * 0) + (200 * 0) + (128 * 0,99) + 0 = 126", car la dernière ligne de notre matrice est"0 0 0 0.99 0".
Voyez-vous ce qui se passe maintenant? Chaque image est multipliée par 0,99 en alpha de chaque pixel, ce qui la rend légèrement plus transparente afin de créer un effet de fond. Si vous souhaitez en savoir plus sur le ColorMatrixFilter, vous pouvez vous référer à la documentation.
L’effet de flou est pris en charge en appliquant un simple BlurFilter dans le BitmapData.
Compilez le jeu maintenant et vous obtiendrez notre effet souhaité!
Vous venez d'apprendre à appliquer un ColorMatrixFilter afin de créer un effet de traînée flou, en utilisant le très rapide BitmapData.copyPixels () méthode! Grâce à cela, vous pouvez ajouter l'effet de flou à chaque objet souhaité sans vous soucier du ralentissement de Flash Player, car vous ajoutez trop d'enfants avec des filtres de flou sur la scène. Beaucoup de choses cool peuvent être construites avec ce principe; il faut juste être créatif.
Merci pour la lecture! Si vous avez des questions, veuillez commenter!
Accentsconagua