Share
Au cours de ce tutoriel, nous allons relier mathématiques et design. Nous allons explorer le framework HYPE de Branden Hall et Joshua Davis et créer un art génératif à partir de code.
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Avant de plonger dans le code, prenons un court instant pour nous familiariser avec les fichiers de projet..
À l’intérieur du fichier .zip source, vous trouverez un dossier pour chaque étape importante, afin que vous puissiez voir exactement quelles modifications ont été apportées. En outre, vous trouverez un dossier appelé Base, faites-en une copie car elle servira de point de départ..
Dans le dossier de base, nous avons un poubelle dossier où notre fichier SWF sera publié. UNE src dossier qui contient nos fichiers ActionScript 3 et Flash et enfin un lib dossier où nous allons stocker les fichiers SWC du framework HYPE.
Ensuite, nous devons récupérer la dernière version du framework HYPE chez www.hypeframework.org.
Une fois le téléchargement terminé, ouvrez le fichier .zip. Vous trouverez deux fichiers SWC nommés hype-framework.swc et hype-extended.swc. Copiez les deux dans votre dossier Base \ lib.
Ces fichiers SWC sont essentiellement une collection de fichiers source pour la structure, tous intégrés dans un seul fichier pour plus de facilité..
La dernière étape nécessaire pour que tout soit opérationnel consiste à demander à Flash de rechercher les deux nouveaux fichiers SWC lors de la compilation du film, sinon, cela risque de générer de nombreuses erreurs, ce qui n'est pas agréable.!
Ouvrez le Main.fla à l'intérieur de Base \ src dossier, puis choisissez Fichier, Paramètres de publication. Sélectionnez l'onglet Flash comme indiqué, dans la nouvelle fenêtre qui s'ouvre, sélectionnez l'onglet Chemin de la bibliothèque..
Appuyez sur le bouton "Browse TO SWC File" (Fichier "Parcourir le fichier SWC") et ajoutez les deux fichiers SWC au fichier Flash. Une fois cette opération terminée, il est temps d'ajouter du code.!
Ouvrez le fichier source Main.as dans l’éditeur de votre choix. Ajoutez les propriétés privées suivantes et le initHype () méthode:
classe publique Main étend MovieClip // propriétés privées private var bitmapCanvas: BitmapCanvas; private var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * constructeur * / fonction publique Main () // introduit le cadre Hype initHype (); / ** * initiation des membres Hype que nous allons utiliser et configuration avant * d'exécuter l'animation * / private function initHype (): void // le clipContainer est utilisé comme parent pour tous nos objets clipContainer = new Sprite (); addChild (clipContainer);
Dans les prochaines étapes, nous examinerons chacun de ces objets ajoutés en tant que propriétés privées, en commençant par le clipContainer Sprite.
Dans la mesure où notre conception comportera plus d’une centaine d’objets se déplaçant simultanément sur l’écran, nous aurons besoin de quelque chose pour les loger tous: Étape deviendra problématique plus tard dans la ligne. La réponse est de créer un AS3 régulier Lutin agir en tant que parent.
La première partie réelle de HYPE, la BitmapCanvas peut être considéré comme un Lutin ou mieux encore, un Bitmap / BitmapData nous allons peindre nos objets, chaque cadre, comme une toile de peintre.
Nous le créons juste en dessous du code clipContainer et le définissons avec une largeur et une hauteur Étape. Nous l'ajoutons à la Étape mais aussi le dire à startCapture (clipContainer, true), cela dit simplement la BitmapCanvas prendre un instantané de la clipContainer chaque image. Pour l'instant cependant, gardez cela commenté!
/ ** * initiation des membres de Hype que nous utiliserons et configuration avant * d'exécuter l'animation * / private function initHype (): void // le clipContainer est utilisé comme parent pour tous nos objets clipContainer = new Sprite ( ) addChild (clipContainer); // Pensez à BitmapCanvas comme à un espace vide, nous allons «peindre» // chaque image avec de nouvelles données d'image bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas);
Si vous avez travaillé avec des jeux, vous avez probablement rencontré le concept de ObjectPool. La création de nouveaux objets faisant trop mal au processeur, nous créons un pool d’un nombre spécifié d’objets avant le début du jeu ou de l’application. Nous utiliserions ensuite les objets de ce pool et, une fois épuisés, nous les recyclerions et les réutiliserions à nouveau, ce qui évite de créer de nouveaux objets. Ceci est couramment utilisé pour les balles / lasers dans les jeux et la même logique est utilisée dans HYPE.
Si vous regardez la bibliothèque Main.fla dans Flash, vous verrez que j'ai créé un MovieClip appelé circleShape et étant donné l'identifiant de liaison de circleShape afin que nous puissions créer plusieurs copies de cet objet avec du code; c'est ce que notre ObjectPool abritera.
Ajoutez le ObjectPool sous le code BitmapCanvas, comme ceci:
/ ** * initiation des membres de Hype que nous utiliserons et configuration avant * d'exécuter l'animation * / private function initHype (): void // le clipContainer est utilisé comme parent pour tous nos objets clipContainer = new Sprite ( ) addChild (clipContainer); // Pensez à BitmapCanvas comme à un espace vide, nous allons «peindre» // chaque image avec de nouvelles données d'image bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas); // crée une collection de 10 objets et les stocke dans un ObjectPool // à utiliser dans l'animation objectPool = new ObjectPool (circleShape, 10);
Nous avons maintenant la configuration de nos principaux joueurs, la clipContainer, la BitmapCanvas et le ObjectPool avec ses 10 clips, il est temps de faire bouger les choses.
Pour obtenir un article du ObjectPool on peut utiliser objectPool.request (); qui nous donnera un circleShape MovieClip de la bibliothèque Flash pour travailler avec.
le ObjectPool nous donne aussi le objectPool.onRequestObject () méthode qui est un moyen pratique d’attribuer les propriétés d’un clip à chaque fois que nous en demandons un. Ajoutez ce qui suit ci-dessous où vous avez instancié le ObjectPool:
// crée une collection de 10 objets et les stocke dans un ObjectPool // à utiliser dans l'animation objectPool = new ObjectPool (circleShape, 10); // chaque fois que nous demandons une nouvelle forme au pool //, il effectuera l'objet suivant: objectPool.onRequestObject = function (clip: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * stage.stageHeight; clipContainer.addChild (clip);
Avec ce nouveau code ajouté, chaque fois que nous demandons un objet au pool en utilisant objectPool.request () ça va créer un circleShape. Ajoutez-le à la clipContainer et placez-le au hasard sur l'écran. Vous pouvez tester cela en modifiant le constructeur pour lui donner l'aspect suivant:
/ ** * constructeur * / fonction publique Main () // introduit le cadre Hype initHype (); objectPool.request ();
Si tout se passe bien, vous devriez avoir un seul cercle isolé à l'écran.
Vous souvenez-vous que nous avons réglé le ObjectPool taille à 10? Eh bien, nous allons monter la barre et augmenter cela à 100 objets en modifiant ce qui suit:
// crée une collection de 10 objets et les stocke dans un ObjectPool // à utiliser dans l'animation objectPool = new ObjectPool (circleShape, 100);
Nous pouvons modifier la déclaration de demande précédente pour qu'elle se lise comme suit: requestAll () comme ça:
/ ** * constructeur * / fonction publique Main () // introduit le cadre Hype initHype (); objectPool.requestAll ();
Maintenant, nous devrions avoir 100 cercles dispersés sur la zone de l'écran.
Maintenant nous avons nos 100 forme de cercle distribué autour de l'écran, il est temps de donner vie à notre conception en ajoutant du mouvement.
Commençons par appliquer un FixedVibration au alpha et échelle propriétés de chaque clip. Nous pouvons utiliser le ObjectPools onRequestObject méthode pour l'implémenter comme indiqué:
// crée une collection de 10 objets et les stocke dans un ObjectPool // à utiliser dans l'animation objectPool = new ObjectPool (circleShape, 100); // chaque fois que nous demandons une nouvelle forme au pool //, il effectuera l'objet suivant: objectPool.onRequestObject = function (clip: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * stage.stageHeight; // ajoute une FixedVibration aux propriétés alpha et scale de chaque circleShape à la demande. var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); clipContainer.addChild (clip);
Regardons de plus près le FixedVibration objets que nous avons créés. Chaque FixedVibration L’objet que nous créons prend 7 paramètres, respectivement:
Accentsconagua
FixedVibration à, dans notre cas, notre circleShape appelé "clip".FixedVibration pour, cette fois, nous travaillons avec le alpha et échelle Propriétés.Printemps du FixedVibration, plus le nombre est élevé, plus le mouvement est élastique. Une valeur entre 0 et 1 fonctionnera mieux.Facilité de la vibration, plus la valeur est basse, plus elle glisse rapidement entre les deux valeurs suivantes. Une valeur entre 0 et 1 fonctionnera mieux.faux.Alors, comment tous ces éléments vont-ils ensemble? Regardons comment le échelle la propriété est affectée par le FixedVibration. C'est donné Min et Max des valeurs de 0,05 et 0,8, la Printemps la valeur est assez élevée à 0,9 et la Facilité est assez bas à 0,05 ce qui le fait évoluer de manière erratique et rapide.
Jouez avec ces valeurs pour comprendre comment elles influencent le mouvement.
Lorsque nous testons notre fichier Flash, nous devrions obtenir quelque chose comme ceci:
Très semblable à la FixedVibration, la VariableVibration ajustera une propriété d'un objet avec une valeur qui fluctue. La différence étant que le VariableVibration n'est pas linéaire comme son nom l'indique.
Modifiez votre code comme suit pour placer les clips au centre de la Étape, seulement cette fois nous appliquerons un VariableVibration au X et y valeurs pour commencer à voir du mouvement!
// chaque fois que nous demandons une nouvelle forme au pool //, il effectuera l'objet suivantPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // ajoute une VariableVibration pour le mouvement x / y de chaque circleShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // ajoute une FixedVibration aux propriétés alpha et scale de chaque circleShape à la demande. var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); clipContainer.addChild (clip);
Regardons de plus près le VariableVibration objets que nous avons créés. Chaque VariableVibration L'objet que nous créons ne prend que 5 paramètres, respectivement:
VariableVibration à, dans notre cas, notre circleShape appelé "clip".VariableVibration pour, cette fois, nous travaillons avec les propriétés x et y.Printemps de la vibration.Facilité de la vibration.Intervalle des valeurs qui est produite. Plus le nombre est élevé, plus l'effet est erratique.Notre fichier Flash devrait ressembler à ceci lors de la publication:
Cela commence à bien paraître, mais nous pouvons faire beaucoup mieux! Rappelez-vous que bitmapCanvas.startCapture () ligne je vous ai demandé de rester sans commentaire à l'étape 6? Allez-y, décommentez puis testez à nouveau votre film.
C'est plus comme ça!
Une astuce très simple pour ajouter un mouvement en spirale consiste à ajouter une autre vibration à la propriété de rotation du clip, comme ceci:
// chaque fois que nous demandons une nouvelle forme au pool //, il effectuera l'objet suivantPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // ajoute une VariableVibration pour le mouvement x / y de chaque circleShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // ajoute une FixedVibration aux propriétés alpha et scale de chaque circleShape à la demande. var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // ajoute une FixedVibration à la rotation de circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); clipContainer.addChild (clip);
Avant de tester ce saut, passez à Flash et ouvrez le circleShape MovieClip dans la bibliothèque.
Comme indiqué, faites glisser le cercle juste en dehors du centre dans n’importe quelle direction. Plus vous le déplacez du centre, plus vous verrez de spirales dans votre conception lorsque vous publiez:
Un des problèmes de notre animation actuelle est qu’une fois que les clips sortent de l’écran, ils reviennent très rarement. Nous pouvons résoudre ce petit problème en créant un ExitShapeTrigger.
Un ExitShapeTrigger est une zone considérée comme sûre pour le clip. Lorsque le clip quitte cette zone, nous devons exécuter une sorte de fonction, telle que demander un nouveau clip à ObjectPool.
Nous définissons un ExitShapeTrigger comme ci-dessous:
// chaque fois que nous demandons une nouvelle forme au pool //, il effectuera l'objet suivantPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // ajoute une VariableVibration pour le mouvement x / y de chaque circleShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // ajoute une FixedVibration aux propriétés alpha et scale de chaque circleShape à la demande. var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // ajoute une FixedVibration à la rotation de circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // définir une sortie ExitShape var: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (clip); // fonction de recyclage d'objets privés onExitShape (clip: MovieClip): void trace ("circleShape a quitté l'écran!"); Cela va créer un ExitShapeTrigger avec les paramètres suivants:
MovieClip pour tester s'il est hors de la zone donnée.MovieClip utilisé pour définir la zone de sécurité, vous avez peut-être déjà remarqué que nous avons déjà créé cela, appelé sortie Shape et l'a placé sur le Étape en flash.Entrez une fois flag, il suffit de régler ceci sur vrai pour l'instant.Suite à la ExitShape nous avons introduit dans la dernière étape, nous allons simplement éditer le onExitShape méthode de sorte que chaque fois qu'un clip quitte l'écran, nous le supprimons et en demandons un nouveau au ObjectPool.
Jusqu'à présent, nous avons travaillé avec le demande() et requestAll () méthodes de la ObjectPool, quand on veut supprimer l'ancien on utilise le libération (clip) méthode:
// fonction de recyclage d'objets privés sur onShape (clip: MovieClip): void // supprimer de l'ObjectPool et du clipContainer objectPool.release (clip); clipContainer.removeChild (clip); // récupère un nouveau clip depuis ObjectPool objectPool.request ();
HYPE offre la possibilité d'ajouter très facilement des filtres tels que le flou et la lueur aux objets. Pour ajouter une touche plus de piquant au design, nous allons ajouter un BlurFilter au projet en utilisant le FilterCanvasRhythm:
// Pensez à BitmapCanvas comme à un espace vide, nous allons «peindre» // chaque image avec de nouvelles données d'image bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // ajout d'un flou var blur: FilterCanvasRhythm = new FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); flou.start (TimeType.TIME, 100); // crée une collection d'objets et les stocke dans un ObjectPool // à utiliser dans l'animation objectPool = new ObjectPool (circleShape, 100);
Le code ci-dessus crée un FilterCanvasRhythm qui prend un filtre en paramètre et l’applique à la bitmapCanvas nous avons déclaré plus tôt.
Testez le projet, il commence vraiment à se réunir maintenant!
Nous pouvons facilement ajouter un peu de profondeur à la composition en ajoutant plus de formes au mélange. Plutôt que de devoir créer et gérer plusieurs ObjectPools, nous pouvons ajouter des cadres à la forme originale de CircleShape que nous avons utilisée et sélectionner au hasard le cadre à lire.
Essayez ceci maintenant, éditez le circleShape objet dans la bibliothèque Flash. Créez une nouvelle image clé, sélectionnez une nouvelle couleur et dessinez une nouvelle forme. Allez-y et créez vous-même quelques images clés. Dans la prochaine étape, nous examinerons leur implémentation avec du code. Voici notre nouvelle forme:
? comparé à notre ancienne forme:
Avec notre circleShape contenant maintenant quelques nouvelles images clés, nous pouvons simplement insérer cette ligne de code pour choisir une image à utiliser à chaque appel. objectPool.request ():
// chaque fois que nous demandons une nouvelle forme au pool //, il effectuera l'objet suivantPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // choisit une image aléatoire clip.gotoAndStop (Math.ceil (Math.random () * 3)); // ajoute une VariableVibration pour le mouvement x / y de chaque circleShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // ajoute une FixedVibration aux propriétés alpha et scale de chaque circleShape à la demande. var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // ajoute une FixedVibration à la rotation de circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // définir une sortie ExitShape var: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (clip);
Remarque rapide, le code d'image aléatoire ci-dessus permet de basculer entre les images 1, 2 et 3. Vous devrez peut-être régler ce paramètre en fonction du nombre d'images. circleShape.
Il est temps de tester votre film et de vous plonger dans le mélange de motifs et de couleurs géniaux, car le cadre HYPE prend votre code et le mélange dans une œuvre d'art génératif..
Voici le code final pour référence:
package import hype.extended.behavior.FixedVibration; import flash.display.Sprite; import flash.display.MovieClip; import flash.filters.BlurFilter; import hype.extended.behavior.VariableVibration; import hype.extended.rhythm.FilterCanvasRhythm; import hype.extended.trigger.ExitShapeTrigger; importer hype.framework.core.ObjectPool; importer hype.framework.core.TimeType; importer hype.framework.display.BitmapCanvas; / ** * Un tutoriel pour présenter HYPE. Un cadre visuel * de Branden Hall et Joshua David pour la création * de conceptions génératives / itératives avec du code. * * @author Anton Mills * @version le 06/02/2011 * / public class Main étend MovieClip // propriétés privées private var bitmapCanvas: BitmapCanvas; private var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * constructeur * / fonction publique Main () // introduit le cadre Hype initHype (); // commence la séquence objectPool.requestAll (); / ** * initiation des membres Hype que nous allons utiliser et configuration avant * d'exécuter l'animation * / private function initHype (): void // le clipContainer est utilisé comme parent pour tous nos sprites (); addChild (clipContainer); // Pensez à BitmapCanvas comme à un espace vide, nous allons «peindre» // chaque image avec de nouvelles données d'image bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // ajout d'un flou var blur: FilterCanvasRhythm = new FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); flou.start (TimeType.TIME, 100); // crée une collection d'objets et les stocke dans un ObjectPool // à utiliser dans l'animation objectPool = new ObjectPool (circleShape, 100); // chaque fois que nous demandons une nouvelle forme au pool //, il effectuera l'objet suivantPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // choisit une image aléatoire clip.gotoAndStop (Math.ceil (Math.random () * 3)); // ajoute une VariableVibration pour le mouvement x / y de chaque circleShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // ajoute une FixedVibration aux propriétés alpha et scale de chaque circleShape à la demande. var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // ajoute une FixedVibration à la rotation de circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // définir une sortie ExitShape var: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (clip); ; // fonction de recyclage d'objets privés onExitShape (clip: MovieClip): void objectPool.release (clip); clipContainer.removeChild (clip); objectPool.request ();
Ceci termine à peu près l’introduction du framework HYPE, merci beaucoup pour votre temps. J'espère que cela vous a plu et que vous vous souviendrez que nous n'avons fait qu'effleurer certains des effets fantastiques que l'on peut obtenir avec le cadre. Veuillez consulter le site Web du cadre HYPE sur www.hypeframework.org pour des exemples fantastiques du cadre et comment d'autres l'ont poussé au niveau supérieur avec l'intégration d'Away3D / Papervision.!
