Jump to content
  • Advertisement
#Euphoria

Pixel Art Resolution

Recommended Posts

Pixel art will scale correctly if you turn off all texture filtering, so long as you scale by an integer number.  Pixel art will scale mostly correctly even if you scale by a non-integer if your scaling factor is large enough, so long as you turn off all texture filtering.  Pixel art will always look like ass if you use texture filtering.  This has nothing to do with texture resolution.

Share this post


Link to post
Share on other sites
Advertisement
4 hours ago, a light breeze said:

Pixel art will scale correctly if you turn off all texture filtering, so long as you scale by an integer number.  Pixel art will scale mostly correctly even if you scale by a non-integer if your scaling factor is large enough, so long as you turn off all texture filtering.  Pixel art will always look like ass if you use texture filtering.  This has nothing to do with texture resolution.

Yes, the pixels themselves will scale up evenly but that doesn't mean it will look "good".

My apologies if I'm confusing things now! I was under the impression that the OP thought that any image as long as you could square it by 2 would never lose "quality" if you bumped it up in a program. My definition of quality is based on the image itself retaining the same look and feel, when you "bump" something up. I don't consider an image becoming pixelated/blockly evenly good "quality".

I've loaded these images into my engine as an example:

Yes when you scale pixel art like this up it will be fine:

image.png.7aaa9beba5160f33326b45150188a065.png

However, if I load in a sprite that has more detail it will not look good scaled up due to anti-aliasing and more detail on the original image:

image.png.7bfce94cb2b918af316fe581970933c5.png

The same applies to a zoom effect on the camera.

Zoomed out: image.png.96f213efc591e5b6bc9605a6f9d22327.png

Zoomed in: image.png.d0d9b9926e93c88ac0ff52aab721d4a9.png

 

If you take a SNES sprite like Mario for example because you can scale up just fine and all pixels will increase by that factor which keeps the image intact, but again it's now more "blocky".

image.png.5d442d383143002cce7631ba5a941d12.png

Now when you move to something more detailed like in Super Street Fighter your graphic isn't going to look good as you scale the image as the scaling makes it worse on images with more detail:

image.png.a21a4dd01526f9156edf8141335e5aba.png

So as long as you're okay with the pixelation-blocky look you're good to go. :)

Sorry for the confusion! I don't work with sprite sheets that contain graphics like in the NES days, most of my stuff is detailed so scaling up is a no no. I assumed that you were referring to being able to take the first Ryu image and scale it up to the larger size but still have it look like the smaller version just not pixelated-blocky.

 

Share this post


Link to post
Share on other sites
Posted (edited)
On 7/8/2018 at 9:30 PM, #Euphoria said:

Do pixel games require to be 16x16, 24x24, 32x32 to fit a resolution of 1080x1920 screen ?

What if I have a sprite person that is 28x12 and I work on it in a screen of 480x270 canvas, will it effect the sprite?

Your screen resolution does not have to be divisible by your canvas resolution.  If you want perfectly sharp pixels then it helps, but there's a trick to get a canvas of nearly any resolution to scale well up to your screen resolution.

  • Render the game to a render target that's the size of your virtual canvas
  • Scale that canvas up as close as you can to the screen resolution, but make sure you scale at an integer multiple of your canvas size and without any filtering.  This will results in pixels being turned into 2x2, 3x3, 4x4, etc clusters of pixels.  I call these "fat pixels."
  • Scale this integer scaled canvas to your final screen resolution with bilinear filtering.

There will be small transitions between the fat pixels but most people never notice this.  In fact, most modern pixel art games you've played probably use this technique and you didn't even notice it.  For example, look at the two images I attached.  The first is a screenshot of Shovel Knight, and the pixels look to be quite sharp and nice.  It's not blurry, the pixels are all uniform size.  But then look at the second attachment, I've cropped out his face and blown it up with no filtering.  See the transitions between the pixels?  They're using this method and most people who play the game don't even notice.

So no, you can make your canvas size be anything you want.  

screen_09.png

shovel_knight.png

Edited by gaxio

Share this post


Link to post
Share on other sites
22 hours ago, a light breeze said:

Pixel art will scale correctly if you turn off all texture filtering, so long as you scale by an integer number.  Pixel art will scale mostly correctly even if you scale by a non-integer if your scaling factor is large enough, so long as you turn off all texture filtering.  Pixel art will always look like ass if you use texture filtering.  This has nothing to do with texture resolution.

The first sentence is correct, but the rest is incorrect.  Yes, if you try to scale from a low resolution directly up to a high resolution with texture filtering on it will be a blurry mess, however, see my other post in this thread for a method many games used to scale sharply and accurately to arbitrary sizes.  It does not always look like ass if you use texture filtering, it is the key to get pixel art to scale correctly if you can't scale by an integer amount.

Pixel art will also never scale correctly at non-integer sizes with filtering turned off.  You'll get situations where most columns of an image will scale to 2x2 pixels or something, but then at regular intervals throughout the image rows and columns will scale to 3x3.  This is bad, this looks terrible and any scrolling screen or moving character will warp and distort.

Share this post


Link to post
Share on other sites
Posted (edited)
5 hours ago, gaxio said:

