Remove index.html and replace it with Manifest Merge Tool (#80)

* Replace template with merging tool * Added info about html5 manual
defold · Oct 2, 2019 · 770ca91 · 770ca91
1 parent a0faa64
commit 770ca91
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 196 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,8 @@ https://github.com/defold/extension-fbinstant/archive/master.zip
 Or point to the ZIP file of a [specific release](https://github.com/defold/extension-fbinstant/releases).
 
 ## 2. Preparing index.html
-Before the extension can be used you need to add the Facebook Instant Games API to the index.html of your game. [Refer to the index.html in the root of this project](https://github.com/defold/extension-fbinstant/blob/master/fbinstant/index.html#L58) for an example of this.
+
+Configure your `game.project` HTML5 section according to the [manual](https://defold.com/manuals/html5/).
 
 ### 2.1 Report loading progress
 Facebook Instant Games can show the progress while the game is loaded. It is quite easy to set this up for a Defold game. All that is required is to override the Progress.updateProgress() function and pass along the value to the Instant Games API (this is done for you [in the default index.html](https://github.com/defold/extension-fbinstant/blob/master/fbinstant/index.html#L68-L71) provided with this extension):
@@ -36,15 +37,6 @@ It has been observed that the progress updates do not work properly on Android.
 		Module._fbinstant_inited = true;
 	});
 ```
-### 2.3 game.project options
-Add the following lines to your game.project file:
-```
-[fb_instant]
-stretch_canvas = 1
-```
-`stretch_canvas = 0` if you want to fit canvas into the browser window bounds.
-
-`stretch_canvas = 1` if you want to stretch canvas.
 
 ## 3. Create a Facebook App
 You also need to create a Facebook App where Instant Games is enabled. Please refer to the [Getting Started documentation](https://developers.facebook.com/docs/games/instant-games/getting-started) on the Instant Games page for further instructions.

diff --git a/fbinstant/index.html b/fbinstant/index.html
diff --git a/fbinstant/manifests/web/engine_template.html b/fbinstant/manifests/web/engine_template.html
@@ -0,0 +1,31 @@
+<html>
+<head>
+    <style>
+
+    .canvas-app-progress {
+        visibility: hidden;
+    }
+
+    .canvas-app-progress-bar {
+        visibility: hidden;
+    }
+    </style>
+</head>
+<body oncontextmenu="return false;">
+    <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
+    <script type='text/javascript'>
+        // Set up a progress listener and feed progress to FBInstant
+        Progress.updateProgress = function (percentage, text) {
+            FBInstant.setLoadingProgress(percentage);
+        }
+
+        // Do early initialization of FBInstant
+        // This is required to be able to properly update the loading
+        // progress above.
+        FBInstant.initializeAsync().then(function() {
+            // This will be checked by the FBInstant Defold extension
+    		Module._fbinstant_inited = true;
+    	});
+    </script>
+</body>
+</html>
diff --git a/game.project b/game.project
@@ -17,9 +17,6 @@ height = 1136
 [script]
 shared_state = 1
 
-[html5]
-htmlfile = /fbinstant/index.html
-
 [library]
 include_dirs = fbinstant
 
@@ -29,9 +26,11 @@ app_manifest = /tictactoe/tictactoe.appmanifest
 [graphics]
 texture_profiles = /tictactoe/tictactoe.texture_profiles
 
-[fb_instant]
-stretch_canvas = 0
-
 [collection_proxy]
 max_count = 9
 
+[html5]
+scale_mode = stretch
+show_fullscreen_button = 0
+show_made_with_defold = 0
+