Web UI (HTML/CSS/JS Interface Widgets)

Hey guys sorry for the delay. We’ve been really busy and were not able to get around to some of these updates until now. There are new versions available on GitHub and some updated documentation and examples will be posted soon. Here are some quick notes for these updates:

WebUI

  • Native support for 60 FPS (no engine changes required)
    there is a new setting in the widget blueprint under the “behavior” section that allows you to specify the FPS for the browser instance of that widget

  • Dynamic mouse transparency
    another setting is available in the “behavior” section of the widget blueprint to enable mouse transparency which allows for clicking behind the interface

  • Debugging via the Chrome DevTools
    you can now press CTRL+SHIFT+I to open the devtools in development and debug builds for the currently focused browser widget

  • Access texture data
    new functions such as GetTextureWidth() and GetTextureHeight() along with ReadPixels() provide the ability to sample the browser pixels (this DOES NOT create a new render target and samples the existing slate texture on the render thread)

  • Focus browser elements
    new functions such as Focus() allow the browser to receive direct focus, when combined with JavaScript focus events you can now directly trigger focus into a browser input or textbox element (this was not previously possible because the browser required the player to click on the widget before receiving keyboard focus)

  • Load local files (mobile)
    you can new use functions such as LoadFile() on mobile browsers to directly access HTML files and load local image files, the file paths will be properly resolved for both Android and iOS (the updated example project will demonstrate full mobile support out of the box)

  • Custom mouse cursors
    new documentation will be provided for fixing engine-related issues that prevent custom mouse cursors from working with browser widgets

  • Support for WebGL
    new documentation will be provided for enabling WebGL in the UnrealCEFSubprocess (Windows, Mac, and Linux)

  • Support for 3D widgets (coming soon)
    the new ReadPixels() function when used with the widget interaction component allows for the 3D laser pointer to pass through transparent parts of the browser

JSON Library

  • Direct reference checking
    you can now directly compare objects and lists via reference using the new Equals() function, subsequently new functions such as FindList() and RemoveList() have been added to the JSON array wrapper class

  • Primitive type coercion
    originally if you used GetBoolean() or GetFloat() or GetString() and the underlying JSON type did not match then the default value was returned, now these functions will automatically try to convert these values into the appropriate data type (the new equals function is now the equivalent of the JavaScript abstract equality operator)

  • Variable change tracking
    new delegate pins have been added to the Construct Object and Construct List nodes that allow for tracking variable changes (these events are only valid for the current reference and will no longer trigger if the object/array is accessed from a parent object or converted into a generic value)

  • Performance improvements
    the JSON wrapper classes now utilize the underlying FJsonValueArray and FJsonValueObject structures

1 Like