FREE: Web UI (HTML/CSS/JS Interface)

[zoncan]

Nice! Just curious, did you do those graphs using D3?

I did graphs using EChart.js

Sheesh. You are way better at HTML/CSS/JS than I am.

Did you use a framework like React or something for this?

No framework just pure HTML + JS

Zhong.

[DsyD]

Love this plugin see what i've done so far

Sheesh. You are way better at HTML/CSS/JS than I am.

Did you use a framework like React or something for this?

[ronm6667]

Love this plugin see what i've done so far

Nice! Just curious, did you do those graphs using D3?

[Gutvarev]

very useful, thank you!

[zoncan]

Love this plugin see what i've done so far

[DsyD]

These new features look great, can't wait to try them out Thanks!

[spidershift]

Downloads: https://github.com/tracerinteractive...ngine/releases
Documentation: https://cdn.tracerinteractive.com/we...umentation.pdf

This plugin includes a new 3D widget interaction component that leverages the transparency features from the update last year. It allows you to place a web interface widget in the physical world that's not only interactable but allows the virtual pointer to passthrough the transparent regions of the browser:

The interface event has also been updated with a new callback feature that allows you to call a callback function in the browser. An updated global ue4(...) helper function is provided that generates a temporary callback on the ue.interface object:

This new helper function forwards the UUID of the temporary callback to the engine which can then choose to call the callback with an optional data argument:

The global ue4(...) helper also manages the lifetime of the callback and will automatically remove it from the ue.interface object after a specific timeout period.

Finally the JSON library has been updated with support for vector, rotator, and transform object wrappers:

[spidershift]

Love this Plugin

A little problem I found is that target="_blank" on <a> tag is broken, on default WebBrowser I can use OnBeforePopup to fix it, but now I couldn't find it on WebInterface widget

Zhong.

Thanks for pointing that out but <a target="_blank"> is not broken and was disabled ON PURPOSE. In fact all popups have been explicitly disabled by the plugin AS THE INTENDED FUNCTIONALITY. The only exception to this is the Chrome Dev Tools popup which the plugin allows in development builds.

The point of this plugin is to develop web-based user interfaces and to communicate with these browser instances via JSON using the OnBroadcast event. When you click <a target="_blank"> the engine will automatically create a new window but it is not a WebUI widget and you have no OnBroadcast event to communicate with the popup. Moreover popup windows in UE4 are a little buggy when closing the popup as they break the parent web browser.

So popups will not be supported in the plugin. However if you absolutely need to get popups working then you can edit the source code and compile the plugin yourself. You can see in the OnBeforePopup method that it always returns TRUE which indicates that the popup was handled:

https://github.com/tracerinteractive....cpp#L168-L179

Again the only exception to this is when the URL matches the Chrome Dev Tools in which case it returns FALSE and UE4 will create a popup. So if you remove the code in this function and just have it always return FALSE then you can achieve legacy popup functionality in the engine. There are instructions in the documentation on how to compile the plugin yourself.

Now the INTENDED FUNCTIONALITY is for you to use the global ue4(...) helper function to relay information to the engine. That means if you want to create a popup for some reason (even though it really is an awful design strategy for games) you should bind an OnClick event in JavaScript to the <a> tag such that you can trigger the OnBroadcast event and handle the popup yourself. There really is no reason to be using <a target="_blank"> if developing your own custom user interface.

However if you are loading a website that uses <a target="_blank"> (or any similar situation where you do not have control over the interface) then you might actually need to respond to these popup events. So while that function always returns TRUE you can see it also always triggers the OnBeforePopup event of the parent widget allowing you to respond to these events. However it seems this event was not relayed to UMG (blueprints) meaning you cannot access it without extending the Slate widget yourself.

Therefore I'll make a note to add this event to the UMG widget allowing for access in blueprints to the OnBeforePopup event. But as mentioned popup functionality itself will always remain disabled in this plugin.

[zoncan]

Love this Plugin

A little problem I found is that target="_blank" on <a> tag is broken, on default WebBrowser I can use OnBeforePopup to fix it, but now I couldn't find it on WebInterface widget

Zhong.

spidershift Because I have project really need this reall appreciate for your help

[DsyD]

Does anyone know if it's possible to upgrade UE4's embedded Chromium version? It can't be as simple as downloading the latest Chromium source and rebuilding the plugin with it, can it?

[DsyD]

For anyone who's using VSCode, I put together a simple type declarations file for this so I could get autocompletion/Intellisense working:

