[PLUGIN] RadiantUI SDK - UIs, HUDs, Interactive WebViews - HTML5/Javascript/CSS

RadiantUI has been upgraded to UE 4.6, and the full source code and example project has been released free-of-charge under the MIT license on GIT hub.

Existing licencees: The store will be taken offline but I will continue to support you through this release.

Key Features:

  • Render HTML/CSS/JavaScript to any surface/material in the game.
  • No C++ coding required, everything is done through blueprints and components.
  • Automatic Input handling: Walk up to any WebActor and use the mouse and keyboard automatically (Doom3 style interfaces).
  • Supports non-flat surfaces: You can map a WebActor onto any mesh and still interact with it (Curved computer screens etc).
  • Networked gameplay support: Multiple players can interact with the same WebActor and see the same output.

Thanks for watching!

Very interested in this! Would it be possible for this to support UE4 HTML5 deployment (as in UE4 compiled and packaged for WebGl html5 deployment?) Could be VERY powerful if so!

Looks really great! I’ll be getting it as soon as I can.

This looks promising and very reasonably priced.

Do you have more examples showcasing animated HUD for example? Also, more examples showing buttons, lists, menus, drag and drop, etc (WebViewHUD and HTML). I’d love to see what can be done for standard UI’s and what kind of pipeline it would involve for creating them and if it can be a viable replacement for Scaleform.

Thanks,

All of that can be done, but that’s up to you and how you create your UI in HTML and Javascript. Anything you can do will be rendered, there are animation systems like adobe edge animate that bring a flash level experience to HTML 5.

Check out this video for a bit of an introduction: Adobe Help Center

So the long and the short of it is, RadiantUI lets you bring all of these systems to bear in making UI’s possible in an integrated manner in your game, but it’s up to you to create the UI systems in HTML5 and Javascript.

I’m trying to add a staticmesh webview actor as a component of an existing blueprint that I am using as a player pawn. I’m having a hard time getting that to work. Any suggestions or workarounds?

You can only add components to actors, not other actors. What effect are you trying to achieve?

I’ll PM you …it’s a rather long winded description of the desired effect.

Hey , been poking around at Radiant and it seems like a nice complete package. Just had a small issue, it seems like the enter key is not being passed as input to the webview. I walked through the code, and it seems to my inexperienced eye that everything’s firing properly, but the webpage isn’t reacting to it. Any ideas?

I just tested this with a webview loading google.com and the ENTER key seems to be working. What website are you loading? Or do you have a more specific repro I can try?

Ok, I did some other tests and it does work, just not on a particular website (A page implementing a thing called Firebase). Seems like something was wrong with the input handling on that particular page, thanks for the help though :slight_smile:

Also, nice work making the Javascript calls so easy to set up, everything (So far) has just worked, very simple to use.

I was able to get everything working for my issues by bringing it in as a child actor component in the blueprint…works fine now. I noticed another issue though. Everything works fine in PIE (play in editor) but when I go to launch the actual game the radiant actors don’t show up. They don’t show up in the example scene provided either when using the launcher. Have I not installed it properly?

Ok so this is basically a packaged build of the game, and a couple folders have to be copied over, I need to do a proper video for this but the CefRuntime directory and your WebUI folder has to be copied over, I believe (going from memory here) into the same directory as your Binaries and Content folder gets placed. Right now UE4 won’t stage any directories for you, but they are adding this general functionality in one of the upcoming releases.

I’m sorry if that’s vague or doesn’t work, I’ll get a video put together here soon showing where they go so there’s no confusion.

How’s that video coming along? I just bought RadiantUI today and I’m really excited about sharing my demo builds for feedback, but I can’t get the UI working in the build either.

Any info re where to copy the relevant files from the RadiantUI setup would be appreciated!

Edit: I just realised you posted that comment earlier today so it’s probably a bit “too soon” to be asking for the video :slight_smile: But text instructions would be fine!

Here is a tutorial video covering how to package you game with the RadiantSDK plugin.

Hey Just thought I would say - This looks awesome!

Further more will there be UMG (Unreal Motion Graphics) support within RadiantSDK?

Thank you for making an awesome plugin!

  • HeadClot

Thanks for the instructions !

After initially forgetting to copy over the HTML content and getting a 105 error, I managed to get my demo working as per your instructions.

Here’s the final product in all its glory:

Thanks for such an awesome plugin and really clear tutorial videos. Definitely the best of breed at the moment! :smiley:

Awesome! Let me know if there’s anything else I can do.

I’m currently stuck trying to display a player’s sprint/energy (or other variables available in the Character blueprint) on the HUD.

I’ve watched your two JS callback videos however my context is incorrect because I’m trying to invoke the call from within the Character blueprint which I know is wrong – it’s just that I’m not sure how to set it up. I can see you’re doing the invoking from within BPDoorControl which inherits from BPMonitorScreen which in turn is a Web View.

I’m trying to implement a sprint bar so if you could explain how to communicate with a web view from the Character (or whether this is the wrong way to do it) that’d be great!

I’m currently stuck trying to display a player’s sprint/energy (or other variables available in the Character blueprint) on the HUD.

I’ve watched your two JS callback videos however my context is incorrect because I’m trying to invoke the call from within the Character blueprint which I know is wrong – it’s just that I’m not sure how to set it up. I can see you’re doing the invoking from within BPDoorControl which inherits from BPMonitorScreen which in turn is a Web View.

I’m trying to implement a sprint bar so if you could explain how to communicate with a web view from the Character (or whether this is the wrong way to do it) that’d be great!
[/QUOTE]

I’d add a function to your HUD class to display health that takes your health value, then I’d retrieve the WebView object at whatever HUDElement index you are using (probably 0) and invoke the appropriate calls.

Inside the Character blueprint you can get the HUD object, cast that to the ARadiantWebViewHUD and call your blueprint function to set the health.