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

[GM Version: GM:S v1.4.1757 and GMS2!
Target Platform: Desktop / Mobile (And HTML5! ...but you'll need to put a bit more work into it)
Download: Example File
Google Drive Mirror

Summary:
A Multi Part tutorial series dealing with handling aspect ratios and pixel art scaling in Game Maker Studio 1 and 2

Tutorial:
Part 1: Covers the cause of black bars and pixel distortion generally.

Part 2: Covers the components of a Game Maker game that make up how your game is displayed on screen.

Part 3: Finally getting into actual code! Build a display manager that removes black bars, resizes the window, eliminates pixel distortion, and scales perfectly to any monitor!

Part 4: Got a lot of questions from here, reddit, and youtube and I thought I'd make a little follow up video that covers some of the most common ones. Make sure you watch this before you ask a question down below, but if I don't cover your problem here, definitely ask it here and I'll try to help best I can.

Part 5: Working in GMS2? Want all this to just be more simple? Here is the absolute most simple way to have a camera in your GMS2 game.

 
Last edited:
D

Diveyoc

Guest
Wow, this is great, thanks for sharing. I was researching this a week ago but it seemed quite involved so I tabled it. I've already implemented the first part and now have a nice wide view with no black bars.
I had a couple of questions. I'm working on a game that would be for computer only. I've read that the max default window size for GM was 1024 x 768, so that was the view size I've been working with. I wasn't sure how to approach things so I just set ideal_width = 0 & ideal_height = 768. As it turned out, everything looked great. Although on my 16x9 monitor there's not much to scale up, so it's just like going from almost full screen to full screen, but getting a wide view with no black bars was my main objective. Do you think I should stick with what I've got? Being that it's for computer only, I doubt many people would want to scale down, so I was thinking a height of 768 would be fine.
Also, between 18:25 and 19:40 when you show the (Create Event) display_set_gui_size, and then the draw_text(display_get_gui_width) in the Draw Event. You are working within the obj_display_manager. How would you implement this into a different object Draw Gui event? Right now I have some text in the upper right corner that is not scaling with the new wide screen, so I wanted to change it from a Draw event to a Draw Gui event and implement what you have shown, but I wasn't sure exactly how it's done. Can I just add similar commands to the other object Create & Draw Gui events?
 
I've read that the max default window size for GM was 1024 x 768
I mean, that's not WRONG. The default window for gm is 1024 x 768, but it is certainly not the max.

Do you think I should stick with what I've got?
In my opinion, absolutely NOT. That is a horrible choice for ideal resolution. If the majority of your player base is on 1080p (which according to Steam Hardware surveys is correct), then let's do the math for what will happen to most of your players.

1080 / 768 = 1.4

So, your game will be scaling 1.4x in full screen on the most common monitor resolution. If you don't see why that's a problem, you should probably rewatch part 1.

Honestly, for pixel art games, the max resolution I recommend is 960x540 (Enter the Gungeon uses this resolution I believe), exactly half of 1080p, but then that won't scale properly to 1440p which is rising in popularity. But it will at least scale at 2.6x so distortion won't be quite as noticeable. Make your game as small as absolutely possible to maximize the number of resolutions your game will scale well on.

Can I just add similar commands to the other object Create & Draw Gui events?
Yup, you can add a draw gui event to any object just like I did with the manager. All of the display_get_gui_ functions work exactly the same throughout your entire game.
 
J

JDSTIGER

Guest
Nice info, will this be good for vector based mobile games? I noticed you only showed pixel art.
 
Nice info, will this be good for vector based mobile games? I noticed you only showed pixel art.
Absolutely. Vector still needs to be "rasterized" to the application surface before the game can be displayed, so things like increasing the size of your application surface to the size of the display/window will make your vector images look more smooth on higher res displays. The only thing that doesn't apply is really the "pixel perfect scaling", as there shouldn't be any distortion when using vector images regardless of how your application surface is scaling to the game boundaries.
 
J

JDSTIGER

Guest
Absolutely. Vector still needs to be "rasterized" to the application surface before the game can be displayed, so things like increasing the size of your application surface to the size of the display/window will make your vector images look more smooth on higher res displays. The only thing that doesn't apply is really the "pixel perfect scaling", as there shouldn't be any distortion when using vector images regardless of how your application surface is scaling to the game boundaries.
My circles became ovals, using some of the coding helped but I had to remove the zoom because it only made half of the game show, however, once removed it went back to the oval problem.
 
So if your graphics are getting stretched, it's because your view's aspect ratio doesn't match the display's aspect ratio. Make sure you are calculating your view size appropriately. If you are still having trouble with it, I'd be happy to look at your project and figure out what's going wrong.
 
D

Diveyoc

Guest
I
Yup, you can add a draw gui event to any object just like I did with the manager. All of the display_get_gui_ functions work exactly the same throughout your entire game.
Ok, I set ideal height to 540 instead and have everything looking pretty good.

I finally figured out the draw gui event. So I guess I don't need to type out the view_xview commands anymore ehh.
Does this look fine to you?

(Original Code) from draw event
draw_sprite(spr_health_border,1, view_xview[0]+10, view_yview[0]+10);

(New Code) in draw gui event
draw_set_halign(fa_left);
draw_set_valign(fa_top);
display_set_gui_size(display_get_width(), display_get_height()); (This is great because I can capture all 7 of my draw_sprite codes with 1 command)

draw_sprite(spr_health_border,1, 10, 10);
 
(New Code) in draw gui event
draw_set_halign(fa_left);
draw_set_valign(fa_top);
display_set_gui_size(display_get_width(), display_get_height()); (This is great because I can capture all 7 of my draw_sprite codes with 1 command)

draw_sprite(spr_health_border,1, 10, 10);
So... the ONLY thing you need is that last line. That's it. Just draw the sprite.

Definitely do NOT set the gui size every single step. You should only call display_set_gui_size ONCE. Ideally in the create event of the display manager. Why would you need to call it multiple times? The display isn't changing size as you are playing your game in most cases, right? You also don't need the h and valign as those only apply for draw_text().
 
Hey guys, just a quick update.

I'm getting a lot of questions, and I'm starting to see some common themes among them. I have a sore throat right now, but as soon as it clears up I'll be recording a follow up "FAQ/Tips and Tricks/Why this won't automatically fix your game" video that will hopefully help you get the most out of these videos and understand when the display manager we built is appropriate for your game, and when it might just be better to accept the black bars, and build your next project with dynamic resolution in mind from the beginning.

So keep an eye on my youtube channel or this thread and I'll update the original post when the new video goes live. In the mean time, feel free to keep asking your questions and posting any issues you have and I'll be happy to help out where I can.
 
D

Darren

Guest
This tutorial was amazing. I'd love an adapted version of this where rather than pressing Z you'd change the window size using a menu option that then displayed the resolution next to it, and saved this info so next time you boot the game it's in the size you'd chosen before. I'm attempting this now but struggling.

Also I'm a bit confused using this system for menus as it throws them off slightly (My fault for not drawing my menus as GUI but rather positioning them to the room size) but I'm sure it can be fixed with some fiddling. Glad I watched this before starting my game, I'm making sure the settings and menus are all correct before I even begin gameplay, to save me headaches down the line.
 
This tutorial was amazing. I'd love an adapted version of this where rather than pressing Z you'd change the window size using a menu option that then displayed the resolution next to it, and saved this info so next time you boot the game it's in the size you'd chosen before. I'm attempting this now but struggling.
Yeah, that would be an immense amount of work. And I sort of feel like if you need a tutorial for such a complicated feature, you might not want to worry about that feature. Eventually you'll get to the point in GM where you don't use tutorials anymore, and you'll be able to solve all these problems nearly 100% through your own experimentation. Really, a list of resolutions is unnecessary in a 2D game. Remember, you have to design your game around an ideal width and height so you don't need to worry about the size of your view changing dramatically based on some random resolution setting. Your game should always be hovering somewhere around your ideal width and height with only slight adjustments for aspect ratio correction or perfect scaling. So you should really only let them change the window zoom and aspect ratio, which I guess could be presented in a list of options (similar to what you see in ZSNES). Again, it'd be an immense amount of work and I wonder if the payoff would really be worth it. Look at games like Risk of Rain. Do they have complicated resolution settings? No, you just increase the zoom and scale. Did that prevent it from being an amazing and successful game? Obviously not.

(My fault for not drawing my menus as GUI but rather positioning them to the room size
Yup. Gotta use the GUI layer or at the very least dynamically position things based on the size and position of the view. Just dropping things in the room will never work for dynamically changing resolutions.

I changed nothing.
I can't tell if you want my help or not. Certainly aren't giving me much information to go on. Re-download the example file fresh and run it. You are telling me that without changing a single thing in the project, you are seeing black bars on the sides and GUI layer text is being drawn off screen when you are on a 16:9 monitor? Sorry, I don't buy it.

If you are seeing this, go into the example project and open the obj_display_manager and go to the draw GUI event. Replace the draw_text on line 4 with this draw_text:

Code:
draw_text(5,5,display_write_specs(display.screen)+"#"+
              display_write_specs(display.window)+"#"+
              display_write_specs(display.app_surface)+"#"+
              display_write_specs(display.view)+"#"+
              display_write_specs(display.gui)
              );
Then run and take a screenshot with all of that info on screen. We'll go from there.
 
E

ewlf5

Guest
Yeah, that would be an immense amount of work. And I sort of feel like if you need a tutorial for such a complicated feature, you might not want to worry about that feature. Eventually you'll get to the point in GM where you don't use tutorials anymore, and you'll be able to solve all these problems nearly 100% through your own experimentation. Really, a list of resolutions is unnecessary in a 2D game. Remember, you have to design your game around an ideal width and height so you don't need to worry about the size of your view changing dramatically based on some random resolution setting. Your game should always be hovering somewhere around your ideal width and height with only slight adjustments for aspect ratio correction or perfect scaling. So you should really only let them change the window zoom and aspect ratio, which I guess could be presented in a list of options (similar to what you see in ZSNES). Again, it'd be an immense amount of work and I wonder if the payoff would really be worth it. Look at games like Risk of Rain. Do they have complicated resolution settings? No, you just increase the zoom and scale. Did that prevent it from being an amazing and successful game? Obviously not.



Yup. Gotta use the GUI layer or at the very least dynamically position things based on the size and position of the view. Just dropping things in the room will never work for dynamically changing resolutions.


I can't tell if you want my help or not. Certainly aren't giving me much information to go on. Re-download the example file fresh and run it. You are telling me that without changing a single thing in the project, you are seeing black bars on the sides and GUI layer text is being drawn off screen when you are on a 16:9 monitor? Sorry, I don't buy it.

If you are seeing this, go into the example project and open the obj_display_manager and go to the draw GUI event. Replace the draw_text on line 4 with this draw_text:

Code:
draw_text(5,5,display_write_specs(display.screen)+"#"+
              display_write_specs(display.window)+"#"+
              display_write_specs(display.app_surface)+"#"+
              display_write_specs(display.view)+"#"+
              display_write_specs(display.gui)
              );
Then run and take a screenshot with all of that info on screen. We'll go from there.
:/
 

Attachments

Sorry man, I don't know what to tell you. When I change my resolution to the same resolution as your monitor, it works fine for me:

upload_2016-9-19_11-13-43.png

...although those "904"s are causing me to raise my eyebrows a bit...
 
Last edited:
Alright. Added a 4th video to the main post that is mostly just answering some common questions people have been having. Keep asking questions if you have any issues, and I will try my best to help you figure things out.

 
V

Vectrex71

Guest
Woowww, that was a great series of Tutorials THANK YOU ! But i'm new to "Game maker" , so my brain hurts and i'm tired and just want to sleep now :) But thank you it was very interessting !
 
Woowww, that was a great series of Tutorials THANK YOU ! But i'm new to "Game maker" , so my brain hurts and i'm tired and just want to sleep now :) But thank you it was very interessting !
Thanks! Really appreciate it. Again, I'd like to re-iterate what I said in part 4/FAQ: if you are new to Game Maker there are far more important things to worry about than resolution and scaling. If you are seeing REALLY bad distortion in your game, then yeah you want to get that fixed, but black bars and minor pixel scaling distortion in full screen should really be the least of your worries as you get more comfortable with building games. Thanks for watching.
 

Zerb Games

Member
GM Version: GM:S v1.4.1757
Target Platform: Desktop / Mobile (Should be applicable to everything but Web)
Download: Example File

Summary:
A 3 Part tutorial dealing with handling aspect ratios and pixel art scaling in Game Maker.

Tutorial:
Part 1: Covers the cause of black bars and pixel distortion generally.

Part 2: Covers the components of a Game Maker game that make up how your game is displayed on screen.

Part 3: Finally getting into actual code! Build a display manager that removes black bars, resizes the window, eliminates pixel distortion, and scales perfectly to any monitor!



Part 4: Gotten a lot of questions from here, reddit, and youtube and I thought I'd make a little follow up video that covers some of the most common ones. Make sure you watch this before you ask a question down below, but if I don't cover your problem here, definitely ask it here and I'll try to help best I can.

Wow this is awesome, really appreciate this! Is there a tutorial on how to get rid of tile "lines?" Is it a scaling issue or a separate issue all together.

This is what it looks like:
 
V

Vectrex71

Guest
Thanks! Really appreciate it. Again, I'd like to re-iterate what I said in part 4/FAQ: if you are new to Game Maker there are far more important things to worry about than resolution and scaling. If you are seeing REALLY bad distortion in your game, then yeah you want to get that fixed, but black bars and minor pixel scaling distortion in full screen should really be the least of your worries as you get more comfortable with building games. Thanks for watching.
Thank you !
 
G

Galladhan

Guest
Awesome tutorial! I've just started working on a new project, and with this tutorial i managed to make it look good in full screen without black bars. Thank you very much, @Pixelated_Pope: your tutorials/assets are always fantastic, but this is my favorite one so far! :)
 
G

Gaspode

Guest
Thank you so much Pixelated_Pope - wonderful tutorial! I've read tons on this subject and you're the first person who has actually explained things in a manner which I can understand. Learned loads from this.
 
Thank you so much Pixelated_Pope - wonderful tutorial! I've read tons on this subject and you're the first person who has actually explained things in a manner which I can understand. Learned loads from this.
Glad you found it useful. Thanks for watching!
 
V

vinceprinceking

Guest
Ok this is a really great tutorial! Thanks, up to now i had to struggle with views resolutions and drawing on the gui quite a bit. Think this will help me quite a bit.

Here is a question though:
If i have my base game in lets say 640x360 and then scale it up to 1280x720, all the text i display resized to ideal_with and ideal_high will look decent. But when i scale it up to 1920x1080 the text will be one blurry mess.
Is there a good way to make the textsize adjust itself to the scaled size of the application window? So i can have sharper text?
 
Well, it shouldn't be that blurry... Your resolution when scaling to 1080p is exactly scaled to 3X, so it should look exactly like it does at smaller sizes... just bigger. So there are a few things to look at (and a screenshot of what you are seeing may be enough for me to tell you what's going on). Your font may be using anti-aliasing... which isn't recommended for pixel art games. You may also still have interpolate colors between pixels set; again, not a good idea for pixel art games. A screenshot would be worth a thousand words. Additionally, a screenshot of your font resource (where you set the font size and type and quality) would be helpful as well.
 
