Share
Wat je gaat creërenIn deze tutorial leer je hoe je een eenvoudige audio-visualizer kunt maken in Unity. We gaan door de code die de audiogegevens uitleest en vervolgens op verschillende manieren om deze gegevens toe te passen in een Unity-game.
Je hebt een basisbegrip van Unity nodig om dit te bereiken. Je hebt ook het muziekbestand van een nummer nodig om te visualiseren - zoek iets op newgrounds.com als je iets leuks nodig hebt, zoals Mission Completed XL.
De projectbestanden zijn te vinden op GitHub, als je ze wilt bekijken, maar niet strikt noodzakelijk om dit te bereiken. De .unity3d bestand dat we later zullen gebruiken, is ook daar.
Klaar? Laten we gaan!
Maak een nieuw Unity Project, voeg uw muziekbestand toe aan de activamap, maak vervolgens een nieuw JavaScript-bestand aan en geef het een naam lineVisualizer. Open dit bestand en voeg de volgende code toe:
public var detail: int = 500; public var amplitude: float = 0,1; private var startPosition: float; function Start () startPosition = transform.localPosition.y; functie Update () var info: float [] = new float [detail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0,0; voor (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]);
Dit script neemt de beschikbare audiogegevens en past het op bepaalde manieren toe. De detailvariabele vertelt het met welke "resolutie" de audiogegevens worden uitgelezen. Hogere waarden op deze plek kunnen een "zenuwachtiger" resultaat opleveren. U kunt later experimenteren om de beste instelling te vinden en deze voorlopig op de basiswaarde te laten staan.
Op dit moment doet het niets, omdat we niet hebben gespecificeerd wat er te doen is en waar we naar moeten luisteren.
Voeg de volgende regel toe aan het einde van de Bijwerken() functie in de lineVisualizer script:
transform.localPosition.y = startPosition + packagedData * amplitude;
Maak vervolgens een bol, noem die LineVisualizer, en voeg het script eraan toe. Verplaats de LineVisualizer voor de camera.
We moeten ook het geluid in de scène hebben, dus daar komen we aan. Maak een nieuw object en noem het Geluidsbron; het zal de "spreker" zijn die de muziek maakt. U kunt het muziekbestand slepen vanuit de activamap waarin het zich bevindt, en het zal het bestand onmiddellijk beginnen af te spelen bij het starten van de scène.
Voordat we het echter proberen, stelt u de audiocomponent in op speel meteen en naar lus. Ga ook naar het muziekbestand zelf en stel het in op 2D geluid. Dit zorgt ervoor dat de muziek net zo goed te horen is, waar dan ook Geluidsbron is geplaatst. Maak er tot slot een prefab van, zodat we het later kunnen gebruiken.
Als alles correct is ingesteld, is de lineVisualizer moet op en neer bewegen. Succes! De audiogegevens worden op een leuke en interessante manier uitgelezen en toegepast.
Laten we het nu mooier maken.
Maak een leeg object en voeg er een trail-renderer aan toe en koppel het aan de lineVisualizer. Deze trail-instellingen zullen een leuk effect creëren:
Keten de LineVisualizer naar de camera, zodat deze beweegt wanneer de camera beweegt. De setup zou er als volgt uit moeten zien:
Maak vervolgens een klein JavaScript-bestand met de naam rotation.js, en voeg de volgende code eraan toe:
#pragma strict var speed: float = 15.0; functie Update () transformation.Rotate (0, speed * Time.deltaTime, 0);
Plaats het rotatiescript op de camera, zodat deze rond zichzelf draait.
Probeer het! De bol moet op en neer stuiteren en een lijn erachter trekken.
Om het mooier te maken, moet je de kubus onzichtbaar maken door de mesh-renderercomponent ervan uit te vinken en iets dieper te plaatsen zodat deze niet uit het scherm springt. Stel de achtergrondkleur van de camera ook in op zwart, voeg een gericht licht toe aan de scène en geef het pad een mooie kleur en materiaal.
Je zou een eenvoudige lijnvisualizer moeten hebben, die met de muziek op en neer springt en een passende lijn rond tekent. Probeer het in deze build:
Bar-visualizers zijn een beetje lastiger. We zullen verschillende "balken" naast elkaar plaatsen, die op hun eigen manier naar de muziek zullen springen. Het is veel gecompliceerder om een "echte" bar-visualizer klaar te krijgen dan deze vrij eenvoudige introductie kan omvatten, dus we zullen een nep-versie moeten maken (wat er sowieso goed uit zal zien).
In de projectbestanden vindt u een 3D-bestand met een speciale kubus. Het is niet strikt nodig, zodat je het kunt overslaan als je dat wilt.
Maak een nieuwe kubus en verwissel het standaard kubusnetwerk voor het voorgaande visualizerCube mesh. De nieuwe heeft zijn middelpunt aan één kant. Wanneer we de kubus opschalen tijdens runtime, beweegt deze zich alleen in één richting.
Maak een nieuw script met de naam barVisualizer. Voeg de volgende code toe:
#pragma strict public var detail: int = 500; public var minValue: float = 1.0; public var amplitude: float = 0,1; privé var startScale: Vector3; functie Start () startScale = transform.localScale; functie Update () var info: float [] = new float [detail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0,0; voor (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]); transform.localScale = new Vector3(minValue, (packagedData * amplitude) + startScale.y, minValue);
Het is vergelijkbaar met de lineVisualizer script, maar de opdrachten die de positie aanpassen, zijn gewijzigd. Ze passen nu de verticale hoogte van de kubus aan.
Maak een kubus, noem hem BarVisualizer, geef het een mooie kleur en plaats het script dat je zojuist hebt gemaakt erop. Maak vervolgens meerdere exemplaren ervan en plaats ze naast elkaar voor de camera. Het zou er zo uit moeten zien:
Als je het uitprobeert, zul je merken dat alle blokjes op dezelfde manier bewegen. Om elke kubus te laten groeien en krimpen als balken, pas de code aan om er als volgt uit te zien:
#pragma strict public var detail: int = 500; public var minValue: float = 1.0; public var amplitude: float = 0,1; private var randomAmplitude: float = 1.0; privé var startScale: Vector3; functie Start () startScale = transform.localScale; randomAmplitude = Random.Range (0.5, 1.5); functie Update () var info: float [] = new float [detail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0,0; voor (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);
Dit geeft elke staaf zijn eigen "sterkte", waarmee hij beweegt. Je kunt het effect in deze build zien:
Deze is een beetje anders. In plaats van het aanpassen van hoogte van een object, laten we de visualisatie zien door een volledig object op en neer te schalen. Dit kan worden gebruikt voor achtergrondelementen in op muziek gebaseerde games, of om deeltjes en andere effecten naar de muziek te laten bewegen.
De code is vrijwel hetzelfde als de barVisualizer, met de schaalopdrachten uitgebreid om ook in drie dimensies te schalen:
#pragma strict public var detail: int = 500; public var minValue: float = 1.0; public var amplitude: float = 0,1; private var randomAmplitude: float = 1.0; privé var startScale: Vector3; functie Start () startScale = transform.localScale; randomAmplitude = Random.Range (1.0, 3.0); functie Update () var info: float [] = new float [detail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0,0; voor (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);
Plaats het op een bol (of een ander object naar keuze) en maak meerdere kopieën voor een leuk effect. Probeer het in deze build:
In deze zelfstudie leer je hoe je een eenvoudige, op zichzelf staande audio-visualizer kunt maken binnen Unity, die op veel verschillende manieren kan worden toegepast. Je zou deze technieken kunnen gebruiken om psychedelische lichtshows te ontwerpen die in de tijd naar muziek bewegen, of als brongegevens die als basis dienen voor een compleet spel, zoals de niveau-generatie in Audiosurf, waar de obstakels die je moet vermijden op tijd verschijnen bij de verslaan. Ga wild!
Accentsconagua