Introducing my Victory HUD Elements System! Dynamic HUD System With Animation

Dear Community,

I am very happy to finally introduce you to my own personal Animated HUD System!

With my system I can:

-Add Text, Spinning Images, and more at any time from any blueprint. All of the various visual Elements come from a common base class, my Victory HUD Element.

  • I can animate any Victory HUD Element using a very simple blueprint setup that I created using just Switch on String to organize everything!

-Text is localized, FText, using Slate STextBlock. This means my HUD system takes full advantage of all the awesome work Epic has done to support localization of text!

  • I can even change the font at any time for any Text to any True Type font! It does not even have to be a UE4 UFont Asset, just the raw .ttf file from your favorite fonts collection!

If you watch the video carefully, I change the font of the Text exactly half way through the fade-in animation!


**The Purpose of Creation**

This is my own custom solution for creating HUD elements dynamically during runtime, or in the editor, and also animating them!

The Victory HUD Elements Engine

All of the core engine is done in C++, and in Blueprints I expose the ability to create elements, as well as initiate and respond to either animation completion events or animation notifies (user-specified events before the end of the animation sequence).

So Blueprints get to do what Blueprints do best, fast iteration times, quick modifications/tweaking, and ease of visual organization for an entirely visual system,

and all the fancy calculations are done in pure C++ at highest speeds.


**Core Data Type**

My core data type is a simple C++ class, not even a UObject, keeping my entire system as low-level as possible, below the UObject subsystem even!

Everything runs ultra fast and is light weight and also easy to use via BP :)

Ease of Use

My system is not bound to the HUD loop in terms of BP usability!

You can add elements any time, from anywhere!

My system is specifically designed to make it easy to respond to in-game events, which necessarily occur outside of the HUD loop.

You can display tutorial text if the player opens a door, or if the player jumps, or if 1 hour passed, or if the level is completed, anything!

The BP nodes are all global, usable any time, anywhere!

In the c++ I am of course using the DrawHUD loop, but the BP user is free to use my system any time, anywhere, in any BP.

Victory HUD Elements persist until the user chooses to remove them, allowing the user to create/delete whole pages, and add/remove a single element anytime without interfering with the rest of the page.

Enjoy the Video!

Let me know how you like it!

Rama

Rama at it again :slight_smile:

Are you looking to make this into a full UI solution (like coherent)?
Also since it is using slate (Yay!) does that mean it should support all platforms slate does (mainly looking at mobile/android)?
When can we start tinkering? :slight_smile:

Great job man!

another awesome job…cool stuff man…

Yes my system will work anywhere that UE4 works, as I am using only Slate and HUD draw functions :slight_smile:

The main focus of what I am developing is a system that is Slate and HUD based, and is wired for modifications / animations constructed and run during game time :slight_smile:

So the main thing I think is really different about my system is ability to create animations on the fly, during runtime, or in advance in the editor, using my really simple BP setup as shown in the video :slight_smile:

Another thing that I feel is unique about my system is that you can add/remove/modify any element in a global way from any BP! It is extremely easy to use in my experience, since I designed it to be that way :slight_smile:

I have more features to fully implement still, like lists and input fields, but I already had this working in prior iterations before I systemetized everything.

I am glad you like it!

Yay!

Hee hee!

Nice to hear from you !

:slight_smile:

Rama

Yay, this is what i was hoping for! Although i love things like coherent (being a web developer myself). Its nice to have a platform agnostic solution and leveraging slate i could see as being much more useful in the long haul if you are using lots of platforms.

Yes that is the Beauty of Slate!

Great point Krushin!

:slight_smile:

Rama

Rama… I just have a quick question, would it be possible to release another AWESOME tutorial on Slate? Preferably one that shows a UI that can tether to the character, sort of like a 3D UI? :smiley:

Can you explain what you want in greater detail?

Rama

Yes, I would like to make a user interface like the one in SAO but I don’t know where to start. It would be visible to all players in the server, but linked to the player who brings it up. Ex:

I will have to consider how to handle multiplayer shared-ui elements in more detail before I can get back to you on this.

Currently I am designing my multiplayer chat system, but designing a general-use multiplayer element that can also be positioned in the world over a character will require some time :slight_smile:

