Making Scalable Views for Mobile (DevLog 1)

For the past few weeks I’ve been working on a method within GameMaker to scale my game to any screen size/ratio. I started by reading this article by V-Play, titled “How to create mobile games for different resolutions and screen sizes”. The article presented this useful image below:

squaby-different-devices-extended-background

Essentially if you create your entire game to fit within a 3:2 ratio, then it will be able to run on any device. All of the visual assets necessary to having your game function properly must be within the 3:2 ratio, everything else is just filler to avoid having black lines:

squaby-different-devices-extended-background-black-border

It sounded easy enough, but getting this to work within GameMaker proved to be difficult. There didn’t seem to be any tutorials online highlighting how to do this within GameMaker, so I was forced to look through different online forums in an attempt to find a solution. Eventually I found what I was looking for buried in a GameMaker forum, a post from someone who works for the company. They posted an example file which used surfaces, so I downloaded the file and dissected the code in effort to create what I needed.

With a lot of trial and error, I created a way to change my camera view based on the screen ratio, and then scale my view to the size of the device. For example, if a device is 960×640, then it has a 3:2 ratio. The camera in the level will then adjust to a 3:2 ratio (480×320), and then stretch the surface to match the device (960×640) by doubling it.

Here are a few screen captures of some different aspect ratios: [3:2, 16:9, and 4:3]

In addition to scaling, I wanted to create a way to flip the screen from landscape to portrait mode for a feature in the game. To do this I used the view angle function within GameMaker to flip the screen so that the game can then be played in portrait mode. Here’s what that looks like:

gm4

These two features, scaling and flipping the view, were important to being able to continue the game as planned. Without being able to scale the views, I wouldn’t be able to design this game for mobile devices, and without being able to flip the view, I wouldn’t be able to go forward with a key gameplay feature in the game.

With these two technical hurdles taken care of, I should be able to create everything else I have planned for the game.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s