Resize game

[Jaime Cepeda Villamayor]

Hello boys, I have a Question

How I automatize the task of resize my game? I mean, I want to zoom my game depending of the screen size

Do you know any solution?

I'll very apreciate your help

[Phil Mexico]

Hi!

Can you be a little more specific?

Haxeflixel already does a lot automatically, since you define the game width and height. For example, this gets adapted to your screen size in full window mode, or platforms such as Android, where there is no window mode.

Are you talking about different aspect ratios? What exactly do you want to do?

[Jaime Cepeda Villamayor]

What I want to do is set a default size
X=1280
Y=720
And depending on de device, if the device has a 1980x1080p screen resolution, i want to zoom the game to these screen
Regards

--
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 a topic in the Google Groups "HaxeFlixel" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/haxeflixel/aEOglMpvo10/unsubscribe.
To unsubscribe from this group and all its topics, 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/d277daf4-db1a-4faa-bd95-a8016ef145f8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Phil Mexico]

So, you will have to make a decision: you can either stretch the game (ugly), add something to adapt your screen while maintaining the same aspect ratios (such as black bars, as they use to adapt movies to tv screens; haxeflixel kind of does this automatically, you just have to add something graphic) or design your game to be able to adapt to different screen sizes.

I recommend the latter approach, which is more work, but looks best (and also explains more of the concept of adaptive screen sizes).

If you do so, you'll have to choose what it is you want to adapt first. I chose to set my screen width to be the reference, which I did by only defining the screen width in Main.hx, and not the screen's height:

"// var gameHeight:Int = 360; // Height of the game in pixels (might be less / more in actual pixels depending on your zoom).

var gameWidth:Int; // Width of the game in pixels (might be less / more in actual pixels depending on your zoom)"

Then, I let haxeflixel calculate the zoom of the width, and used that to set a height of the screen based on it's actual size and the same zoom calculated by haxeflixel in Main.hx's setupGame() function:

"private function setupGame():Void {

gameWidth = positions.gameWidth;

gameHeight = positions.gameHeight;

var stageWidth:Int = Lib.current.stage.stageWidth;

var stageHeight:Int = Lib.current.stage.stageHeight;

if (zoom == -1) {

var ratioX:Float = stageWidth / gameWidth;

//var ratioY:Float = stageHeight / gameHeight;

//zoom = Math.min(ratioX, ratioY);

zoom = ratioX;

gameWidth = Math.ceil(stageWidth / zoom);

gameHeight = Math.ceil(stageHeight / zoom);

}"

As you can see, I only did this quick and dirty for now; I'll have to take a closer look at it later to see if there's some danger in this, but for now it works.

(If anyone sees something wrong with this or has a better idea or questions, PLEASE let me know.)

You could also make this conditional: up to a certain aspect ratio X, the width is the side you're adapting to, and for narrower screens, you set the screen height as fixed and adapt the screen width.

Obviosly, you'll have to have a background that allows for adapting, so I made my background image a little wider and higher than what I'll be showing, which again I'll have to adapt to when positioning the background graphic in MenuState/PlayState:

"menu.loadGraphic(AssetPaths.menu__png, false, positions.bgWidth, positions.bgHeight);

 menu.x = FlxG.width - menu.width;

 menu.y = FlxG.height - menu.height;"

Here's some background on how to do the design:

http://blog.gemserk.com/2013/01/22/our-solution-to-handle-multiple-screen-sizes-in-android-part-one/

http://v-play.net/doc/vplay-different-screen-sizes/

[Guilherme Lagemann]

If you just want to fill the screen with the game you can do:

import flixel.system.scaleModes.FillScaleMode;
...
public function FillScreen():Void
{
   var a:FillScaleMode = new FillScaleMode();
      FlxG.scaleMode = a;
}

But this will stretch the game in a ugly way if the screen size is not the same aspect ratio.

OBS: Don't forget to change the default zoom to "1", not "-1".

[Jaime Cepeda Villamayor]

So I have to control my aspect ratio, haven't I?

El 26/03/2015 23:14, "Guilherme Lagemann" <g.unp...@gmail.com> escribió:

If you just want to fill the screen with the game you can do:

import flixel.system.scaleModes.FillScaleMode;
...
public function FillScreen():Void
{
   var a:FillScaleMode = new FillScaleMode();
      FlxG.scaleMode = a;
}

But this will stretch the game in a ugly way if the screen size is not the same aspect ratio.

To view this discussion on the web visit https://groups.google.com/d/msgid/haxeflixel/669f3954-3cea-4f1d-8847-7bfc14873db8%40googlegroups.com.

[Guilherme Lagemann]

Yeah, I usually make games at 640x360 so the game will look good at most common big screen sizes in the Fill Scale Mode.

Example: 320x180 | 640x360 | 1280x720 | 1920x1080

You can also use the RatioScaleMode, but some black bars can appear (nothing super ugly anyway).