Published on

How to Package a HTML Project With Unreal Engine 4.23

Cover for How to Package a HTML Project With Unreal Engine 4.23
Authors
  • avatar
    Name
    Chris Ringenberg

Since the release of Unreal Engine 4.24, support for the HTML5 platform has been removed. Because of this, you will have to build the engine from the source code on GitHub and manually add in the HTML5 platform extension or use 4.23

Unreal Engine 4.24 is the last engine version that supports ES2 rendering. Because of this, HTML5 support can not exist in any version past 4.24 without serious work. You would be required to change the HTML5 rendering code and shader compiler to only support ES3 (WebGL2) and above.

For this tutorial I will just be using UE 4.23 as that is the easiest solution.

Note: It is recommend to use a 64bit browser when running your UE4 projects.

This tutorial will be assuming a few things:

  1. You already have 4.23 downloaded from the Epic Games Launcher (Make sure you downloaded the HTML5 platform)
  2. You have some experience working with UE4
  3. You have either Google Chrome or Firefox installed

Create a New Project

For this tutorial, I just created a project with the Third Person template.

Once you've created a project, open the project settings and navigate to the Rendering section.

You will need to disable Mobile MSAA:

Next go to the Platforms section and click on HTML5. You should enable compression for shipping builds:

It is recommended to disable Pak files; however, it is not required.

Packaging Your Project

You can package your project like you would for any other platform:

Running Your Project

You can run your project locally by using the HTML5LaunchHelper.exe in the folder of the packaged game to run a local webserver.

Note: You will not need to run this executable once you have your game hosted properly.

Once the webserver is running go to localhost:8000/[ProjectName].html

By default, the server will launch using Port:8000

Note: It is recommended to use a 64bit browser

Next Steps

Once you've gotten your project running locally you should take a look at the Readme.txt file located in your packaged project's directory.