Manually creating custom letterboxes, get rid of those black bars!

jonmulcahyjonmulcahy Member, Sous Chef Posts: 10,408
edited September 2013 in Working with GS (Mac)
I'm going through my back catalog and updating them all for iOS7, and I figured out a way to create custom letterboxes using some camera tricks and large images. I've only tested this with static scenes, i.e. no camera movement, but I think the idea could be ported.

I'm tried this out on my game Zombie Heads. I was going through the game and converting it to support both legacy iPhone and iPhone5 resolutions. The default method of overscan is to crop from both sides which wouldn't work for me. I started with converting the game for iPhone5, that involved creating an extra 88 pixels of artwork for the top of each scene.

imageimage

Then I had to custom rules to adjust the placement of the score/pause buttons based on screen:
image

Finally I had to adjust the camera. As I said above, when you go from an iPhone to legacy iPhone view it crops from the middle, cutting off part of the top and bottom. I knew there was an 88 pixel difference between the two projects so I created the rule below. (I'm sure people have figured this out before)

image

So, with the combination of those rules I was able to make this game function exactly as I wanted. I had to go through each of the 4 scenes and make adjustments for necessary actors, but that was trivial.

Preview in action



so then I got to thinking, how can I make this work with the iPad. In my newer games I've just designed the game with the crop in mind, but this game came out 3 years ago. In letterbox mode it worked perfectly, everything was on the screen exactly where I wanted it, but it had ugly black bars. In overscan mode it cut too much off from the top and bottom, and if I adjusted the camera, I lost too much from the top:

imageimage

I got to thinking about these camera tricks and started playing around with it. This is my end result:



As you can see I still need to do some adjusting on the camera height, it's still not perfect, but the concept is there. It was a lot of trial and error to get the numbers right. I'm sure a person better with math could figure it out better. The rules are as follows:

image

from top to bottom I am adjusting:
scene.camera.origin.y
scene.camera.origin.x
scene.camera.size.width
scene.camera.size.heigh

so a work in progress, but very encouraging. I'm going to use the same concepts when I convert V is for Vortex and Z is for Zombie.

Comments

  • jonmulcahyjonmulcahy Member, Sous Chef Posts: 10,408
    I forgot to mention that I had to create a larger background image. Instead of the normal 640x1136, I made the image 840x1136 to give it 100px of extra space on either size.
  • MillionairAppsMillionairApps Member Posts: 110
    I forgot to mention that I had to create a larger background image. Instead of the normal 640x1136, I made the image 840x1136 to give it 100px of extra space on either size.
    If I am experimenting with your way, this extra 100px is needed for the ipad version? And is something that shouldn't need to be seen on iPhone?
  • jonmulcahyjonmulcahy Member, Sous Chef Posts: 10,408
    I forgot to mention that I had to create a larger background image. Instead of the normal 640x1136, I made the image 840x1136 to give it 100px of extra space on either size.
    If I am experimenting with your way, this extra 100px is needed for the ipad version? And is something that shouldn't need to be seen on iPhone?
    yes, it just replaces the black letter boxes with artwork. anything you want.
  • quantumsheepquantumsheep Member Posts: 8,188
    edited October 2013
    Hey Jon,

    I just stumbled upon this thread as I'm working on Universal Build logic for Air Supply Infinite.

    Like your zombie game, it's a portrait orientation, but the start-off device is an iPad.

    This has been pretty awesome because all the action takes place in the middle of the screen, and I've been careful with menus to try and make sure they're 'centred' on the screen.

    An example:

    With overscan on, the menus work fine (I had to adjust the logo size for iPhone5 overscan):

    image

    image


    On the main screen though, this is what the different versions look like (I've manually moved the lines on the far right side depending on screen size - and the top menu stuff isn't fixed yet)

    image


    So, right now with overscan on it looks like this:

    image

    In letterbox mode, everything is just scaled better, but there are bars at the top and bottom:

    image

    I'm trying to get it to look like this:

    image

    So, your solution here seems to be a goer.

    I have some questions if you have a little time, or if anyone else wants to chime in!

    1. I'm guessing the only way to test all this is by making actual builds on the device as the viewer and preview have no 'no overscan' option.

    2. Can you choose to NOT implement overscan when you make a build? (I've not made a build for nearly 2 years now!). I'm assuming this is what you've done?

    3. The title screen, the options and the main game area are all on one scene to cut down load times. I move between them by pressing buttons to change the scene camera origin X.

    a) You vary the camera origin by a certain amount depending on screen size - does changing the camera origin affect my object placement (i.e. will I have to put a rule in each menu item to shift it to the left or something? And perhaps sort out the logic of aliens to appear in different X positions (shifted to the left))

    b) Will I have to change the values on my buttons? For example, to go to the options screen you press a button and change scene.camera.originX to 0 - I'm guessing I'll have to change it to less than that depending on the screen size?

    4. Using your method can I get a close approximation to the last pic I posted - letterbox but with stuff IN the letterbox bits? :D

    I know I can probably answer a lot of these questions myself by actually experimenting and testing with builds etc but I'm really trying to focus on getting the game finished and working.

    I'm thinking of sending a 'letterbox' build out to testers so they can test while I wrestle with this.


    Many thanks in advance!

    QS :D

    Dr. Sam Beckett never returned home...
    Twitter: https://twitter.com/Quantum_Sheep
    Web: https://quantumsheep.itch.io

  • jonmulcahyjonmulcahy Member, Sous Chef Posts: 10,408
    1. in the preview in the top left corner you can choose your device, when you switch it from the project device you'll have an option for letterbox or crop.

    2. i actually enabled overscan in my adhoc builds, that's what allowed me to play with the camera adjustments. I don't think letterbox allows you to do that

    3. this is in uncharted territory for me :) i have not yet attempted anything with moving the camera. I imagine you would need to have an adjustment factor variable that you add to your origin value. then update that adjustment based on the device.

    4. i think so , you can defiantly get stuff in that area using camera adjustments to fill the space, then maybe location adjustments after that.
  • quantumsheepquantumsheep Member Posts: 8,188
    edited October 2013
    Thanks for your reply, Jon - appreciated!
    1. in the preview in the top left corner you can choose your device, when you switch it from the project device you'll have an option for letterbox or crop.
    Yep, it's what I've been using. But unfortunately there's no 'No overscan' option!
    2. i actually enabled overscan in my adhoc builds, that's what allowed me to play with the camera adjustments. I don't think letterbox allows you to do that
    Ah, I see. So it may be worth using overscan, then changing the actual camera size.

    Sorry, my addled brain didn't register that part properly!

    Can you choose not to use overscan OR letterbox - just have the raw size? Way I see it, the iPad version will be fine. Then I just need to narrow the original camera's width to fit iphone 4/5 (same for both) and if it's an iphone 5, move some actors down/up.
    3. this is in uncharted territory for me :) i have not yet attempted anything with moving the camera. I imagine you would need to have an adjustment factor variable that you add to your origin value. then update that adjustment based on the device.
    Eek! Be brave, sheepy! :D
    4. i think so , you can defiantly get stuff in that area using camera adjustments to fill the space, then maybe location adjustments after that.
    Roger that. What's really troubling me with using overscan is that it's fine (I think) on iphone 4 - the size of everything fits really nicely.

    On iPhone 5, because of the longer screen I guess, the visible width gets truncated more than on an iphone 4, and everything appears bigger.

    This means that the characters can jump out of view on the sides, and there's less signposting of incoming hazards/pickups (because less of the screen is visible).

    I'll do some tests tomorrow, but knowing if you can use the raw size of the scene (i.e. no overscan/no letterbox/no stretch selected) would give me a starting point!


    Thanks again for the answers, Jon!

    QS =D

    Dr. Sam Beckett never returned home...
    Twitter: https://twitter.com/Quantum_Sheep
    Web: https://quantumsheep.itch.io

  • quantumsheepquantumsheep Member Posts: 8,188
    edited October 2013
    Well, I decided to dive into this yesterday, and came away with some promising results, as you can see in the pic below:

    image

    I'm not sure how I did it exactly! :O

    The way the game is set up is that it's an iPad game to start with and the main scene is five scenes wide.

    This scene holds the title screen, the options screen and the main game itself, for no load times when starting/restarting the game.

    Because it's a portrait game I (subconsciously I think) made sure that the menu systems were 'centralised'. This meant that I didn't have to touch the title or options screens at all as they all already fit, even with Overscan on!

    The main game was fine too, but the camera was just too zoomed in. That had to change!

    So on the 'start' button I have a rule that widens the camera, and drops the Y origin. The X origin was changed too (it just has a different value for iphone 5)

    A few adjustments of some elements here and there, and it's pretty much done.

    On the 'go back to main menu' screen (an option - the other is 'retry') I return the changes to 'normal'.

    Everything fits! :D

    Here's all three on devices:

    image

    This did take me several hours, mind, and a lot of fiddling. I really wish there was a simpler way to do all this!

    QS =D

    Dr. Sam Beckett never returned home...
    Twitter: https://twitter.com/Quantum_Sheep
    Web: https://quantumsheep.itch.io

  • jonmulcahyjonmulcahy Member, Sous Chef Posts: 10,408
    Looks awesome! I wish there was a simpler way too, but at least it works.
  • quantumsheepquantumsheep Member Posts: 8,188
    Looks awesome! I wish there was a simpler way too, but at least it works.

    Thanks, Jon!

    I have to say that this thread of yours made me realise that it was at least *possible* even if I had no idea how to go about it!

    I've read every thread about universal build stuff. Maybe some of that knowledge seeped in too! :D

    QS

    Dr. Sam Beckett never returned home...
    Twitter: https://twitter.com/Quantum_Sheep
    Web: https://quantumsheep.itch.io

Sign In or Register to comment.