Full screen option for a game canvas (#65)

* Full screen option for a game canvas * Gramma fixes
defold · Apr 29, 2019 · 0806844 · 0806844
1 parent 676ee91
commit 0806844
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,12 @@ It has been observed that the progress updates do not work properly on Android.
 		Module._fbinstant_inited = true;
 	});
 ```
+### 2.3 game.project options
+By default, game canvas fit into the browser window bounds. If you want to stretch canvas, add the following lines to your game.project file:
+```
+[fb_instant]
+stretch_canvas = 1
+```
 
 ## 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
@@ -121,28 +121,37 @@
             var app_container = document.getElementById('app-container');
             var game_canvas = document.getElementById('canvas');
 
-            var dpi=window.devicePixelRatio || 1
-            var width=window.innerWidth;
-            var height=window.innerHeight;
-            var targetRatio = {{display.width}}/{{display.height}};
-            var actualRatio = width/height;
-            if (actualRatio > targetRatio) {
-                width = height * targetRatio;
-                app_container.style.marginLeft = ((window.innerWidth - width) / 2) + "px"
-                app_container.style.marginTop = "0px"
-            }
-            else {
-                height = width / targetRatio;
-                app_container.style.marginLeft = "0px"
-                app_container.style.marginTop = ((window.innerHeight - height) / 2) + "px"
+            var dpi = window.devicePixelRatio || 1;
+            var width = window.innerWidth;
+            var height = window.innerHeight;
+            var targetRatio = {{display.width}} / {{display.height}};
+            var actualRatio = width / height;
+
+            var isStretchCanvas = {{fb_instant.stretch_canvas}} + 0;
+            if (isStretchCanvas) {
+                app_container.style.width = width + "px";
+                app_container.style.height = height + "px";
+                game_canvas.width = width * dpi;
+                game_canvas.height = height * dpi;
+            } else {
+                if (actualRatio > targetRatio) {
+                    width = height * targetRatio;
+                    app_container.style.marginLeft = ((window.innerWidth - width) / 2) + "px"
+                    app_container.style.marginTop = "0px"
+                }
+                else {
+                    height = width / targetRatio;
+                    app_container.style.marginLeft = "0px"
+                    app_container.style.marginTop = ((window.innerHeight - height) / 2) + "px"
+                }
+
+                app_container.style.width = width+"px";
+                app_container.style.height = height+"px";
+
+                game_canvas.width = width*dpi;
+                game_canvas.height = height*dpi;
             }
 
-            app_container.style.width = width+"px";
-            app_container.style.height = height+"px";
-
-            game_canvas.width = width*dpi;
-            game_canvas.height = height*dpi;
-
             window.console.log("width: " + game_canvas.width + " > "+ game_canvas.style.width)
             window.console.log("height:" + game_canvas.height + " > "+ game_canvas.style.height)
         }

diff --git a/game.project b/game.project
@@ -28,3 +28,6 @@ app_manifest = /tictactoe/tictactoe.appmanifest
 [graphics]
 texture_profiles = /tictactoe/tictactoe.texture_profiles
 
+[fb_instant]
+stretch_canvas = 0
+