declare const ue: {
    /**
     * Object providing communication with UE4.
     *
     * The `broadcast` method sends data to UE4.
     *
     * All other properties should be functions to be called from UE4 by the `Call` function of the WebInterface widget blueprint.
     */
    interface: {
        /**
         * Sends data to UE4 by calling the 'OnInterfaceEvent' event dispatcher.
         *
         * @param name Pseudo-event name to be passed to the `Name` event parameter.
         * @param data Optional value to be passed to the `Data` event parameter as a UE4 `JSON Value`.
         */
        broadcast(name: string, data?: any): void;
    } & {
        [key: string]: (data?: any) => void;
    };
};
/**
 * Alias for `ue.interface.broadcast`.
 *
 */
declare const ue4: typeof ue.interface.broadcast;

You can save the above into a d.ts file (I named it "ue4.d.ts") and then add this line to the top of any Javascript file to get Intellisense in VSCode:

/// <reference path="[PATH_TO_FILE]" />

where [PATH_TO_FILE] is the location of the ue4.d.ts file. It should provide Intellisense for Typescript files, too.

[Edit] Added some docstrings.

[vara.lucsa]

Thanks you for the plugin!
This works great except my editor freezed when enabling web-gl on 4.23.1.
Any suggestions?

[spidershift]

astlouis44 I think that's a great idea. There should definitely be a web-focused game engine and a web-based editor is icing on the cake. There is no question Tim Sweeny is naive because anyone involved in web technologies knows that web-based applications are the future. I always tell people that "one day applications will no longer be installed" and like to use the example of "why install Photoshop when you can go to photoshop.com and start editing" along with comparing it to Google Docs and how most people don't install Microsoft Office these days because you can do Word/Excel processing completely in the cloud.

There is no question games have been going in this direction and will continue to over the years. Yes we are constantly pushing the limits of graphic fidelity and because of this texture sizes and whatnot continue to be insane, always pushing hardware to the limits (and that makes it difficult to apply to web-based games). But at this point it seems like they are getting into more cinematic development because while real-time ray tracing is great, it doesn't really offer all that much improvement to actual games. How about we actually finish the forward renderer first? I mean it hasn't been updated in 3 years now and still says "experimental" on the documentation yet they advertise it directly on the unrealengine.com homepage...talk about FALSE ADVERTISING!

So as you said it definitely seems this engine development is putting focus in completely different areas. I already tell people that "UE4 is NOT a networked multiplayer engine" because let's face it when it comes to dedicated server this engine is a joke. They just added the ability to set your server name and whatnot via command-line arguments in 4.23 which is like 4-5 years after they initially added Steam support. It was 100% hard-coded this engine time! Not to mention the networking/replication for the character movement system is some of the worst networking code I've ever seen in an engine. It's just so pathetic.

But yea I definitely think a push for a web-based game engine would be a step in the right direction because it doesn't seem like these guys here care much about anything that actually matters. It's all about adding more junk to create an impressive engine release each iteration without any focus on what us game developers actually need...

[astlouis44]

spidershift It's a true shame that HTML5 has been deprecated. Our startup has been going all in for our FPS game we're making that targeted WebGL, and it performs really well. With the addition of multi-threading, 64 bit addressing for more memory, the browser can and will be the next big gaming platform. I emailed Tim Sweeney about this, pitching him on the vision that I and other developers have. I figured he would be open to committing further to the development of Unreal's support for WebGL, but this is what he had to say about it:



I think he hasn't checked out HTML5 recently, because there's been massive improvements to all these "low points" that he mentioned. Funny enough, shortly after this email correspondence, HTML5 support was deprecated. Now that I think about it, to expect a company like Epic to commit further to WebGL while they have so many other areas they are focused on (Fortnite, UE4 in enterprise, Epic Games Store) was naive. So I have a proposal for anyone out there who shares a similar vision of gaming on the web that I do:

- A web first game engine with an editor that can be launched on the web, but made for the web from the ground up.

To further complement this, I'm also building out a browser-based gaming platform for indies, to help empower them to find their early adopters using this innovative new way to distribute their work. Am curious what everyone thinks of this idea. And remember, if you want to currently export a game to the web, you'll have to use Unity/Godot if you want to target WebGL. Epic sadly doesn't have the time of day for this anymore...

Except to migrate it over to Github as a "community-supported platform extension"... So this means it will be up to us as a community to band together to push this thing forward, and show Epic how wrong they are about abandoning this awesome platform!

Link to our Discord server for those interested: https://discord.gg/cFJV6Yu

[spidershift]

See guys this is exactly what I'm talking about in my HTML5 comments...

https://forums.unrealengine.com/unre...48#post1660248

Imagine being so lazy or incompetent that it's been 2 months since 4.23.0 was released and there still isn't a 4.23.1 hotfix (which is always released the following week). How much you want to bet most of the engine development resources were pulled away onto the new season of Fortnite instead? If only Source 2 would come out already because this engine is such a joke...