Multi Resolution Game Development With GameBuilder Studio

Favorite This Post!
2 Votes
Posted by Lavon on January 2, 2015

One of the hardest problems created today with all the various gaming devices and screen sizes available to consumers is developing your game to run seamlessly across all screens. There are a number of approaches that can be taken to solve this problem. I will explain a couple approaches that should cover any kind of game you want to develop with GameBuilder Studio (GBs). The number one rule of thumb to making your life easier is picking an orientation and a base screen size / aspect ratio. This becomes exponentially more difficult if you want to allow both landscape and portrait modes for your game depending on the complexity of your game scene. So pick either landscape or portrait and start from there. Then decide on a base screen size and scaling approach. I will cover a couple approaches below.

A Couple Of Game Scaling Approaches

I am not suggesting that any of the following approaches are wrong or perfect because this decision is really relative to the type of game you are creating so it is up to you, the gamebuilder. Here are a few approaches:

  • Basic Up-Scaling (Not Ideal) - Start with a set size for your game and no matter which screen it runs on just scale it up. Regardless of how bad it looks. As you scale up images they get blurry which results in lost of quality but allows your game to maintain the same screen size.
  • Manual Down Scaling + Dynamic Object Placement - Decide on what the largest screen size you intend to support will be and then scale your assets down to fit on smaller devices. This works but does require a lot more memory for smaller devices and could result in out of memory errors on low power devices. This also limits the amount of graphics your game can use which is fine for simpler games.
  • Multi-Resolution Scaling w/ No Edge (Easiest) - This approach of scaling consist of simply upscaling your game and dynamically loading hi-resolution images based on the current screen resolution. A calculation is made based on the base screen size set in GBs. The base screen/stage size should be a multiple of the largest target screen size you want to support. So if the largest target screen size is a 1024w x 768h resolution screen then divide those dimensions by a whole number that is 6 or less. The maximum resolution scaling factor supported by GBs is currently 5x. If I divide those dimensions by 3 you would get 341w x 256h which would be the base screen size you should start developing your game at. This approach will keep your images from appearing blurred or pixelated on all screens up to the HD resolution of 1024w x 768h when the stage is scaled up. This approach also keeps the stage size the same across all devices. So if your base size is 342w x 256h then even on a large 1024w x 768h screen the stage size for your game objects will be placed along a coordinate system of 342w x 256h. Everything just gets scaled up and centered. If the aspect ratio of the host device is different the "No Edge" option in GBs will just crop the edge of your game and scale it up beyond the screens' edges so that there are no black boarders. Its important to place all important UI elements and object within the center safe zone region of the stage in GBs so they don't get cut off.
  • Multi-Resolution Scaling w/ Fill Screen + Dynamic Object Placement - This approach is similar to its predecessor but adds the additional benefit of being able to utilize additional space on larger screens. So your stage size expands and fills the screen as the screen size gets larger. This requires you to dynamically place your objects in GBs by checking the current Game.Screen.stageWidth global properties while building your games. It is also a great idea to size UI objects like buttons based on a physical world size so that it takes up the same area of the screen on each device. There is a helper method when using expressions that will help you convert inches to pixels. So if you want a button to be 1 inch on screen use that method and it will return the size you need in pixels to apply to a renderer in your game.

Multi-Resolution Scaling w/ No Edge Using A Base Screen Ratio

Borrowing techniques from broadcast tv and film we believe the best approach to this problem is to design your game within a base 3:2 ratio screen size (i.e. 480w x 320h or similar) and use the "No Edge" screen scaling setting in GBs so that your game is scaled up beyond the edge of the screen and centered on all screen sizes at runtime. Then dynamically place your game objects and UI objects based on the edges of the screen within a screen safe zone. Pretty much all mobile device screen sizes on the market today currently fall within the ratios of 3:2 and 17:10 so you can design your game at a base 3:2 ratio and your game should fit all screen sizes. Depending on the aspect ratio of the host device you will notice cropping of the edges of your game but this is fine as long as you design your game to extend beyond the edge of your base screen size.

This approach works great for side scrolling platformer games, tower defense games, top down first person shooters, grid based puzzle games, and many others.

Multi-Resolution Scaling w/ No Edge

