Responsive Game with Firefox OS

I'm using the export to Firefox OS happily, but I'd be happier if I could poll the device and see what the screen size is and then adjust the picture accordingly. I can do this in HTML5 raw code now (see my blog post at

http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html)

using

    var boardWidth = window.innerWidth;
    var boardHeight = window.innerHeight;  [/code:1bqrtjar]
but I can't figure out how to do this in Construct 2.

My problem is that Firefox OS has different sizes of phones (320x410 and 360x570) and tablets are on the way! Has anyone solved this similar problem with Android, which at last count had umpteen different screen sizes? 

I've been creating some tests with Construct for Firefox OS using the smaller size (ZTE Open) and then using Letterbox scale which sort of works, but it would be really neat if I could just say make it the size of the browser. Ideally I'd like to say something like "100%" for height and width for the screen size.

The point of the Firefox OS phone is that the apps are 100% HTML5 so Construct 2 is a natural fit. Here's how my test app (bouncing a ball) looks on the larger phone (Geeksphone Peak at 360x570) using Letterbox even though the screen size was set for the smaller (360x570) phone. The Letterbox handles the width difference but not the height difference.

Any clues? I'm going to write a series of blog posts showing how really, really easy it is to write a game in Construct 2 and export it to Firefox OS!

[img="http://thulfram.com/1GAM/PEAK.png"]

Is your project setup using the standard aspect ratio?? The Letterbox scale is going to scale it the best it can proportionally. So that is the result it considered to be proportionate to your project set size.

Have you read over this??

https://www.scirra.com/tutorials/73/sup ... reen-sizes

Cause it honestly doesn't look like you used an standard aspect ratio for your project but...I could be wrong.

I missed that. Sorry! I'll try it and get back to you!

I tried all the suggestions in that topic and decided to stay with what I had. My problem is that the screen edges are important because I'm bouncing a ball off the edges (using invisible sprites for the edges) so the screen you see has to be the same as the actual article. Ashley's article is more for games where the edges don't matter and you can scroll.

But that's not a problem for a lot of games and I'm actually happy that the letterboxing works just fine for such a drastic difference in the two phone size/ratios.

And the great part is that Construct 2 exports to the exact format needed to make the Firefox OS App Manager happy! It sounds like what I want (exact knowledge of the screen size before I display anything might just be too difficult at present. What I want is for Construct to read the inner height and width of the screen and adjust the output exactly to those numbers the way I did in my blog with raw HTML. But that's not even close to a showstopper for me.

What I learned by this exercise are three things:

1. Construct is incredibly easy. I hadn't done anything with it in over a year, but it was easy to come back and pick up.

2. Construct is a lot easier than writing HTML5 code!

3. Responsive Web Design for Construct isn't there yet, but the letterboxing is good enough.

Thanks for telling me about the article!

Try edit your game, so it uses ViewportLeft,Right,Top,Bottom Values instead of fixed positions.

Of course it means you have to setup all the sprites (like your invisible ones) on start of layout to be at the correct position.

And then use ScaleOuter and have a background that is bigger than your actual layout, or have a colored background or whatever.

But that will solve your problem.

Something like css float would be nice to have. I know the Anchor behavior is made to work like that, but I can never get it to work right, so I end up using viewport as 5type suggests.