V

vinceprinceking

Guest
http://www.bilder-upload.eu/show.php?file=e4ddb7-1475284022.jpg
No anti-aliasing on the font. No interpolation in game settings.
I tried a few fonts but no ones really worked for me. you got any advice?

Ok and i think i used the wrong term. You are right it is not blurry its just too blocky to properly read it. Maybe i'm a bit picky but i want text to look pretty.
My solution now would be to make 3 separate menue/textbox-systems one for each resolution. But thats 3 times work to do and i will only start that when i definitely have no other choice.

I might try to always draw on some 1080p surface and then shrink that to the actual size to see how that looks. Not sure how about all that surface stuff though.
Or just use 3 different fonts and the draw_text_ext_transformed, or something along these lines.
 
You are right it is not blurry its just too blocky to properly read it.
Okay, so looking closely at that image there is definitely some "blurring" on the text, but there also seems to be blurring on the other elements.

So, next round of questioning:

1. Are you using the draw gui events by chance?
2. If so, have you resized your gui layer at all?
3. If so to what?
4. And what is your ideal width and height?
5. Could you maybe use paint or photoshop to show me what you EXPECT? Ideally using the same fonts and sizes.

You absolutely do NOT want to make 3 different menus for the different resolutions... especially since there are probably a lot more than 3 resolutions that your game will support (up to 4k or higher, remember).

