Facebook Instant Games - Wrong Resolution on Mobile (JS/HTML5) - javascript

I am creating a Facebook Instant game using GameMaker Studio 2. It works fine on desktop browsers, but on the mobile Messenger app, the resolution gets fixed to 360*640 (or something around that).
While the game goes fullscreen in the app, it seems like the canvas stays at 360*640.
I got the screen size using the code below and applied it to the game:
var w = window.innerWidth * window.devicePixelRatio;
var h = window.innerHeight * window.devicePixelRatio;
Now, the game appears at the correct resolution (720*1280), but doesn't fit into the canvas. Only the top-left (360*640) part of the game is visible.
How can I stretch the size of the Facebook game canvas on mobile? Or is there something I am doing wrong?

Related

WebView on android zooms in

I'm making a game for android, the game and all the files are on my server and I'm using a webView to display the game in the app
So after I got the app and everything created I noticed no matter what I change on the webView or on the server it always zooms in so the user has to zoom out In order to play
Does anybody know how I can make the canvas and background image scale to width and height
I tried
var c = document.getElementById ('canvas');
c.width = window.innerWidth;
This works to resize the canvas but the enemy's will still follow the path of the image
Here is a link to the game http://deathcrow.altervista.org/0android/td/index.php
If you need any of the code let me know I didn't post any cause I am on my phone
Here are links to all my coding I'm not able to put it on here due to being on my phone
http://deathcrow.altervista.org/0android/td/js/mainLoop.js
http://deathcrow.altervista.org/0android/td/js/attackerUnits.js
http://deathcrow.altervista.org/0android/td/js/towerUnits.js
http://deathcrow.altervista.org/0android/td/js/bullets.js
http://deathcrow.altervista.org/0android/td/js/mouseClick.js
You should be able to get the webview not to zoom with:
webview.getSettings().setBuiltInZoomControls(false);
webview.getSettings().setSupportZoom(false);
webview.getSettings().setLoadWithOverviewMode(true);
Have you actually moved to coding it on a canvas instead? Am I answering your question?

How to disable auto rotate for a video preview in a Windows Phone 8.1 App using javascript/html5

I followed the tutorial below to create a Windows Phone 8.1 app for previewing the camera capture:
http://msdn.microsoft.com/en-us/library/windows/apps/Hh452789(v=win.10).aspx
However, there is an undesired behavior of this basic app. When the device is placed horizontally, with the top pointing to the left, the orientation of the preview is the same as the scene, which is fine. However, when the device rotates to the portrait position (top up), the preview auto rotates to a confusing orientation. Below is a picture demonstrating this behavior.
I guess what I want is the same behavior as the built-in Camera app of a Windows Phone, that the preview orientation always follows the camera (image panel) orientation. In other words, no matter how the device is rotated, the house roof tip should always point upward. Is that possible using the developer API? If so, what function or attributes should I use?
One potential solution I can think of is to disable auto rotate for the element that is used to hold the preview. However, I don't know how to do that. In addition, can one disable the auto rotate for only some elements in an app page instead of the entire page? I ask because I want to display some text over the video preview and I want the text to auto rotate for legibility.
MediaCapture _mediaCapture = new MediaCapture();
_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
await _mediaCapture.InitializeAsync();
await _mediaCapture.StartPreviewAsync();
Check the phone orientation on orientation changed and set the MediaCapture .SetPreviewRotation(VideoRotation.Clockwise90Degrees) as you want.

HTML 5 Canvas keep aspect ration

I am making a 2D game in HTML5 and Javascript. The target is a Windows 8 app. I want to code the canvas so that on every monitor the player can't see more or less of the game. I can't seem to get anything to work...
Any ideas?
Thanks!
You could make everthing scale with your ratio and window.innerWidth
or
you can check the display stats and make it work for 99% of the users.
w3schools browser statistics
w3schools innerWidth innerHeight

Mobile Phone innerWidth,innerHeight vs Resolution

One of my test phones is a Galaxy S3 Mini. The specs of this phone say it is a 800x480 resolution.
However, when I do the following in my HTML game:
window.innerWidth
window.innerHeight
It gives 533 for the width and 295 for the height.
Now I've read about window.devicePixelRatio, and for my phone it is 1.5
But how can this help me make my design look good?
The problem is that my game is designed for 800x480, and it looks stretched because of this.
use this, to get Width & Height:
WindowManager wm = getWindowManager();
Display d = wm.getDefaultDisplay();
d.getWidth() and d.getHeight()
The window.inner.. properties refer to the browser, not to the resolution of the screen. They are usually smaller, due to status bars, address bar and other toolbars, window borders and so on.

Scaling KineticJS canvas with CocoonJS idtkscale

I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen.
CocoonJS says this about the scaling:
CocoonJS automatically scales your main canvas to fill the whole screen while you still
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:
idtkScale
'ScaleToFill' // Default
'ScaleAspectFit'
'ScaleAspectFill'
canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of
the ones listed above.
I have tried this adding this:
layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';
But it is not working. Any idea how to get KineticJS created Canvases to scale in CocoonJS?
When dealing with making a canvas object full screen if on mobile. In CocoonJS this feature is out of the box. So we patched the code to set
document.body.style.width
and
document.body.style.height
These are DOM related and not supported (nor needed on full screen mode). Also code related to canvas style and position was patched, since it isn’t needed.
For now on, the correct way of getting screen size is
window.innerWidth
and
window.innerHeight
To make your Canvas objects full screen, set
canvas.width= window.innerWidth; canvas.height= window.innerHeight
One thing you must know about CocoonJS is that you don’t have to change your canvas size to make it run fullscreen. CocoonJS will up/down scale your canvas and have correct touch coordinates sent. You could choose how you’d like your canvas to be scaled, either keeping aspect ratio or not, and also if you want to have no blurring filter applied to the scaling operation, which comes handy for games relying on pixel art. Refer to the official CocoonJS Wiki pages to know how to control scale operations.
REFERENCE
http://blog.ludei.com/cocoonjs-a-survival-guide/
Okay, I found an answer to this question myself and since there are so many up votes, I want to share the solution.
The solution was to comment some code within KineticJS and then add the CocoonJS scaling to the canvas creation.
Comment these lines (not all at one place):
inside _resizeDOM:
this.content.style.width = width + PX;
this.content.style.height = height + PX;
inside setWidth of Canvas:
this._canvas.style.width = width + 'px';
inside setHeight of Canvas:
this._canvas.style.height = height + 'px';
Add this inside Canvas prototype init:
this._canvas.style.idtkscale = "ScaleAspectFill";
This does the trick for me. Now what I do is I calculate the correct aspect ratio for the canvas and let CocoonJS scale it for me. Hope this is as useful for others as it has been for me!

Categories