Share
Dans ce petit conseil, nous allons utiliser le ColorMatrixFilter et BlurFilter créer un effet Motion Trail.
Nous avons trouvé cet auteur génial grâce à FlashGameLicense.com, le lieu d'achat et de vente de jeux Flash..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Créez un nouveau projet dans FlashDevelop (ou l'éditeur que vous utilisez), définissez les dimensions du swf sur 600x400 et l'arrière-plan sur le noir (# 000000)..
Ensuite, pour mettre en place la scène, nous allons avoir deux Sprites, l'un est destiné à l'affichage principal auquel nous allons ajouter tous les objets d'affichage et l'autre à l'effet Motion Trail qui utilise l'affichage principal comme référence.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
Et ajoutez le Sprites au Étape.
// // Configurer les affichages // Nous devons ajouter nos deux affichages à la scène. AddChild (_mtDisplay); addChild (_mainDisplay);
Maintenant, nous allons intégrer notre image star pour une utilisation, ou si vous voulez utiliser votre propre image.
[Incorporer (source = '… /… /images/star.png')] var star: Class;
La dernière chose que nous voulons faire pour la configuration est de créer un boucle une fonction. Cela va être mis à jour chaque image, par exemple pour le positionnement et la mise à jour de la piste de mouvement. Alors créez une autre fonction et un écouteur d'événement pour l'appeler chaque image.
Votre Main.as classe devrait ressembler à quelque chose comme ça.
package rtmTrail import flash.display.Sprite; import flash.events.Event; classe publique Main étend Sprite fonction publique Main (): void if (stage) init (); sinon addEventListener (Event.ADDED_TO_STAGE, init); fonction privée init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Charger les images [Incorporer (source = '… /… /images/star.png')] var star: Class; // // Configurer les affichages // Nous devons ajouter nos deux affichages à la scène addChild (_mtDisplay); addChild (_mainDisplay); // Ajoute un nouvel écouteur d'événements pour notre fonction de boucle chaque fois que nous entrons // l'image pour déplacer les images-objets et mettre à jour notre effet MotionTrail addEventListener (Event.ENTER_FRAME, loop); boucle de fonction privée (e: événement): void variable privée _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
Pour tester le Motion Trail, nous allons créer dix Sprites de l'image de l'étoile et les positionner dans des endroits aléatoires. De plus, nous allons créer un Point cela nous indique la vitesse et la direction dans lesquelles ils se déplaceront. La première chose à faire est de créer deux Tableaux pour stocker cette information; on est pour le Lutin et l'autre est pour le Point.
private var _sprites: Array = new Array (); private var _spritesDir: Array = new Array (); private var _txt: TextField = new TextField ();
Ajoutez ceci au init fonction pour créer et placer au hasard dix étoiles.
// Dessine des étoiles var spr: Sprite; var bmp: Bitmap; pour (var i: int = 0; i < 10; i++) spr = new Sprite(); bmp = new star(); spr.addChild(bmp); bmp.smoothing = true; spr.x = Math.random() * 240 + 80; spr.y = Math.random() * 240 + 80; // We are going to add the new sprite into the _sprites Array and a // Point that tells us where to move the sprite in the _spritesDir Array. _sprites.push(spr); _spritesDir.push(new Point(Math.random() * 6, Math.random() * 6)); // Last thing to do is add it to our main Display _mainDisplay.addChild(spr);
Maintenant pour créer le Champ de texte Ajoute ça.
Accentsconagua
// Ajout d'un champ de texte trop _txt.defaultTextFormat = new TextFormat ("arial", 18, 0xFF00FF); _txt.text = "Trace de mouvements en temps réel" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt); Maintenant, nous devons passer à notre boucle fonction pour Lutin contrôle du mouvement. Assez simple, utilisez un pour boucle pour parcourir chaque Lutin nous avons et si elle frappe le bord inverse le x ou y du Point alors ça va dans l'autre sens. Nous devrons également déplacer le sprite dans la boucle en fonction des valeurs du Point et, pour le rendre plus intéressant, faites-le pivoter lentement.
boucle de fonction privée (e: événement): void // Met à jour les formes de sprite pour (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -__spritesDir [i] .x; if (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -__spritesDir [i] .y; // Déplace la forme Sprite _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotate Sprite Shape _sprites [i] .rotation + = 2;
Pour déplacer le Champ de texte en haut à gauche, il suffit de soustraire de la X propriété de chaque image, et si elle sort de l'écran, réglez-la à droite de l'écran.
boucle de fonction privée (e: événement): void // Met à jour les formes de sprite pour (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -__spritesDir [i] .x; if (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -__spritesDir [i] .y; // Déplace la forme Sprite _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotate Sprite Shape _sprites [i] .rotation + = 2; // Déplacer le texte _txt.x - = 4 si (_txt.x < -200) _txt.x = 600;
Après l'avoir testé, vous devriez avoir vu quelque chose comme ceci (avec les étoiles et le texte se déplaçant sur l'écran bien sûr).
Maintenant il est temps de faire notre MotionTrail Classe. Ce que cette classe va faire est de prendre une DisplayObject qui est dessiné sur son propre écran (un Lutin) et en utilisant quelques filtres, estompés et flous.
Alors fais ton nouveau MotionTrail.as Classe et laisser étendre la Lutin Classe.
Pour préparer un peu les étapes à venir, nous allons créer quelques variables, d’abord le _afficher enregistrer une référence de l’écran principal, une BitmapData dessiner un Rectangle la taille de la scène et un Point dans le coin supérieur gauche pour les filtres. Dernière place est un Tableau pour le ColorMatrixFilter.
package rtmTrail import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.DisplayObject; import flash.display.Sprite; import flash.geom.Point; import flash.geom.Rectangle; Classe publique MotionTrail étend Sprite fonction publique MotionTrail (display: DisplayObject) // Référence à l'affichage utilisé pour la piste de mouvement _display = display; // Crée un objet BitmapData vers lequel dessiner // Si vous souhaitez utiliser celui-ci pour votre propre projet et que les dimensions ne sont pas de 600x400 //, vous devrez le modifier ici et le rectangle ci-dessous _bitmapData = new BitmapData (600, 400 , true, 0x000000); // Quelques éléments dont les filtres ont besoin pour son fonctionnement _rect = new Rectangle (0, 0, 600, 400); _pnt = new Point (0, 0); _cMatrix = new Array (); // Ajoute un peu de transparence pour ne pas détourner l'attention de l'écran principal alpha = 0.6; addChild (new Bitmap (_bitmapData)); private var _display: DisplayObject; private var _bitmapData: BitmapData; private var _rect: Rectangle; private var _pnt: Point; private var _cMatrix: Array;
Depuis que nous avons fait cette classe, nous devons revenir très vite à la _mtDisplay variable et changer de la Lutin Classe à la MotionTrail Classe, avec la saisie du _mainDisplay variable.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: MotionTrail = new MotionTrail (_mainDisplay);
Pour créer notre Matrice pour le ColorMatrixFilter, L'idée de base est de faire disparaître les couleurs afin de ramener lentement toutes les valeurs à zéro. Ajoutez ceci au constructeur.
// Créer une matrice pour ColorMatrixFilter _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 0]) // Rouge _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Vert _cMatrix = _cMatrix.concat ([0, 0, 0.92, 0, 0]) // bleu _cMatrix = _cMatrix.concat ([0, 0, 0, 0,92, 0]) // alpha
Cela va multiplier chaque valeur de chaque pixel par 0,92 et ainsi, chaque image devient de plus en plus petite jusqu'à atteindre sa limite à 0. Ainsi, plus les valeurs sont proches de 1,0, plus il faut de temps pour atteindre zéro, ce qui signifie un sentier plus long (et inversement: plus le sentier est proche de 0,0).
Maintenant nous créons le ColorMatrixFilter et le BlurFilter.
le ColorMatrixFilter va utiliser le Tableau nous venons de faire et nous allons créer deux BlurFilters. J'ai trouvé qu'en utilisant deux BlurFilters Donne un bel effet de pulsation sans flou ni trop lent ni trop flou, mais si vous en avez plutôt un qui convient.
Ajoutez d'abord les variables pour les filtres.
private var _cFilter: ColorMatrixFilter; private var _bFilter: BlurFilter; private var _bFilter2: BlurFilter;
Créer les filtres dans le constructeur
_cFilter = new ColorMatrixFilter (_cMatrix); _bFilter = nouveau BlurFilter (2, 2, 1); _bFilter2 = new BlurFilter (8, 8, 1);
Il est maintenant temps de créer une fonction pour mettre à jour nos traces de mouvement. Faire une fonction appelée mettre à jour dans le MotionTrail Classe. Pour faire le parcours, nous devons dessiner l’affichage principal sur le BitmapData chaque image qui fait l'effet de traînée.
public function update (): void // Dessine un affichage sur BitmapData _bitmapData.draw (_display);
Vous devriez maintenant avoir une piste si vous l'exécutez, mais bien sûr, Motion Trails s'estompe et nous la ferons disparaître avec les filtres que nous avons créés à la dernière étape..
Maintenant, nous pouvons appliquer les filtres à la BitmapData. Nous utilisons le même BitmapData pour la source, le _rect et _pnt variables pour la sourceRect et destPoint respectivement, et dernier est le filtre que nous voulons appliquer.
Étant donné que nous avons quelques filtres, nous ne voulons pas les appliquer tous à chaque image, car cela ralentirait trop les choses. Au lieu de cela, nous allons changer le ColorMatrixFilter et BlurFilter pour travailler dans différents cadres et basculer la BlurFilters de la même manière aussi.
Pour les changer, nous allons avoir une variable pour garder une trace du cadre et utiliser l'opérateur du module pour vérifier.
private var _count: Number = 0;
public function update (): void // Dessine un affichage sur BitmapData _bitmapData.draw (_display); // Appliquer des effets à BitmapData if (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); else if (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); else _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); // Augmente le nombre _count ++;
Maintenant que le mettre à jour la fonction est terminée, nous l'ajoutons à notre boucle une fonction.
// Mise à jour du flou directionnel _mtDisplay.update ();
Impressionnant! Nous en avons terminé avec ce petit conseil et vous pouvez le tester.
Vous devriez avoir obtenu le même résultat que l'échantillon swf et vous pouvez maintenant essayer de l'étendre. Il y a beaucoup d'effets différents que vous pouvez faire, surtout si vous comprenez le ColorMatrixFilter.
Par exemple, vous pouvez atténuer la couleur du tracé en rouge en procédant comme suit:
// Décalage de la valeur rouge de 30 à chaque fois _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30]) // Rouge _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Vert _cMatrix = _cMatrix.concat ([0, 0, 0.92, 0, 0]) // Bleu _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Vous pouvez également changer les couleurs pour rendre toutes les pistes bleues:
// Seulement les pistes bleues _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Rouge _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Vert _cMatrix = _cMatrix .concat ([0.92, 0.92, 0.92, 0, 0]) // Bleu _cMatrix = _cMatrix.concat ([0, 0, 0, 0,92, 0]) // Alpha
Merci d'avoir lu. J'espère que vous en avez tous appris quelque chose et que cela s'avérera utile dans le futur, peut-être un nouveau jeu sympa utilisant cet effet..