Finally, if you'd really like, you can PM me a link to your project and I would be happy to troubleshoot it for you and tell you exactly what is going wrong. (I promise, I'm not going to steal it, I've done this hundreds of times for people). Just export your project to a GMZ, throw it up on drop box, and send me a link, and I'll get back to you with a solution asap.
 
P

Purrbox

Guest
Thanks for the tutorial! I'm going to be implementing this as soon as I can.

I'm having issues with my game that I don't think your tutorial can help with though, so I was hoping maybe you could point me in the right direction.

When I first started developing sprites for my game I got a lot of bad advice, and I think that's why I'm in the jam I'm in now. My sprites are ~103x49 and my tiles are 64x64. I wanted tall sprites with enough space for detail because clothing and armor customization is going to be a big part of my game, and I didn't want a clothing swap to be barely noticeable. But in GM, the pixels are tiny, instead of big, fat ones like I wanted.

I want it to look more like SNES games, like http://gamefabrique.com/storage/screenshots/snes/harvest-moon-04.png or http://www.cubed3.com/media/2008/December/jesusraz/secretofmana/screen042.jpg, or like Terra in your example, but instead I'm stuck with sprites that look like this in game: https://drive.google.com/open?id=0B1EaUVEFz4D4RXhjWTViNkluajg and it just looks bad. I guess I'm just overall not happy with how tiny the pixels are. Am I going to have sacrifice sprite size and detail to achieve the look I want by working much smaller? Do I need to remake everything at a more rounded size (my suspicion)? Can I not have tall sprites, or is it that I need to work with 32x32 tiles and, say, 128x64 sprites? I should also add that I don't want my sprite taking up a ton of screen space. Using Stardew Valley as an example, I'm aiming for the large pixel size, but bigger buildings and a large sprite...if that makes sense.

