0

Okay, so my iPhone 5 arrived (I live in Australia and am lucky to have it before the US) and the first thing I wanted to do was take full advantage of the 88 pixels of extra width for my 2D platformer using the Impact JS engine.

I cannot get my head around how to actually modify the canvas width.

This is what I was using previously:

ig.main('#canvas', MyGame, 60, 240, 160, 2);

Now, I thought it would've been as easy to just increase the 240 by 44 pixels (considering there's 44 pixels on either side in landscape):

ig.main('#canvas', MyGame, 60, 284, 160, 2);

However, I'm still seeing 44 pixels black bars on either side after the above code change.

Not sure whether I have to modify any other Impact engine files in order to get this working. I haven't played around with it enough as I'm at work at the moment and shouldn't really be working on my game. I'm sure there's a few other areas I'll have to modify to get this working.

Btw, I'm using iOSImpact and deploying my game directly to my iPhone 5, so there may be files within there that need to be updated as well.

Also I noticed the following properties for detection between mobile devices. I'd need to throw in an ig.ua.iPhone5 property in here as well.

ig.ua.pixelRatio = window.devicePixelRatio || 1;

ig.ua.viewport = {
    width: window.innerWidth,
    height: window.innerHeight
};

ig.ua.screen = {
    width: window.screen.availWidth * pixelRatio,
    height: window.screen.availHeight * pixelRatio
};

ig.ua.iPhone = /iPhone/i.test(navigator.userAgent);
ig.ua.iPhone4 = (iPhone && pixelRatio == 2);
ig.ua.iPhone5 = ??
ig.ua.iPad = /iPad/i.test(navigator.userAgent);
ig.ua.android = /android/i.test(navigator.userAgent);
ig.ua.webos = /hpwos/i.test(navigator.userAgent);
ig.ua.iOS = iPhone || iPad;
ig.ua.mobile = iOS || android || webos;

I did a console.log on the following and this is what it returns:

ig.ua.viewport.width = 640

ig.ua.viewport.height = 960

ig.ua.screen.width = 1280

ig.ua.screen.height = 1920

I'm a little confused with the above results as well, specifically the ig.ua.viewport.width returning 960. I would've thought it should be returning 1136.

fulvio
  • 24,168
  • 20
  • 122
  • 198
  • I'm not sure if ig.ua.iPhone5 is defined. `ImpactJS` was written before iPhone 5 arrived. Also, is your level designed for the new dimensions? – tipycalFlow Sep 21 '12 at 07:24
  • @tipycalFlow It's not. I added that in there because I wasn't sure of the best way to detect for that device. – fulvio Sep 24 '12 at 06:45

1 Answers1

1

Your app has to tell the OS that it supports the taller/wider screen. I think this is done by specifying a startup image of that size. Otherwise, you'll be run in compatibility mode and not get to use the full screen

Community
  • 1
  • 1
Thilo
  • 241,635
  • 91
  • 474
  • 626
  • I saw that post, however I wonder if it applies to `UIWebView` driven applications. – fulvio Sep 21 '12 at 06:37
  • 1
    Why wouldn't it? Your UIWebView is still running inside a UIWindow which gets its size just like any other app. – Thilo Sep 21 '12 at 06:40
  • 1
    Not only does iOS have no idea what sort of views your application is going to use when it launches it (ie, when the decision to show borders or not is made) but the framework you link to — iOSImpact — touts that "[it] makes it possible to run Impact games on iOS devices without a UIWebView" and hence doesn't use one. – Tommy Sep 21 '12 at 06:43