Share
Durante questo tutorial legheremo insieme matematica e design. Esploreremo la struttura di HYPE di Branden Hall e Joshua Davis e creeremo arte generativa dal codice.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Prima di immergerti a lungo nel codice, dedichiamoci un breve momento per familiarizzare con i file del progetto.
All'interno del file .zip di origine troverai una cartella per ogni passaggio significativo, in modo che tu possa vedere esattamente quali modifiche sono state apportate. Inoltre, troverai una cartella chiamata Base, crea una copia di questa cartella in quanto questa sarà la nostra base di partenza.
All'interno della cartella Base abbiamo a bidone cartella in cui verrà pubblicato il nostro SWF. UN src cartella che contiene i nostri ActionScript 3 e Flash Files e infine a lib cartella in cui verranno archiviati i file SWC del framework HYPE.
Quindi, dobbiamo prendere l'ultima versione del framework HYPE dalla sua sede su www.hypeframework.org.
Una volta completato il download, apri il file .zip. Troverai due file SWC chiamati campagna pubblicitaria-framework.swc e campagna pubblicitaria-extended.swc. Copia entrambi di questi nella tua cartella Base \ lib.
Questi file SWC sono essenzialmente una raccolta di file sorgente per il framework, tutti integrati in un unico file per facilità.
Il passaggio finale necessario per far funzionare tutto è quello di dire a Flash di cercare i due nuovi file SWC quando compiliamo il film, altrimenti genererà un sacco di errori a modo nostro, non bello!
Apri il main.fla dentro il Base \ src cartella, quindi scegliere File, Pubblica impostazioni. Seleziona la scheda Flash come mostrato, nella nuova finestra che si apre seleziona la scheda Percorso libreria.
Premere il pulsante "Browse TO SWC" File e procedere per aggiungere entrambi i file SWC al file Flash. Una volta completato, è ora di iniziare ad aggiungere del codice!
Apri il file sorgente Main.as nell'editor scelto. Aggiungi le seguenti proprietà private e il initHype () metodo:
public class Main estende MovieClip // proprietà private private var bitmapCanvas: BitmapCanvas; private var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * constructor * / public function Main () // entra nel framework Hype initHype (); / ** * avvio dei membri di Hype che useremo e configurazione precedente * all'esecuzione dell'animazione * / funzione privata initHype (): void // il clipContainer è usato come genitore per tutti i nostri oggetti clipContainer = new Sprite (); addChild (clipContainer);
Nei prossimi passaggi vedremo ognuno di questi oggetti che abbiamo aggiunto come proprietà private, a partire da clipContainer Sprite.
Dato che il nostro progetto avrà più di un centinaio di oggetti che si muovono contemporaneamente sullo schermo, avremo bisogno di qualcosa per ospitarli tutti - basta aggiungerli al Palcoscenico diventerà problematico in futuro. La risposta è creare un normale AS3 folletto comportarsi da genitore.
La prima vera parte di HYPE, il BitmapCanvas può essere pensato come a folletto o meglio ancora, a Bitmap / BitmapData a cui dipingeremo i nostri oggetti, ogni cornice, come una tela di pittori.
Lo creiamo appena sotto il codice clipContainer e lo definiamo con larghezza e altezza per abbinarlo Palcoscenico. Lo aggiungiamo al Palcoscenico ma anche dirlo a startCapture (clipContainer, true), questo semplicemente dice al BitmapCanvas per scattare un'istantanea del clipContainer ogni frame. Per ora però, continua con questo commento!
/ ** * avvio dei membri di Hype che useremo e configurazione precedente * all'esecuzione dell'animazione * / funzione privata initHype (): void // il clipContainer è usato come genitore per tutti i nostri oggetti clipContainer = new Sprite ( ); addChild (clipContainer); // pensa a BitmapCanvas come uno spazio vuoto "dipingeremo" // ogni fotogramma con nuovi dati immagine bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas);
Se hai lavorato con i giochi probabilmente hai trovato il concetto di un ObjectPool. Poiché la creazione di nuovi oggetti è troppo importante per il processore, creiamo un pool di una quantità specificata di oggetti prima che il gioco o l'applicazione inizi. Quindi utilizzeremmo gli oggetti di questo pool e, una volta esauriti, li ricicleremmo e li riutilizzeremo di nuovo, evitando così la creazione di nuovi oggetti. Questo è comunemente usato per proiettili / laser nei giochi e la stessa logica è usata in HYPE.
Se dai un'occhiata alla libreria Main.fla in Flash vedrai che ho creato a Un filmato chiamato CircleShape e gli è stato dato il Linkage Identifier di CircleShape quindi possiamo creare più copie di questo oggetto con il codice; questo è ciò che è nostro ObjectPool ospiterà.
Aggiungi il ObjectPool sotto il codice BitmapCanvas, in questo modo:
/ ** * avvio dei membri di Hype che useremo e configurazione precedente * all'esecuzione dell'animazione * / funzione privata initHype (): void // il clipContainer è usato come genitore per tutti i nostri oggetti clipContainer = new Sprite ( ); addChild (clipContainer); // pensa a BitmapCanvas come uno spazio vuoto "dipingeremo" // ogni fotogramma con nuovi dati immagine bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas); // crea una collezione di 10 oggetti e li memorizza in un ObjectPool // per l'utilizzo nell'oggetto di animazione ObjectPool = new ObjectPool (circleShape, 10);
Ora abbiamo la configurazione dei nostri core player, il clipContainer, il BitmapCanvas e il ObjectPool con le sue 10 clip, è ora di iniziare a far muovere le cose.
Per ottenere un oggetto dal ObjectPool possiamo usare objectPool.request (); che ci darà un circleShape MovieClip dalla libreria Flash con cui lavorare.
Il ObjectPool ci dà anche il objectPool.onRequestObject () metodo che è un modo pratico per assegnare le proprietà di una clip ogni volta che ne richiediamo una. Aggiungi quanto segue di seguito dove hai istanziato il ObjectPool:
// crea una collezione di 10 oggetti e li memorizza in un ObjectPool // per l'utilizzo nell'oggetto di animazione ObjectPool = new ObjectPool (circleShape, 10); // ogni volta che chiediamo una nuova forma dal pool // eseguirà il seguente objectPool.onRequestObject = function (clip: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * stage.stageHeight; clipContainer.addChild (clip);
Con quel nuovo codice aggiunto, ogni volta che richiediamo un oggetto dal pool usando objectPool.request () creerà a CircleShape. Aggiungilo al clipContainer e posizionarlo casualmente sullo schermo. Puoi testare questo modificando il costruttore per assomigliare al seguente:
/ ** * constructor * / public function Main () // entra nel framework Hype initHype (); objectPool.request ();
Se tutto è andato bene, dovresti avere un solo cerchio solitario sullo schermo.
Ti ricordi che abbiamo impostato il ObjectPool taglia a 10? Bene, aumenteremo la posta e aumenteremo fino a 100 oggetti cambiando quanto segue:
// crea una collezione di 10 oggetti e li memorizza in un ObjectPool // da utilizzare nell'oggetto di animazione ObjectPool = new ObjectPool (circleShape, 100);
Possiamo modificare la precedente dichiarazione della richiesta per leggere come Richiedi tutto() come questo:
/ ** * constructor * / public function Main () // entra nel framework Hype initHype (); objectPool.requestAll ();
Ora dovremmo avere 100 cerchi sparsi sull'area dello schermo.
Ora abbiamo i nostri 100 circleShapes distribuito sullo schermo è ora di dare vita al nostro design aggiungendo movimento.
Iniziamo applicando a FixedVibration al alfa e scala proprietà di ogni clip. Possiamo usare il ObjectPools onRequestObject metodo per implementarlo come mostrato:
// crea una collezione di 10 oggetti e li memorizza in un ObjectPool // da utilizzare nell'oggetto di animazione ObjectPool = new ObjectPool (circleShape, 100); // ogni volta che chiediamo una nuova forma dal pool // eseguirà il seguente objectPool.onRequestObject = function (clip: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * stage.stageHeight; // aggiungi una FixedVibration alle proprietà alpha e scale di ogni circleShape quando richiesto 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, falso); alphaVib.start (); scaleVib.start (); clipContainer.addChild (clip);
Diamo uno sguardo più da vicino al FixedVibration oggetti che abbiamo creato. Ogni FixedVibration l'oggetto che creiamo prende 7 parametri, rispettivamente sono i seguenti:
Accentsconagua
FixedVibration a, nel nostro caso il nostro CircleShape chiamato "clip".FixedVibration a, questa volta stiamo lavorando con il alfa e scala proprietà.Primavera del FixedVibration, più alto è il numero più 'elastico' il movimento. Un valore compreso tra 0 e 1 funzionerà meglio.alleviare della vibrazione, più basso è il valore più veloce scivolerà tra i seguenti due valori. Un valore compreso tra 0 e 1 funzionerà meglio.falso.Quindi, come si integrano tutti questi elementi? Diamo un'occhiata a come scala la proprietà è influenzata dal FixedVibration. È dato min e Max valori di 0,05 e 0,8, il Primavera il valore è piuttosto alto a 0.9 e il alleviare è piuttosto basso a 0.05, rendendolo scalabile in modo irregolare e veloce.
Gioca con questi valori per capire come influenzano il movimento.
Quando testiamo il nostro file Flash dovremmo ottenere qualcosa del genere:
Molto simile al FixedVibration, il VariableVibration regolerà una proprietà di un oggetto con un valore che fluttua. La differenza è che il VariableVibration non è lineare come suggerisce il nome.
Modificare il codice come segue per posizionare le clip al centro del Palcoscenico, solo questa volta applicheremo a VariableVibration al X e y valori per iniziare a vedere qualche movimento!
// ogni volta che chiediamo una nuova forma dal pool // eseguirà il seguente objectPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // aggiungi una VariableVibration per il movimento x / y di ogni 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 (); // aggiungi una FixedVibration alle proprietà alpha e scale di ogni circleShape quando richiesto 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, falso); alphaVib.start (); scaleVib.start (); clipContainer.addChild (clip);
Diamo uno sguardo più da vicino al VariableVibration oggetti che abbiamo creato. Ogni VariableVibration l'oggetto che creiamo prende solo 5 parametri, rispettivamente sono i seguenti:
VariableVibration a, nel nostro caso il nostro CircleShape chiamato "clip".VariableVibration a, questa volta stiamo lavorando con le proprietà x e y.Primavera della vibrazione.alleviare della vibrazione.Gamma dei valori che viene prodotto. Più alto è il numero, più irregolare è l'effetto.Il nostro file Flash dovrebbe apparire in questo modo una volta pubblicato:
Sta iniziando a sembrare bello, ma possiamo fare molto meglio! Ricordatelo bitmapCanvas.startCapture () linea ti ho chiesto di rimanere senza commenti nel passaggio 6? Vai avanti e decommentalo, quindi prova di nuovo il tuo film.
Questo è più simile!
Un trucco molto semplice per aggiungere un movimento a spirale è aggiungere un'altra vibrazione alla proprietà di rotazione della clip in questo modo:
// ogni volta che chiediamo una nuova forma dal pool // eseguirà il seguente objectPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // aggiungi una VariableVibration per il movimento x / y di ogni 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 (); // aggiungi una FixedVibration alle proprietà alpha e scale di ogni circleShape quando richiesto 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, falso); alphaVib.start (); scaleVib.start (); // aggiungi una FixedVibration alla rotazione del circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); clipContainer.addChild (clip);
Prima di testare questo salto su Flash e aprire il circleShape MovieClip nella biblioteca.
Come mostrato, trascina il cerchio appena fuori dal centro in qualsiasi direzione. Più lo sposti dal centro, più spirali appariranno nel tuo design quando pubblichi:
Un problema con la nostra animazione attuale è che, una volta che i clip si spostano dallo schermo, molto raramente tornano indietro. Possiamo risolvere questo piccolo problema creando un ExitShapeTrigger.
Un ExitShapeTrigger è un'area considerata sicura per la clip. Quando la clip lascia questa area, abbiamo bisogno di eseguire qualche tipo di funzione, come la richiesta di una nuova clip dal ObjectPool.
Definiamo un ExitShapeTrigger come sotto:
// ogni volta che chiediamo una nuova forma dal pool // eseguirà il seguente objectPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // aggiungi una VariableVibration per il movimento x / y di ogni 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 (); // aggiungi una FixedVibration alle proprietà alpha e scale di ogni circleShape quando richiesto 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, falso); alphaVib.start (); scaleVib.start (); // aggiungi una FixedVibration alla rotazione del circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // define exitShape var exit: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (clip); // recycle objects private function suExitShape (clip: MovieClip): void trace ("circleShape ha lasciato lo schermo!"); Questo creerà un ExitShapeTrigger con i seguenti parametri:
Un filmato per verificare se è fuori dalla zona data.Un filmato usato per definire l'area sicura, potresti aver già notato che l'abbiamo già creato, chiamato exitShape e lo mise sul Palcoscenico in Flash.Inserisci una volta flag, basta impostarlo su vero per adesso.Seguendo dal ExitShape abbiamo introdotto nell'ultimo passaggio, modificheremo semplicemente il onExitShape metodo in modo che ogni volta che una clip si allontana dallo schermo, la elimineremo e ne richiederà una nuova da ObjectPool.
Fino ad ora abbiamo lavorato con il richiesta() e Richiedi tutto() metodi del ObjectPool, quando vogliamo eliminare quello vecchio, usiamo il rilascio (clip) metodo:
// recycle objects private function suExitShape (clip: MovieClip): void // remove from ObjectPool e clipContainer objectPool.release (clip); clipContainer.removeChild (clip); // ottiene una nuova clip dall'oggetto ObjectPool.Pool.request ();
HYPE offre la possibilità di aggiungere facilmente filtri come sfocatura e bagliore agli oggetti. Per aggiungere un pizzico di tocco in più al design, aggiungeremo a BlurFilter al progetto usando il FilterCanvasRhythm:
// pensa a BitmapCanvas come uno spazio vuoto "dipingeremo" // ogni fotogramma con nuovi dati immagine bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // aggiungendo una sfocatura var blur: FilterCanvasRhythm = new FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); blur.start (TimeType.TIME, 100); // crea una collezione di oggetti e li memorizza in un ObjectPool // da utilizzare nell'oggetto di animazione oggettoPool = new ObjectPool (circleShape, 100);
Il codice precedente crea a FilterCanvasRhythm che prende un filtro come parametro e lo applica al bitmapCanvas abbiamo dichiarato prima.
Prova il progetto, inizia davvero a venire insieme ora!
Possiamo facilmente aggiungere un po 'di profondità alla composizione aggiungendo più forme al mix. Piuttosto che dover creare e gestire diversi ObjectPools, possiamo aggiungere cornici all'originale circleShape che abbiamo usato e selezionare a caso quale frame riprodurre.
Prova questo ora, modifica il CircleShape oggetto nella libreria Flash. Crea un nuovo Keyframe, seleziona un nuovo colore e disegna una nuova forma. Vai avanti e crea alcuni Keyframes personalizzati, nel prossimo passo vedremo come implementarli con il codice. Questa è la nostra nuova forma:
? rispetto alla nostra vecchia forma:
Con la nostra circleShape che ora presenta alcuni nuovi Keyframes, possiamo semplicemente inserire questa singola riga di codice per scegliere una cornice da utilizzare ogni volta che chiamiamo objectPool.request ():
// ogni volta che chiediamo una nuova forma dal pool // eseguirà il seguente objectPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // scegli una cornice casuale clip.gotoAndStop (Math.ceil (Math.random () * 3)); // aggiungi una VariableVibration per il movimento x / y di ogni 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 (); // aggiungi una FixedVibration alle proprietà alpha e scale di ogni circleShape quando richiesto 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, falso); alphaVib.start (); scaleVib.start (); // aggiungi una FixedVibration alla rotazione del circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // define exitShape var exit: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (clip);
Come nota rapida, il codice casuale del fotogramma sopra cambierà tra i fotogrammi 1, 2 e 3. Potrebbe essere necessario regolarlo in base alla quantità di fotogrammi nel CircleShape.
È il momento di mettere alla prova il tuo film e crogiolarsi nella combinazione di modelli e colori funky mentre il framework HYPE prende il tuo codice e lo mescola in un pezzo di arte generativa.
Ecco il codice finale per riferimento:
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; import hype.framework.core.ObjectPool; import hype.framework.core.TimeType; import hype.framework.display.BitmapCanvas; / ** * Un tutorial per presentare HYPE. Un quadro visivo * di Branden Hall e Joshua David per la creazione di un design generativo / iterativo con codice. * * @author Anton Mills * @version 06/02/2011 * / public class Main estende MovieClip // proprietà private private var bitmapCanvas: BitmapCanvas; private var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * constructor * / public function Main () // entra nel framework Hype initHype (); // inizia la sequenza objectPool.requestAll (); / ** * avvio dei membri di Hype che useremo e configurazione precedente * all'esecuzione dell'animazione * / funzione privata initHype (): void // il clipContainer è usato come genitore per tutti i nostri sprite clipContainer = new Sprite (); addChild (clipContainer); // pensa a BitmapCanvas come uno spazio vuoto "dipingeremo" // ogni fotogramma con nuovi dati immagine bitmapCanvas = new BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // aggiungendo una sfocatura var blur: FilterCanvasRhythm = new FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); blur.start (TimeType.TIME, 100); // crea una collezione di oggetti e li memorizza in un ObjectPool // da utilizzare nell'oggetto di animazione oggettoPool = new ObjectPool (circleShape, 100); // ogni volta che chiediamo una nuova forma dal pool // eseguirà il seguente objectPool.onRequestObject = function (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // scegli una cornice casuale clip.gotoAndStop (Math.ceil (Math.random () * 3)); // aggiungi una VariableVibration per il movimento x / y di ogni 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 (); // aggiungi una FixedVibration alle proprietà alpha e scale di ogni circleShape quando richiesto 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, falso); alphaVib.start (); scaleVib.start (); // aggiungi una FixedVibration alla rotazione del circleShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // define exitShape var exit: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (clip); ; // recycle objects private function suExitShape (clip: MovieClip): void objectPool.release (clip); clipContainer.removeChild (clip); objectPool.request ();
Questo riguarda solo l'introduzione del framework HYPE, grazie mille per il tuo tempo. Spero che vi sia piaciuto e ricordate che abbiamo solo graffiato la superficie di alcuni degli effetti fantastici che possono essere realizzati con il framework. Si prega di controllare il sito web di HYPE all'indirizzo www.hypeframework.org per alcuni fantastici esempi del framework e di come altri lo hanno portato al livello successivo con l'integrazione di Away3D / Papervision!