I'm using a 16:9 aspect ratio, using 1280x720 for the viewport and display.

Also, does using a lot of blank space around the sprite (say my sprite is 103x49 but I'm making it 250x250 with blank space so that I can have plenty of animating space, and space for misc. equipable items that may end up being quite large and so that my pieces all line up correctly with no issues, which is working fantastically) cause issues with this? I seem to have the same results regardless of whether or not I trim the sprite to the actual size, so I'm guessing not, but I thought I'd ask.

This is probably a stupid question, and I'm sorry, but I've been stuck on the whole resolution and sprite/tile size issue from the beginning and nothing I've tried or read has pointed me in a concrete direction, especially because I don't want to use a sprite that's the same size as the tile for characters.
 
Last edited by a moderator:
Am I going to have sacrifice sprite size and detail to achieve the look I want by working much smaller?
Yes. The look you are going for is "blockier" or, less detailed/lower res. So if you want it to look like a SNES game, you should at minimum be using smaller sprites. Even if you are matching a PSX era game, like Alundra. He's like... 30x40 ish? That's low res compared to your enormous 64x128. Which means everything else in your game, including your view, has to be bigger, which can lead to all sorts of trouble.

Do I need to remake everything at a more rounded size (my suspicion)?
Nope, the sizes of your sprites are completely irrelevant to this distortion. You can have totally wacky numbers, doesn't matter.

Can I not have tall sprites, or is it that I need to work with 32x32 tiles and, say, 128x64 sprites?
Again, completely irrelevant. Have whatever sprites you want.

Here's your problem RIGHT HERE. 1280x720 scaled to a 1080p monitor is a 1.5x scaling: The. Worst. Scaling. POSSIBLE.

NOTE TO EVERYONE SCROLLING THROUGH THIS THREAD:
DO NOT USE A VIEW SIZE OF 1280 x 720 if YOU ARE USING PIXEL ART

Never, ever, ever. Not until 1080p is no longer the most widely used monitor size for gamers on the planet.
Kick it down to 960x540. That will probably fix the vast majority of your problems. If that screenshot of yours was taken in full screen, that is 100% your problem. If it wasn't, then your problem may be an odd view issue. Make sure your view, window, and application surface are the same size/aspect ratio.

Also, does using a lot of blank space around the sprite ... cause issues with this?
Nope, doesn't matter at all. GM will automatically trim and crop individual sprites at compile time when your texture pages are built.
 
P

Purrbox

Guest
Thank you so, so much!

I looked up aspect ratios and this image shows that 1280 x 720 is a 16:9 aspect ratio so I thought it would be fine. Switching to 960x540 worked great and it looks a lot better now. That being said, of course it didn't get me the bigger pixel look I was looking for, but is a game without the big pixel look too unnatural, or is it simply artists' preference? Here's what it looks like at the proper resolution. I'm wondering if bigger pixels would have more character or if it just doesn't matter.
 
That is 100% your call. I think it looks nice, but it will be a lot of effort on the art side to maintain that high res quality throughout the project.
 
F

FabioF

Guest
Hi Pixelated_Pope great tutorial, unfortunately the example link doesn't work for me, i'm not able to download because of a https problem related to the dl.dropboxusercontent .com site, could you add a mirror please? Thanks
 
P

Purrbox

Guest
That is 100% your call. I think it looks nice, but it will be a lot of effort on the art side to maintain that high res quality throughout the project.
Thank you so much again for all of your help and advice. I'll stick with what I've got. Drawing at this scale seems easier and more enjoyable to me so it'll be alright. :]
 
B

Beggar Studios

Guest
Hi! I followed your tutorial in the hope it would solve my issues with jittering graphics, but it didn't. The camera follows the character and he looks fine, but when the view moves it seems as if everything else is wildly virbrating. Just look at the eye of the sprite in the beginning. I snapped a quick video of it with my phone (couldn't get the capture software to work with GM), can you help?

 
I'd be happy to help... I'm not really seeing the issue you are seeing in that video, that looks pretty smooth to me. But if you want to PM me your GMZ (File > Export), I'd be happy to take a look.
 
