Share
Under denne opplæringen skal vi knytte matematikk og design sammen. Vi vil utforske Branden Hall og Joshua Davis 'HYPE rammeverk og lage generativ kunst fra kode.
La oss se på det endelige resultatet vi vil jobbe for:
Før du dykker hodet i koden, la oss ta et kort øyeblikk for å gjøre oss kjent med prosjektfilene.
I kilden. Zip-filen finner du en mappe for hvert signifikant trinn, slik at du kan se nøyaktig hvilke endringer som er gjort. Du finner også en mappe som heter Base, lage en kopi av denne mappen, da dette vil fungere som utgangspunkt.
I Base-mappen har vi en bin mappe der vår SWF vil bli publisert. EN src mappe som inneholder våre ActionScript 3 og Flash-filer og til slutt a lib mappe der vi skal lagre HYPE-rammeverkets SWC-filer.
Deretter må vi ta den nyeste versjonen av HYPE-rammen fra sitt hjem på www.hypeframework.org.
Når nedlastingen er fullført, åpner du .zip-filen. Du finner to SWC-filer som heter hype-framework.swc og hype-extended.swc. Kopier begge disse til Base \ lib-mappen din.
Disse SWC-filene er egentlig en samling av kildefiler for rammen, alle rullet inn i en fil for enkelhet.
Det siste skrittet som trengs for å få alt i gang, er å fortelle Flash å se etter de to nye SWC-filene når vi kompilerer filmen, ellers vil det kaste en hel rekke feil på vår måte, ikke hyggelig!
Åpne Main.fla inne i Base \ src mappe, velg deretter Fil, Publiser innstillinger. Velg Flash-fanen som vist, i det nye vinduet som åpnes, velg fanen Bibliotekspass.
Trykk på "Browse TO SWC" File-knappen og fortsett å legge til begge SWC-filer i Flash-filen. Når dette er ferdig, er det på tide å begynne å legge til noe kode!
Åpne kilden til Main.as i den valgte redigeringen. Legg til følgende private egenskaper og initHype () metode:
offentlig klasse Main utvider MovieClip // private egenskaper private var bitmapCanvas: BitmapCanvas; privat var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * konstruktør * / offentlig funksjon Hoved () // angir Hype-rammen initHype (); / ** * igangsetting av Hype-medlemmene vi skal bruke og konfigurasjon tidligere * for å kjøre animasjonen * / privat funksjon initHype (): void // klippet Container brukes som foreldre for alle våre objekter clipContainer = new Sprite (); addChild (clipContainer);
I de neste trinnene ser vi på hver av disse objektene vi har lagt til som private eiendommer, fra og med clipContainer Sprite.
Siden vårt design skal ha over hundre objekter som alle beveger seg rundt på skjermen samtidig, trenger vi noe for å huske dem alle - bare å legge dem til Scene blir problematisk lenger nedover linjen. Svaret er å skape en vanlig AS3 Sprite å opptre som foreldre.
Den første virkelige delen av HYPE, the BitmapCanvas kan betraktes som en Sprite eller enda bedre, a Bitmap / BitmapData som vi skal male våre objekter, hver ramme, som et malere lerret.
Vi lager den like under klippet Container-kode og definerer den med bredde og høyde for å matche Scene. Vi legger til den i Scene men også fortelle det til startCapture (clipContainer, true), dette forteller bare BitmapCanvas å ta et øyeblikksbilde av clipContainer hver ramme. For nå skjønt, hold dette kommentert!
/ ** * igangsetting av Hype-medlemmene vi skal bruke og konfigurasjon tidligere * for å kjøre animasjonen * / privat funksjon initHype (): void // klippet Container brukes som foreldre for alle våre objekter clipContainer = ny Sprite ); addChild (clipContainer); // tenk på BitmapCanvas som et tomrom vi vil 'male' // hver ramme med nye bilde data bitmapCanvas = nytt BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas);
Hvis du har jobbet med spill, har du sannsynligvis kommet over begrepet an ObjectPool. Ettersom du oppretter nye objekter, er for mye av en treff på prosessoren, lager vi et basseng av en spesifisert mengde objekter før spillet eller applikasjonen begynner. Vi ville da bruke gjenstandene fra dette bassenget og ved å løpe ut, ville vi resirkulere og gjenbruke dem alle igjen, noe som unngår å skape nye gjenstander. Dette brukes ofte til kuler / lasere i spill og samme logikk brukes i HYPE.
Hvis du ser på Main.fla-biblioteket i Flash, ser du at jeg har opprettet en Filmklipp kalt circleShape og gitt den Linkage Identifier of circleShape slik at vi kan lage flere kopier av dette objektet med kode; dette er hva vår ObjectPool vil huske.
Legg til ObjectPool under BitmapCanvas-koden, slik som:
/ ** * igangsetting av Hype-medlemmene vi skal bruke og konfigurasjon tidligere * for å kjøre animasjonen * / privat funksjon initHype (): void // klippet Container brukes som foreldre for alle våre objekter clipContainer = ny Sprite ); addChild (clipContainer); // tenk på BitmapCanvas som et tomrom vi vil 'male' // hver ramme med nye bilde data bitmapCanvas = nytt BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas); // lage en samling av 10 objekter og lagre dem i et ObjectPool // for bruk i animasjonsobjektetPool = new ObjectPool (circleShape, 10);
Nå har vi våre kjerne spillere oppsett, clipContainer, de BitmapCanvas og ObjectPool Med sine 10 klipp, er det på tide å begynne å få ting til å bevege seg.
For å få et element fra ObjectPool Vi kan bruke objectPool.request (); som vil gi oss en circleShape MovieClip fra Flash-biblioteket for å jobbe med.
De ObjectPool gir oss også objectPool.onRequestObject () Metode som er en praktisk måte å tildele egenskaper til et klipp hver gang vi ber om en. Legg til følgende nedenfor hvor du instantiated the ObjectPool:
// lage en samling av 10 objekter og lagre dem i et ObjectPool // for bruk i animasjonsobjektetPool = new ObjectPool (circleShape, 10); // hver gang vi ber om en ny form fra bassenget // det vil utføre følgende objektPool.onRequestObject = funksjon (klipp: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * scene.stageHeight; clipContainer.addChild (klipp);
Med den nye koden lagt til, hver gang vi ber om et objekt fra bassenget ved å bruke objectPool.request () det vil skape en circleShape. Legg det til i clipContainer og plasser det tilfeldig på skjermen. Du kan teste dette ved å endre konstruktøren slik at den ser ut som følgende:
/ ** * konstruktør * / offentlig funksjon Hoved () // angir Hype-rammen initHype (); objectPool.request ();
Hvis alt gikk bra, bør du ha en enkelt, ensom sirkel på skjermen.
Husker du at vi satte ObjectPool størrelse til 10? Vel, vi skal opp på ante og øke dette til 100 objekter ved å endre følgende:
// lage en samling av 10 objekter og lagre dem i et ObjectPool // for bruk i animasjonsobjektetPool = nytt ObjectPool (sirkelSkape, 100);
Vi kan endre den tidligere forespørselen om å lese som requestAll () som dette:
/ ** * konstruktør * / offentlig funksjon Hoved () // angir Hype-rammen initHype (); objectPool.requestAll ();
Nå skal vi ha 100 sirkler spredt over skjermens område.
Nå har vi vår 100 circleShapes fordelt rundt skjermen, det er på tide å gjøre vårt design til liv ved å legge til bevegelse.
La oss begynne med å bruke en FixedVibration til alfa og skala egenskapene til hvert klipp. Vi kan bruke ObjectPools onRequestObject metode for å implementere det som vist:
// lage en samling av 10 objekter og lagre dem i et ObjectPool // for bruk i animasjonsobjektetPool = nytt ObjectPool (sirkelSkape, 100); // hver gang vi ber om en ny form fra bassenget // det vil utføre følgende objektPool.onRequestObject = funksjon (klipp: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * scene.stageHeight; // legg til en fast vibrasjon til alfa- og skalaegenskapene til hver sirkelSkjema ved forespørsel var alphaVib: FixedVibration = new FixedVibration (klipp, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (klipp, "skala", 0,9, 0,05, 0,05, 0,8, falsk); alphaVib.start (); scaleVib.start (); clipContainer.addChild (klipp);
La oss se nærmere på FixedVibration objekter vi opprettet. Hver FixedVibration objekt vi lager tar 7 parametere, henholdsvis de er som følger:
Accentsconagua
FixedVibration til, i vårt tilfelle vår circleShape kalt "klipp".FixedVibration til denne gangen jobber vi med alfa og skala eiendommer.Vår av FixedVibration, Jo høyere tallet jo mer "fjærende" bevegelsen. En verdi mellom 0 og 1 fungerer best.Letthet av vibrasjonen, jo lavere verdien jo raskere vil den glide mellom følgende to verdier. En verdi mellom 0 og 1 fungerer best.falsk.Så hvordan passer alle disse sammen? La oss se på hvordan skala eiendom er påvirket av FixedVibration. Det er gitt min og Max verdier på 0,05 og 0,8, den Vår verdien er ganske høy på 0,9 og Letthet er ganske lav på 0,05, noe som gjør at den skaleres uregelmessig og raskt.
Ha en lek med disse verdiene for å få en følelse av hvordan de påvirker bevegelsen.
Når vi tester vår Flash-fil, bør vi få noe slikt:
Svært lik den FixedVibration, de VariableVibration vil justere en egenskap av et objekt med en verdi som svinger. Forskjellen er at VariableVibration er ikke lineær som navnet antyder.
Endre koden som følger for å plassere klippene til midten av Scene, bare denne gangen vil vi søke på en VariableVibration til x og y verdier for å begynne å se litt bevegelse!
// hver gang vi ber om en ny form fra bassenget // det vil utføre følgende objektPool.onRequestObject = funksjon (klipp: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = scene.stageHeight / 2; // legg til en VariabelVibrasjon for x / y bevegelsen i hver sirkelSkjema var xVib: VariabelVibrasjon = Ny VariabelVibrasjon (klipp, "x", 0.97, 0.03, 40); var yVib: VariabelVibrasjon = ny VariabelVibrasjon (klipp, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // legg til en fast vibrasjon til alfa- og skalaegenskapene til hver sirkelSkjema ved forespørsel var alphaVib: FixedVibration = new FixedVibration (klipp, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (klipp, "skala", 0,9, 0,05, 0,05, 0,8, falsk); alphaVib.start (); scaleVib.start (); clipContainer.addChild (klipp);
La oss se nærmere på VariableVibration objekter vi opprettet. Hver VariableVibration objektet vi lager, tar bare 5 parametere, henholdsvis de er som følger:
VariableVibration til, i vårt tilfelle vår circleShape kalt "klipp".VariableVibration til denne gangen jobber vi med x- og y-egenskapene.Vår av vibrasjonen.Letthet av vibrasjonen.Område av verdier som er produsert. Jo høyere tallet jo mer uberegnelig effekten.Vår Flash-fil skal se slik ut når den publiseres:
Det begynner å se bra ut, men vi kan gjøre mye bedre! Husk at bitmapCanvas.startCapture () linje jeg ba deg om å holde ukjent vei tilbake i trinn 6? Gå videre og ikke kommentere det, og test deretter filmen på nytt.
Dette er mer som det!
Et veldig enkelt triks for å legge til en spiralbevegelse er å legge til en annen vibrasjon til klippets rotasjonsegenskap slik som:
// hver gang vi ber om en ny form fra bassenget // det vil utføre følgende objektPool.onRequestObject = funksjon (klipp: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = scene.stageHeight / 2; // legg til en VariabelVibrasjon for x / y bevegelsen i hver sirkelSkjema var xVib: VariabelVibrasjon = Ny VariabelVibrasjon (klipp, "x", 0.97, 0.03, 40); var yVib: VariabelVibrasjon = ny VariabelVibrasjon (klipp, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // legg til en fast vibrasjon til alfa- og skalaegenskapene til hver sirkelSkjema ved forespørsel var alphaVib: FixedVibration = new FixedVibration (klipp, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (klipp, "skala", 0,9, 0,05, 0,05, 0,8, falsk); alphaVib.start (); scaleVib.start (); // legg til en fast vibrasjon til sirkelens rotasjonSkape varrotasjonVib: FastVibrering = ny FastVibrering (klipp, "rotasjon", 0,9, 0,05, 0, 360, falsk); rotationVib.start (); clipContainer.addChild (klipp);
Før du tester, hopper du over til Flash og åpner circleShape MovieClip i biblioteket.
Som vist, dra sirkelen like langt fra midten i hvilken som helst retning. Jo lenger du beveger det fra sentrum, jo mer spiraler vil dukke opp i designet når du publiserer:
Et problem med vår nåværende animasjon er at når klippene beveger seg fra skjermen, kommer de sjelden tilbake. Vi kan løse dette lille problemet ved å lage en ExitShapeTrigger.
en ExitShapeTrigger er et område som anses som trygt for klippet. Når klippet går ut av dette området, må vi utføre en slags funksjon, for eksempel å be om et nytt klipp fra ObjectPool.
Vi definerer en ExitShapeTrigger som Nedenfor:
// hver gang vi ber om en ny form fra bassenget // det vil utføre følgende objektPool.onRequestObject = funksjon (klipp: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = scene.stageHeight / 2; // legg til en VariabelVibrasjon for x / y bevegelsen i hver sirkelSkjema var xVib: VariabelVibrasjon = Ny VariabelVibrasjon (klipp, "x", 0.97, 0.03, 40); var yVib: VariabelVibrasjon = ny VariabelVibrasjon (klipp, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // legg til en fast vibrasjon til alfa- og skalaegenskapene til hver sirkelSkjema ved forespørsel var alphaVib: FixedVibration = new FixedVibration (klipp, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (klipp, "skala", 0,9, 0,05, 0,05, 0,8, falsk); alphaVib.start (); scaleVib.start (); // legg til en fast vibrasjon til sirkelens rotasjonSkape varrotasjonVib: FastVibrering = ny FastVibrering (klipp, "rotasjon", 0,9, 0,05, 0, 360, falsk); rotationVib.start (); // definere en ExitShape var exit: ExitShapeTrigger = ny ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (klipp); // gjenbruke objekter privat funksjon onExitShape (klipp: MovieClip): void trace ("circleShape left the screen!"); Dette vil skape en ExitShapeTrigger med følgende parametere:
Filmklipp for å teste om det er ute av det angitte området.Filmklipp brukes til å definere det trygge området, har du kanskje allerede lagt merke til at vi allerede har opprettet dette, kalt det exitShape og plasserte den på Scene i Flash.Skriv inn en gang flagg, bare sett dette til ekte for nå.Etterpå fra ExitShape Vi introduserte i det siste trinnet, vi skal ganske enkelt redigere onExitShape metode slik at når et klipp flytter seg fra skjermen, sletter vi det og ber om en ny fra ObjectPool.
Hittil har vi jobbet med be om() og requestAll () metoder for ObjectPool, når vi vil slette den gamle bruker vi frigivelse (clip) metode:
// resirkulere objekter privat funksjon onExitShape (klipp: MovieClip): void // fjern fra ObjectPool og clipContainer objectPool.release (clip); clipContainer.removeChild (klipp); // få et nytt klipp fra ObjectPool objectPool.request ();
HYPE har muligheten til veldig enkelt å legge til filtre som uskarphet og glød til objekter. For å legge til en touch mer pizzazz til designet skal vi legge til en BlurFilter til prosjektet ved hjelp av FilterCanvasRhythm:
// tenk på BitmapCanvas som et tomrom vi vil 'male' // hver ramme med nye bilde data bitmapCanvas = nytt BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // legge til et uskarphet er uskarphet: FilterCanvasRhythm = new FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); blur.start (TimeType.TIME, 100); // lage en samling objekter og lagre dem i et ObjectPool // for bruk i animasjonsobjektetPool = nytt ObjectPool (sirkelSkape, 100);
Ovennevnte kode lager en FilterCanvasRhythm som tar et filter som en parameter og bruker den til bitmapCanvas vi erklærte tidligere.
Test prosjektet, det begynner virkelig å komme sammen nå!
Vi kan lett legge til litt dybde i sammensetningen ved å legge til flere former i blandingen. Snarere enn å måtte opprette og administrere flere ObjectPools, Vi kan legge til rammer til den opprinnelige sirkelenSkape vi brukte og tilfeldigvis velge hvilken ramme som skal spilles.
Prøv dette nå, rediger circleShape objekt i Flash-biblioteket. Opprett en ny Keyframe, velg en ny farge og tegne en ny form. Gå videre og lag noen få Keyframes, i neste trinn ser vi på å implementere dem med kode. Dette er vår nye form:
? sammenlignet med vår gamle form:
Med vår sirkelSkap som nå sporter noen få nye Keyframes kan vi bare sette inn denne enkle koden for å velge en ramme som skal brukes hver gang vi ringer objectPool.request ():
// hver gang vi ber om en ny form fra bassenget // det vil utføre følgende objektPool.onRequestObject = funksjon (klipp: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = scene.stageHeight / 2; // velg et tilfeldig ramme clip.gotoAndStop (Math.ceil (Math.random () * 3)); // legg til en VariabelVibrasjon for x / y bevegelsen i hver sirkelSkjema var xVib: VariabelVibrasjon = Ny VariabelVibrasjon (klipp, "x", 0.97, 0.03, 40); var yVib: VariabelVibrasjon = ny VariabelVibrasjon (klipp, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // legg til en fast vibrasjon til alfa- og skalaegenskapene til hver sirkelSkjema ved forespørsel var alphaVib: FixedVibration = new FixedVibration (klipp, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (klipp, "skala", 0,9, 0,05, 0,05, 0,8, falsk); alphaVib.start (); scaleVib.start (); // legg til en fast vibrasjon til sirkelens rotasjonSkape varrotasjonVib: FastVibrering = ny FastVibrering (klipp, "rotasjon", 0,9, 0,05, 0, 360, falsk); rotationVib.start (); // definere en ExitShape var exit: ExitShapeTrigger = ny ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (klipp);
Som et raskt notat vil den tilfeldige rammekoden ovenfor skifte mellom rammer 1, 2 og 3. Du må kanskje justere dette til antall rammer i din circleShape.
Det er på tide å teste filmen og baske i blandingen av funky mønstre og farger ettersom HYPE-rammen tar koden din og blander den til et stykke generativ kunst.
Heres den endelige koden for referanse:
pakke import hype.extended.behavior.FixedVibration; importer flash.display.Sprite; importer flash.display.MovieClip; importer flash.filters.BlurFilter; importere hype.extended.behavior.VariableVibration; importere hype.extended.rhythm.FilterCanvasRhythm; importer hype.extended.trigger.ExitShapeTrigger; importere hype.framework.core.ObjectPool; importere hype.framework.core.TimeType; importer hype.framework.display.BitmapCanvas; / ** * En veiledning for å introdusere HYPE. Et visuelt rammeverk * av Branden Hall og Joshua David for å skape * generativ / iterativ design med kode. * * @author Anton Mills * @version 06/02/2011 * / offentlig klasse Main utvider MovieClip // private properties private var bitmapCanvas: BitmapCanvas; privat var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * konstruktør * / offentlig funksjon Hoved () // angir Hype-rammen initHype (); // start sekvens objektPool.requestAll (); / ** * igangsetting av Hype-medlemmene vi skal bruke og konfigurasjon tidligere * for å kjøre animasjonen * / privat funksjon initHype (): void // klippet Container brukes som forelder for alle våre sprites clipContainer = new Sprite (); addChild (clipContainer); // tenk på BitmapCanvas som et tomrom vi vil 'male' // hver ramme med nye bilde data bitmapCanvas = nytt BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // legge til et uskarphet er uskarphet: FilterCanvasRhythm = new FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); blur.start (TimeType.TIME, 100); // lage en samling objekter og lagre dem i et ObjectPool // for bruk i animasjonsobjektetPool = nytt ObjectPool (sirkelSkape, 100); // hver gang vi ber om en ny form fra bassenget // det vil utføre følgende objektPool.onRequestObject = funksjon (klipp: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = scene.stageHeight / 2; // velg et tilfeldig ramme clip.gotoAndStop (Math.ceil (Math.random () * 3)); // legg til en VariabelVibrasjon for x / y bevegelsen i hver sirkelSkjema var xVib: VariabelVibrasjon = Ny VariabelVibrasjon (klipp, "x", 0.97, 0.03, 40); var yVib: VariabelVibrasjon = ny VariabelVibrasjon (klipp, "y", 0,97, 0,03, 40); xVib.start (); yVib.start (); // legg til en fast vibrasjon til alfa- og skalaegenskapene til hver sirkelSkjema ved forespørsel var alphaVib: FixedVibration = new FixedVibration (klipp, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (klipp, "skala", 0,9, 0,05, 0,05, 0,8, falsk); alphaVib.start (); scaleVib.start (); // legg til en fast vibrasjon til sirkelens rotasjonSkape varrotasjonVib: FastVibrering = ny FastVibrering (klipp, "rotasjon", 0,9, 0,05, 0, 360, falsk); rotationVib.start (); // definere en ExitShape var exit: ExitShapeTrigger = ny ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (klipp); ; // gjenbruke objekter privat funksjon onExitShape (klipp: MovieClip): void objectPool.release (clip); clipContainer.removeChild (klipp); objectPool.request ();
Dette handler bare om å innføre HYPE-rammeverket, takk veldig mye for din tid. Jeg håper du likte det og husker at vi bare riper overflaten på noen av de fantastiske effektene som kan gjøres med rammen. Vennligst sjekk HYPE-rammeverkets hjemmeside på www.hypeframework.org for noen fantastiske eksempler på rammen og hvordan andre har tatt det til neste nivå med Away3D / Papervision integrasjon!
