BLUI Open Source HTML5/JS/CSS HUD/UI

Community Showcase Game Development
1

Greetings!

Current Release: https://img.shields.io/github/release//BLUI.svg?style=flat-square

Check GitHub release page for changelog

You may have seen my post about my Chromium Embedded Framework powered UI engine. But it’s made so many strides recently that I’ve decided it needs a new thread.
First off, it’s completely redone!

Here’s a few demos:

and

Grab it here!

Quick Start Wiki

JavaScript Events Wiki

Demo Project (currently needs to be updated to 3.0, hang tight!)

Do you use BLUI in your project? I’d really love it if you credit me and it! You can even use the logo right here!

As you can see, we’re using plain old HTML loaded from disk, rendered to a texture, then painted on an image widget using a UMG brush!

I’m trying to make the blueprint system as simple as possible, there aren’t any dependencies on specific display methods, allowing you to instantiate a “BluEye” within ANY blueprint, set the options using blueprints, then grab the material instance using a node that you can paint on ANYTHING you like. There are also helper nodes and functions to pass mouse input, and keyboard input into the “browser.”

Once again. It’s free, MIT licensed, and is powered by CEF.

GitHub Link: https://github.com//BLUI

Here’s a quick technical run down on how it works!

  • The plugin spawns off a CEF process in the background
  • This process is like the Chrome browser, it will take care of loading the page, js, css etc.
  • The plugin sips off the render buffer of CEF
  • Translates that into a texture
  • And forwards any input to the browser
  • That’s it!

There is minimal impact on performance as all the HTML page loading happens in another process. The texture also only updates when Chromium requests a redraw, it does not redraw every tick!

This is open source! If you find bugs, hit me up or file an issue on the Github page! Better yet, fix it yourself if you’re up to the challenge and make a pull request!

Please make pull requests, leave feedback, and let me know what you think! I hope this makes your lives easier while developing with the UE engine!

BLUI got featured on the community spotlight!

At time marker 45:15

BLUI Got a Dev Grant!

Check out the batch of grants here!

This is an honor! I never expected any of my projects to advance this far! I only have you guys to thank so…

Thanks guys!

  • Shea
2 Likes
2

looking sweet. Seems just like radiantsdk.com which is good cause I can’t make that work and my game really needs something like this…development is so much more important but will there be an how to videos any time soon to walk us through it.

3

[QUOTE=bronergames;216422]
looking sweet. Seems just like radiantsdk.com which is good cause I can’t make that work and my game really needs something like this…development is so much more important but will there be an how to videos any time soon to walk us through it.

I will be creating a video! Hopefully tomorrow!

4

Sounds good, Ill def be one of the first to try it out, nice work

5

Thanks for the feedback!

Quick Start Wiki!

Should give some more information on how to get going!

6

This looks interesting!

[QUOTE]
Copy all contents of shipping into your packaged game’s GameName/Binaries/Win64, these are the required files for the Chromium process.

But what about Win32??
Can I add a “web browser” which opens youtube in game for example? How are keyboard/mouse inputs handled?

7

[QUOTE=BrUnO XaVIeR;219088]
This looks interesting!

But what about Win32??
Can I add a “web browser” which opens youtube in game for example? How are keyboard/mouse inputs handled?

The CEF Build used with BLUI is only Windows 64 bit, with some work you could replace these libraries with the 32 bit version from the CEF Builds site.

As far as input goes, take a look at the Example HUD blueprint in the Release zip file, there are blueprint nodes in the BluEye class for help with input

8

I mean, how to handle input on a plane like I were navigating in Chrome, not HUD controls.
Show mouse cursor on the plane, make it receive keyboard input, etc.

I’ve tested it and looks pretty great and simple install. The simpler one I’ve seen so far; But it’s early in development, right.
There’s no way to shutdown a instance, it is still running until I close UE4 Editor.
Even when I stop playing the game it is still running.

I mean, if I set it to disabled, rendering will stop; But try doing that on a page of a video online. The video is still running on the background even if the rendering of the plane in-game has stopped.
Also, the rendering is always on square texture?!

9

[QUOTE=BrUnO XaVIeR;219635]
I mean, how to handle input on a plane like I were navigating in Chrome, not HUD controls.
Show mouse cursor on the plane, make it receive keyboard input, etc.

I’ve tested it and looks pretty great and simple install. The simpler one I’ve seen so far; But it’s early in development, right.
There’s no way to shutdown a instance, it is still running until I close UE4 Editor.
Even when I stop playing the game it is still running.

I mean, if I set it to disabled, rendering will stop; But try doing that on a page of a video online. The video is still running on the background even if the rendering of the plane in-game has stopped.
Also, the rendering is always on square texture?!

Hello again, BLUI tries to not be in the way at all and only provide the functions necessary to create your own custom solutions. It does not assume anything about the project.
That being said, BluEye instances shut down their browsers when they are destroyed by the engine. The processes you see (should be about two) while the editor is idle are simply something CEF3 must do. They also provide the remote page inspection tools page on port 7777.

If you want to stop a video, use something like the youtube player API and execute javascript to pause the video when you pause rendering. Destroying a BluEye is like closing the tab in chrome, it will lose all state.
But if you want to close the browser by force I’ll be adding a method for this in the next 1.2 release.

For keyboard input, I would recommend overriding the viewport class in C++ and intercepting the key input events from there. For mouse input, without a UMG widget in 3D space you need to take care of calculating mouse input yourself. On a plane, it won’t be to hard, just fire a trace and figure out where it hits, translate that to X,Y coords and run the mouse click method.

I’m not sure what you mean by

[QUOTE]

Also, the rendering is always on square texture?!

It’s a simple texture created from the buffer from CEF’s paint event

It is very early in development, so please keep this in mind, hope this answered your questions.

10

Thank you for the reply. the thing with ‘square texture’ is, I’m trying to have the page rendering on a 19:6 quad but the output image is always a “browser window” of around 512x512 with scrollbars on it.
I guess is the default “window size” ?! If you could point to me where in the source I can change that to go on and keep experimenting with the plugin would be great.

Edit: nevermind. Found it :slight_smile:

I’ve added a blueprint to destroy the “tab” process because I want it to stop running when Player leaves by overlapping a trigger box.
Now I will take a look at input routines… But hope a ‘force destroy’ function is added when you update as well. Thank you, this plugin is great :slight_smile:

11

[QUOTE=BrUnO XaVIeR;219682]
Thank you for the reply. the thing with ‘square texture’ is, I’m trying to have the page rendering on a 19:6 quad but the output image is always a “browser window” of around 512x512 with scrollbars on it.
I guess is the default “window size” ?! If you could point to me where in the source I can change that to go on and keep experimenting with the plugin would be great.

Edit: nevermind. Found it :slight_smile:

I’ve added a blueprint to destroy the “tab” process because I want it to stop running when Player leaves by overlapping a trigger box.
Now I will take a look at input routines… But hope a ‘force destroy’ function is added when you update as well. Thank you, this plugin is great :slight_smile:

Yup, just change the size values (Width and Height) before calling init() (you can also set these in blueprints) on the BluEye instance. Thanks for the feedback, I’ll be making a force destroy method in 1.2

12

Can’t seem to get it work that I am seeing a gray ui. Could make project file. Using the plugin.

13

@Lightnet You have to set for current Level in your ‘World Settings’ your custom GameMode which ticks the BluManagerLoop()…

The Tick override would be something like this:


void A**PROJECTNAME**GameMode::Tick(float DeltaSeconds){
	Super::Tick(DeltaSeconds);
	BluManager::doBluMessageLoop();
}
14

I did that and nothing happen. I am using the UE 4.6.1 version.

Never mind there was just a bug for some reason it didn’t run right. Had to make a new project.

15

[QUOTE=Lightnet;220487]
I did that and nothing happen. I am using the UE 4.6.1 version.

Never mind there was just a bug for some reason it didn’t run right. Had to make a new project.

Glad you could resolve it

16

Hey , just for my only early education. Does your plugin support adding a camera view? I want to be able to build a lil hud that can slide open and show a in game security camera.

17

blu_ue4_process instances are supposed to get killed when we hit the “Stop” button in editor, but the only fade away is if we close UE4 Editor itself. Any ideas on how to fix that? I don’t know if UE4 fires an event whe finishing Play mode that Blui could hookup the BeginDestroy() function.
At current state it causes sever memory leaks in Editor, if you hit Play/Stop many times a lot of parentless processes and textures will be left in memory with no use for them.

18

[QUOTE=BrUnO XaVIeR;220867]
blu_ue4_process instances are supposed to get killed when we hit the “Stop” button in editor, but the only fade away is if we close UE4 Editor itself. Any ideas on how to fix that? I don’t know if UE4 fires an event whe finishing Play mode that Blui could hookup the BeginDestroy() function.
At current state it causes sever memory leaks in Editor, if you hit Play/Stop many times a lot of parentless processes and textures will be left in memory with no use for them.

Hello again, I am not getting this behavior on my end, this might be because the UMG widget in my test project does fire the begindestory method, I can see the blu_ue4_process close as soon as I hit “Stop” in editor. It shouldn’t be too difficult to add a method to close the browser yourself:



void UBluEye::CloseBrowser()
{

	if (browser)
	{
		browser->GetHost()->CloseBrowser(false);
	}

	DestroyTexture();

}

EDIT: I’ll be adding this method in the next update

19

[QUOTE=bronergames;220833]
Hey , just for my only early education. Does your plugin support adding a camera view? I want to be able to build a lil hud that can slide open and show a in game security camera.

Hello, current it does not support this. However, it would be possible to mix UMG and BLUI together, and simply use a basic Render Target to create your camera effect

20

Thanks , I will give it a try and let you know if it works. Should be a cool option for anyone to use.