Lower resolution vs enlarged images?

0 favourites
  • 12 posts
From the Asset Store
Adjusting the game screen for different resolutions (Letterbox scale)
  • If we are doing pixel art, is there any reason to use higher resolutions (window size)?

    For example, a typical character in pixel art might be 100px tall. Now, if we use a low resolution (window size) such as 480x853 or 540x960 then everything is about the right size when displayed on my monitor. Maybe some things need to be enlarged a little.

    Or I could increase the window size to a higher resolution like 1280x720, but this would mean using C2 to enlarge each sprite.

    If there is no benefit to working at higher resolutions, then I figure it's best to just work at a lower resolution and let it all upscale when it is played. That'd be easier than having to resize every sprite to double its size to fill out the window. What do you think?

    Everything will probably have to be resized anyway since pixel art is usually pretty small, but with lower resolutions, it wouldn't have to be resized as much.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • It all depends on the level of detail and style you want to deliver imo. Make it as big as it needs to be. Take playing on larger displays into consideration when thinking about how you handle those - will you scale the game up; if so, will you only scale by the factor 2 so that the pixel style won't be blurred that much or do you always want to fill the whole screen. Or do you want to keep the original size always, 1 pixel of your sprite always showing as 1 pixel on every screen (probably not very usable except when you are coding for desktops).

  • It probably doesn't make a difference. The window size property is kind of misnamed - it actually specifies the viewport size. If everything ends up the same size on screen, it's doing the same rendering work.

  • Cool, thanks.

    My pc monitor is 23" and 1080p. The game looked fine when full screen in Chrome no matter what resolution I picked. The only difference was how much stuff I could see at once, and that is entirely dependent on how large I resize the sprites.

    I'll probably stick with lower resolutions. It seems to work fine.

  • DrewMelton

    Play a little with scale modes and see witch one is good for what you want:

    https://www.scirra.com/tutorials/73/supporting-multiple-screen-sizes

  • Agreed with TGeorgeMihai. It seems like the scale modes are more what you want then the sprite sizes.

  • Well, I had the fullscreen mode set to "scale inner." It seemed to produce the best results. I just hope nothing gets cut off. I don't plan on having much HUD, but the HUD or the title screen would be my only concerns for getting cut off.

    Scale outer seemed to show too much of the outside, so I'd have to modify the back ground to go off the edge a bit.

    Letterbox scale seemed to work, though it always showed a letter box even if it was the same resolution as my desktop (1920x1080). So, I don't know why that is. I thought it would only show a letterbox if the resolution didn't match the monitor.

    The others didn't seem to be what I wanted.

    I also don't know why it says "fullscreen in browser" as opposed to just fullscreen. As far as I know, the game will not be running on a browser when I export the final game. I want to put it on Steam and maybe a mobile platoform.

  • DrewMelton one thing to think about is support of point sampling. It requires WebGL (so no <IE11 and mobile Safari) and I've noticed it has a big impact on performance on (some?) Android devices using CocoonJS.

    I posted a little bit about it here: 24h GameHack - 'Beyond the Wardrobe' - GameStick!

    Fortunately I found out that you could just batch resize images in the project directory to a higher resolution (using nearest neighbour image interpolation in Photoshop), and all assets (except spritefonts and tiled backgrounds if you use them) retained their stage size, and I was able to disable point sampling for a comparably crisp effect.

    So I'd personally recommend working on the small scale, then if you find you're having issues with point sampling, you can always batch resize your assets and switch to linear sampling.

  • Point sampling is supported in canavs2d mode in some browsers. It's a relatively new addition to canvas though, so older browsers might not support it.

  • Ashley ah my bad, thanks for the clarification.

  • DrewMelton - Set your HUD items to viewport locations via events to ensure they are always onscreen while using scale-inner. A little extra work for a lot of extra reliability.

  • Fortunately I found out that you could just batch resize images in the project directory to a higher resolution (using nearest neighbour image interpolation in Photoshop), and all assets (except spritefonts and tiled backgrounds if you use them) retained their stage size, and I was able to disable point sampling for a comparably crisp effect.

    I've never been able to resize images in Photoshop CS5 without at least some pixel shift. No combination of settings seemed to work. Things would always be a little bit 'off'.

    Now, resizing in C2 works just fine though. All pixels retain their exact positions.

    DrewMelton - Set your HUD items to viewport locations via events to ensure they are always onscreen while using scale-inner. A little extra work for a lot of extra reliability.

    Cool, I have no idea how to do that, but hopefully I can find a tutorial somewhere. I'm still new to C2.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)