B

Beggar Studios

Guest
Okay I sent you a pm with the gmz file and some additional info :)
 
R

Rukiri

Guest
Thanks for sharing, I've just been using the viewport to set a static resolution since way back to Game Maker 5!
This is a very nice way of handling it and obviously better than what I've been doing for the last decade or so...
 
U

Uhfgood

Guest
I didn't really understand all the goings on in this, but I downloaded the sample project and swapped a few axes to make it go vertically, and it works pretty well. I tried to run it via html5 but all that comes up is a black browser window, with nothing going on. Does this actually work on html5? Actually I ran the 'breakout' clone tutorial game (the finished version) and it doesn't work on html5 either.
 
how ca i adapt this for HTML export?
Does this actually work on html5?
I say at the top of the tutorial that this is for mobile and desktop only. I only recently got the HTML module during the humble bundle sale, and haven't tried to get this thing to work. (HTML always seemed like more of a hassle to me than it was worth). But I'll take a look and see if I can make a few changes to get it mostly working.
 
@Uhfgood @fedyfausto

Good news! This supports HTML 5 with a VERY simple fix. Simply add a font (any font) and use it in the draw gui event of the display manager object. That's it! there are still some caveats, however. As this is built for a non-changing "display size", you'll need to make sure that as the browser is resized your game reacts to it, but this will at least get you up and running with a resizing window. It's not perfect but the purpose of this tutorial was not to provide you with the end all be all of display management, but to provide you with the knowledge and tools necessary to understand what needs to be updated as your game window changes.

