I denne opplæringen lærer du hvordan du lager en enkel lydvisualiserer i Unity. Vi går gjennom koden som leser ut lyddataene, og deretter på flere måter å bruke disse dataene i et Unity-spill.
Du trenger en grunnleggende forståelse av enhet for å oppnå dette. Du vil også trenge musikkfilen til en sang for å visualisere-gå, finn noe på newgrounds.com hvis du trenger noe morsomt, som Mission Complete XL.
Prosjektfilene kan bli funnet på GitHub, hvis du vil sjekke dem ut, men er ikke strengt nødvendige for å oppnå dette. De .unity3d
filen vi senere bruker er også der inne.
Klar? La oss gå!
Opprett et nytt Unity Project, legg til musikkfilen din i ressursmappen, og opprett en ny JavaScript-fil og navn den lineVisualizer
. Åpne denne filen, og legg til følgende kode:
offentlig var detalj: int = 500; offentlig var amplitude: float = 0,1; private var startposisjon: flyte; funksjon Start () startPosition = transform.localPosition.y; funksjon Oppdatering () var info: float [] = ny float [detalj]; AudioListener.GetOutputData (info, 0); var pakketData: float = 0.0; for (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]);
Dette skriptet vil ta de tilgjengelige lyddataene og bruke det på bestemte måter. Detaljvariabelen forteller det med hvilken "oppløsning" for å lese ut lyddataene. Høyere verdier i dette stedet kan skape et mer "jittery" resultat. Du kan eksperimentere for å finne ut den beste innstillingen senere, og legge den til grunnverdien for nå.
Akkurat nå gjør det ingenting, da vi ikke har spesifisert hva det skal gjøres, og hva du skal lytte til.
Legg til følgende linje på slutten av Oppdater()
fungere i lineVisualizer
manus:
transform.localPosition.y = startposisjon + packagedData * amplitude;
Deretter lager du en sfære, nevner den LineVisualizer
, og legg til skriptet til det. Flytt LineVisualizer
foran kameraet.
Vi må også ha lyden i scenen, så la oss få det. Opprett et nytt objekt og oppgi navnet AudioSource
; det blir "høyttaler" som lager musikken. Du kan dra musikkfilen fra aktivmappen på den, og det vil begynne å spille filen umiddelbart når du starter scenen.
Før vi prøver det, setter du lydkomponenten til spill umiddelbart og til sløyfe. Gå også til selve musikkfilen og sett den til 2D lyd. Dette vil sikre at musikken kan høres like bra, uansett hvor AudioSource
er plassert. Til slutt lage en prefab ut av det, slik at vi kan bruke det senere.
Hvis alt er riktig konfigurert, vil lineVisualizer
bør bevege seg opp og ned. Suksess! Lyddataene leses ut og brukes på en morsom og interessant måte.
La oss nå gjøre det vakrere.
Opprett et tomt objekt og legg til en sporrevertor til det, og kjett det til lineVisualizer
. Disse sporinnstillingene vil skape en fin effekt:
Kjede LineVisualizer
til kameraet, slik at det beveger seg når kameraet beveger seg. Oppsettet skal se slik ut:
Deretter lager du en liten JavaScript-fil som heter rotation.js
, og legg til følgende kode for det:
#pragma streng var hastighet: float = 15.0; funksjon Oppdater () transform.Rotate (0, speed * Time.deltaTime, 0);
Sett rotasjonsskriptet på kameraet slik at det roterer rundt seg selv.
Prøv det! Sfæren skal hoppe opp og ned, og tegne en linje bak den.
For å gjøre det vakrere, gjør kuben usynlig ved å fjerne merkingen av maskinkomponenten og plassere den litt lavere, slik at den ikke hopper ut av skjermen. Still også kameraets bakgrunnsfarge til svart, legg til et retningslys i scenen, og gi stien en fin farge og materiale.
Du bør ha en enkel linje visualiserer, som vil hoppe og ned med musikken, og tegne en passende linje rundt. Prøv det i denne bygningen:
Bar visualizers er litt vanskeligere. Vi legger flere "barer" ved siden av hverandre, som vil hoppe til musikken, hver på sin egen måte. Å få en "sann" bar visualizer gjort er langt mer komplisert enn denne ganske enkle introduksjonen kan dekke, så vi må lage en falsk en (som vil se bra ut i alle fall).
I prosjektfilene finner du en 3D-fil med en spesiell terning. Det er ikke strengt nødvendig, så du kan hoppe over det hvis du vil.
Opprett en ny kube, og bytt ut standard kubemaske for de nevnte visualizerCube
mesh. Den nye har sitt midtpunkt i en kant. Når vi skaler kuben i løpet av kjøretiden, vil den bare bevege seg i en retning.
Opprett et nytt skript som heter barVisualizer
. Legg til følgende kode:
#pragma strenge offentlige varedetaljer: int = 500; offentlig var minValue: float = 1.0; offentlig var amplitude: float = 0,1; privat var startSkala: Vector3; funksjon Start () startScale = transform.localScale; funksjon Oppdatering () var info: float [] = ny float [detalj]; AudioListener.GetOutputData (info, 0); var pakketData: float = 0.0; for (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]); transform.localScale = new Vector3(minValue, (packagedData * amplitude) + startScale.y, minValue);
Det ligner på lineVisualizer
skript, men kommandoene som justerer stillingen er endret. De justerer nå kubens vertikale høyde.
Lag en kube, ring den BarVisualizer
, gi den en fin farge, og legg skriptet du nettopp har opprettet på den. Deretter lager du flere kopier av det og plasserer dem ved siden av hverandre foran kameraet. Det skal se slik ut:
Hvis du prøver det, vil du legge merke til at alle terninger beveger seg på samme måte. For å gjøre hver kube vokse og krympe som barer, tilpass koden slik at den ser slik ut:
#pragma strenge offentlige varedetaljer: int = 500; offentlig var minValue: float = 1.0; offentlig var amplitude: float = 0,1; privat var randomAmplitude: float = 1.0; privat var startSkala: Vector3; funksjon Start () startScale = transform.localScale; randomAmplitude = Random.Range (0,5, 1,5); funksjon Oppdatering () var info: float [] = ny float [detalj]; AudioListener.GetOutputData (info, 0); var pakketData: float = 0.0; for (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]); transform.localScale = new Vector3(minValue, (packagedData * amplitude * randomAmplitude) + startScale.y, minValue);
Dette gir hver bar sin egen "styrke", som den beveger seg med. Du kan se effekten i denne byggingen:
Denne er litt annerledes. I stedet for å justere høyde av et objekt, viser vi visualiseringen ved å skalere en hel gjenstand opp og ned. Dette kan brukes til bakgrunnselementer i musikkbaserte spill, eller å ha partikler og andre effekter flytte til musikken.
Koden er stort sett den samme som barVisualizer
, med skaleringskommandoene forbedret til å skalere i tre dimensjoner:
#pragma strenge offentlige varedetaljer: int = 500; offentlig var minValue: float = 1.0; offentlig var amplitude: float = 0,1; privat var randomAmplitude: float = 1.0; privat var startSkala: Vector3; funksjon Start () startScale = transform.localScale; randomAmplitude = Random.Range (1.0, 3.0); funksjon Oppdatering () var info: float [] = ny float [detalj]; AudioListener.GetOutputData (info, 0); var pakketData: float = 0.0; for (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]); transform.localScale = new Vector3((packagedData * amplitude) + startScale.y, (packagedData * amplitude) + startScale.y, (packagedData * amplitude) + startScale.z);
Sett det på en sfære (eller et annet objekt du velger), og lag flere kopier for en fin effekt. Prøv det i denne bygningen:
I denne opplæringen lærte du hvordan du lager en enkel, selvstendig lydvisualiserer innenfor Unity, som kan brukes på mange forskjellige måter. Du kan bruke disse teknikkene til å designe psykedeliske lysvisninger som beveger seg i tid til musikk, eller som kildedata som tjener som grunnlag for et helt spill, som nivågenerering i Audiosurf, hvor hindringene du trenger for å unngå, vises i tide til slå. Bli gal!