Download

[Plugin] Web UI framework plugin (VaQuoleUI)

Hi there :slight_smile:

I’ve developed a plugin to manage ingame menus and HUD using HTML5 and JavaScript.

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) (17 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.

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

Currently I haven’t nice-looking demo like guys from Coherent done, but that’s the features already inside:

  • Cross-platform in theory, tested on and pre-built for Windows only
  • Can be used to integrate any Qt widgets
  • Supports translucent backgrounds
  • Can be embedded both via Texture2D and Material Instance parameter (to be used on scene)
  • Custom JavaScript code can be evaluated to control the page content
  • Callback from JS scripts are processed by Exec functions

Are you seriously asking this question?

The community will go crazy for this kind of plugin. :eek:

This is perfect _ Now I just need to learn HTML5…

EDIT: Anyone know a good HTML5 WYSIWYG editor? :stuck_out_tongue: I suck at programming… Which is also why, since you’re looking for suggestions, I’d be interested in blueprint support :smiley:

Also since I suck, some info about how to set up the html5 in-game would be great :smiley:

I just checked out both your ocean and UI plugins had a total nerdgasm. Wow. Thank you SO MUCH for these contributions.

Cheers,
-D

Heh, I hope so :slight_smile:

You can try Google Web Designer :slight_smile:

What things do you want to see in Blueprints? I moved basic controls to BPs already.

Minor example is included with plugin (it shows how to interact between web page and game code).

You’re welcome :wink:

Awesome!!! Thank you for the contribution!

Thank you for doing this! A huge thanks for open sourcing it with a nice license :). I have just begun struggling down the slate path so I’m going to hold off on that and start experimenting/playing with this instead.

Perfect timing! Thanks again!

Yes, Thanks! Just in time. Was starting to get in the final stages where i was going to need to implement UI

Wow, thank you.

So this is basically Coherent, but free…?

145861.jpg

Any chance of a basic tutorial on how to get it up and running? I’ve got the Va Quole component in my object blueprint, but can’t seem to figure out how to get it to work after that…

Thanks!

Sure, but a bit later. At the weekend I think (I’ll also add complex example).

Thank you very very very much ufna :D. I’ve been struggling to make a UI (love ya Scaleform!) for my projects. I havent checked this out yet but i will soon.

I’ve moved this thread to Engine Source & Github section.

большое спасибо!

Hi ufna,

I am Angel Venkov - Coherent Labs Community Director. We discovered the plugin you have created and couldn’t help but notice that it is heavily inspired by Coherent UI. We are flattered that we have such an influence on your design and code.

But if you are “borrowing” from other projects, you may want to provide proper attribution and check the evaluation agreement if you are allowed to use the resources included in the evaluation at all. In your screenshot below you “forgot” to mention that the UI is taken from the Coherent package and didn’t even manage to remove our logo completely.

We have released openly the source of our plugin integration as we believe it will help developer community to create better games if they can see and modify it. But UE4 ecosystem is only possible if the developers and people respect each other’s intellectual property and have professional integrity.

We would kindly ask you to respect fellow developers efforts.

post-1-0-45066200-1400393910.jpg

Here’s a screenshot I’m sure you are familiar with from the original Coherent UI sample in Unreal Engine 4:

5268d3c710a2d0cfad21e71bb1d3366268f5993c.jpeg

Hi Angel,

I’ve never said that this UI is part of any of my work. No code, unique researches or other stuff from Coherent aren’t used anywhere in my plugin - you can check the source. I’ve removed the screenshot to be sure that there is no connection, sorry that it was here.

The idea to create my own system was inspired by even two web-systems I’ve seen on forums. I’ve used the same trick (direct memory copy is obvious approach) to integrate the Qt widgets on raw OpenGL app years ago, and now I’ve applied it to make the web UI for my own purposes. To be clear, my work is not connected with and/or doesn’t use any parts of Coherent in any way.

Best Regards,
Vladimir Alyamkin

Hi Vladimir,

Thank you for removing the screenshot. I didn’t mean to imply that you have specifically used Coherent UI code in your plugin. You have done a good job and good research. We are all part of this great UE4 community and in order to keep it healthy, we should respect and value each other’s intellectual property. This always goes both ways.

Regards,
Angel

Absolutely agree! :slight_smile:

Fantastic! Very good, thank you!

Now if I can just figure out how to use it :smiley:

I look forward to it, I have no idea what I’m doing :smiley: