Game-sizing for different targets (Mobile, Tablet, Desktop)

Shaun Michael K. Stone

unread,

Aug 2, 2015, 5:49:17 AM8/2/15

to haxef...@googlegroups.com

Hey all,

I have a feeling I may be doing more than what is required of me in terms of trying to position items on the stage.

For Desktop: 1920x1080

For Tablet: 960X540

For Mobile: 480x270

So I half/quarter the size of my images to meet these requirements. The in the code I run all positioning through a GameSize Class.

package helpers;
import helpers.GameSize;

/**
 * @author Shaun Stone (SMKS)
 */
class GameSize
{
	/** Desktop dimensions **/
	private static inline var DESKTOP_WIDTH:UInt = 1920;
	private static inline var DESKTOP_HEIGHT:UInt = 1080;
	
	/** Tablet dimensions **/
	private static inline var TABLET_WIDTH:UInt = 960;
	private static inline var TABLET_HEIGHT:UInt = 540;
	
	/** Mobile dimensions **/
	private static inline var MOBILE_WIDTH:UInt = 480;
	private static inline var MOBILE_HEIGHT:UInt = 270;

	/**
	 * @return Uint
	 */
	public static function getWidthByPlatform():Int
	{
		if (TargetPlatform.isMobile()) {
			return GameSize.MOBILE_WIDTH;
		}
		
		if (TargetPlatform.isTablet()) {
			return GameSize.TABLET_WIDTH;
		}
		
		return GameSize.DESKTOP_WIDTH;
	}
	
	/**
	 * @return Uint
	 */
	public static function getHeightByPlatform():Int
	{
		if (TargetPlatform.isMobile()) {
			return GameSize.MOBILE_HEIGHT;
		}
		
		if (TargetPlatform.isTablet()) {
			return GameSize.TABLET_HEIGHT;
		}
		
		return GameSize.DESKTOP_HEIGHT;
	}
	
	public static function getPositionByPlatform(pos:Float):Float
	{
		if (TargetPlatform.isMobile()) {
			return pos * 0.25;
		}
		
		if (TargetPlatform.isTablet()) {
			return pos * 0.5;
		}
		
		return pos;
	}
}

This uses a class called TargetPlatform


package helpers;

/**
 * @author Shaun Stone (SMKS)
 */
class TargetPlatform
{
	public static inline var DESKTOP:String = 'Desktop';
	public static inline var TABLET:String = 'Tablet';
	public static inline var MOBILE:String = 'Mobile';
	
	/**
	 * @return Bool
	 */
	public static function isMobile():Bool
	{
		if (Reg.TARGET_DEVICE == MOBILE) {
			return true;
		}
		
		return false;
	}
	
	/**
	 * @return Bool
	 */
	public static function isTablet():Bool
	{
		if (Reg.TARGET_DEVICE == TABLET) {
			return true;
		}
		
		return false;
	}
	
	/**
	 * @return Bool
	 */
	public static function isDesktop():Bool
	{
		if (Reg.TARGET_DEVICE == DESKTOP) {
			return true;
		}
		
		return false;
	}
	
}

I have a bad feeling that all this isn't actually required. Am I right?

SruloArt

unread,

Aug 2, 2015, 6:38:09 AM8/2/15

to HaxeFlixel

* You can do whatever you want, there's no "correct" way of handling different resolutions on any engine. Your method works best if you want to have a better control of objects placements in each resolution (and HaxeFlixel doesn't have a way of doing that yet, but flixel-ui does).
* Usually people would let one of the scale modes to handle it (it would scale the entire game to fit one resolution ratio, for example), and if that doesn't fit properly they would create their own mode.
* Using the latter method people might add different assets to fit different resolutions (so you won't get low-res assets when you're working with higher resolutions, for example).

Ashiq A.

unread,

Aug 2, 2015, 8:07:00 AM8/2/15

to haxef...@googlegroups.com

I follow the simpler approach of targeting only the larger resolution and letting my assets get downsized. It doesn't look perfect, but it's a lot less work than doing it the way you're suggesting. I think this is also what Angry Birds does.

A bigger issue (in my opinion) than asset size is aspect ratio. You may target a resolution like 480x320. What happens if someone has a phone that's 800x320? Deciding on that (do you crop the edges of the screen, or use black bars?) is something you also need to figure out.

--
HaxeFlixel Development Community
See our github https://github.com/haxeflixel/ and our documentation http://haxeflixel.com/documentation/
---
You received this message because you are subscribed to the Google Groups "HaxeFlixel" group.
To unsubscribe from this group and stop receiving emails from it, send an email to haxeflixel+...@googlegroups.com.
Visit this group at http://groups.google.com/group/haxeflixel.
To view this discussion on the web visit https://groups.google.com/d/msgid/haxeflixel/49c1e6ba-216b-4cc6-adaa-48a5d10b2b9f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward