Giter VIP home page Giter VIP logo

blui's Introduction

tips release

BLUI-logo

HTML powered UI and HUD for Unreal Engine 4

(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

What is it?

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.

Features

  • 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!

Setting up the editor and project

Copy the files located inside the shipping folder to your Unreal Engine binaries folder (such as C:\Program Files\Unreal Engine\4.6\Engine\Binaries\Win64)

Then copy the BLUI folder into the "Plugins" folder within your project directory, and enable the plugin by adding:

PublicDependencyModuleNames.AddRange(new string[] { "Blu" });

To YouProject.Build.cs

Re-generate your project's Visual Studio file and load up the editor. Then check the plugin list to ensure it has been loaded!

Updating the CEF event loop

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.

Loading Local Files

Set your default URL or use the "Load URL" node/method to load a URL that starts with blui:// 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://UI/file.html

HUD Example Blueprint

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)

A small demo project to get started!

Shipping Your Game

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

Videos for a little more help!

YoutubeVideo

blui's People

Contributors

0xshammah avatar afuzzyllama avatar ashea-code avatar brunoxavierleite avatar cartzhang avatar cthulhusec avatar looterz avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.