Rama

Victory Panels

I just finished my Panel Element !

The panel is an editable list that supports scrolling, custom backgrounds, and animation!


**Packaging and True Type Fonts**

The video was filmed from an independent game instance run from commandline, the editor was not loaded :)

I have already tested that my entire Victory HUD Elements system works perfectly in a packaged game, including custom .TTF files (TrueTypeFont).

Slate works directly with .TTF files, so my Victory HUD Elements system can use literally any font that exists in the world that is a .TTF

Fully Editable

Each text item in my Victory Panel can be fully editable!

In this video I edit various entries whenever I want by pressing F2 :slight_smile:

This is an option that I can easily turn off or on depending on the purpose of the panel.

Events are sent around in C++ and BP whenever an entry is edited so that action can be taken based on the user-input :slight_smile:


**Backgrounds**

I use 3 layers of backgrounds in the video, all of them are optional, and can be added in code or via BP using a simple AddBackground function

So the panel can just as easily be used with a T2D or Material Image as the background :)

Scroll Indicators

The scroll indicators can be set to any image any time, and also Tint Color can be chosen / set at any time.

This is my “compact” mode, I will add a full scroll bar later, but wanted to experiment with my own light-weight scroll indicator system for panels with not too many entries.


**Scrolling Animation**

I hope you enjoy my scrolling animation!

:)

Localization (Multi-Cultural Text)

All of the text of the panel is FText, thus fully supporting UE4’s Localization system.

The core of the Victory HUD Element Text is an STextBlock, standard Engine Slate widget, with some surrounding superstructure for easily changing position and setting color.

So as UE4 Devs continue to update the STextBlock, my Victory HUD system will enjoy their beneficial additions :slight_smile:


**Dynamic Update of SubElements**

The panel updates all of its subelements (text and backgrounds) when it is moved!

In the video I move the panel around to follow the cursor, and then continue editing/scrolling etc!

Animation

The panel can also animate!

In my Victory HUD Elements system, getting a new Element to support animation is easy!

Every animation tick event, such as fade, move, resize, is broken down into individual virtual functions.

So adding the ability for my new Panel Element to support Fade took literally about 3 minutes :slight_smile:

This is the only CPP code I have to write to initiate the Fade Animation, using my Victory HUD Elements System


PanelDemo->Color.A = 0; //set alpha to 0
PanelDemo->AddAnimationFade("PanelDemoFade",2,1);//duration 2 seconds, fade to full opacity

Enjoy the Video!

Rama

Rama, you are the man :slight_smile: When do you think we will be able to test your system out? Let me know if you need any help testing.

I’m extremely excited about the multiplayer chat system! I hope you keep up the awesome work so I can keep doing your tutorials!:smiley:

Hee hee okay I will!

I don’t know when I’ll be releasing first builds, but I’ll be sure to let you know!

Great to hear from you!

I am almost done with chat system :slight_smile:

Dear Community,

This video demonstrates my Victory HUD Multiplayer Chat Panel!

This is a real Steam-based multiplayer game between me and two other community members.

The second community member shows up in quite the entertaining way! (I was so busy typing I did not see his arrival :slight_smile: )

I used Steam to power the multiplayer setup, I have an in-game custom Steam friends browser where you can just click on the names of friends who are playing the same game to join them (if they are hosting).

Rama

Rama’s chat system is great, works perfect!

Loved his implementation of the Steam friends list too, it shows who’s online and paints with another color who’s playing the game. Then you can just click their name to join them! He even implemented smooth scrolling. BTW, you could do that to the chat window too.

Hee hee! Thanks Ixiguis!

:slight_smile:

Rama

Now if only rama created a system that created the game for you :stuck_out_tongue_winking_eye: haha jk.

Very neat i’m going to start looking to steam myself since i only just now realized you can use their api for prototyping/developing!

Outside of the networking aspects, is the BP HUD driving all of it?

The BP HUD interface I made absolutely can drive all of it!

The chat system as it is currently implemented is set up in BP, for customizing colors and font and such, and then the rest is done for you in C++

:slight_smile:

Great to hear from you Krushin!

Rama