Announcement

Collapse
No announcement yet.

How To: Build UE4 for HTML5 Launching/Packaging

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    How To: Build UE4 for HTML5 Launching/Packaging

    There are posts all over this forum, as well as the AnswerHub from people having a hard time getting HTML5 up and running. I did it and wrote down how, including one need on OS X Yosemite (launchd.conf doesn't work). Here's how I got it working, as well as a permalink for sharing. I'll try to keep both up to date if the process changes.

    1. Go to Unreal Engine and log into your account and click 'Get Unreal'. Look to the bottom section of the page to get UE4 full source code. You’ll need to link your Unreal account to your GitHub account.
    2. Fork and clone the UE4 repository.
    3. Install the latest version of Xcode.
    4. Install Firefox Nightly.
    5. Install Emscripten (modified from these instructions):
    a. Download and unzip the portable SDK package. This will contain the Emscripten SDK. Navigate to it in Terminal.
    b. emsdk update
    c. emsdk install latest
    d. emsdk activate latest
    e. source ./emsdk_env.sh
    f. Restart your Mac.
    g. Setting Emscripten environment variables via launchd.conf is a no-go on Yosemite. Do this instead ($EMSDK_PATH is the path to where you've installed the emscripten sdk. $VERSION will vary as well, but there’s only one folder at that path at this time):
    - launchctl setenv EMSCRIPTEN $EMSDK_PATH/emscripten/$VERSION
    - launchctl setenv EMSCRIPTEN_ROOT $EMSDK_PATH/emscripten/$VERSION
    - launchctl setenv LLVM_ROOT $EMSDK_PATH/clang/$VERSION
    - launchctl setenv NODE_JS $EMSDK_PATH/node/$VERSION
    - NOTE: This has to be done every time you restart unless you set up something automated. Happily, we only need it to build UE4, not to use it.
    6. Execute Setup.command by double clicking in Finder or executing on the command line to download binary content for the engine. If Emscripten is set up correctly, HTML5 will not be included in the list of excluded items in the execution output.
    7. Execute GenerateProjectFiles.command.
    8. From the same directory, execute ./Engine/Build/BatchFiles/Mac/Build.sh UE4Game HTML5 Development. One of the things this creates is the UE4Game.js file that is critical for building HTML5 project.
    9. Load the project into Xcode by double-clicking on the UE4.xcodeproj file. Select the UE4Editor - Mac for My Mac target in the title bar, then select the 'Product > Build' menu item. This will take anywhere from 15 to 40 minutes.
    10. After compiling finishes, select the 'Product > Run' menu item to load the editor.

    This took quite a while to get right and it's conceivable I missed something so let me know if I missed a step and I'll update.
    Last edited by sneagan; 04-04-2015, 05:59 PM. Reason: working around formatting limitations

    #2
    Awesome post, thanks for sharing!
    Tech Evangelist & video game person at Microsoft | @DaveVoyles
    Other games I've created and my UnrealScript tutorials
    Author: UnrealScript Game Programming Cookbook

    Comment


      #3
      I can not for the life of me get past step g. in the above directions. Here is my Terminal code. (mind you that I am not a coder and have no Terminal experience)! Here is what I tried based on my successful installation of Emscripten SDK:

      Last login: Fri Jun 12 09:27:48 on ttys000
      Rochester-Community-TVs-Mac-Pro:~ Nate$ launchctl setenv EMSCRIPTEN /Users/Nate/Desktop/GitHub/emsdk_portable/emscripten/1.30.0
      Rochester-Community-TVs-Mac-Pro:~ Nate$ launchctl setenv EMSCRIPTEN /Users/Nate/Desktop/GitHub/emsdk_portable/emscripten/1.30.0
      Rochester-Community-TVs-Mac-Pro:~ Nate$ -launchctl setenv EMSCRIPTEN /Users/Nate/Desktop/GitHub/emsdk_portable/emsdk/1.30.0
      -bash: -launchctl: command not found
      Rochester-Community-TVs-Mac-Pro:~ Nate$ launchctl setenv EMSCRIPTEN /Users/Nate/Desktop/GitHub/emsdk_portable/emsdk/1.30.0
      Rochester-Community-TVs-Mac-Pro:~ Nate$ launchctl setenv EMSCRIPTEN /Users/Nate/Desktop/GitHub/emsdk_portable/$emsdk/$1.30.0
      Rochester-Community-TVs-Mac-Pro:~ Nate$ launchctl setenv EMSCRIPTEN /Users/Nate/Desktop/GitHub/emsdk_portable/emsdk/emscripten/1.30.0
      Rochester-Community-TVs-Mac-Pro:~ Nate$ launchctl setenv EMSCRIPTEN $/Users/Nate/Desktop/GitHub/emsdk_portable/emsdk/$1.30.0
      Rochester-Community-TVs-Mac-Pro:~ Nate$

      Comment


        #4
        Can this be put into an "Idiots Guide". I'm pretty much on the artist side. I know enough programming to create a game, but it's enough that if I try the above I'd probably muck up the whole works.

        Comment


          #5
          Hey Everyone,

          I've added this forum thread to our Documentation Jira Report UEDOC-401 which is for updating the documentation we have on HTML5. If you'd like to check on this report in the future, please feel free to reference UEDOC-401.

          Have a great week!
          Twitter @UnrealSamantha
          Mobile Development Troubleshooting Guide | Package and Deployment Troubleshooting | How do I report a bug?
          Call me to a thread by posting this: [MENTION]Samantha Sutton[/MENTION]

          Comment


            #6
            Denmengel,

            I am working on an Idiot's Guide video tutorial. Should take me another week to make sure it is fool-proof. But for now, if you are on Yosemite OSX (meaning 10.10 or above) I think there are some things that worked for me in addition/subsitute to the directions listed above:

            Instead of step 5c: which tells you to install latest emsdk, I used an older version that had been proven to work in various message boards so that was in Terminal you would type in (where "/Users/Nate/Desktop/GitHub/emsdk_portable/" was my "directory" or path to my emsdk portable folder:



            /Users/Nate/Desktop/GitHub/emsdk_portable/emsdk install emscripten-1.30.0

            And then when that finishes installing put in this code:


            /Users/Nate/Desktop/GitHub/emsdk_portable/emsdk activate emscripten-1.30.0

            At that point you can return to sneagan's directions above and step 5c: to set up environments...But again I will put this in real simple terms and steps hopefully this week July 20, 2015.

            Remember you have to then restart your computer for Emscripten to set in with your other applications. And then when you open up the Unreal Engine GUI again, you have to go to the Project Settings window and adjust the HTML5 SDK according to the new (or actually old) Emscripeten 1.30.0. See snapshot below to set Location of Emscripten and also the Location of Python exe (which is actually on mac the downloaded and installed Python 2.7 for mac "Python Launcher.app". Click image for larger version

Name:	Screen Shot 2015-07-20 at 11.02.31 AM.png
Views:	1
Size:	57.8 KB
ID:	1082085

            Comment


              #7
              Oh and I forgot to mention and this may or may not address Sneagan's step 5g: comment about Yosemite not being able to set environments with launchd.conf....but I got this message and followed the instructions that Terminal provided me that gave directions for setting emsdk globally menaing for all users of the computer and permanently. I did this and in combination of using the emsdk 1.30.0 version in Unreal Engine GUI settings pictured above and it worked for me on Yosemite. I really don't think this step is necessary for older OSX versions. When you put into Terminal /emsdk list you may get these directions:

              * sdk-tag-1.34.3-64bit INSTALLED

              Items marked with * are activated for the current user.
              Items marked with (*) are selected for use, but your current shell environment is not configured to use them. Type "source ./emsdk_env.sh" to set up your current shell to use them, or call "emsdk activate --global <name_of_sdk>" to permanently activate them.

              Comment


                #8
                Would anyone be able to work out an analogue of these steps for Windows (specifically 7, 64bit)? Like many others, I'm having trouble locating working info for building HTML5 with UE4.

                Comment


                  #9
                  Would you be able to elaborate also how to make it work from web host?

                  Just uploading files and accessing them doesnt work.

                  Comment

                  Working...
                  X