Scaling for Mobile
@cg-tv Check the code above, and see if it works for you, friend.
@Twonty2 I'll give it a try this weekend. I don't have a minute to spare till then.
@Twonty2 I gave your code a try but it doesn't seem to work.
Using a phone with a 480x320 resolution I created a background image with dimensions 500x340.
My expectation was that the image would be centered in the screen with all 4 edges being clipped, but instead the top/left edge of the image was drawn at screen coors. 0,0 and only the right and bottom edges were clipped.
Was my expectation wrong?
Looking at the first 2 images you posted my expectation does not appear to be wrong.
Could you post the project files for your test app so I can compare your code to mine?
@cg-tv Yes, here is a link to the project https://drive.google.com/file/d/0B_idKVdY1hEmVWt6Z3pjM00zRWs/view?usp=sharing.
I believe you are expecting the right thing. You must make sure that the default height is defined either in project or Main.hx. Let me know how it goes.
@cg-tv actually, I think perhaps your expectation was wrong. It should be centered, but any sprites drawn can be drawn outside of the bounds of the resolution that is being developed for. Try the project anyway, and see if it clears it up how it should work.
Hi, I gave your code a try and it works just as the images you linked above show, but if you look at your makeGraphic call for the background, you're creating a background that's the same size as the target resolution and then drawing it at 0,0 so there is no centering needed.
If you replace the makeGraphic call with a loadGraphic call and use a bitmap image that's larger than the target res, you'll see that it's not being centered in the way the blog post I linked to above describes. It's still just drawing it at 0,0.
Maybe we have different expectations. I found a blog post for a Unity plugin here that does a much better job of explaining what I was hoping your code would do.
Give it a quick read and see if we're talking about the same thing.
@cg-tv man, if you want to have centered image - use offset, idk.
var offset = FlxG.scaleMode.offset; var bg_sprite = new openfl.display.Sprite(); bg_sprite.graphics.beginFill(0xC7BA99, 1); bg_sprite.graphics.drawRect(-offset.x, -offset.y, FlxG.stage.stageWidth, FlxG.stage.stageHeight); bg_sprite.graphics.endFill();
i think you got the idea.
@cg-tv I read the post, and I think we have the same expectations. That project was kind've a quick scaleMode I made to demonstrate my point. But that Unity article is exactly what I'm trying to get at. Test anything other than the main graphic there. The one game engine I have seen do this just about perfectly is Corona SDK. It's exactly what we're looking for, and I'm trying to get something just like that. If I can find something to read on Corona SDK's scaling, I'll send it your way.
Thanks Fyfff but it's not really about centering the image but more about maximizing the play area without any of it getting cropped off and also without having black bars.
Technically the letterboxing/pillarboxing is there but it's filled in with the oversized background image.
The Unity plugin that I linked to does exactly that, but unfortunately, it's looking to me like this may be the most complicated part of the HaxeFlixel framework. Over my head at least.
@cg-tv HaxeFlixel is not so handsome in mobile development :C