Scaling, Resolution, and Aspect Ratio Management for GMS1 & GMS2

Discussion in 'Tutorials' started by Pixelated_Pope, Sep 12, 2016.

  1. Bence Monori

    Bence Monori Member

    Joined:
    Jul 2, 2018
    Posts:
    2
    .
     
    Last edited: Jul 25, 2018
  2. IndieRex

    IndieRex Member

    Joined:
    Aug 7, 2018
    Posts:
    8
    Great tutorial! I am having one issue though. For some reason it is drawing a black bar at the top of screen, but doesn't do it if I comment out the pixel perfect portion of the script.

    I'm using the GMS 2 version of the tutorial, have checked the code multiple times, but can't seem to figure out what might be causing it. My ideal height is set to 540 with my room sizes at 960x540.
     
  3. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    @IndieRex
    I don't recommend using the pixel perfect scaling... but that said, it certainly shouldn't give you black bars. What's the resolution of your monitor?
     
  4. IndieRex

    IndieRex Member

    Joined:
    Aug 7, 2018
    Posts:
    8
    1920x1200. There is only one bar at the top of the screen (rather than one at bottom and top). Not sure why turning it off is fixing it either.

    I'll keep it turned off then!
     
  5. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    @IndieRex

    Ah, because your room isn't tall enough! When you scale it to be pixel perfect, it will scale the height to be perfect. 540 doesn't go perfectly into 1200, so it resizes your view to be 600 tall. Your rooms are only 540 tall, so you see the outside of your room, which is black.
     
    IndieRex likes this.
  6. IndieRex

    IndieRex Member

    Joined:
    Aug 7, 2018
    Posts:
    8
    Ah that makes sense! Thanks again for your help. Great series - really appreciated the lead-up videos explaining the background of the topic and laying the groundwork for the system.
     
    Pixelated_Pope likes this.
  7. IndieRex

    IndieRex Member

    Joined:
    Aug 7, 2018
    Posts:
    8
    Sorry for another question so soon, but I'm now having an issue where the text I draw is getting distorted (I think only in fullscreen mode). I did a check and my camera width/height are running at 864x540.

    My rooms are 960x540, my ideal height is set to 540, and my computer resolution is 1920x1200.
     
  8. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    Are you drawing your text in a gui event? When you are in full screen, do you have black bars at the top and bottom (you shouldn't)?
     
  9. IndieRex

    IndieRex Member

    Joined:
    Aug 7, 2018
    Posts:
    8
    No black bars. Seems to be an issue in both Draw and Draw GUI events.
     
  10. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    @IndieRex
    So, the only time there should ever be distortion is when aspect ratios don't match. Specifically your view and your application surface. Here's a script I use to debug all this.

    https://www.dropbox.com/s/tupyzjlwk9fz7sr/display_write_specs_GMS2.gml?dl=0
    https://www.dropbox.com/s/wnvl0ok047w1d95/display_write_all_specs_GMS2.gml?dl=0

    Add those two scripts to your project, and then in your draw_gui event somewhere write:
    Code:
    display_write_all_specs_GMS2(5,5);
    The numbers in the parentheses is your aspect ratio for that element. All of those numbers should be the same. If not, there's a chance for distortion. So that should give you an idea where to look. If you still can't figure it out, send me a screenshot, and I'll be happy to help you.

    Also, just FYI, you can join my Discord server where hundreds of awesome GM developers hang out and help each other. It's a great way to get programming help without the waiting for forum post responses, and I'm there 5 days a week along with many very skilled and helpful developers. https://discord.gg/sehNsp
     
  11. IndieRex

    IndieRex Member

    Joined:
    Aug 7, 2018
    Posts:
    8
    @Pixelated_Pope

    Thank you for the scripts. I ran it, but it looks like they are all the same number. Here is a screenshot showing it. The issue is also definitely not the font either as when I run the game without the scaling system it looks great. I'm on the discord as well too!
     

    Attached Files:

  12. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    @IndieRex That is indeed weird. The only thing I can really think of is that there is some sort of pixel interpolation going on. Do you have that setting turned on? Even then, it looks weird. If you'd be willing, you could PM me your project and I'll see if I can figure out what's going on.
     
  13. TylerMcDe

    TylerMcDe Member

    Joined:
    Jun 30, 2018
    Posts:
    11
    This tutorial is the gift that keeps on giving for years now lol.
     
  14. rouzbeh78

    rouzbeh78 Member

    Joined:
    Aug 19, 2018
    Posts:
    2
    Hi
    I saw all videos and do whatever you said
    my orginal view must be like this :
    [​IMG]
    but in my phone i get this result:

    [​IMG]

    why is that ??
    this is my obj_display_manager:
    CREATE:

    ideal_width=0;
    ideal_height=720;
    zoom=1;
    max_zooom=1;
    display_width=display_get_width();
    display_height=display_get_height();

    aspect_ratio=display_width/display_height;
    //aspect_ratio=clamp(aspect_ratio, 1280/720, 1280/720);

    ideal_width=round(ideal_height*aspect_ratio);
    //ideal_height=round(ideal_width / aspect_ratio);

    //Perfect Pixel Scaling
    if(display_width mod ideal_width != 0)
    {
    var d = round(display_width/ideal_width);
    ideal_width=display_width/d;
    }
    if(display_height mod ideal_height != 0)
    {
    var d = round(display_height/ideal_height);
    ideal_height=display_height/d;
    }

    //Check for odd numbers
    if(ideal_width & 1)
    ideal_width++;
    if(ideal_height & 1)
    ideal_height++;

    //Calculate Max Zoom
    max_zoom=floor(display_width/ideal_width);

    for(var i=1; i<=room_last; i++)
    {
    if(room_exists(i))
    {
    room_set_view(i,0,true,0,0,ideal_width,ideal_height,0,0,ideal_width,ideal_height,0,0,0,0,-1);
    room_set_view_enabled(i,true);
    }
    }


    window_set_size(ideal_width,ideal_height);
    display_set_gui_size(ideal_width,ideal_height);
    surface_resize(application_surface,ideal_width*zoom,ideal_height*zoom);

    alarm[0]=1;

    room_goto_next();

    ALARM[0]

    window_center();

    unfortunately i used 1280x720 but I do not think this have anything to do with my problem
    i also used GMS2 and saw Part 5 of your videos series but that couldn't help to
    and also i don't need any view to follow my characters.
    please somebody help me :(
     
    Last edited by a moderator: Aug 19, 2018
  15. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    @rouzbeh78 Okay. First off, it looks like your game isn't pixel art based, so 720p is just fine :D.

    So, remove the pixel perfect scaling portion of the code:
    Code:
    //Perfect Pixel Scaling
    if(display_width mod ideal_width != 0)
    {
    var d = round(display_width/ideal_width);
    ideal_width=display_width/d;
    }
    if(display_height mod ideal_height != 0)
    {
    var d = round(display_height/ideal_height);
    ideal_height=display_height/d;
    }
    Remove all that. That alone may fix it for you depending on the resolution of your phone.

    As for view following your characters, I discuss how to do that in my Part 5 video.
    camera_view_set_pos(view_camera[0],player.x,player.y)
     
  16. rouzbeh78

    rouzbeh78 Member

    Joined:
    Aug 19, 2018
    Posts:
    2
    thank you so much that does the trick ! :)
     
  17. w0rm

    w0rm Member

    Joined:
    Aug 20, 2016
    Posts:
    11
    Thanks for the great tutorial @Pixelated_Pope!!

    The code works great also in GMS2. I wanted to separate the camera controlling code from the display manager object to its own. For a moment I had hard time playing with those global variables etc. Then by browsing docs I found a way to get completely rid of those by making the changes shown below. I decided to share this in case it's helping someone working with your great code.

    Create event:

    Replace

    Code:
    camera = camera_create();
    globalvar view_x,view_y,view_w,view_h;
    view_x = 0;
    view_y = 0;
    view_w = ideal_width;
    view_h = ideal_height;
    with

    Code:
    camera = camera_create_view(0, 0, ideal_width, ideal_height, 0, -1, -1, -1, 0, 0);
    This allows using those new camera and view related functions which camera_create() apparently does not. Also setting of the view size in the End Step event is not necessary anymore. NOTE! The code used to show display specs needs updating as well...

    After that it's easy to move and update the view positioning code from the End Step event to another object as below.

    End Step event:

    Replace with

    Code:
    var _view_w = camera_get_view_width(view_camera[0]);
    var _view_h = camera_get_view_height(view_camera[0]);
    var _view_x = instance_followed.x - _view_w / 2;
    var _view_y = instance_followed.y - _view_h / 2;
    
    var _round = _view_w / surface_get_width( application_surface );
    camera_set_view_pos(view_camera[0], round_n( _view_x, _round ), round_n( _view_y, _round ) );
    
    Of course one needs to set the instance to be followed in the Create event of this (or use object reference as in the original).
     
  18. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    Ah, good adjustments, @w0rm!

    At the time I was writing the tutorial, I believe camera_create_view was bugged and not working as expected, which is why I didn't use it at the time. Thanks for patching the tutorial for me :D
     
    kupo15 likes this.
  19. instaboy

    instaboy Member

    Joined:
    Sep 23, 2018
    Posts:
    7
    Hi. Did you find a solution? Thanks!
     
  20. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    @instaboy Chances are the view was using the "object following" feature while also using an increased application surface size, which many people use without even realizing it. This causes jittering. Best thing to do is move to a manual camera control, and maybe add some smoothing as well.
     
  21. instaboy

    instaboy Member

    Joined:
    Sep 23, 2018
    Posts:
    7
    Thanks for the quick answer! I already use manual camera control (tried different versions). The main problem is that the player moves very smooth but other objects/characters are very blurry/jitter/ghosting?. Especially when the player (and the camera) move in the opposite direction than the other objects. It occurs more on higher move speeds, like 2px per step (640*360 base res.). This is really a show stopper. What do you mean by "add some smoothing as well."? Thanks in advance!
     
  22. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    756
    Ah, okay. So, try this. Can you capture the issue in a screenshot? If not, this is likely an art issue. Obviously I've not seen your game, but I'm guessing it is fairly early and using a lot of placeholder art, with bright colors. When things with bright colors move quickly on an LCD monitor, you are more likely to get "ghosting" and other strange looking things. This is not an issue with your code, but with your art. It happens in almost all 2D games with fast motion, but you don't notice it because there are more interesting things to be paying attention to. So ultimately, your only solution is to ignore it until it goes away as your game gets more content and better art.

    If you don't believe that is the issue, you could send me a build of your game and I could see if I can reproduce the issue on my machine and offer some further insight.
     
    instaboy likes this.
  23. instaboy

    instaboy Member

    Joined:
    Sep 23, 2018
    Posts:
    7
    Thanks a lot for you help! You were 100% right :)
     

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