User Tools

Site Tools


proton:html5_setup

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
proton:html5_setup [2018/04/12 01:24]
seth
proton:html5_setup [2018/07/28 14:20] (current)
seth [Compiling the examples for HTML5 with Enscripten from Windows]
Line 1: Line 1:
 ====Compiling the examples for HTML5 with Enscripten from Windows ==== ====Compiling the examples for HTML5 with Enscripten from Windows ====
 +So Flash is dead and HTML5 is the way forward. ​ Fine.  There are a few gotchas but overall we've finally reached a place where most stuff renders and sounds ok across the popular browsers with only a few hiccups.
  
 +RTSimpleApp not using a custom Proton template looks like this:
 +{{:​proton:​rtsimpleapp_html5.png?​400|}}
  
-====WARNING:​ This page is out of date, html5 is currently being actively worked on, after it's stable this page will get updated ==== +You will take a speed hit and you don'​t ​get full access to the user's hardware ​and networking, but that's the price you pay for being able to pass around programs that can't infect someones computer.
-== About and situation ==+
  
-Well, we all know by now that Flash is dead. HTML5 (which ​is really Javascript ​and WebGL) is the new way to get your games and apps onto the web in way that is safe for playersNobody wants to download .exe files and get viruses anymore, so this is a good way to go.+The good news is getting your Proton SDK based games to export to HTML5 is very easy and only requires setting up the makefile ​and maybe a couple lines in your App.cpp file.
  
-{{:​proton:​rtsimpleapp_html5.png?​400|}}+== See it in action ==
  
