Facebook Game Canvas question

Hello everyone
I am a user from Taiwan
I would like to ask if I used hype4 to create a quiz to upload to Facebook, but the left and right scrolls keep appearing when the platform is displayed. Is there a problem with the settings over there?

ζˆͺεœ– 2020-09-01 δΈ‹εˆ11.01.30

I recommend unchecking this β€˜height’ checkbox.

Also, your scene size is very large β€” does Facebook give you a recommended size to work with?

Yes, I thought the resolution would be better this way, I am not familiar with it, and I still don’t understand it after using it! Facebook does not provide suggested canvas width and height, so I have been stuck at this problem and cannot be solved @@

Thank you for your reply

There seems to be no new version of the teaching on the official website, and the location and settings of the elements are often very different in the preview. I am still studying this part.

Okay, thank you, I will try to cancel the altitude setting after get off work!

thank you for @Daniel This problem has been solved !

when I submitted it to Facebook for review, it was returned. Facebook showed that my problem was :

Unless zooming or scrolling is part of the game, the game should not have these features. Please see the instant game description for more details.


The above is a reply from Face Lost to me, but in my own Facebook game test it seems normal without scrolls ...

The following picture shows my measurement of the game 100% zoom


ζˆͺεœ– 2020-09-11 δΈ‹εˆ5.22.25

Excuse me, is this to close the prohibition
Initial zoom 1.0 ?
Allow users to zoom ?

I'm not really sure what Facebook is looking here, but there are at least a couple approaches to disable scrolling. The first would be to add JavaScript code that does not allow a touchmove event on mobile to scroll:

	var preventScroll = function (event) {
		event.stopPropagation();
		event.preventDefault();
	}
	var docElement = hypeDocument.getElementById(hypeDocument.documentId());
	
	if(docElement.addEventListener) {
		docElement.addEventListener('touchmove', preventScroll, true);
	}

I have this code in my On Scene Load handler, but it should only be run once so if you have more than one scene you may need to keep track of that.

Another method that will work on Desktop would be to set the body to not use scrolling overflow. You can add this code to the Head HTML:

<style>
body {
	overflow: hidden;
}
</style>

You may also want to uncheck "Allow user scaling" and change the other mobile options... it is unclear what the actual requirement is and the operating environment will be.

1 Like

thank you for your reply , i am try it , thank you