Notice in the diagram that as your game is placed on larger screens with different aspect ratios that the stage of your game is extended beyond the boarder of the screen. The Yellow area is the devices' screen size. Also if you are using the Multi-Resolution scaling approach you will notice as you scale up to larger devices like a tablet the 2x HD images are used instead of the normal 1x size so that everything stays crisp and clean.

If you were to build your game using the multi-resolution "Fit All" scaling setting then your game would end up with a border gap on devices with other aspect ratios larger than 3:2. Which is also known as "Letter-boxing".

Multi-Resolution Scaling w/ Fill Screen

Scaling with the "Fill Screen" setting will simply place your game in the upper left corner of the devices' screen and expand the stage to fill the screen. This will dynamically load hi-resolution images which will keep your objects at their original sizes when you created them in GBs. There is no edge overlap or cropping.

Dynamic Object Placement

When using the "Fill Screen" scaling method the resulting stage size of your game will change at runtime so every object in your game needs to check the screen size and position objects based on a percentage calculation or distance from the edges of the screen.

If you want an object to be positioned in the top right hand corner you could use the following expression to calculate the position of a spatial:

setPoint( Game.Screen.stageWidth - (Self.Renderer.size.x * Self.Renderer.scale.x), 0);

The above expression reads the current stage width which is the furthest point on the x axis of your game screen then subtracts the size of the renderer being displayed times its scale. If the scale is 1 then you don't need to multiply the size using the scale. If you wanted to position it a certain percentage from the left you could multiply the screen width value by a percentage as a decimal. (i.e. Game.Screen.stageWidth * .5) Which would be 50% from the right of the screen.

Understanding Image Sizes After Scaling

Even though your game is being scaled up when you are using multi-resolution scaling your objects original size is maintained because the hi-resolution images report their actual size divided by the calculated scale factor. If the scale factor is 2x and the original image size was 250w x 250h then your 2x image should be exactly 2 times that at 500w x 500h which will then be reported in the game as 250w x 250h when rendered at 2x resolution. This is great because the size of your objects always remain the same no matter what resolution it is rendered at.

Adding Multiple Resolutions To Your Image Assets

Adding Resolutions To Your Image Assets In GameBuilder Studio

Adding higher resolutions to your images / bitmaps in GBs is really easy. Just click on the asset and go to the Resolutions tab in the asset properties section that pops up. Click the "Add Resolution" icon and select the scale and file. You can also directly add these hi resolution assets directly in the resources folder of your project by following the folder naming convention of "@x{N}" where "N" is the scale factor. When GBs calculates the scale factor based on the base screen size it will do a distance calculation to select the closest hd resolution. If the calculated scale factor is 2.8 and you have included 2x and 3x resolutions then the 3x images will be loaded.

Multi-Resolution Folder Structure

Each supported scale factor should have its own folder in a subfolder next to the main resource in your projects' resources folder. Adding the files through the editor creates these folders for you depending on which scale you selected but this can also be done manually and GBs will automatically pick up the changes.

Multi-Resolution Scaling Settings in GameBuilder Studio

Once you have included all your hi-resolution images go to the Publish window settings and look under the project settings tab. Specify the scaling mode you want to use and select which resolutions are to be included in the final build of the current profile. This can be changed for each build so that you don't have to include resolutions in builds that will never be used. So you could create a build for smaller android phones with just default 1x resolutions and another build for tablets with the higher resolution assets.


Congratulations on finishing this tutorial! Found it helpful? Spread the word...


Comments

Pages: 1 All
Said:
Hi,
I have experience with unity, spine, robotlegs, feathers , starling and a lot more. I'm trying to find a way to create games without doing everything myself.... Hopefully gamebuilderstudio, I'd like to try it out, can help me out with this in the future. A big thing is having to worry about all different devices and resolutions...
Im going for the Multi-Resolution Scaling w/ No Edge Using A Base Screen Ratio setup. Currently gamebuilderstudio has but a few settings and its unclear for me what settings I need to define for this.
3 years ago
0
Replied:
Hi Jelle,

The best place to get help is on the forums. I will email you directly to try and clarify any questions you have.
3 years ago
0
Pages: 1 All

Anyone can leave a comment!


You just need to signup for an account or log-in before you can comment.