Creating a fullscreen, low-resolution game? (QUESTION)

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • I'm creating a pixel art-based game with a VERY low resolution (370x260 to be exact) and I want to have it boot up in fullscreen. I want the game to scale up to match the monitor size while also not stretching out, and I would like to do this without anti-aliasing (again, this is a pixel art game, and I want the pixels to be as clear as possible.) In any attempt I've made to make this happen, the screen has either appeared blurry, stretched, small, or some combination of the three.

    Is there a way to scale up your game for fullscreen without sacrificing pixel quality?

  • And pick a more sensible resolution - something with a common aspect ratio (eg. 16:9), and preferably a factor of a common resolution (eg. 720 or 1080 lines).
    eg. 480x270 is 16:9, and scales perfectly to 1080 (FHD).
    eg. 320x180 is 16:9, and scales perfectly to 720 (HD) or 1440 (QHD).

  • Just to clarify, Ultimate Fullscreen Object works fine in Windows 10 (with windows exporter). But I guess you mean the UWP exporter?

    Anyway, have you tried these options below?

    Also, remember that what you're asking is going to be literally impossible on certain screens. If your game is 260px tall, but my monitor is 1080px tall, then to display at full-screen, your pixels will need to be scaled x4.15 times. It's impossible to do that scale that perfectly without antialiasing. If my monitor were 1040px then your game would scale at x4.0, which would work great. If my monitor were 1300, then your game would scale at x5.0, which would work great. But since my monitor is 1080px tall, your game would have to scale at x4.15. Without antialiasing, it will have to add/subract whole pixels into the image every now and again, which would look screwy. Especially since your game is so tiny, so it doesn't have much pixel data to work with to begin with.

    It might be better to design the game at a larger resolution, using big, crisp multi-pixel squares (so it LOOKS like pixel art, even though multiple real pixels are used per 'pixel'), and then scale down, without antialiasing. Alternatively, you might want to make the game at a moderately large resolution, and tell Fusion not to scale up at all, but to just surround any edges with black bars.

    I don't know much about pixel art games though. There's probably a way to do what you want, since many games do it.


    Please login to see this picture.

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

    Edited once, last by Volnaiskra (July 25, 2016 at 1:42 AM).

  • Getting a low res pixel art game to scale perfectly on multiple possible desktop resolutions is actually a pretty hard task. I had to face the same problem with my current game, so here´s my solution for .exe. I don’t use other runtimes so I can´t give advice on that, but I think the basic concept is somehow adaptable.

    What you want to achieve:
    X Run your game fullscreen without black bars or borders. A lot of pixel art games run using some kind of margins, but players actually expect a modern game to support their native desktop resolution.
    X Use integer only scaling to not spoil your pixel art. Some graphics setups can also produce very ugly scanline-artefacts if you use scrolling and scale a low resolution using floating point values. This may be very subtle on some setups, but it´s almost always visible.

    For the method I propose you will need the following 3 objects/ extension installed:
    X Big box object: Gets the desktop resolution of the player
    X Window control object
    X Ultimate fullscreen object

    Follow these steps:
    1. Start your game in windowed mode and uncheck all scaling related properties as well as anti-aliasing and don´t use “change resolution mode”. The following steps run within the first frame loop, before the renderer triggers, so the player won´t recognize these steps at all.
    2. Big box object: One frame start get and store the desktop width and calculate + store the players aspect ratio
    3. Define a minimal frame width your game can run in, this is really important as it will define your level design. Your game has to be designed to be playable at this minimum resolution which also includes the design of all HUD elements.
    4. Run a fastloop to detect a frame width that can be scaled to the native desktop width of the player using integer only scaling, starting with your minimal possible frame with.
    I´m sure this can also be done with an elegant math expression too, but I´m bad at math, so I used a fastloop comparison for it.
    5. Window control object: When you calculated your “ideal” frame width, adjust your frame size using window control object and adjust the frame height using the player’s aspect ratio (you calculated that using big box!)
    6. Ultimate fullscreen object: Set your game fullscreen and choose “pixel perfect fit”. The game will now scale integer only and - as you detected and set the best possible frame size for the player´s setup before - it will be without borders

    Examples:
    My game Outbuddies has a minimal starting width of 399 px, that means the frame width will be:
    455 for a 1366 desktop, scaling by factor 3
    400 for a 1600 desktop, scaling by factor 4
    480 for a 1920 Full HD desktop, scaling by factor 4
    427 for a UHD 3840 monitor, scaling by factor 9

    The Downfalls: You have to design your game to be playable well at slightly different fields of vision. It´s important to test all levels on the lowest possible frame size. You also have to adjust all your HUD elements depending on the actual frame resolution. Working with subapps can also be a bit painful, but it´s doable.

    Hope that helps, I will try to post an example .mfa in the next days

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Wow, thanks julian! I dont know about OP but I needed that info too!

    The only part im not sure about is the fast loop part, how does the event for that look?

    Please login to see this link.
    Please login to see this link.|Please login to see this link.|Please login to see this link.

  • I modified step 4, it´s a lot simpler now and you don´t need to do a fastloop.
    Here´s the complete code:

    Please login to see this attachment.

    edit: the Var "AVN frame width" has to be set to the minimal frame width (step 3) before running these events

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

    Edited once, last by Julian82 (July 26, 2016 at 8:40 AM).

  • I modified the code further, now it can also detect if the player changes resolution on runtime and will rescale the game to the new correct pixel perfect frame size

    sorry the png somehow converts to a super smal ugly jpg when i upload it, how do I post the pic in high quality?

    Please login to see this attachment.

    Volnaiskra? Can you help?

    Here is the original screenshot:

    Please login to see this link.

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

    Edited 6 times, last by Julian82 (July 26, 2016 at 10:00 AM).

  • @ Julian:
    I seem to remember you can doubleclick the image after insering it in the post,
    and then choose quality setting (thumbnail ..up to.. full)

    (not sure if this work for pngs, seem to remember it didn't once, but sure it does for jpgs)

    a selection of my Fusion examples can be found Please login to see this link.

  • Thanks! doesn´t seem to work with my png... anyway the dropbox link will do it!

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • For posting screenshots, I really recommend Please login to see this link.. You can easily set it up so that with a single hotkey, it will take a screenshot (of the whole screen, a window, or just a region - your choice) and automatically upload it to imgur.com and once it's uploaded, it'll automatically copy the link to your clipboard.

    Then you just hit the image button in the forum and paste the link into it. (linking to your image as a URL rather than as an attachment seems to always produce good results for me)

    It's really quite fantastic; you can do the entire process - from capturing the screenshot to seeing it in your post - in 10 seconds

    PS - that's some great info you posted, Julian82!

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

    Edited 2 times, last by Volnaiskra (July 26, 2016 at 12:16 PM).

  • Julian, could you also upload a working mfa template?
    Please login to see this attachment.
    I just used the instructions of your image but I'm not sure about the Display settings.

    I use Greenshot(Please login to see this link.) for my screenshots because I prefer the manual processing of my images.

    Please login to see this picture.

    -Imgur link:
    Please login to see this link.
    -Copy the image url:
    Please login to see this link.
    -Forum(without quotes):
    "Please login to see this picture."

    Currently working on ... [SIGPIC][/SIGPIC] ... a Puzzle Platformer

    Edited 2 times, last by Wodjanoi (July 26, 2016 at 2:17 PM).

  • Wodjanoi: Very strange, as far as I see this should be working, but it doesn´t. The problem seems to be on the ultimate fullscreen step. All values are calculated correctly and the window control object also does the job.

    There must be some factor in my .mfa that makes the difference, but my code is embedded in a 5000+ events giant project and I will need time to figure this out. Your properties are the same as mine.

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Made a very strange observation I cannot understand: if I paste the .mfa template of wodjanoi in my project everything works fine. It is not related to general property settings. If I delete all other frames of my project the scaling template example of wodjanoi stops working. I have no idea what this is all about, I hope my scaling method is not working due to a weird bug I cannot reproduce. Some month ago I realized that I could leave "Resize display to fill window" unchecked and Ultimate fullscreen extension did work well, I think my routine relies on this constellation but I have no idea what this is all about. I will investigate further, any ideas?

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • I attached an .mfa of my project strippted of all graphics, code and binary data. The first template is exactly the code of wodjanoi. It works perfectly, you can even switch desktop resolutions and the screen adjusts as intended.

    Now the weird point: If you delete template 2, template 1 stops working. I hope an explanation can be found. Anyway feel free to use this example for ultimate scaling, although I don´t know why it works :P


    Please login to see this link.

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Thank you very much for the template Julian82! The fullscreen works properly without the second Frame when I tick "Resize display to fill window size".
    Can I do this or will this destroy everything in some situations?

    Currently working on ... [SIGPIC][/SIGPIC] ... a Puzzle Platformer

  • No problem! Actually you wrote the example template as I was to lazy to to it;) You are right, ticking Resize to fill window size box again seems to solve it, anyway this is does not explain the whole thing to me... In theory you should be fine with it, keep me updated, if you discover interesting things!

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Wodjanoi: I checked your suggestion in detail with a pixel art picture and new grid and unfortunately it doesn´t work:( Ticking "Resize to fill window size" spoils it and on some more crazy resolutions it doesn´t scale to fullscreen at all. I made a new example, switch trough your desktop resolutions running the scaling frame, you´ll see the difference!

    It´s like I stated before, the pixel perfect scaling routine works perfectly but it depends on frame 2 of my project been present. I can not explain why as this frame is not related to frame 1 in any way. I also can not reproduce my method when I recode it in a new .mfa. It´s really crazy. Somehow my Oubuddies.mfa where frame 2 is from seems to have "mutated" allowing to do things that should not be possible.

    I broke it down to the constellation that Ultimate fullscreen is working without "resize frame to fill window size" ticked.

    Here´s the .mfa: Please login to see this link.

    Please login to see this link.
    Please login to see this link. | Please login to see this link. | Please login to see this link. | Please login to see this link.

    Edited once, last by Julian82 (July 28, 2016 at 7:36 AM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!