[Plugin] VaQuoleUI - feel the power of HTML5! (WebUI)

I’m glad to announce that VaQuoleUI beta is officially released! :slight_smile: Today plugin is ready to use, so I’ve decided to make a thread in “Released projects”.

VaQuoleUI is the cross-platform plugin for Unreal Engine 4 that designed to integrate web user interfaces directly into your game. You can use it to create complex menus for lobby, dynamic HUD elements, place UIs to the scene and even embed Google or any other website to the scene.

Current version: 1.1 Beta 13](Release VaQuoleUI 1.1-b13 · ufna/VaQuoleUI · GitHub) (16 July 2014)

Key Features:

  • Use the power of **HTML5, CSS and JavaScript **to create beautiful and interactive game UIs
  • No C++ coding required, everything can be managed via blueprints
  • Full control of web application using JavaScript commands and callbacks
  • Pretty** simple and easy** to use - no excess classes and complicated schemes
  • Highly optimized to work on complex scenes with a lot of dynamic data

Moreover, plugin is completely** free** and available under MIT open-source license. You can use it in commercial projects, you can modify anything, etc. In other words, you’re in charge.

Why to use Web UI with UE4?

There are few key ideas of using Web UI approach:

  • Web application development uses a natural, designer-oriented workflow, proved by thousands of developers.
  • It has very fast iteration times with live editing and testing independently from the game engine. No “game core” programming required while you’re working on UI, and it’s cool because you can work in parallel without “race conditions”.
  • Shorten time-to-market because of time-tested pipeline and lots of existing tools, WYSIWYG editors, libraries, frameworks and templates.

Personally I find web UI perfect for lobby-like interfaces as hangar from World of Tanks.

Check the Wiki to know more about the plugin and get usage examples!

Amazing, Ill implement it on my game for sure, Im website application developer and this is more than a key for future games, its lets you to let users interact with stats and websites on real time, and you can update those websites without make your game users to download a game update.

+1!

This sounds awesome. I will definitively give it a try.

I think it will be wrong for me to do this comparement by myself, but I can definitely say that my plugin is free not because it can less that others :slight_smile:

Some video’s showing off the functionality would be great. I’m very interested in this.

Version 1.0 Beta 11](Release VaQuoleUI 1.0-b11 · ufna/VaQuoleUI · GitHub) (15 July 2014) released!

It’s a minor update that contains fixes of game packaging process for plugin.

It’s not my strong side, but I think I’ll make something about it soon :slight_smile:

UE 4.3.0 update: 1.1-b13](Release VaQuoleUI 1.1-b13 · ufna/VaQuoleUI · GitHub)

I took the time to check this out, its easy enough to get installed though some video tutorials would really go a long way to improving ease of use.

Great free option :smiley:

HI,ufua,firstly thanks for your contribution.I have tried you plugins and there is some small problems.When I open UE4 editor,it said that"Plugin’VaQuoleUI failed to load because module VaquodeuiPlugin does not appear to be compatible with the current version of the engine…" But I have carefully checked the verson of plugin and Engine while using them.I tried “VaQuoleUI_1.0-b11_UE4.2.1_Win” within UE4.2.1 ,and “vaquoleui_1.1-b13_ue4.3.0_win” within UE4.3,. but both won’t work.I think the version should be compatible according to your filename,but the fact is not.So what can i do now.
And the last ,i cannot find the file “YourProject.Build.cs” that you mentioned in the
Installation instructions.I have searched in project directory and engine’s installation folder
So please give me some assistances,thx!

i’m curious: for which parts have you used QT?

Edit: nvm didn’t know ue4 works with QT :o

~Slei

I agree, but it’s not in priority - I’m not familiar with video and its creation takes enormous time for me :frowning:

  1. Your project should be code-based. I suppose plugins won’t work with Content-only projects yet.

  2. If you’re using pre-built binaries be sure that you’re using UE version exactly last published 4.3.0, not preview, not early one.

  3. “YourProject.Build.cs” - it’s located in Source/YouProject/ folder of your project. Replace YourProject with your project name.

  4. Once you’ve added it to .cs file, regen project solution and fully rebuilt project.

Qt is used to render web pages (built-in Webkit2).

Yep,only code-based project has Source Folder!Thanks for helping i will going on !Cheers!

I’m not sure but it seemed that non-engine plugins can’t be used for content-only projects today.

Thank you for this great plugin, as a small contribution here are a few software we use in the office to do HTML5 javascript designs

For Healthbars and animated javascript
https://www.google.com/webdesigner/

for HTML GUI’s our favorite is
http://pinegrow.com/

here’s a link to an article reviewing a few others
http://www.andrewford.co.nz/rapid-prototyping-tools-fr/

please add yours and support VAQuoleUI!

Fred

Pretty nice plugin =) but i have FPS issues with this. I am not familiar with Qt so… maybe you think about to make this with cef? Just asking

FPS has penalties because of memory copy. Current web renderer is faster than cef, moreover it works in parallel thread and doesn’t affect fps directly :wink:

(if you’re using it for HUD please check that you’re using chunked system, not the alone fullscreen view)

Thanks for usefull links, Fred! :slight_smile:

Hello,
I really like your plugin but I never saw how is the code of the site. Someone can share the source of an example? (If it have the Health and/or Ammo will be amazing :eek: ) Thanks!

I’m doing some UI development this week using VaQuoleUI, if things work out well I shall endeavor to make a video tutorial for you :slight_smile: (A background in video production helps :wink: )