OFFICIAL Tech Blog: The Basics Of Scaling

Discussion in 'Announcements' started by rmanthorp, Jun 13, 2019.

  1. rmanthorp

    rmanthorp YoYo Games Staff Admin YYG Staff

    Joined:
    Apr 15, 2016
    Posts:
    312
    Our latest series of blogs explore the different ways to scale your game to fit screens of different resolutions. Scaling your game can be a headache for many users and hopefully, through these blogs we can help to make it a simpler task and provide you with a framework to get the correct results every time.

    [​IMG]
    To start, the first blog discusses the GUI layer. It is an ideal starting point for discussion as it is not influenced by views nor (directly) by the application surface, so the calculations are easier and it gives a good introduction to the techniques you'll need to later scale the game itself to fit any display dimensions.

    PART 1: THE GUI LAYER - https://www.yoyogames.com/blog/65/the-basics-of-scaling-the-gui-layer

    [​IMG]
    So what about scaling the game itself? Making your game fill the whole display is easy, but making it fill the display and look correct (avoiding blurring and stretching) is not, so in part 2 of these tech blogs we will cover various different methods that you can choose to scale the game properly.

    PART 2: THE GAME VIEW - https://www.yoyogames.com/blog/66/the-basics-of-scaling-the-game-view

    [​IMG]
    Part 3 is all about how to scale games for the HTML5 target platform, as it poses some unique challenges compared to all the other platforms. When scaling your game on HTML5, it is important to realise that there are some fundamental differences between it and the other targets. The game window is now the canvas element of the page, and the display becomes the browser window.

    PART 3: HTML5 - https://www.yoyogames.com/blog/67/the-basics-of-scaling-html5
     
    Andy, Bentley, Nocturne and 1 other person like this.
  2. PartTimeCrazy

    PartTimeCrazy Member

    Joined:
    Mar 24, 2017
    Posts:
    8
    Always glad of these blog posts as they help explain a lot but...

    On Part 2 it has this code

    var base_w = 1024;
    var base_h = 768;
    var max_w = display_get_width();
    var max_h = display_get_height();
    var aspect = display_get_width() / display_get_height();
    if (max_w < max_h)
    {
    // portait
    var VIEW_WIDTH = min(base_w, max_w);
    var VIEW_HEIGHT = VIEW_WIDTH / aspect;
    }
    else
    {
    // landscape
    var VIEW_HEIGHT = min(base_h, max_h);
    var VIEW_WIDTH = VIEW_HEIGHT * aspect;
    }
    camera_set_view_size(view_camera[0], floor(VIEW_WIDTH), floor(VIEW_HEIGHT))
    view_wport[0] = max_w;
    view_hport[0] = max_h;
    surface_resize(application_surface, view_wview[0], view_hview[0]);

    but its not clear where this code should go. Can you explain it a bit more? Also how would you clamp the camera to the room?

    Cheers!
     
  3. Nocturne

    Nocturne Friendly Tyrant Forum Staff Admin

    Joined:
    Apr 13, 2016
    Posts:
    7,070
    The given code is intended for the Room Start event or the Create event of a controller object, or it could even go in the room creation event of the room editor. You would need to ensure that views are enabled in the room and that there is a view port active (the code assumes view port 0) and that views are enabled for the view port.
     
  4. JeffJ

    JeffJ Member

    Joined:
    Jun 20, 2016
    Posts:
    351
    Was this written for GMS2 or copy/pasted from older materials? There are references to view_wview and view_hview, but these no longer exist.
     
  5. rIKmAN

    rIKmAN Member

    Joined:
    Sep 6, 2016
    Posts:
    4,880
    They are the old GMS1 tutorials, just updated with GMS2 function calls.
    They must have missed a couple of GMS1 references.
     
  6. JeffJ

    JeffJ Member

    Joined:
    Jun 20, 2016
    Posts:
    351
    Ah, that's why. As I was reading I was sure I'd read it before, but I couldn't quite put my finger on where. That explains it then.

    Still a good tech blog, and it came at a very convenient time for me actually. But you may want to correct those legacy references. :p
     
  7. Nocturne

    Nocturne Friendly Tyrant Forum Staff Admin

    Joined:
    Apr 13, 2016
    Posts:
    7,070
    That was actually a typo... should be view_wport and view_hport... Has been fixed. :)
     
    JeffJ likes this.
  8. blossy

    blossy Member

    Joined:
    Dec 5, 2017
    Posts:
    14
    HTML 5 scaling is broken. Everything said in these (quite) old threads is still relevant:
    I downloaded the linked demo project in the "new" article on HTML5 scaling, added some text to it and ran it. It still ignores display scale ratios which makes everything (especially texts) look terrible on screens with ratio that is not 1:1 (or 100%). Of course, this is particularly obvious on phone browsers. Text is unreadable.

    PS: I'd love to be proven wrong so I can finally find some use for Gamemaker. Also, I haven't tested it thoroughly this time as I barely remember how to use Gamemaker - just saw the new article and decided to do a quick check.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice