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

#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

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 (el cual 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.

youtube_spectrum

Archivos del tutorial:

github

UE4 Project

Download

Download C++ Sources

2020/06/22 – Actualizado a Unreal Engine 4.24


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

15 − 4 =