Web Browser Widget

The browser widget of unreal engine allows to create graphical interfaces in html/css/javascript. We will see below how to set up this plugin and how to use it in different situations like design HUD, menu, or complex interface.

Updated over 2 years ago Edit Page Revisions

Assumed Knowledge

You know the basics of web development technologies (HTML/CSS), and you can use blueprints.

Introduction

The first thing to do is to activate the plugin, for that you just need to go to "plugins" to look for "web browser", activate the corresponding plugin and restart unreal engine.

Description of the plugin Web Browser

The web browser plugin from unreal engine allows to create interfaces based on a browser. Basically, it allows to access remote or local URLs like a classic browser, so it is possible to design interfaces as you would design a website.This browser is based on the Chromium Embedded Framework in version 59. Quickly, CEF is an open source tool to create embedded browsers in applications or third party software.

For create the interface, we need to add a widget interface. Add "user interface" and Widget to create our browser brick.

Now that the widget is created, we need to add the browser. It is located in the "experimental" tab.

Drag the browser onto the interface, you can change its size, position etc. On the settings sidebar, we can see that there is a tab "initial url" that allows you to enter the url of the browser. As I said, it can be a remote url like for example "https://www.unrealengine.com/" or a local url "file:///C:/Users/xxx/WebBrowser/Content/UI/index.html".

For the following, we will use a local html file, so that we can show what are the possibilities with this widget and the web development.

Create the HTML interface

Now that we have the browser widget, we need to create the interface. To do this, I suggest you use the template below. This template is suitable for simple interfaces, if you need to make the interface more complex, it is advisable to separate the CSS/Javascript.

<!DOCTYPE html>
<html>

<head>
    <style>
        /*Put the CSS here */
        .button{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h1>My First Interface !</h1>
    <button id="firstbutton" class="button">Click on me !</button>
    <script>
        /*Put the javascript here */
        let buttonAlert = document.getElementById("firstbutton");
        buttonAlert.onclick = function(){
            alert("you click on me !")
        };

    </script>
</body>

</html>

So, copy the template below in a file that you can name for example : "index.html". Now, you can open the file in any browser. Now that you have opened your first interface in the browser, you just have to copy the URL in the widget browser that we have created previously.

Start your project and see the result !

You have now an interface available in HTML/CSS/Javascript ready to be modified to realize your most beautiful interfaces!

Transparency

On some interfaces, such as HUDs, it is necessary to have a transparent background with only the graphic elements visible. The first thing to do is to enable transparency support on the browser widget.

Now add in your html file, in the style part, add a transparent backgroud on your body.

    <style>
        /*Put the CSS here */
        body{
            background: transparent;
        }
        .button{
            background-color: aqua;
        }
    </style>

Now all the backgroud of your interface has become transparent!

Assumed Knowledge

Introduction

Description of the plugin Web Browser

Web Browser Widget Interface

Create the HTML interface

Transparency