Live editing

Live editing (hot reloading) makes it possible to export a Coherent Prysm document and see changes reload live in a running game.

This is a great way to iterate on the UI as changes can be seen in the context of the game itself - with all of the 3D assets, lighting, post effects, and gameplay. Furthermore, there are no build steps or manual copying of resources which greatly improves iteration speed.

The setup takes only 2 steps.

Live editing in Unreal Engine

The Live editing feature is enabled by default. The project's Game/Content/uiresources directory is being watched for changes to files, but this is completely customizable in the Prysm options in the Editor.

This feature is available only when running Coherent Prysm in the Unreal Editor.

Prysm configuration

The name of the scene in Adobe Animate needs to match the name of the HTML file that is used in the currently open Unreal scene. The file in the default sample scene of our Unreal plugin is called mainui.html so the scene in Adobe Animate should be called mainui (the HTML extension is automatically added).

The output folder of the document must match the folder from which Unreal loads the HTML file. The folder in the default Unreal sample is CoPrysmTestFps\Content\uiresources.

Live editing in action

To see live editing the game must be played through the "Play" button in Unreal Engine and left to work.

After that changes introduced by exporting the document from Animate will be automatically reloaded in Unreal Engine while the game is running.

If the actual game is invisible, the background color of the scene in Animate should be set to transparent.

Export for Unreal Engine

The following steps describe how to configure Prysm to export for Unreal Engine.

  1. Open the "Settings" tab.
  2. Check the "Export for UE4" checkbox.
  3. Fill the path of a directory that contains a .uproject in the "UE4 project root" input.
  4. Set the output folder to ${UE4Root folder}/Content/uiresources or any subfolder in that directory.

Live editing in other game engines

Although this tutorial uses Unreal Engine, a similar workflow can be achieved with any game engine. A file watch for the files generated by the Coherent Prysm Exporter needs to be setup. The watcher needs to call the "reload" method of the Coherent view attached to the camera when a file changes. More information about Coherent views can be found in the relevant Prysm docs.