Html5 - Building On Windows - Epic Wiki

# Html5 - Building On Windows

# Contents

1 Overview

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

Rate this Page:

5.00

(one vote)

Approved for Versions:4.7.3

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

Note
HTML5 is currently experimental. Some projects may not run properly when built for the HTML5 platform

# 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

Note With Mozilla, game can be launch in offline
Mozilla can bring large, high-performance applications to HTML5 and 64 bit browsers can allocate more than 512MB of memory to around 1.5 GB.

# Python

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

Note
Any version of Python 2.7 will do. As of this writing, 2.7.9 is the latest 2.7 release. Do not use Python 3.X.

# 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 '''''' and '''''' 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

Note Though the web installer for Emscripten will append its path to the System Path environment variable, just check to make sure it was.

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

Note Shipping build configuration mode or Development configuration mode is not a problem for this tutorial

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)

Note For things to work on chrome x32 & Chromium x64
the files need to hosted behind a web server, chrome doesn't like direct file system access.

# 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)

Retrieved from "https://wiki.unrealengine.com/index.php?title=Html5_-_Building_On_Windows&oldid=12879"

Categories:

Hidden category:

Templates