Jump to content

Scaling game for multiple devices


Chubby
 Share

Recommended Posts

Hello all,

 

I want to make my game scale for all touch devices exist (or atleast most of them.)

I know I can scale my game using:

this.game.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.game.scale.setShowAll();this.game.scale.refresh();

but it might leave spaced areas which I dont want - I want to use all the area I can.

 

I saw the following topic: http://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/

 

but I am not sure if it is the correct solution.. is there anything better / verified?

Link to comment
Share on other sites

It is an important topic. But, there is no BEST solution though, it's depend what are your needs and what you are trying to do.

I choose this solution since I wanted to auto scale my screen to fit all the devices without any black area at the sides (which I think that's what you want to achieve). 

Link to comment
Share on other sites

I'll echo what @kidos wrote: there is no best answer. The thread you found is a great start. So too is the solution kidos links to as well. And I'll even add in the section under Scaling in the thread "Common Phaser + CocoonJS Issues" as something to think about.

 

Trying to target ALL touch devices is probably not a good idea. It means trying to account for all manner of strange screen sizes and resolutions. It can also mean a great deal of testing on alternative devices and platforms.

 

It might be worth it to just target a single platform (Windows, iOS, Android, BlackBerry, Kindle) and a range of versions instead to optimize the experience for those users.

Link to comment
Share on other sites

The only solution to avoid the spaced areas on all mobile devices is to use EXACT_FIT instead of SHOW_ALL. This unfortunately means that your game won't have the same aspect ratio on all of them, but from my experience with sponsors (and I've sold games to 12+ different ones), they don't like the spaced areas and they never complained about using EXACT_FIT.

 

So here is the code I use on all my games:

if (this.game.device.desktop) {    this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    this.game.scale.pageAlignHorizontally = true;    this.game.scale.pageAlignVertically = true;} else {    this.game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;    this.game.scale.forceOrientation(false, true, 'orientation.png');}this.scale.setScreenSize(true);

Make sure you use SHOW_ALL on desktop as many sponsors actually test the games on desktop, so it better looks good.

Link to comment
Share on other sites

Ok, so here's my resize function and I will explain how it works.

First of all, my game must be on portrait, so the function matches portrait games but you can change it to fit landscape aswell.

 

  1. There are 3 functions.
    • detectOrientation - detecting current orientation
    • showImageByOrientation - display an image / another div if the orientation is not portrait (or if the device is in split screen and the proportions are not good for the game - NOT TESTED YET)
    • initializePhaser:
    If Phaser didnt initalize before and it is possible to start Phaser (device is not in split screen - apply only for mobile)
    If Mobile, use safe size and add extra size depend on the aspect ratio of the device to perfect fit
  2.  It gets the portrait browser size (even if it's in landscape)
  3.  It checks if the device is mobile or not using useragent regex http://detectmobilebrowsers.com/
  4.  If the device is mobile, add 2 resize event listeners - 1 to use the above 2 functions (detectOrientation and showImageByOrientation), 2 to initialize phaser (initializePhaser)

*I used the same method shown here http://www.html5gamedevs.com/topic/1380-how-to-scale-entire-game-up/?p=40538 but for portrait instead of landscape and added some extra functionality so it will work as I want it to work

 

Did my best in the explanation above, but if you still dont understand you are welcome to ask.

Also, if you have a way to improve my method, you are more then welcome to suggest!

var portraitBrowserSize,	userAgent = navigator.userAgent||navigator.vendor||window.operam,	isMobile = false,	startPhaser = true,	phaserInitialized = false;	function detectOrientation(){	deviceSize = {width : window.screen.width, height : window.screen.height};	return ((deviceSize.width > deviceSize.height) ? "landscape" : "portrait");}function showImageByOrientation(){	if (currentOrientation == "landscape")	{		//show correct image	}	else if (portraitBrowserSize.height <= deviceSize.height/2)	{		startPhaser = false;		//show correct image	}}function initializePhaser(){	if ((startPhaser) && (!phaserInitialized))	{		phaserInitialized = true;			var safeZoneSize = {width: 512, height : 768},			extraSize = {width : 0, height : 0};			if (isMobile)		{			window.removeEventListener('resize', initializePhaser);						var aspectRatioDevice = portraitBrowserSize.height/portraitBrowserSize.width,				aspectRatioSafeZone = safeZoneSize.height / safeZoneSize.width;								if (aspectRatioSafeZone < aspectRatioDevice)			{				extraSize.height = aspectRatioDevice * safeZoneSize.width - safeZoneSize.height;			}			else			{				extraSize.width = safeZoneSize.height / aspectRatioDevice - safeZoneSize.width;			}		}				game = new Phaser.Game(safeZoneSize.width + extraSize.width, safeZoneSize.height + extraSize.height, Phaser.AUTO);	}}if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(userAgent)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(userAgent.substr(0,4))){	var deviceSize;	isMobile = true;		var currentOrientation = detectOrientation();		portraitBrowserSize = {width : window.innerWidth, height : window.innerHeight}		if (portraitBrowserSize.width > portraitBrowserSize.height)	{		portraitBrowserSize = {width : window.innerHeight, height : window.innerWidth};	}		window.addEventListener('resize', function()	{		currentOrientation = detectOrientation();		showImageByOrientation();	});		window.addEventListener('resize', initializePhaser);}initializePhaser();/* put in the preloader */this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.game.scale.pageAlignHorizontally = true;this.game.scale.pageAlignVertically = true;this.game.scale.setScreenSize();this.game.scale.refresh();
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...