There's a trick to get a canvas of nearly any resolution to scale well up to your screen resolution.

  • Render the game to a render target that's the size of your virtual canvas
  • Scale that canvas up as close as you can to the screen resolution, but make sure you scale at an integer multiple of your canvas size and without any filtering.  This will results in pixels being turned into 2x2, 3x3, 4x4, etc clusters of pixels.  I call these "fat pixels."
  • Scale this integer scaled canvas to your final screen resolution with bilinear filtering.

There will be small transitions between the fat pixels but most people never notice this.

That's a cool recipe bro, thanks for sharing.
This lets you fill the screen with your lo-fi graphics and you could even argue that the "pseudo antialiasing" effect from the bilinear filtering on step #3 makes it look more pleasing and nostalgic, like from an old CRT display on an arcade.

I wanted to add the obvious to your list that, in order to fit your virtual canvas to your device screen on step #3, you need to divide the length of the smallest device screen dimension by that same dimension on your v. canvas (divide height by height, or width by width), and then scale the v. canvas on both dimensions by that factor, the result of the division. EDIT: The first part is actually wrong, read my post below.
With this, a square virtual canvas on a standard 16:9 widescreen would leave blank areas left and right (letterboxing or pillarboxing, desired side effects), because its ratio is preserved.
If you just fill the entire screen with the canvas then it will look stretched or compressed of course.

Edited by Kryzon

Share this post


Link to post
Share on other sites

 

4 hours ago, gaxio said:

The first sentence is correct, but the rest is incorrect.  Yes, if you try to scale from a low resolution directly up to a high resolution with texture filtering on it will be a blurry mess, however, see my other post in this thread for a method many games used to scale sharply and accurately to arbitrary sizes.  It does not always look like ass if you use texture filtering, it is the key to get pixel art to scale correctly if you can't scale by an integer amount.

If you think that example is sharp, then you might want to get your eyes checked.  That screenshot looks barely tolerable to me in its native resolution, and downright painful at x2.

 

4 hours ago, gaxio said:

Pixel art will also never scale correctly at non-integer sizes with filtering turned off.  You'll get situations where most columns of an image will scale to 2x2 pixels or something, but then at regular intervals throughout the image rows and columns will scale to 3x3.  This is bad, this looks terrible and any scrolling screen or moving character will warp and distort.

Yes, if your scaling factor is small as 2 or 3, then scaling like this will look bad because there is a huge difference between 2 and 3.  If your scaling factor is 16.5, then the scaling artifacts will be a lot less noticeable because the difference between 16 and 17 is a lot smaller.  It won't look perfect, but it'll certainly look better than anything that uses bilinear filtering.  In my entirely subjective opinion.

Share this post


Link to post
Share on other sites
1 hour ago, Kryzon said:

in order to fit your virtual canvas to your device screen on step #3, you need to divide the length of the smallest device screen dimension by that same dimension on your v. canvas (divide height by height, or width by width), and then scale the v. canvas on both dimensions by that factor, the result of the division.

Let me correct myself... the logic is actually this:

float ratioGame = gameWidth / (float)gameHeight;
float ratioScreen = screenWidth / (float)screeHeight;
float factor = ratioGame > ratioScreen ? screenWidth / gameWidth : screenHeight / gameHeight;

fitGameScreen.gif.9698f8924c4db75c01a230840f4f8a44.gif

Share this post


Link to post
Share on other sites
2 hours ago, Kryzon said:

Let me correct myself... the logic is actually this:


float ratioGame = gameWidth / (float)gameHeight;
float ratioScreen = screenWidth / (float)screeHeight;
float factor = ratioGame > ratioScreen ? screenWidth / gameWidth : screenHeight / gameHeight;

fitGameScreen.gif.9698f8924c4db75c01a230840f4f8a44.gif

Thanks for the fleshing that out.  I also forgot to mention that step 1 is optional if you have enough control over the renderer.  If you can control how sprites are rendered then you can render directly to an integer scaled render target with unfiltered scaled sprites locked to fat pixel boundaries.  At that point all that's left to do is to scale to screen resolution, or your letterboxed/pillarboxed final size.

Also, you can ignore snapping sprites to fat pixel boundaries.  Movement becomes a lot more smooth, but it's not "true" pixel art since some sprites won't be on pixel boundaries.  However, most users don't notice that they just say the game looks smoother.  I did this first on a breakout-style game by accident and the ball just looked so smooth that it was hard to ignore it.  It's usually what I end up doing now since it looks so much smoother.

Share this post


Link to post
Share on other sites
Posted (edited)
On 7/10/2018 at 10:19 PM, #Euphoria said:

Am I correct in saying that when the first bench scaled up higher will not look correctly and the right bench will scaled up higher will look perfect as is? 

Sorry for the late reply I was away for a bit.

@Rutin is correct about sprites during production. It doesn't matter what size a sprite is, if you upscale it using no filter and keeping to the power of two rule it will keep it's quality.

SpriteProduction.jpg.822a5546a27f6ff2bf035a08cf50a909.jpg

So while producing sprites keep this in mind. You can make a 16x16 sprite match a 32x32 sprite by scaling like this. Then tweaking the style to get the right look. It is a production trick.

 

However screens don't follow the power of two rule, so if you want to make a game that works on any mobile and still looks good, this is where the composing tricks mentioned by @gaxio.

However if you want pixel perfect sprites, for crystal clear pixel graphics, you need to calculate the camera render size and screen resolution to match it to a 1x,2x,3x etc ratio. Like @Kryzon did.

Edited by Scouting Ninja

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!