Resizing to iPad Technique

tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
edited November -1 in Working with GS (Mac)
First of all I want to say. I know about the Project Re-sizer from Deep Blue Apps. I have it and I Love it. It has saved a lot of time for certain things. I recently found though, for my game Alpha Balls, it didn't save really any time at all. the reason is the game is heavily based on expressions for nearly every actor. So the task was very daunting to say the least.

I assumed I had a ton of work ahead of me until another user gave me an idea. for credit sake of the initial idea, I want to say this is the thread where it came from. http://gamesalad.com/forums/topic.php?id=32546
Although the Display size did not work for me and I got to thinking about that idea however.

And this is what I came up with.

I went through each scene in my game and place an actor that is unlocked and changed the Camera Size to 320x480. This also did not fully work however. I had to further adjust the camera origin on some levels that had an offscreen area. The last an final thing I did was to add a change attribute to any round actor that did this

Change self.width to self.width*0.9

This has provided a Flawless ipad version and here the best part. Last night I completely converted Alpha Balls to Alpha Balls HD in 1 hour

I hope this help you guys.

Thanks
Aaron
«1345

Comments

  • POMPOM Member Posts: 2,599
    Wait so basically you leave the game as it is? , but change its type to iPad and then resize the camera back to 320x480 ? how is it look on the iPad? what about the retina graphics? do they come out blurry?

    Roy.
  • tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
    I have changed no art. Just left the retina art or iPhone and it looks great on iPad 1 and 2. I was really surprised.

    I would imagine it would be blurry if you did not build your game on RI in the first place. but otherwise I am extremely happy. creating some new screen shots today and will be submitting it.
  • POMPOM Member Posts: 2,599
    tenrdrmer my friend , do you realize that if we had a behavior that indicate if the game is running on an iPhone or an iPad and to every round actor we apply this
    "Change self.width to self.width*0.9" if its on iPad , the result will be a universal build !

    Thats a great findings , i might just do an iPad version of "Loonimals" today haha .

    Cheers
    Roy.
  • @tendrmr - you tried my way and it didn't work? I wonder because I used to do iPad to iPhone conversions using the method you explained here, but using my new method works so much faster! Did you make the initial first "dummy scene" with the iPad resizing actor? It seems to be essential.

    I noticed if I tried putting the actor into my original first scene, it would not load fast enough and thus the display size would change but the other actors did not register it properly.
    So the display size changed to 480x320 but the camera wasn't autoresizing, it will be at initial iPad settings.
  • I'm so excited about my new method but at the same time, now I REALLY wish we could export Universal builds. All we need now is the option during exporting, to specify in the plist that it will run on iPhone and iPad. Please GS? :)
  • tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
    Holderness_Media_Inc said:
    @tendrmr - you tried my way and it didn't work? I wonder because I used to do iPad to iPhone conversions using the method you explained here, but using my new method works so much faster! Did you make the initial first "dummy scene" with the iPad resizing actor?

    I noticed if I tried putting the actor into my original first scene, it would not load fast enough and thus the display size would change but the other actors did not register it properly.
    So the display size changed to 480x320 but the camera wasn't autoresizing, it will be at initial iPad settings.

    Yes the reason it did not work is I have things off screen and apparently the change of the display size makes it so you cannot have offscreen areas. The camera size did the trick though.
    P-O-M said:
    tenrdrmer my friend , do you realize that if we had a behavior that indicate if the game is running on an iPhone or an iPad and to every round actor we apply this
    "Change self.width to self.width*0.9" if its on iPad , the result will be a universal build !

    Thats a great findings , i might just do an iPad version of "Loonimals" today haha .

    Cheers
    Roy.

    I am pretty excited about the possibilities of Universal builds as well. All we would nee it for a boolean in each actor to select if we want the actor to be scaled or not for the iPad version as you would not want everything to scale.

    And then it would just need a way to know the iphone and iPad placement of the camera origin for each scene. Im not sure how this would work though for a game that the camera moves.

    Again its a nice quick solution but I would imagine that it wont work for every occasion.
  • tenrdrmer said:
    Yes the reason it did not work is I have things off screen and apparently the change of the display size makes it so you cannot have offscreen areas. The camera size did the trick though.

    I have things offscreen as well, and my entire game has a main character that controls the camera. My scenes are huge, and it all translates as it should. I'd really like to know how this works out for others.
  • tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
    Holderness_Media_Inc said:
    I have things offscreen as well, and my entire game has a main character that controls the camera. My scenes are huge, and it all translates as it should. I'd really like to know how this works out for others.

    Interesting My scenes are wrapped though and the items that hang off the bottom had there other half's hanging in from the top.
  • tenrdrmer said:
    Interesting My scenes are wrapped though and the items that hang off the bottom had there other half's hanging in from the top.

    Ahh, that's probably it then, my scenes are not wrapped in this game. Hmmm, seems like there should still be a way to workaround this. I'll fiddle around some today and see what I can find.
  • MagoNicolasMagoNicolas Member, PRO Posts: 2,090
    Wow, this is VERY interesting, will have to test it.

    Would be so easy to make Universal Builds!

    Cheers.
  • MagoNicolas said:
    Wow, this is VERY interesting, will have to test it.

    Would be so easy to make Universal Builds!

    Cheers.

    Could you let me know if my method from the other post works for you?
  • MagoNicolasMagoNicolas Member, PRO Posts: 2,090
    I have just made a QUICK test, and Tenrdrmer method works for me. Thats was really Amazing.
    I DO need to change my height to height*0.9 (My Game is Landscape)
    Holderness_Media_Inc I know you created the "Original" method, but with that, your graphics don't retain the original proportion, you must change the width or height (Depending if its Landscape or Portrait).

    Gs Team should read this... We could make universal Apps just so easy... (I will test more if this works great)

    Cheers.
  • MagoNicolas said:
    I have just made a QUICK test, and Tenrdrmer method works for me. Thats was really Amazing.
    I DO need to change my height to height*0.9 (My Game is Landscape)
    Holderness_Media_Inc I know you created the "Original" method, but with that, your graphics don't retain the original proportion, you must change the width or height (Depending if its Landscape or Portrait).

    Gs Team should read this... We could make universal Apps just so easy... (I will test more if this works great)

    Cheers.

    I know the graphics don't retain proportion, it's like what the GS viewer does if you view an iPhone project on an iPad, it just stretches them. What I'm wondering is if the combination of my resizing the display size with tendrmr's resizing actors/graphics could make for a single actor and initial load scene to do everything, rather than having to resize each individual scene. It could be really useful going forward to have a quick way to auto resize everything for the different formats, iPhone/iPad/android/mac all from one project.
  • tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
    I went ahead and sent them a email to make sure they look at this. Honestly theres no telling this is something that woulds work on the backend so just be cautiously optimistic of course. Do plan to test and see if this will work to go to other Screen sizes so for example I can make a portrait version that will fit the Mac screen sizes. Never know of course. Will try and keep you updated once I get there.
  • tenrdrmer said:
    I went ahead and sent them a email to make sure they look at this. Honestly theres no telling this is something that woulds work on the backend so just be cautiously optimistic of course. Do plan to test and see if this will work to go to other Screen sizes so for example I can make a portrait version that will fit the Mac screen sizes. Never know of course. Will try and keep you updated once I get there.

    Cool. I think if a few of us go back and forth with ideas we can come up with a slick solution. :)
  • hotMagichotMagic Member, PRO Posts: 266
    Thanks to Holderness and tenrdrmer. Right when i was wondering how to do this, you both stepped in with some really promising solutions. And it's pretty evident right now, as holderness mentioned, that some under the hood work could automate this for a universal.
    I'll be trying on our app soon, which doesnt use scrolling.
  • BSideGamesBSideGames Member Posts: 392
    This is the same trick I did for my first game, before the DB resizer came out and the only thing I had some problems with were odd touch controls here and there.

    I went from ipad to iphone so memory sucked.
  • BSideGames said:
    This is the same trick I did for my first game, before the DB resizer came out and the only thing I had some problems with were odd touch controls here and there.

    I went from ipad to iphone so memory sucked.

    I did 3 of my apps this way a few months ago by resizing each scene's cameras, it worked ok for my needs but not ideal. (I also went from iPad to iPhone for those projects.)
    Main thing is the graphics aspect ratio will always be distorted. Using rules with separate graphics for iPad version should correct this.
  • tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
    Guys if you recreate your graphics for both sizes you can still just replace them into the projects actors. Its will lok funny on the iPad version until the camera plas and resizes but theres no reason you couldn't place new art.

    I have no issues I have found with touch points but thats prob because I have gone from iPhone to iPad
  • tenrdrmer said:
    Guys if you recreate your graphics for both sizes you can still just replace them into the projects actors. Its will lok funny on the iPad version until the camera plas and resizes but theres no reason you couldn't place new art.

    I have no issues I have found with touch points but thats prob because I have gone from iPhone to iPad

    There aren't really touch point problems going from iPad to iPhone, for me it was more an issue of some things feeling too crammed together when scaled to iPhone screen size, so I had to adjust a bit. Still really quick to do. Definitely easier to scale up from iPhone opposed to down from iPad.

    I will redo some of the graphics for the iPad version for my new game and just make rules on the actors "if iPad is true then change attribute to ___image.png".
  • SparkyidrSparkyidr Member Posts: 2,033
    Genius technique for going from phone to pad with hi-res graphics in place.

    Just as a test, re-ported the space panda game

    Original port (using the resizer tool, and then tweaking) - around 6-7 hours
    New port using camera technique - 25 mins

    !!
  • bradhermanbradherman Member Posts: 55
    I didn't know this wasn't a known technique, I would have posted this before. My Apps Cancer Zapper and Cancer Zapper HD for iPad use something just like this. It take me less than 10 min to build the iPhone version of my app from the iPad HD one. I have never used the standalone scale software.

    I boiled it all down to three vars "isiPhone", "gameSx", "gameSy" and a Custom Group called "Magic Scaling" I have that Custom Group in nearly every visible menu element of my game. The great thing about the Custom Group is that it lets me hand place things and adjust them easily.

    Magic Scaling has a big if rule that surrounds four change attributes.
    self.Size.Width = game.gameSx * self.Size.Width
    self.Position.X = game.gameSx * self.Position.X
    self.Size.Height = game.gameSy * self.Size.Height
    self.Position.Y =game.gameSy * self.Position.Y

    When going to the iPhone I change gameSx from 1 to 0.416667 and gameSy from 1 to 0.46875

    For some elements that I don't want to scale that way I use the isiPhone var to trigger some other effect. There are some custom camera systems in my game that use this.

    As a whole it's worked great for months.
  • bradherman said:
    I didn't know this wasn't a known technique, I would have posted this before. My Apps Cancer Zapper and Cancer Zapper HD for iPad use something just like this. It take me less than 10 min to build the iPhone version of my app from the iPad HD one. I have never used the standalone scale software.

    I boiled it all down to three vars "isiPhone", "gameSx", "gameSy" and a Custom Group called "Magic Scaling" I have that Custom Group in nearly every visible menu element of my game. The great thing about the Custom Group is that it lets me hand place things and adjust them easily.

    Magic Scaling has a big if rule that surrounds four change attributes.
    self.Size.Width = game.gameSx * self.Size.Width
    self.Position.X = game.gameSx * self.Position.X
    self.Size.Height = game.gameSy * self.Size.Height
    self.Position.Y =game.gameSy * self.Position.Y

    When going to the iPhone I change gameSx from 1 to 0.416667 and gameSy from 1 to 0.46875

    For some elements that I don't want to scale that way I use the isiPhone var to trigger some other effect. There are some custom camera systems in my game that use this.

    As a whole it's worked great for months.

    I suspect quite a few of us have been using different variations and tricks to quickly scale to iPhone or iPad, but YOUR solution is friggin' slick, nice work! :)

    Are you using the "isIphone" attribute to scale for acceleration, timers, etc.?

    I imagine the Universal Build official solution will work along these lines, though who knows.
    Hopefully it comes in one of the next few updates.
  • ShineyGamesShineyGames Member Posts: 157
    Does anyone think this should be a sticky
  • tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
    made it a sticky for Working with GameSalad. we have plenty on the main page so im not gonna put it their but this should make it easier to find.

    @ bradherman. I have been here over a year and until a few days ago have never seen and option for resizing other than manually or with the resizer from deep blue apps. Thats why I posted it. Its actually asked kinda often about how you can easily resize and the answer always being given is the two options I just said.

    thats a nice technique you have as well. What orientation is that based on and do you just change the project to iphone version in the device list and the attribute or is there more you do to tweak things?
  • bradhermanbradherman Member Posts: 55
    tenrdrmer said:
    thats a nice technique you have as well. What orientation is that based on and do you just change the project to iphone version in the device list and the attribute or is there more you do to tweak things?

    That is for Portrait Mode, for Landscape I think you could just swap the values on gameSx and gameSy. The "isiPhone" variable sets the few spots in my game with alternate graphics and text that are formated for the phone. I even change the location of the on screen controls in the phone version. I just have the alternate positions stored inside the actor. The only down side is that I do carry those graphics around in the HD version even though they are not used. My hope is that the universal builds will resolve all this.

    This is the process outlined in my notes. I do it the same way every time and follow the checklist.

    I change the project to iPhone
    I go to each scene and fix the Camera Follow interactively, This always gets broken when I change the project setting.
    isiPhone = 1
    gameSx = 0.416667
    gameSy = 0.46875
    save scene as mygame_vXX_iPhone
    Play Test on Device with Viewer
    Publish
  • Braydon_SFXBraydon_SFX Member, Sous Chef, PRO, Bowlboy Sidekick Posts: 9,271
    So if this works, would it be more work with this, or with the converter by DBA?
  • butterbeanbutterbean Member Posts: 4,315
    Wow, this is amazing! Totally flawless conversion, and much less tedious!
  • tenrdrmertenrdrmer Member, Sous Chef, Senior Sous-Chef Posts: 9,934
    Braydon_SFX said:
    So if this works, would it be more work with this, or with the converter by DBA?

    I think that will depend on the game. It took what looked liked a several day conversion with the resizer to 1 hour with this method. But… My game heavily used expressions for everything based on the iphone sized screen placement. so that means a lot of tedious work assuring all of them are manually converted correctly. I have a few other game with lots of levels I play to try this will and see how that does. I had started conversions with it but have not finished cause I hate converting. LOL

    So if this method works I will using it instead and maybe get this thing done.
  • Thank you bradherman for your posts, great stuff. I integrated your solution with my own, and it's turned out awesome. I wanted to share what I've done as it may help others convert their projects, or consider programming their new projects with these kind of methods in mind.

    Now, for my new game I can maintain 1 GS project and scale back and forth between iPhone or iPad in 2 steps. This will be sweet for updates. :)

    Everything scales correctly, and any updates I make such as new levels, actors, etc. will also scale correctly.
    (This might not work on everyone's projects, but for the way mine is programmed it's perfect.)

    I should point out that I started this project from the get go with the mindset that Gamesalad will be adding universal support fairly soon, so alot of the actors in the project are programmed so their original XY coordinates relate directly to Game.DisplaySize. This *should* enable them to easily scale to iPhone, iPad, Macs, and I'm assuming Android as well. I can add more scenes, updates, characters etc. without needing to go in and manually resize scenes or anything. The main things to consider are how resizing an actor will potentially affect other actors and/or it's graphics, and then adding 1-2 custom behaviors accordingly. For majority of actors, simply resizing them will be fine, and maintain proper graphic proportions.

    My first idea to use a dummy scene to change the game's display size to scale your scene's worked pretty well for my game, but it didn't retain the proper proportions on graphics. http://gamesalad.com/forums/topic.php?id=32546

    Then bradherman posted about his techniques for scaling, which are briliant.
    Maybe I'm just being stubborn, but I still felt there shouldn't be a need to scale each individual actors size AND it's x and y coordinates, as simply changing the game display size seems to scale the coordinates and velocity properly without need to configure.

    **This is for LANDSCAPE projects, but theoretically should work for Portrait and potentially any dimensions so long as you change the values of gameSx and gameSy to compensate for screen dimensions. Also, this assumes you are using Retina sized graphics, otherwise your graphics will be distorted.**

    Here's what I'm doing.

    1.) Create a boolean game attribute called "isPad", or "isiPhone" or simliar. (I went ahead and made booleans for iPad/iPhone/Android/etc. so that when the options arrive in Gamesald I can quickly scale between platforms when exporting.)

    2.) Create 2 attributes, "gameSx" and "gameSy" as per bradhermans method.
    (These attributes need to be "real" not "integer".)

    To scale from iPhone to iPad, use these values.

    gameSx = 0.9375
    gameSy= 0.833333

    (if scaling from iPad to iPhone, use the values brad posted.)

    3.) On any of your actors, create a new rule with 2 change attributes

    If attribute "isiPad" is true:

    change attribute self.size.width to game.gameSx * self.size.width
    change attribute self.size.height to game.gameSy * self.size.height

    4.) Save this new rule as a custom behavior, so you can drag it onto any actors you need to. Name it something like "Resize actor for iPad". Of course you'll likely want most of your prototype actors to have this rule.

    5.) For backgrounds, or any other actors you see fit, they will need to use different graphics in order to have proper proportions when scaled to iPad. So make a separate rule for these actors.

    if "isPad" is true:

    change attribute self.Image to "ipad_sized_image.png"

    Again, you can now save this rule as a custom behavior to use for any other actors, backgrounds etc. that you wish to switch graphics for iPad.

    You DO NOT need to resize these actors for iPad, changing their graphics to an image that has iPad proportions works perfect.

    6.) Create a new blank scene, and make it the first scene in your project, before your normal "home" screen. Call this new scene something like "Game Display scaling".

    (This scene will be used to scale the entire game to iPad when desired, or simply bypass and go to your normal home screen.)

    7.) Create a blank actor, call it something like "game display resizer" or simliar.

    Create a rule for this actor:

    if "isiPad" is true:

    change attribute game.DisplaySize.Width to 480
    change attribute game.DisplaySize.Height to 320

    Now, create a SEPARATE timer for this actor:

    After 0.2 seconds (run to completion)

    Change Scene to "your home scene"

    (make sure this timer is not embedded within the rule above)

    8.) Add the "Resize actor for iPad" and/or "change image for iPad" custom behaviors to all the necessary actors for your game.

    That's it.

    Once these steps are taken, you should now be able to do the following whenever publishing to scale for iPad.

    1.) change game attribute "isIpad" to TRUE
    2.) change the project dimension to iPad landscape

    Now test your game on the iPad using the viewer, and publish when ready.
Sign In or Register to comment.