Html5 - Building On Windows

Overview

This step by step tutorial used the Unreal Engine & Emscripten documentation, nothing more. For more information, check if the Unreal Engine documentation has been updated. This step by step tutorial has been made on local computer. If you want follow this tutorial with Google Chrome x86 or Google Chromimum x64 , the files need to hosted behind a web server. Template:Rating

1. First, sign up for Unreal Engine 4. Download the UE4 tools, and install example content, including Tappy Chicken, from Marketplace.

Prerequisites

# Windows 7 x64: Updated/Windows Update
# Unreal Engine 4.7.3:  Binaries/Epic Game Launcher
# Tappy Chicken 4.7.3 project
# Small brain

Requirement

1. 64-bit browser
2. Python 2.7.x
3. Emscripten + SDK

Downloading all Requirement

Links and Instructions

Firefox Nightly

1. First step , you need downloading and installing Firefox Nightly 64 bits (Tested) more info

Python

2. Now, you can download and install Python 2.7.7 x86/x64 (Tested) more info

Emscripten SDK

3. Next, download Emscripten-1.29.0 64bit and open the file, then follow the installer prompts. more info

Configuration Emscripten SDK

Update and activate SDK Emscripten

Emscripten folder

1. Go to Emscripten folder installation:

C:\Program Files\Emscripten

Open Command Window Here

2. Open a command prompt inside the SDK directory

Press '''<Shift>''' and '''<right click>''' and select  '''Open Command Window Here'''

Typing Command Prompt

3. Type the following Command Prompt:

    emsdk update
    emsdk install latest
    emsdk activate latest

System Variables

Emscripten

Emscripten Variable

1. Check if the EMSCRIPTEN variable is set correctly.

 
EMSCRIPTEN
C:\Program Files\Emscripten\emscripten\1.29.0

EMSCRIPTEN Variable

Path Variable

2. Now , Make sure that these lines have been added in your PATH variable.

PATH
c:\Program Files\Emscripten;
c:\Program Files\Emscripten\crunch\1.03;
c:\Program Files\Emscripten\mingw\4.6.2_32bit;
c:\Program Files\Emscripten\emscripten\1.29.0;
c:\Program Files\Emscripten\clang\e1.29.0_64bit

PATH Variables

Configuration Engine

HTML5 & Engine

Open HTML5Engine.ini

Open HTML5Engine.ini in your favorite code editor and edit Path as below :

K:\Program Files\Unreal Engine\4.7\Engine\Config\HTML5

Firefox path

[HTML5DevicesWindows]
Firefox Nightly(64 bit)="C:\Program Files\Nightly\firefox.exe"

Python path

[HTML5SDKPaths]
Python="C:/Python27"

Emscripten

[HTML5SDKPaths]
Emscripten="C:\Program Files\Emscripten\emscripten\1.29.0"

HTML5Engine.ini

Before building

Very important step ! Restart your computer before building on Windows.

Building on Windows

Tappy Chicken

Create a clean project

1. Launch the Unreal Engine Launcher.
2. Go to learn Tab.
3. Select Tappy Chicken
4. Click on Create Project [4.7.3] button

Create Tappy Chicken Project

Unreal Engine

Open the project

1. Open Unreal Engine 4.7.3
2. Open Tappy Chicken project

Project Platforms

3. Click File > Package Project > Supported Platforms
4. Select HTML5 as supported platforms for this project. Template:Note

HTML5 Supported Platforms

Building Project

5. Hit File > Package Project > HTML5
6. Choose a directory to save the files to

Successful or not

7. you will probably alerted packaging failed ! It's not a problem , i dunno why !

Packaging failed !

8. Open the Output Log Tab Window > Developer Tools > Output Log
9. Check you see Building successful

building Successful

Final Game

Tappy Chicken html

Game Directory

1. Open Tappy Chicken directory
2. Check all files as below

Game Repertory

Play Tappy Chicken Game

1. Right-Click on TappyChicken-HTML5-Shipping.html or TappyChicken-HTML5.html
2. Select Open With > Nightly (Firefox Nightly x64)
3. Firefox will pre-load & download all data
4. Have fun & Enjoy !

Open In Firefox

Tappy Chicken Firefox x64

Tappy Chicken Firefox x64

Final Note

Game will probably work in Firefox x32 & Firefox x64 . At the moment , the game doesn't work in Chrome x32 & Chromium x64 (Error Script & Black Screen)

Tappy Chicken Firefox x32

Tappy Chicken Firefox x32

If you have any question, do not hesitate to ask on the Unreal Engine forums

ChrisTm (talk) 20:25, 22 March 2015 (GTM)