Differences

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

--- proton:html5_setup [2018/07/28 14:04] – seth
+++ proton:html5_setup [2024/01/13 04:55] (current) – Fixed web links seth
@@ Line 1: / Line 1: @@
 ====Compiling the examples for HTML5 with Enscripten from Windows ====
-== About and situation ==
 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.
@@ Line 14: / Line 11: @@
 == See it in action ==
-  * [[http://www.rtsoft.com/RTConsole.html|See RTConsole as HTML5 with SET USE_HTML5_CUSTOM_MAIN=0]]
+  * [[https://www.rtsoft.com/web/rtconsole/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]]
+  * [[https://www.rtsoft.com/web/rtbarebones/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]]
+  * [[https://www.rtsoft.com/web/rtsimpleapp/RTSimpleApp.html|See RTSimpleApp as HTML5 with custom template CustomMain3-2AspectRatioTemplate.html]]
-By changing a few values in <Project name>/html5/build_release.bat you can set a custom template to use instead of the default Emscripten one.  The custom templates have nice loading bars, let the app respond to changing screen sizes and other bonuses.
+By changing a few values in **<Project name>/html5/build_release.bat** you can set a custom template to use instead of the default Emscripten one.  The custom templates have nice loading bars, let the app respond to changing screen sizes and other bonuses.
 Note:  Even though the custom templates don't have a 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)
@@ Line 25: / Line 22: @@
 {{:proton:rtbarbones_chrome.jpg?400|}}
-== 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.  Don't put any spaces in the path, makes life easier.
@@ Line 31: / Line 30: @@
   * 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.
-== Letting Proton know where your Emscripten dir is ==
+====Letting Proton know where your Emscripten dir is====
-Edit the file proton/base_setup.bat.  Change the environmental var EMSCRIPTEN_ROOT to where you installed it. Mine is:
+Edit the file proton/base_setup.bat.  Change the environmental var **EMSCRIPTEN_ROOT** to where you installed it. Mine is:
 <code>
 SET EMSCRIPTEN_ROOT=C:\pro\emscripten
@@ Line 40: / Line 39: @@
 This bat gets run as part of the html5 build process.
-== Updating the SDK ==
+====Updating the SDK====
 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 e1.38.1_64bit)
-== Your first compile: RTBareBones ==
+====Your first compile: RTBareBones====
-Actually we could use RTConsole as it's simpler but hey, the process is the same anyway, so let's do this.
+Actually we could use **RTConsole** as it's simpler but hey, the process is the same anyway, so let's do this.
-In file explorer, navigate to proton/RTBareBones/html5
+In file explorer, navigate to **proton/RTBareBones/html5**
-Double click build_release.bat.  It's starts the black magic of envoking emscripten which compiles your C++ stuff to become Javascript somehow.
+Double click **build_release.bat**.  It's starts the black magic of evoking emscripten which compiles your C++ stuff to become Javascript somehow.
 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.
-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.
+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.
 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.
@@ Line 61: / Line 60: @@
 If everything worked, you'll see the following files have been created:
-* RTBareBones.html
+  * RTBareBones.html
-* RTBareBones.js
+  * RTBareBones.js
-* RTBareBones.data
+  * RTBareBones.data
-* RTBareBones.wasm
+  * RTBareBones.wasm
-* The directory WebLoaderData which contains a few images and RTLoader.js.
+  * The directory **WebLoaderData** which contains a few images and **RTLoader.js**.
 All of these are required to run this app.
@@ Line 75: / Line 74: @@
 RTSimpleApp builds the identical way.
-== Source code changes ==
+====Source code changes====
-For RTSimpleApp I really only changed one thing:
+For **RTSimpleApp** I really only changed one thing:
-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.
+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.
-=== Tips and gotchas ===
+====Persistent files====
-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.
+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.
-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.
+You do that by calling **SyncPersistentData();** when you want to save what has been currently written/changed in **GetSavePath()**.
-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 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.
+**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.
 === Stuff Proton does for you when using its custom html setups ===
-See that RTLoader.js file that was put in WebLoaderData?  This is coming from shared/html5/templates/WebLoaderData, it's shared between projects. It adds Javascript handlers so you can both import and export files directly from the user using a file dialog.  (Dink HD's HTML5 version lets users import/export save games directly to files for example)
+See that **RTLoader.js** file that was put in **WebLoaderData**?  This is coming from **shared/html5/templates/WebLoaderData**, it's shared between projects.
+It adds Javascript handlers so you can both import and export files directly from the user using a file dialog.  (Dink HD's HTML5 version lets users import/export save games directly to files for example)
-The templates are also shared between projects.  Notice that inside them, the name "RTTemplateName" is used.  This text is replaced as part of the build process.
+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.
-Also, see that shared/html5/SharedJSLib.js?  That is being merged into the final Javascript - it allows Proton to do the following:
+Also, see that **shared/html5/SharedJSLib.js**?  That is being merged into the final Javascript - it allows Proton to do the following:
-* 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
+  * 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
+  * 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)
+  * Do very basic string input (you can see this in the **RTSimpleApp**)