-You will take a speed hit and you don't get full access to the user's hardware and networking, but that's the price you pay+  * [[http://​www.rtsoft.com/​RTConsole.html|See RTConsole as HTML5 with SET USE_HTML5_CUSTOM_MAIN=0]] 
 +  * [[http://​www.rtsoft.com/​RTBareBones.html|See RTBareBones as HTML5 with custom template CustomMainFullTemplate.htm]] 
 +  * [[http://​www.rtsoft.com/​RTSimpleApp.html|See RTSimpleApp as HTML5 with custom template CustomMain3-2AspectRatioTemplate.html]]
  
-You can't do direct socket/UDP access like you used to (there is new thing called websockets but they can't be used to communicate with standard sockets), but it is still possible to do networked games with some work aroundsIf you need to read files/data (you CAN post/get data) from a web pageyou need to setup the server itself to allow access if the original ​app wasn't downloaded from the same domain. Annoying, but without this people could basically DDOS any site by getting a lot of people ​to simply open a webpage.+By changing a few values in **<​Project name>/html5/​build_release.bat** ​you can set custom template ​to use instead of the default Emscripten one The custom templates have nice loading barslet the app respond ​to changing screen sizes and other bonuses.
  
-The good news is getting your Proton SDK based games to export to HTML5 is very easy and only requires setting up the makefile and maybe couple lines in your App.cpp file.+Note:  Even though ​the custom templates don't have text window that show LogMsgs, you can still view them by using Chrome'​s More tools->​Developer options and clicking the "​Console"​ tab ​(Firefox has a similar feature)
  
-== See it in action ==+RTBareBones using a custom Proton template but with the Chrome console open looks like this: 
 +{{:​proton:​rtbarbones_chrome.jpg?​400|}}
  
-  * [[http://​www.rtsoft.com/​RTConsole.html|See RTConsole as HTML5]] 
-  * [[http://​www.rtsoft.com/​RTBareBones.html|See RTBareBones as HTML5]] 
-  * [[http://​www.rtsoft.com/​RTSimpleApp.html|See RTSimpleApp as HTML5]] 
  
  
-== Installing Emscripten ===+====Installing Emscripten====
  
-  * First [[https://​kripken.github.io/​emscripten-site/​docs/​getting_started/​downloads.html|install Emscripten]]. ​ I think I did the 64 bit web installer.+  * First [[https://​kripken.github.io/​emscripten-site/​docs/​getting_started/​downloads.html|install Emscripten]]. ​ I think I did the 64 bit web installer.  Don't put any spaces in the path, makes life easier.
   * Then [[https://​kripken.github.io/​emscripten-site/​docs/​getting_started/​downloads.html#​verifying-the-installation|verify the install]].   * Then [[https://​kripken.github.io/​emscripten-site/​docs/​getting_started/​downloads.html#​verifying-the-installation|verify the install]].
   * You should probably [[https://​kripken.github.io/​emscripten-site/​docs/​getting_started/​Tutorial.html|go through the tutorial]] to compile something and make sure your Emscripten stuff is working ok.   * You should probably [[https://​kripken.github.io/​emscripten-site/​docs/​getting_started/​Tutorial.html|go through the tutorial]] to compile something and make sure your Emscripten stuff is working ok.
  
-== Updating the SDK ==+====Letting Proton know where your Emscripten dir is====
  
-From time to time, you should probably [[https://kripken.github.io/​emscripten-site/​docs/​getting_started/​downloads.html#​updating-the-sdk|update the SDK]] to make sure you have the latest version(at this time I'm using 1.34.1 64bit)+Edit the file proton/base_setup.bat ​Change ​the environmental var **EMSCRIPTEN_ROOT** ​to where you installed itMine is: 
 +<​code>​ 
 +SET EMSCRIPTEN_ROOT=C:​\pro\emscripten 
 +</​code>​
  
-== Your first compile: RTBareBones ==+This bat gets run as part of the html5 build process.
  
-Actually we could use RTConsole as it's simpler (no loop) but hey, let's do this.+====Updating the SDK====
  
-In file explorernavigate ​to your <proton checkout dir>​RTBareBones\html5+From time to timeyou should probably [[https://​kripken.github.io/​emscripten-site/​docs/​getting_started/​downloads.html#​updating-the-sdk|update the SDK]] to make sure you have the latest version. (at this time I'm using e1.38.1_64bit)
  
-Double click build_release.bat. ​ It's starts the black magic of envoking emscripten and fills the screen with strange things. ​ While this happening, go ahead and edit build_release.bat with a text editor. ​ You can see it's really just sort of a dos makefile. ​ It's here you need to add/remove .cpp files that you want to include.+====Your first compile: RTBareBones====
  
-Note that the makefile must include %SHARED%\html5\HTML5Main.cpp and %SHARED%\html5\HTML5Utils.cppthese are HTML5 specific files required. They handle ​the main loop and other HTML5 specific stuff like input.+Actually we could use **RTConsole** as it's simpler but hey, the process is the same anyway, so let's do this.
  
-If your app uses audio (RTBareBones doesn'​t)it will need to include %SHARED%\Audio\AudioManagerSDL.cpp.+In file explorernavigate ​to **proton/​RTBareBones/​html5**
  
-See that SET DEBUG=0? ​ You should set that to 1 during development to get more information.  It produces bigger, slower files though. Basically ​stuff works like a GCC makefile but with custom emscripten tweaks.+Double click **build_release.bat**.  It's starts the black magic of evoking emscripten which compiles your C++ stuff to become Javascript somehow.
  
-See the "​--embed-file ​../​bin/​interface@interface/"​ part near the bottom? ​ This is how you embed directories ​of files.  ​You'll get file not found errors if you forgot ​to add one that your app uses.+While this happening, go ahead and look at build_release.bat with a text editor.  ​You can see it's really just sort of a dos makefile.  ​It's here you need to add/remove .cpp files that you want to include.
  
-RTSimpleApp builds ​the identical way.+Note that the makefile must include **%SHARED%\html5\HTML5Main.cpp** and **%SHARED%\html5\HTML5Utils.cpp** if _CONSOLE isn't defined, these are HTML5 specific files required. They handle the main loop and other HTML5 specific stuff like input.
  
-If everything worked, you'll see RTBareBones.html and RTBareBones.js in same directory as the batch files, at 102KB and 1,138KB sizes. ​ Not bad!  ​You ​can double click the .html file to run it in your browser. UploadToWebsite.bat can be tweaked ​to also upload it somewhere so the BuildAndUpload.bat worksnot required ​though.+See that SET DEBUG=0? ​ ​You ​should set that to 1 during development ​to get more information It produces biggerslower files though. Basically stuff works like a GCC makefile but with custom emscripten tweaks.
  
 +See the "​--embed-file ../​bin/​interface@interface/"​ part near the bottom? ​ This is how you embed directories of files. ​ You'll get file not found errors if you forgot to add one that your app uses.
  
-== Source code changes ==+If everything worked, you'll see the following files have been created: 
 +  * RTBareBones.html 
 +  * RTBareBones.js 
 +  * RTBareBones.data 
 +  * RTBareBones.wasm 
 +  * The directory **WebLoaderData** which contains a few images and **RTLoader.js**.
  
-For RTSimpleApp I really only changed one thing:+All of these are required to run this app.  ​
  
-I added CLEAR_GL_ERRORS();​ after glClearColor(0,​0,​0,​1);​ in App::Draw This fixes eats a GL error that is caused by emscriptems legacy GL 1 supportI dunno why it'​s ​happeningthe glClear does work.+If you just double click the .html file, it'​s ​not going to work. You need to put this on an actual website so it can load its data - orjust double click RunHTTPServerFromThisDir.bat. ​ It uses emrun (comes with Emscripten) to host a tiny fake website locally so you can test things.
  
-For audio, use AudioManagerSDL.+Important note on filesizes: ​ If you enable gzip support on your website for .js and .wasm this app will only be around a 500 kb download! ​ You can test if individual files are being gzipped by using [[https://​varvy.com/​tools/​gzip|this]].
  
-These means in your App.cpp, +RTSimpleApp builds the identical way.
  
-change+====Source code changes====
  
-<​code>#​if defined RT_WEBOS || defined RTLINUX  +For **RTSimpleApp** I really only changed one thing:
-#include "​Audio/​AudioManagerSDL.h"​ +
-AudioManagerSDL g_audioManager;</​code>​+
  
 +I added **CLEAR_GL_ERRORS(**);​ after **glClearColor(0,​0,​0,​1)**;​ in **App::​Draw**. ​ This fixes eats a GL error that is caused by emscriptems legacy GL 1 support, I dunno why it's happening, the glClear will get rid of it.
  
-to+====Persistent files====
  
-<​code>#​if defined RT_WEBOS || defined RTLINUX || defined PLATFORM_HTML5 +You want your save data to persist across sessions, right? Nothing could be easier! ​ Internally, anything written to **GetSavePath()** is written in a special place that is setup for being persistent. ​ However, *you* have to actually run a command that will cause it to be saved.
-#include "​Audio/​AudioManagerSDL.h" +
-AudioManagerSDL g_audioManager;</​code>​+
  
-and you should be golden.+You do that by calling **SyncPersistentData();​** when you want to save what has been currently written/​changed in **GetSavePath()**.
  
-=== Tips and gotchas ===+(Proton will automatically sync all existing persistent data before giving you control to load anything, so you don't have to worry about anything except choosing when to "​sync"​ the save data) 
 +====Tips and gotchas====
  
-GL Limitations:​ GL emulation is handled by emscripten with the -s LEGACY_GL_EMULATION=1. It's not that great. It works fine for 2D games but expect features to be missing for any 3d stuff you're porting. My game Mindwall is playable, but the lighting and color is wrong. ​ The way forward here is to use GLES 2+ which it can emulate with WebGL much better, but I'm not sure if I want to do that with Proton in general or not right now.+**GL Limitations:​** GL emulation is handled by emscripten with the -s LEGACY_GL_EMULATION=1. It's not that great. It works fine for 2D games but expect features to be missing for any 3d stuff you're porting. My game Mindwall is playable, but the lighting and color is wrong. ​ The way forward here is to use GLES 2+ which it can emulate with WebGL much better, but I'm not sure if I want to do that with Proton in general or not right now.
  
-Networking: if you run the .html locally but try to read/write highscores to scores.php on your webserver it's going to fail.  You'll have to actually upload your files then run it from the actual domain name for it to work, or [[http://​www.html5rocks.com/​en/​tutorials/​cors/​|check out what Cross-Origin Resource Sharings is]] and set up your server to accept stuff from your home IP address. Also, having the www in your url or seems to matter too when it compares domain names.+**Networking:** if you run the .html locally but try to read/write highscores to scores.php on your webserver it's going to fail.  You'll have to actually upload your files then run it from the actual domain name for it to work, or [[http://​www.html5rocks.com/​en/​tutorials/​cors/​|check out what Cross-Origin Resource Sharings is]] and set up your server to accept stuff from your home IP address. Also, having the www in your url or seems to matter too when it compares domain names.
  
-Proton'​s NetHTTP class to get/post to web sites is emulated behind the scenes with NetHTTP_HTML5.cpp,​ a special version for emscripten that uses emscripten_async_wget2_data. No code changes necessary.+Proton'​s ​**NetHTTP** class to get/post to web sites is emulated behind the scenes with NetHTTP_HTML5.cpp,​ a special version for emscripten that uses **emscripten_async_wget2_data**. No code changes necessary.
  
-Screen size:  This can be overridden in App::​PreInitVideo by changing the globals g_winVideoScreenX and Y. (You may need to declare them as extern first (ie, extern int g_winVideoScreenX;​ extern int g_winVideoScreenY;​ yeah, I know, the whole thing is weird but I'm afraid of changing anything now due to backwards compatibility) By default, in HTML5Main.cpp it gets set to this:+=== Stuff Proton does for you when using its custom html setups ===
  
-<​code>​g_winVideoScreenX = 480; +See that **RTLoader.js** file that was put in **WebLoaderData**? ​ This is coming from **shared/html5/​templates/​WebLoaderData**,​ it's shared between projects.
-g_winVideoScreenY = 320;</code>+
  
-  +It adds Javascript handlers so you can both import and export files directly from the user using file dialog. ​ (Dink HD's HTML5 version lets users import/​export save games directly to files for example)
-There is some weirdness to work out with screen scaling and mouse click locations turning wonky when sizes are changed in realtime. By default it will start in a window, but you can actually get it to start in fullscreen by default by uncommenting enterSoftFullscreen(EMSCRIPTEN_FULLSCREEN_SCALE_ASPECT,​ EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_STDDEF,​ EMSCRIPTEN_FULLSCREEN_FILTERING_NEAREST) but if you do this the mouse clicks are off bit, I don't know why.+
  
-Size: There is also the issue of a 102 kb default ​.html file that is generated that is doing stuff we probably don't need, I've looked in there and it is possible to remove a lot of it (the emscripten logo is in there for instance), hopefully emscripten html generator will have more options in the future, otherwise you can hand edit it and adjust your batch files I guess +The templates are also shared between projects ​Notice ​that inside them, the name "​**RTTemplateNam**e" ​is used.  This text is replaced as part of the build process.
  
-Compression - Nowyou may say that 1,138 kb .js file for RTBareBones ​is big, but fear not - it's actually only 264 KB when you run it from my link above.+Alsosee that **shared/​html5/​SharedJSLib.js**?  That is being merged into the final Javascript ​- it allows Proton to do the following:
  
-What is this witchcraft? The server is compressing ​it! You can [[http://​www.whatsmyip.org/​http-compression-test/?​url=aHR0cDovL3d3dy5ydHNvZnQuY29tL1JUQmFyZUJvbmVzLmpz|check it here]].+  * Get around iOS's Safari refusing to turn audio on by automatically playing a blank audio sample on the first OnClick to set it up 
 +  * Wrap button presses around OnClick so URLs to new windows will properly open 
 +  * Do very basic string input (you can see this in the **RTSimpleApp**)
proton/html5_setup.1523496252.txt.gz · Last modified: 2018/04/12 01:24 by seth