Run Voice Over with Subtitles

I’m getting back to ShooterTutorial initiative after Epic Mega Jam and I get request about running voice overs with subtitles. (yes you can request tutorials! just comment or contact me)

So in this quick UE4 Tip I will create blueprint to show subtitles.

Basics

Basically this won’t be great subtitles system (which can be done in C++) but it should be enough for small projects.

First of all you should think the methods of showing subtitles in your game:

  • If you have RPG game with lot of dialogues, VO and subtitles should be added on top of dialogue system,
  • If you want to create narrator for your game the best way would be create couple of behavior trees that will run VO with subtitles,
  • Almost every dialogue have sequence so you should store them in some kind of array,

What I will do is to create Actor that stores VO and Subtitles for some sequence and by spawning the Actor it will be activated. It’s really simple.

Subtitle Structure

Start by creating new Structure named SubtitleInfo which will have:

  • VO – Sound Wave Reference,
  • Subtitle – String,
  • CustomDilation – float, (this will be used if we want to have our own time dilation instead of VO duration)

UMG

Create new widget named Debug_Subtitles. Open it and add Text from Palette.  Be sure “Is variable” is set and Auto Wrap Text is set as well.

Go to Graph Editor and add those variables:

  • SubtitleDrawingDelay (float),
  • AccumulatedDelay (float),
  • CurrentSubtitle (string),
  • SubtitleCharArray (string array),
  • Counter (int),
  • Subtitle (Subtitle Info),

Be sure that Text that you have added is binded to CurrentSubtitle string.

bindcurrentsubtitle

Open event graph again and add one Dispatcher named OnFinished.

Now create new custom event named PrintSubtitle:

printsubtitle

This is basically iterating for all characters and displaying them one by one creating nice animation:

Next create another custom event named StartDrawing:

StartDrawing

As you can see this is setting up variables that will be used in PrintSubtitle event. That’s all in UMG!

Subtitles Actor

Create new Blueprint based on Actor named SubtitlesActor and add those variables:

  • CurrentIndex (int),
  • WidgetRef (Debug_Subtitles reference – widget created earlier)
  • MySubtitles (SubtitleInfo Array, Editable and Exposed On Spawn)

Create new custom event named Next:

Next

What this does:

  1. Draw subtitle on current index,
  2. When current subtitle was ended: increase current index, (OnFinished dispatcher)
  3. Draw subtitle on current index,
  4. If all subtitles was shown destroy the widget and the actor.

It’s really simple.

Last thing to do here is to create another custom event named PlaySubtitle which will call Next event, and that’s all!

Displaying Subtitles

What you can do is to extend from the base subtitle actor and set your Subtitle Info structure, then just spawn the actor or set it up without creating new actor.

The best way to test it our is to open your level blueprint and add this:

spawnsubtitle

I have used those sounds for test:

http://freesound.org/people/SoundEffectsPodcast_com/sounds/256091/

http://freesound.org/people/Corsica_S/sounds/76850/

Hope it will be helpful for you guys!

Creating ShooterTutorial takes a lot of my free time.
Buy Now Button
If you want you can help me out! I will use your donation to buy better assets packs and you will be added to Credits /Backers page as well.

Implementing game is taking time but writing about it is taking much more effort!

 

3 thoughts on “Run Voice Over with Subtitles

  1. Pingback: Menu – Level Selection – UMG | Shooter Game Tutorial

  2. I know that there has been three years since you made this tutorial and things have changed quite a bit. I cannot find the variable type Subtitle Info, couldn’t find any information about it online either. Maybe I misunderstood something. Could you assist me on this? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.