Html5 - Building On Windows
Contents
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.
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
Disclaimer
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
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
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"
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
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.
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 !
8. Open the Output Log Tab
Window > Developer Tools > Output Log
9. Check you see Building successful
Final Game
Tappy Chicken html
Game Directory
1. Open Tappy Chicken directory
2. Check all files as below
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 !
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
If you have any question, do not hesitate to ask on the
Unreal Engine forums
(
) 20:25, 22 March 2015 (GTM)