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 UE4

To enable live editing in UE4 open the Coherent/Options menu in the UE4 editor and check the "Live editing" checkbox.

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 UE4 scene. The file in the default sample scene of our UE4 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 UE4 loads the HTML file. The folder in the default UE4 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 UE4 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 UE4

The following steps describe how to configure Prysm to export for UE4.

  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 UE4 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.