
These copies are expensive and can significantly impact the smoothness of the game UI, especially if you use animation or play video. Getting image bytes to put in UE4 texture requires at least two copy operations on each UI frame between the GPU VRAM and system RAM, transfer it across the game and rendering processes, and then in the UE4 engine upload it back from system RAM to VRAM. For games, GPU acceleration and drawing everything in hardware is mandatory for achieving 60 FPS experience.Ĭhromium and CEF offer hardware (GPU) accelerated rendering, but use a separate operating system process for rendering the page in this case. Games have higher requirements in terms of performance and are quite different than normal desktop apps like Chrome itself. One of the first things to think about is that CEF was not designed for games (or any demanding real-time application). Of course, this is only the beginning, there are more things to consider for a fully-fledged UI solution. Voila – now you have a simple web browser within your UE4 game! Beyond simple integration Wire the UE4 keyboard/mouse events to the CEF ones, performing coordinate conversion, so the web surfaces can be interacted withħ. Compose the UTexture to a desired quad or meshĦ. On each frame call appropriate render function in the CEF library, which returns rendered HTML view as a bitmap, your plugin should have a UTexture where to copy the bytes from the CEF surfaceĥ.
Chrome embedded framework code#
Edit the BlankPlugin code and initialize CEF on plugin initialization with your HTML content – e.g your game main menu (there are many examples on CEF website)Ĥ. Create a UE4 plugin cloned from BlankPlugin sample (available in UE4) and add references to the CEF libraryģ. For basic web browser functionality or simplistic UI in the game, this should be enough.Ģ. The best way to start is to get a pre-built version of CEF for the needed platform, in order to save time in building an own version of Chromium and CEF, which is a very time-consuming task. More information about CEF can be found at. This might be a good starting point if you are interested in using HTML within your UE4 game. Implementation is very straightforward and usually can be achieved in a couple of days. Integrating CEFĬhromium Embedded Framework is a free, open-source framework that is based on Chromium web browser and provides the infrastructure developers need to quickly add HTML renderer and JavaScript to a C++ project. We will describe the process of creating your own integration of CEF framework in UE4 and list some specifics that should be considered. Many developers are choosing to roll their own CEF-based Unreal Engine 4 integration and there are some commercial products based on CEF framework.

Open-source solutionsĬEF or Chromium Embedded Framework is one of the easiest ways to integrate HTML renderer in any application. Some of the benefits of using HTML for the game user interface are: easy to use and widespread technology, a lot of existing libraries and templates, saving considerable time, more convenient workflow, visual tools support and much more.

When Epic Games released the Unreal Engine 4 subscription a few months ago, we have posted a comparison between the different ways to create a user interface (UI) for Unreal Engine 4: Slate, Canvas, and using HTML with Coherent UI HTML5 rendering engine. The user interface or GUI is one of the most important aspects of any game or application.
