Fork made to support small additions and changes for certain use cases.
To install check out the latest releases https://github.com/getnamo/BLUI/releases and drag and drop Plugins folder into your project root folder
Contains changes to allow downloading of files via the inbuilt browser.
Updated CEF build to 3.2556 to support fullscreen videos.
The native plugin didn't contain any self contained drag and drop examples so I've added some.
A user widget (UMG) blueprint which embeds a BLU texture as an image brush. Contains various utility functions to allow loading and parsing urls easily. Call InitBluEye
with starting url and browser window size to start this widget. See BluiWorldWidgetActorExample for an example of how it's used in practice.
Encapsulated BluiWidget user widget in an actor. Drag and drop this actor into your scene and it will auto-spawn the required BluTickActor to make everything work.
3 BluiWorldWIdgetActorExample actors with youtube.com
, blui ue4
and local:https://test.html
specified as their URL respectively
By default the actor will check the url for local:https://
protocol and load local content first if detected. This should be placed inside the following directory: {project root}/Content/html
. NB: You can still use the vanilla blui:https://
protocol which will load content relative to your project root.
e.g. having a test.html file inside your Content/html folder
Basic URL validity is also tested, but you can safely ignore https:// etc. E.g. just specifying youtube.com will resolve correctly
If your URL isn't valid however, it will redirect the string as a search term e.g. typing a sentance or a search term.
You can untick Should Auto Search Invalid Url to disable this behavior.
By default the actor has a BLUI resolution of 1000x1000, you can change this by just changing the user widget draw size.
Instead of ticking in your level bp, I prefer to use a simple actor to do the ticking. Other convenience blueprints may spawn this as necessary so if you use those, you don't ever need to use this directly.
Thanks to @oivio we have the Demo project updated to the latest release. See https://github.com/getnamo/BLUI/releases/tag/3.4.0 for the 4.22 Demo project release (BLUI-v3.4.0-UE4.22-DemoExamples.7z)
Click on image to take you to video.
(Hit up the wiki for a quick start guide!)
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!
License: MIT
BLUI is an Unreal Engine 4 plugin that allows easy interaction with the Chromium Embedded Framework. It provides a simple Material Instance and input functions to help streamline the rendering of rich HTML interfaces.
BLUI tries to stay out of the way as much as possible. All rendering of the DOM and processing of the JavaScript happens in a separate process, just like Chromium. BLUI only updates the texture inside the material instance when Chromium requests a redraw, not every tick, saving a bit more processing along the way.
- Chromium Powered (same thing that powers Google Chrome!)
- Fully compatible with every web technology that Chrome/Chromium works with. (HTML5, WebAudio, WebSockets etc.)
- No specific ties to any in game class, simple use Blueprints (or C++) to create a new "BluEye" object and grab its material instance, then you can paint it on anything!
- Execute JavaScript in the "browser" from your game to pass data to the web page
- Using
blu_event
JS native function you can pass data from the page's JavaScript back into UE4! - C++ or Blueprints, works with both!
Then copy the BLUI
folder into the "Plugins" folder within your project directory, and enable the plugin.
Re-generate your project's Visual Studio file and load up the editor. Then check the plugin list to ensure it has been loaded!
You must call the BluManager::doBluMessageLoop();
method every tick in order for the CEF process to update properly. To do this, override the default GameMode's Tick function and include the Blu/Public/BluManager.h
header file. You can then call the appropriate method.
As of now, you no longer need to do this. You can simply call a blueprint node to Tick the CEF loop every tick of the level blueprint.
Set your default URL or use the "Load URL" node/method to load a URL that starts with blui:https://
this will point to the directory root of the project or the game (if packaged). So if you wanted to load an HTML file from YourProject/UI/file.html
, set the URL to blui:https://UI/file.html
Within the release, you'll find an ExampleHUD blueprint file, place this into your project's blueprints directory to try it out! (It's a simple UMG widget pre-configures to accept keyboard and mouse input, with a BluEye instance hooked up to a canvas)
Copy all contents of the Linux shipping files into your packaged game's GameName/Binaries/{Linux}
, these are the required files for the Chromium process.