BarrytheBrave Posted March 10, 2013 Share Posted March 10, 2013 Hi all, I'm currently building a reusable framework in GameMaker Studio that deals with scaling and orientation on mobile and tablet devices, that I can build all of my future html5 games on. All of my games will be made at either 320x480 or 480x320, and I plan to offer them to sponsors and portals. When dealing with devices with a screen resolution of 320x480, such as iPhones, displaying the game at 1:1 ratio will mean that a portion of the game at the bottom will not be visible under the browser bar, and so would be filled with a logo or filler graphics perhaps. The issue is that because GameMaker studio makes it so easy to export to other formats I also plan to release the same games as iOS and Android native apps. Designing this way would mean that I have to design two versions of the game; a native version taking up the entire screen and an html5 version that fits within the iOS bars. (I've hidden the top browser bar but you can't remove the bottom browser bar or top iOS bar). The scaling solution I've come up with takes the entire 320x480 canvas and scales it up or down to fill whatever space it can, whilst still respecting aspect ratio. However on iPhone this leaves scrollable spaces at either side, as shown below: This solution is the easiest for me as I only need to design each game to fit 320x480 and then scale it up or down to suit, but would sponsors (booster media for example) be happy with this or could it hinder my chances? Thanks in advance. Edit: I wasn't sure whether to put this in the coding or sponsor section so feel free to move it if necessary! Quote Link to comment Share on other sites More sharing options...
remvst Posted March 10, 2013 Share Posted March 10, 2013 Been working with Booster with about the same method, they never complained I'm not sure about other sponsors though, but I think it shouldn't be a problem, as far as you "try" to fit the screen size. And as a player, I prefer to have a small black spaces on the screen with the original game ratio rather than having the game "stretched" to fit the whole screen. BarrytheBrave 1 Quote Link to comment Share on other sites More sharing options...
BarrytheBrave Posted March 11, 2013 Author Share Posted March 11, 2013 Thanks remvst, it's good to know you are using a similar scaling method. Although to clarify when you mention stretching, that would never be an option for me. The alternative to the method shown would be to fill the entire screen 320x480 1:1 so the aspect ratio is retained, but then the game would be vertically offset by the depth of the top bar, and the bottom of the canvas wouldn't be visible behind the bottom browser bar. If Booster seem happy with the method I've shown then I'll most likely follow that option, thanks. Quote Link to comment Share on other sites More sharing options...
remvst Posted March 11, 2013 Share Posted March 11, 2013 I forgot to tell, I don't use the same scales as you do. I use 320x460 or 480x300. This makes no difference on the iPhone once you have full screen enabled, but it will be a bit bigger on Safari (because you have the navigation bar). Though, this makes sense only if you're targetting iPhone 4 and below Quote Link to comment Share on other sites More sharing options...
rich Posted March 11, 2013 Share Posted March 11, 2013 Don't forget about tablets. Talk to Booster and they'll tell you that a massive percentage of their traffic comes from tablet devices, so be sure it's not going to look too strange on those as well. BarrytheBrave 1 Quote Link to comment Share on other sites More sharing options...
BarrytheBrave Posted March 11, 2013 Author Share Posted March 11, 2013 @remvst I think I see, so compared to my image above your game would be natively vertically shorter by 20px (460 as opposed to 480), so when scaled using the same method as mine would be slightly wider too because the shorter vertical height allows the game to scale horizontally a little further, meaning your side bars are slightly narrower than mine? I think I've got that right! edit: I just played your Rooftops game on iPhone, it works exactly like I thought you meant. @rich yeah tablets are a big consideration too. On tablet (I'm using an iPad for testing right now) I'm scaling vertically as large as I can and then scaling as far horizontally as necessary to retain aspect ratio, the same method as the image above. This means there are the same empty bars at either side on tablet too, but I'm guessing these bars are less of an issue on a tablet than they'd be on a smaller device, which is what caused concern. Quote Link to comment Share on other sites More sharing options...
Jon Goikolea Posted April 1, 2013 Share Posted April 1, 2013 <edited>PD: Which is the best method to get rid of the address bar in Safari browsers? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.