Dans ce didacticiel, vous allez apprendre à créer un visualiseur audio simple dans Unity. Nous allons passer en revue le code qui lit les données audio, puis plusieurs manières d'appliquer ces données dans un jeu Unity..
Pour cela, vous aurez besoin d’une compréhension de base de l’Unité. Vous aurez également besoin du fichier de musique d’une chanson pour visualiser. Trouvez quelque chose sur newgrounds.com si vous avez besoin de quelque chose d’amusant, comme Mission Completed XL..
Les fichiers de projet peuvent être trouvés sur GitHub, si vous voulez les extraire, mais ne sont pas strictement nécessaires pour accomplir cela. le .Unity3d
fichier, nous utiliserons plus tard est également là.
Prêt? Allons-y!
Créez un nouveau projet Unity, ajoutez votre fichier de musique au dossier des ressources, puis créez un nouveau fichier JavaScript et nommez-le. lineVisualizer
. Ouvrez ce fichier et ajoutez le code suivant:
public var detail: int = 500; amplitude var publique: float = 0,1; var privé startPosition: float; function Start () startPosition = transform.localPosition.y; function Update () var info: float [] = nouveau float [détail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0.0; pour (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]);
Ce script prendra les données audio disponibles et les appliquera de certaines manières. La variable de détail lui indique avec quelle "résolution" lire les données audio. Des valeurs plus élevées dans cet endroit peuvent créer un résultat plus "nerveux". Vous pouvez expérimenter pour trouver le meilleur réglage plus tard, et le laisser pour le moment à la valeur de base.
Pour le moment, il ne fait rien, car nous n'avons pas précisé ce qu'il y a à faire et ce qu'il faut écouter.
Ajouter la ligne suivante à la fin du Mettre à jour()
fonctionner dans le lineVisualizer
scénario:
transform.localPosition.y = startPosition + packagedData * amplitude;
Ensuite, créez une sphère, nommez-la Visualiseur de ligne
, et ajoutez le script à cela. Bouge le Visualiseur de ligne
devant la caméra.
Nous devons également avoir le son dans la scène, alors passons à cela. Créez un nouvel objet et nommez-le Source audio
; ce sera le "haut-parleur" qui crée la musique. Vous pouvez faire glisser le fichier de musique du dossier de ressources sur celui-ci et la lecture du fichier commencera immédiatement au démarrage de la scène..
Avant de l'essayer, cependant, réglez le composant audio sur jouer immédiatement et à boucle. De plus, accédez au fichier de musique et réglez-le sur Son 2D. Cela garantira que la musique pourra être entendue également, quel que soit le Source audio
est placé. Enfin, faites-en un préfabriqué pour pouvoir l’utiliser plus tard.
Si tout a été configuré correctement, le lineVisualizer
devrait monter et descendre. Succès! Les données audio sont lues et appliquées de manière amusante et intéressante..
Maintenant rendons-le plus joli.
Créez un objet vide et ajoutez-lui un rendu de suivi, puis chaînez-le au lineVisualizer
. Ces paramètres de piste créeront un bel effet:
Enchaîner Visualiseur de ligne
à la caméra, de sorte qu'il bouge quand la caméra bouge. La configuration devrait ressembler à ceci:
Ensuite, créez un petit fichier JavaScript appelé rotation.js
, et ajoutez-y le code suivant:
#pragma strict var speed: float = 15.0; fonction Update () transform.Rotate (0, vitesse * Time.deltaTime, 0);
Placez le script de rotation sur la caméra pour qu'elle tourne autour d'elle-même.
Essaye le! La sphère doit rebondir de haut en bas et tracer une ligne derrière elle.
Pour le rendre plus joli, désactivez le contrôle de son composant de rendu de maillage et désactivez-le, puis placez-le un peu plus bas pour qu’il ne sorte pas de l’écran. Définissez également la couleur d'arrière-plan de la caméra sur le noir, ajoutez une lumière directionnelle à la scène et donnez au parcours une belle couleur et du bon matériau..
Vous devriez avoir un visualiseur de ligne simple, qui sautera avec la musique et tracera une ligne appropriée. Essayez-le dans cette version:
Les visualiseurs de bar sont un peu plus compliqués. Nous mettrons plusieurs "barres" les unes à côté des autres, qui passeront à la musique, chacune à leur manière. Obtenir un "vrai" visualiseur de barres est bien plus compliqué que cette introduction assez simple ne peut couvrir, nous devrons donc en créer un faux (qui aura l'air bien quand même).
Dans les fichiers de projet, vous trouverez un fichier 3D avec un cube spécial. Ce n'est pas strictement nécessaire, afin que vous puissiez le sauter si vous voulez.
Créez un nouveau cube et remplacez le maillage de cube standard par celui-ci. visualizerCube
engrener. Le nouveau a son centre sur un bord. Lorsque nous mettons à l'échelle le cube lors de l'exécution, il ne se déplacera que dans une direction..
Créez un nouveau script appelé barVisualizer
. Ajoutez le code suivant:
#pragma strict public var detail: int = 500; public var minValue: float = 1.0; amplitude var publique: float = 0,1; var privé startScale: Vector3; function Start () startScale = transform.localScale; function Update () var info: float [] = nouveau float [détail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0.0; pour (var x: int = 0; x < info.Length; x++) packagedData += System.Math.Abs(info[x]); transform.localScale = new Vector3(minValue, (packagedData * amplitude) + startScale.y, minValue);
C'est semblable au lineVisualizer
script, mais les commandes qui ajustent la position ont été modifiées. Ils ajustent maintenant la hauteur verticale du cube.
Créez un cube, appelez-le BarVisualizer
, donnez-lui une belle couleur et placez-y le script que vous venez de créer. Créez ensuite plusieurs copies et placez-les l'une à côté de l'autre devant la caméra. Ça devrait ressembler à ça:
Si vous l'essayez, vous remarquerez que tous les cubes se déplacent de la même manière. Pour que chaque cube grossisse et se rétrécisse comme des barres, adaptez le code de la manière suivante:
#pragma strict public var detail: int = 500; public var minValue: float = 1.0; amplitude var publique: float = 0,1; private var randomAmplitude: float = 1.0; var privé startScale: Vector3; function Start () startScale = transform.localScale; randomAmplitude = Random.Range (0,5, 1,5); function Update () var info: float [] = nouveau float [détail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0.0; pour (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);
Cela donne à chaque barre sa "force", avec laquelle elle se déplace. Vous pouvez voir l'effet dans cette construction:
Celui-ci est un peu différent. Au lieu d’ajuster le la taille d'un objet, nous allons montrer la visualisation en mettant à l'échelle un objet entier de haut en bas. Ceci peut être utilisé pour les éléments d'arrière-plan dans les jeux basés sur la musique, ou pour faire en sorte que des particules et d'autres effets se déplacent vers la musique..
Le code est à peu près le même que le barVisualizer
, avec les commandes de redimensionnement améliorées pour également redimensionner en trois dimensions:
#pragma strict public var detail: int = 500; public var minValue: float = 1.0; amplitude var publique: float = 0,1; private var randomAmplitude: float = 1.0; var privé startScale: Vector3; function Start () startScale = transform.localScale; randomAmplitude = Random.Range (1.0, 3.0); function Update () var info: float [] = nouveau float [détail]; AudioListener.GetOutputData (info, 0); var packagedData: float = 0.0; pour (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);
Placez-le sur une sphère (ou tout autre objet de votre choix) et créez plusieurs copies pour obtenir un bel effet. Essayez-le dans cette version:
Dans ce tutoriel, vous avez appris à créer un visualiseur audio simple et autonome dans Unity, qui peut être appliqué de différentes manières. Vous pouvez utiliser ces techniques pour concevoir des jeux de lumière psychédéliques se déplaçant au fil de la musique ou comme données source servant de base à un jeu entier, comme la génération de niveau dans Audiosurf, où les obstacles à éviter apparaissent au fil du temps. battre. Devenir fou!