Hopefully that helps everyone who is using HTML5. I'll update the example project to include a font so it should run in HTML5 out of the box. The rest is up to you!
 
F

fedyfausto

Guest
@Uhfgood @fedyfausto

Good news! This supports HTML 5 with a VERY simple fix. Simply add a font (any font) and use it in the draw gui event of the display manager object. That's it! there are still some caveats, however. As this is built for a non-changing "display size", you'll need to make sure that as the browser is resized your game reacts to it, but this will at least get you up and running with a resizing window. It's not perfect but the purpose of this tutorial was not to provide you with the end all be all of display management, but to provide you with the knowledge and tools necessary to understand what needs to be updated as your game window changes.

Hopefully that helps everyone who is using HTML5. I'll update the example project to include a font so it should run in HTML5 out of the box. The rest is up to you!

mmm i have tried your solution but i have some problems:


In Windows mode all work correctly (so the ration and the W/H of the screen are correct, even if i resize the screen)


However, after some fix i have tried it on HTML export. How can you see the height and the width are not propotional to aspect_Ration and the browser W/H....


HOWEVER i wanna share with you an my first solution for this problem... (before i using your obj_screen_controller)

I had a object (obj_scale_canvas_controller) with 2 events (CREATE and STEP)

CREATE:
Code:
base_width = view_wview[0];
base_height = view_hview[0];
width = base_width;
height = base_height;
STEP:

