frequency_visualizer_2_featured

en Tutoriales, UE4

UE4 Visualizador del espectro de frecuencias

Este tutorial implementa un Widget de UE4 para visualizar el análisis de espectro generado en el tutorial anterior (Part 3: Frequency spectrum), válido tanto para plataforma Win64 como Android.

Parte 1: Configurando las rutas del proyecto
Parte 2: Usando la librería
Parte 3: Espectro de Frecuencias
Parte 4: Visualizador de espectro para UE4
Parte 5: Algoritmo detector de pulsos
Parte 6: Visualizador de pulso para UE4


El primer paso es modificar nuestra clase de C++ AudioManager y añadirla las funciones para inicializar y pedir los datos del espectro, así como la función que actualiza la instancia del sistema FMOD.

AudioManager.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#pragma once
 
#include "CoreMinimal.h"
 
#include "SoundManager_Fmod.h"
#include <memory>
 
#include "UObject/NoExportTypes.h"
#include "AudioManager.generated.h"
 
UCLASS(Blueprintable, BlueprintType)
class TUTORIAL_SPECTRUM_API UAudioManager : public UObject
{
	GENERATED_BODY()
public:
	UFUNCTION(BlueprintCallable, Category = Init)
		int32 InitializeManager();
	UFUNCTION(BlueprintCallable, Category = Init)		int32 InitSpectrum_Linear(const int32 numBars);	UFUNCTION(BlueprintCallable, Category = Init)		int32 InitSpectrum_Log(const int32 numBars); 
	UFUNCTION(BlueprintCallable, Category = Actions)
		int32 PlaySong();
	UFUNCTION(BlueprintCallable, Category = Actions)
		void PauseSong(bool unPause);
	UFUNCTION(BlueprintCallable, Category = Actions)		void Update(); 
	UFUNCTION(BlueprintPure, Category = Access)
		const FString& GetSongName() const;
	UFUNCTION(BlueprintCallable, Category = Access)		void GetSpectrum_Linear(TArray<float>& frequencyValues, const int32 effectiveBars);	UFUNCTION(BlueprintCallable, Category = Access)		void GetSpectrum_Log(TArray<float>& frequencyValues, const int32 effectiveBars); 
	UAudioManager();
	~UAudioManager();
 
private:
 
	std::unique_ptr<SoundManager_Fmod> _soundManager;
	FString currentSongName;
 
};

Y la implementación de las nuevas funciones:

AudioManager.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
void UAudioManager::Update()
{
	_soundManager->update();
}
 
int32 UAudioManager::InitSpectrum_Linear(const int32 maxBars)
{
	return _soundManager->initializeSpectrum_Linear(maxBars);
}
 
void UAudioManager::GetSpectrum_Linear(TArray<float>& frequencyValues, int32 numBars)
{
	frequencyValues.Init(0.0, numBars);
	_soundManager->getSpectrum_Linear(frequencyValues.GetData());
}
 
int32 UAudioManager::InitSpectrum_Log(const int32 maxBars)
{
	return _soundManager->initializeSpectrum_Log(maxBars);
}
 
void UAudioManager::GetSpectrum_Log(TArray<float>& frequencyValues, int32 numBars)
{
	frequencyValues.Init(0.0, numBars);
	_soundManager->getSpectrum_Log(frequencyValues.GetData());
}

Blueprints

Vamos a reutilizar los mismos blueprints del tutorial Parte 2: Usando la librería con los que montamos un reproductor básico.
blueprint_content
GameBP no necesita modificaciones, pero UI_Player ahora deberá contener el visualizador del espectro.

Necesitamos dos widgets mas, uno para controlar la barra y otro para controlar el espectro ( que va a ser un contenedor widgets de barra).

Widget de Barra

Nuestro widget de barra necesita una imagen cuya altura se vera modificada según un valor de progreso.
UI_bar_design
Para hacerla más vistosa podemos crear un material para cambiar el color de la barra en relación a su progreso, interpolando entre dos colores. El material para controlar el color de esta imagen puede verse aquí:

spectrum_bar_material

Material color bar


Crearemos Una Instancia Dinámica del Material en la inicialización de la barra.
UI_bar_initialize
En la función setProgress estableceremos el valor del material para actualizar el color de la barra y aplicaremos el factor de escala de la componente Y de la imagen para definir su altura.
UI_bar_setProgress

Widget de Espectro

El widget de espectro tiene un contenedor de widget de barras para que sea más fácil en acceso a estas.
UI_spectrum

El widget de barra se añade de manera dinámica al contenedor durante la inicialización.
UI_spectrum_initbars
UI_spectrum_initdisplay

La función que utilizaremos para establecer las nuevas frecuencias a las barras tiene un parámetro de entrada para ajustar la altura del espectro al tamaño de ventana deseada.
UI_spectrum_setfreq

Widget del reproductor

Ahora podemos añadir dos espectros a nuestro UI_player, uno para el espectro lineal y otro para el logarítmico.
Para ello simplemente buscamos el tipo de widget UI_spectrum en la paleta de componentes de la pestaña de Diseño y la añadimos directamente a la jerarquía. Vamos a añadir dos funciones mas al widget, una para inicializar ambos espectros y la otra para actualizarlos.(InitializeVisualizers y UpdateVisualizers).
UI_player_general
UI_player_design

Podemos llamar a la inicialización de los espectros cuando se muestre el widget del reproductor.
UI_player_show
UI_player_initializeVisualizers

Para actualizar los datos de los espectros tendremos que añadir el nodo Update de nuestro AudioManager para actualizar los datos del DSP de FMOD y entonces llamar a los nodos getSpectrum , según el tipo de espectro,para obtener la nueva información de sus barras.
UI_player_tickEvent
UI_player_updateVisualizers

Ahora ya tenemos un visualizador de espectro de frecuencias totalmente funcional tanto para plataforma Win64 como Android.

Archivos del tutorial:

github

UE4 Project

Download

Download C++ Sources

Download

Download Blueprints


Ayudanos con este blog!

El último año he estado dedicando cada vez más tiempo a la creación de tutoriales, en su mayoria sobre desarrollo de videojuegos. Si crees que estos posts te han ayudado de alguna manera o incluso inspirado, por favor considera ayudarnos a mantener este blog con alguna de estas opciones. Gracias por hacerlo posible!


Escribe un comentario

Comentario

6 + 17 =