Responsive UIs in Game Maker Studio 2

[devonhg]

GM Version: 2+
Target Platform: ALL
Download: Github | Pastebin | Marketplace

Links: ( These are the resources mentioned in the tutorial )
Scaling for Devices
Text Fit Box
Display Scaler

Summary:
The meat and potatoes of this tutorial talks about positioning things onto the screen using two basic scripts:

responsive_x( 0-12 )

responsive_y( 0-12 )

Fundamentally these scripts break the screen in to 12 "sections", and allows you to position things based on these sections. More information in the tutorial where I instruct on how to make a responsive alert box using these scripts.

Tutorial:

 

[gnysek]

I like the idea! It's like a bootstrap-css grid, but for games, nice one

 

[devonhg]

I like the idea! It's like a bootstrap-css grid, but for games, nice one

Yup! That was pretty much exactly the idea. It's such a helpful little concept.

 

[Fazri Fr]

Hope this video help me! I wanted to finish my HTML5 Game but struggle with the asset scaling and right procedural positioning.

 

[TinyGamesLab]

Bootstrap for GameMaker is a good idea! One thing that could also be borrowed from it is the prefab objects such as text boxes, buttons, etc... This could help out even more when UI coding becomes a burden.
I've used bootstrap a lot on websites and although you are more-or-less limited it can make development much easier if used with care.

 

[JealousOfCrows]

Interesting. I often work in relative values into much of my code to kind of create a similar idea. Rather than making it a grid I kind of say "I want this to be always 10% from either side" and so on. Cool stuff. I would love to see more!