Code:
global.display_scale = display_get_gui_width() / view_wview[view_current];
if browser_width!= width || browser_height!= height {
    width = browser_width;
    height=browser_height;
  
    script_scale_canvas(base_width,base_height,width,height,true);
}
so in STEP event i calculate the display_scale and save it on global var (i used it for GUI correct positioning and scale) so if i resize the browser i call a new script:

Code:
aspect = argument0 / argument1;
if argument2 / aspect > argument3
{

    display_set_gui_size(argument3 * aspect, argument3);
    window_set_size(argument3 * aspect, argument3);
  
  
}
else
{
 
    display_set_gui_size(argument2, argument2 / aspect);
    window_set_size(argument2, argument2 / aspect);
  
}
if argument4
{
    window_center();
}

This is my first solution, however i had some many problems when i need to put some GUI but the result it's pretty works! (test it on federicosantoro.com/telegram_game). I don't know if this can help me or you for create the ultimate fix XD
 
Last edited by a moderator:
U

Uhfgood

Guest
@fedyfausto - I didn't have this problem at all. In fact all I did was swap a few axes in the create event -- and now the html5 version works just fine after I added in the font fix. Quick Edit: I just tried your game and it actually handles window resizing quite well, and for some reason your game comes out crisp and pixelly but the tutorial demo which I ran comes out blurry (fuzzy)

@Pixelated_Pope - This might be a problem more to do with firefox than your demo but it works fine except it's all blurry, not crispy-pixel like I would like. I'm using waterfox which is a firefox variant. I also ran it in Chrome, and internet explorer 11 -- it doesn't even work in IE 11 -- but chrome and firefox both show it blurry
 
Last edited by a moderator:
Top