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.

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.  

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.

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.

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.

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;

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;

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.

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.

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.