Satisfactory results for pixel art game on different screens

Post reply
0 favourites
  • 8 posts
From the Asset Store
Adjusting the game screen for different resolutions
$3 USD
Adjusting the game screen for different resolutions (Letterbox scale)
q3olegka's avatar
q3olegka

  • Hi!

    I see this discussed a lot, and I've seen it done, but I still haven't understood how it should be accomplished: getting a nice full-screen pixel art on different screen sizes.

    I'm making a retro style pixel art game which is especially intended for smartphones and tablets. I've started out with a 320 x 180 viewport, which works nicely if I make my graphics in true pixel size (32x32px tiles). I know letterbox integer scaling will keep my pixels nice, but I end up having nasty margins on my iPhone SE which has a 1136x640px resolution. Scale inner or outer gives a nice result full screen on both the iPhone and my iPad, but especially on the phone the pixels aren't so perfect any more.

    Basically the scale inner or outer -approach would be fine and I think I could deal with arranging stuff so that nothing gets cut away, but the pixel distortion is a problem.

    I've seen games made with Construct that I've played on both my phone and my pad which seem to accomplish this - for example "Cluckles". The phone view is more widescreen while the ipad view has a little more information on top and bottom (in landscape orientation). It seems like the pixel size is about the same as on my 320 x 180 project - but no pixel distortion!

    I made a pixel art game lately using a different software and achieved a nice look by making the graphics 4 times bigger, so a 32x32 pixel tile would actually be a 128x128 pixel graphic. This kind of higher resolution solution would probably end the pixel distortion problem here too, but it also makes the graphics much heavier.

    How do you do this? Any input would be much appreciated before I make the decision and start building more of the game. Is there a satisfactory way of doing it with small graphics or should I upscale them?

  • jtraskelin

    Here is how I set up the screen for scale-outer... I don't see any problems on my iPad or iPhone. pixels don't look distorted to me.

    One of the tricks to arranging things is to remember that the top left corner of the screen is probably not 0,0... it is surprising how subtle that assumption can be.

    anyway, try this and see how it works: https://www.rieperts.com/games/forum/screen_test.c3p

  • Hi!

    I see this discussed a lot, and I've seen it done, but I still haven't understood how it should be accomplished: getting a nice full-screen pixel art on different screen sizes.

    I'm making a retro style pixel art game which is especially intended for smartphones and tablets. I've started out with a 320 x 180 viewport, which works nicely if I make my graphics in true pixel size (32x32px tiles). I know letterbox integer scaling will keep my pixels nice, but I end up having nasty margins on my iPhone SE which has a 1136x640px resolution. Scale inner or outer gives a nice result full screen on both the iPhone and my iPad, but especially on the phone the pixels aren't so perfect any more.

    Basically the scale inner or outer -approach would be fine and I think I could deal with arranging stuff so that nothing gets cut away, but the pixel distortion is a problem.

    I've seen games made with Construct that I've played on both my phone and my pad which seem to accomplish this - for example "Cluckles". The phone view is more widescreen while the ipad view has a little more information on top and bottom (in landscape orientation). It seems like the pixel size is about the same as on my 320 x 180 project - but no pixel distortion!

    I made a pixel art game lately using a different software and achieved a nice look by making the graphics 4 times bigger, so a 32x32 pixel tile would actually be a 128x128 pixel graphic. This kind of higher resolution solution would probably end the pixel distortion problem here too, but it also makes the graphics much heavier.

    How do you do this? Any input would be much appreciated before I make the decision and start building more of the game. Is there a satisfactory way of doing it with small graphics or should I upscale them?

    jtraskelin Cluckles Adventure uses Scale Outer. You need to make the background graphic for all layouts larger than the window size. Thats true for game level layouts, menu screens etc. In Cluckles the window size is 240x160, and the background graphic for each layout is 368x256. The larger bg graphic means you wont see black bars or the edges of your artwork on different device screen sizes. The tiles in Cluckles are 16x16.

    Im not sure what's causing the distortion you refer to. But you'll get different results if you play with the settings in Project Properties. What settings do you have for Full Screen Quality and Pixel Rounding? Are you using C2 or C3?

  • it's no good

    What settings would you suggest —

  • I wonder how that would work on mobile? Have you tried? Is there a chance youd get black bars at the edges, or be able to see the edges of background art etc?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Hi guys!

    Many thanks for your replies! Artpunk, those settings actually work very well on my iPhone SE and my 9.7 inch iPad pro when trying with remote preview. However previewing on a Samsung s7 showed some pixel distortion (the phone didn't show full screen like my iphone, so the preview was smaller than actual app resolution), and previewing in a browser window and trying out different sizes does show pixel distortion. This is mostly visible in small resolutions, where you can actually see some pixels smaller than others, while in bigger resolutions I can only notice a slight "waving" effect sometimes.

    I can understand why this works on the iphone which has a screen resolution of 1,136x640px. If it scales to the window height 640, the window height 160 will resize nicely at 4x. What I don't know is why it works on the iPad with 2048x1536 resolution - i didn't get to see a full screen preview on that either, but Cluckle's Adventure looks just perfect! Maybe it's about the high resolution which minimizes the problem?

    What — suggested was something that I was thinking about too. How did you achieve the integer scaling?

    Anyway, if Cluckles really didn't use anything more complicated than that, it seems like a safe bet to go with that kind of settings and no extra hairsplitting - the 3:2 aspect ratio does seem to work much better than 16:9! Have you found it to work on most smart phones?

    Thanks AllanR for your example too, I'll keep all of that in mind! The example had linear sampling which gives a different look, though, and if I use small sprites they get too soft.

  • Have you found it to work on most smart phones?

    All the phones and tablets Ive tested on have been ok. Including a couple of Samsung phones.

    Someone told me a while back that it even worked on the iPhoneX which has a notch or something. Which is pure fluke because I did no testing for that device.

    Id say also test different settings for Full Screen Quality and Pixel Rounding. I think Pixel Rounding is better set to Off / Disabled because it gives smoother gameplay. And you'll get different results setting Full Screen Quality to high or low, so you can test that and see what looks better.

  • by working hard and sending lots of bug reports !!!

    Can you explain your method for getting the width and height of the window?

Post reply
  • 8 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)