HTMLE Helps To Make Life Easier v2.0.0

HTML goes in, games come out.

HTMLE is a project template and a set of scripts that take care of a lot of the work involved in setting up these tools and simplifying everything.

This version adds improvements across the board.

grunt-nwjs replaced with the nw-builder project

steam and itch.io uploading added

no longer requires extra software for compiling on mac

consistent audio implementation middleware added

example project added

windows command windows stay open after completion so you can see errors

new build scripts added

improved support for semantic versioning

Before we get started

You're going to need to install:

Download the HTMLE zip, and extract it where you like on your computer. Install Grunt On PC: right-click "install grunt.bat" and select "Run as administrator" On Mac: double click "install grunt.command" In Terminal: Type "npm install -g grunt-cli" and hit enter

The window will close when it's finished You may see some "warnings" during the installation but it'll be fine.

Install HTMLE files On PC: right-click "install htmle.bat" and select "Run as administrator" On Mac: double click "install htmle.command" In Terminal: Type "npm install" and hit enter

This task will take a while to run, as it downloads things. It'll close when it's finished If these steps went well, you'll now have a "node_modules" folder inside the htmle folder

Create a config.json file Create a copy of config.example.json named config.json, and update the information in it.

If you're on a Mac and compiling

The example project

In src/main and the overrides folders, you'll find an example app that shows the basic functionality capable with HTMLE. You'll also find JavaScript files "htmle_audio.js","htmle_core.js" and "htmle_achievements.js" - you'll need to include these in your html file the way they're included in the index.html files in each folder.

There are some subtle differences between the main index.html file and the Steam/Phonegap ones.

The Phonegap file includes some extra js:

<script src="cordova.js"></script> <script src="device.js"></script> <script src="media.js"></script>

And the Steam file includes a canvas element and an onload attribute on the body tag:

<body onload="forceRefresh();"> ... <canvas id="forceRefresh" width="1" height="1"></canvas>

These will need to be kept in your own project to keep things functioning properly, but otherwise you can do what you like! There's no reason you can't strip out jquery, buzz and localforage and replace them with libraries you prefer!

Building for PC/Mac/Linux (Difficulty: Super Easy)

Open "src/main/package.json" and enter some information about your game. YOUR_GAME_NAME Replace the default icons in "src/icons" with your own. You can use a free online tool to make Windows/mac icons here: https://iconverticons.com/online/ Run the compiler: On PC: right-click "build for desktop.bat" and select "Run as administrator" On Mac: double click "build for desktop.command" In Terminal: Type "grunt desktop" and hit enter

This task compiles src/main to dist/desktop.

The first time the compiler runs, it'll download a bunch of files that will take a while.

Building for PC/Mac/Linux with itch.io (Difficulty: Easy)

Open "src/main/package.json" and enter some information about your game. YOUR_GAME_NAME Replace these bits in gruntfile.js with your itch.io details: YOUR_ITCH_ACCOUNT/YOUR_ITCH_GAME_URL Replace the default icons in "src/icons" with your own. (There's instructions in that folder on how to make icons) Run the compiler: On PC: right-click "build for itch.bat" and select "Run as administrator" On Mac: double click "build for itch.command" In Terminal: "grunt itch" and hit enter Run the uploader: On PC: right-click "upload to itch.bat" and select "Run as administrator" On Mac: double click "upload to itch.command" In Terminal: "grunt upload-itch" and hit enter

Building for PC/Mac/Linux with Steam (Difficulty: Medium)

For integrating Steam with your game, you'll need to do a bit of extra downloading.

You'll need to download:

Greenworks (https://github.com/greenheartgames/greenworks/releases) and download all of the "greenworks-v0.12.0-nw-v0.26.6" releases

Steam SDK v1.41 (available through your steam admin page - https://partner.steamgames.com) - HTMLE expects the Steam SDK to exist at C:/SteamSDK/ but you can change this in the gruntfile.js file.

Copy files from the Greenworks Release and the Steam SDK so that your "overrides/steam" folder looks like this:Follow the guide here: https://github.com/greenheartgames/greenworks/blob/master/docs/quick-start-nwjs.md

greenworks.js steam_appid.txt /lib greenworks-linux32.node greenworks-linux64.node greenworks-osx64.node greenworks-win32.node greenworks-win64.node libsteam_api.dylib libsteam_api.so steam_api.dll steam_api.lib steam_api64.dll steam_api64.lib /Linux32 libsteam_api.so /Linux64 libsteam_api.so /Osx32 libsteam_api.dylib /Win64 steam_api64.dll steam_api64.lib

Run the compiler: On PC: right-click "build for steam.bat" and select "Run as administrator" On Mac: double click "build for steam.command" In Terminal: Type "grunt steam" and hit enter Run the uploader: On PC: right-click "upload to steam.bat" and select "Run as administrator" On Mac: double click "upload to steam.command" In Terminal: "grunt upload-steam" and hit enter

Building for iOS and Android with Phonegap (Difficulty: Hard)

You'll need to make an account on build.phonegap.com. Making one app at a time is free, and you can add more with a small monthly fee. Then you'll need to add signing keys for ios and android to your account, there's instructions here:http://docs.phonegap.com/phonegap-build/signing (This is probably the hardest part of the entire process.) When that's done, replace these bits in the config.json file with your phonegap details:

PHONEGAP_APP_ID PHONEGAP_EMAIL PHONEGAP_PASSWORD PHONEGAP_IOS_PASSWORD PHONEGAP_ANDROID_PASSWORD PHONEGAP_ANDROID_KEYSTORE_PASSWORD

Run the compiler: On PC: right-click "build for phonegap.bat" and select "Run as administrator" On Mac: double click "build for phonegap.command" In Terminal: Type "grunt phonegap" and hit enter Run the uploader: On PC: right-click "upload to phonegap.bat" and select "Run as administrator" On Mac: double click "upload to phonegap.command" In Terminal: "grunt upload-phonegap" and hit enter

Large files might time out using the uploader. If this happens, you'll need to upload the zip file from the /dist folder manually through the web interface.

Build and upload to all platforms

Congratulations! If you've made it this far, you should be able to run the 'build and upload all' script, which does EVERYTHING at once! On PC: right-click "build and upload all.bat" and select "Run as administrator" On Mac: double click "build and upload all.command" In Terminal: Type "grunt runall" and hit enter

FAQs and things to remember

Audio: Look at the htmle_audio.js and main.js files for examples on how to code audio consistently. Icons and loading screens: iOS and Android need a lot of differently sized images for icons and loading screens. There's a separate tool avaiable at https://gritfish.itch.io/windowdresser that takes a lot of the work out of this process.

Credits/License things:

Example sounds used:

​If you're on a Mac and compiling gives you errors about permissions:

Try the instructions on this page: https://docs.npmjs.com/getting-started/fixing-npm-permissions - They might fix the problem.