Facebook game scaling (SOLVED)

Questions
1

Hi Defold people! I have a “little” problem. I originally developed my small joke game for office fellows in 1280x720px res. They play it well, but now i want to add some new features to game and add it to facebook just to try.
In facebook i set fixed width 760px (can not change) and height to 447px, so i can view game well on my notebook (1280x720), but game content not scaled to facebook resolution. Is there any solution to pass facebook canvas params to game on start. Or maybe i went wrong way?

2

You can change pass in engine parameters when you launch the HTML5 version of your game. If you inspect the default index.html that is generated when you bundle for HTML5 the piece of code that launches the game looks something like this:

<script type='text/javascript'>
	var extra_params = {
		archive_location_filter: function( path ) {
			return ("archive" + path + "");
		},

		splash_image: "splash_image.png",
		custom_heap_size: 268435456
	}

    Module.runApp("canvas", extra_params);

    /* Fullscreen button */
    document.getElementById("fullscreen").onclick = function (e) {
      Module.toggleFullscreen();
    };
</script>

Now, you can add a set of engine arguments to the list of extra_params. The engine arguments can override the values in game.project. This means that you can for instance modify the display width and height, toggle physics debug, set update frequency and any other value that you may find in game.project. It looks like this (notice new engine_arguments list):

<script type='text/javascript'>
	var extra_params = {
		archive_location_filter: function( path ) {
			return ("archive" + path + "");
		},

		engine_arguments : [
			"--config=display.width=760",
			"--config=display.height=447",
			"--config=physics.debug=1"
		],
		splash_image: "splash_image.png",
		custom_heap_size: 268435456
	}

    Module.runApp("canvas", extra_params);

    /* Fullscreen button */
    document.getElementById("fullscreen").onclick = function (e) {
      Module.toggleFullscreen();
    };
</script>
1 Like
3

For GUIs there is also have something called “GUI Layouts”, where you can specify how the GUIs look/behave under different resolutions/aspect ratios. :slight_smile:

4

Sorry for long absence )
Thanks for your replies that help me, but not in all things.

So i developed game in 1280x720. Now if i set params to 760x447 the screen became smaller, but content (gui and game things) preserve their scale and positions. So i thought from manuals that if i keep aspect ratio things can be done automatically.

Should i do smh to render script to do desired behavior? Or i should use gui layouts for corresponding w/h (760x447)? If gui layouts what to do with GOs?
Thanks!

5

Hm…
Read some topics again http://www.defold.com/manuals/gui/#_handling_different_resolutions_and_aspect_ratios
Changed project settings back to 1280x720 and tried to scale game window in runtime. Every thing scales as i wanted and expected.
So how to simulate this behavior on Facebook. So what should i pass to game or maybe do by code to simulate resize from 1280x720 to desired res?

6

Hi! :slight_smile:
I think you should be able to just set the size of the canvas elements size in the HTML file to the desired resolution, something like;

...
<canvas width="desired-width" height="desired-height" ...>
...

It should behave just as if you resized a native window.

(I haven’t tested this myself, but if I remember correctly this is what they do in the Blossom Blast Facebook release.)

2 Likes
7

Yeah! Exactly what i want. Why didn’t i get to it myself :slight_smile:
Thank you very much!

1 Like