
Pixel Art Knowledge - "Pixel-perfect" has no meaning
A downloadable article
Pixel Art Knowledge - "Pixel-perfect" has no meaning
This is a freely downloadable article, which explains the term "pixel-perfect". I want to make this freely available to anyone, since I think communication on the topic is difficult and confusing and there is no other article explaining this. I hope you'll learn something and have a good read!
The article is structured in a couple of big parts:
- There is an examination of the current meaning of the term,
- 5 aspects are listed if something is "pixel-perfect" or not
- an examination of the original historical meaning of the term
- an examination of "pixel-perfect" scaling
- and a conclusion why the term means nothing
The download also contains all examples I made for it in the original resolution, if you want to check them on your own or zoom into them, now you can do this easily.
There also is an uploaded version on my Ko-Fi:
if you want to just read the article or quickly link it to someone, you can find it also on my Ko-Fi:
https://ko-fi.com/post/Pixel-perfect-has-no-meaning-Z8Z01ADBJH
Special Thanks:
Editing & Proofreading:
Kamil Kosowski
Proofreading:
Aleksandra Jarosz
Colin Bellino
Thomas Dik
Updated | 3 days ago |
Published | 4 days ago |
Status | Released |
Category | Book |
Rating | Rated 5.0 out of 5 stars (6 total ratings) |
Author | Thomas Feichtmeir "Cyangmou" |
Tags | 2D, Art Book, gamedesign, Pixel Art |
Download
Click download now to get access to the following files:
Development log
- Article available as PDF3 days ago
Comments
Log in with itch.io to leave a comment.
That's a good read and I especially like the attention you gave to how things were in the 80's and 90's and how the artwork was perceived back then.
Just a small correction: under the heading "2.) The way sprites are rotated:" , you say "This usually requires us to draw multiple rotated images and clean them up by hand, which also results in more work." hmm... if anyone is actually doing this, it's a phenomenal waste of time, I've never actually heard of doing it that way! The issue is easily solved by the "Low resolution setup" you described in your heading "A “Pixel-perfect” setup:" If the game's output is rendered to a low resolution pixel buffer (eg. 480x270) and then scaled up with no filtering to 1920x1080, you will get a "pixel perfect" result, meaning all sprites will stay on the pixel grid and all rotations will look "twinkly" just like they did on the SNES, as in the 2rd cup image, rather than seeing individual rotated pixels as in the 3rd cup image. Effectively, the game is emulating old hardware by first rendering the game to a virtual "low resolution screen" before scaling the whole thing up to fill the hardware display in real life.
Also I'm curious what you mean by "There is however no agreement if the user then stretches the view." Do you mean running in "windowed mode" perhaps? As the developer, you have complete control over how the game behaves at different screen sizes and the user need not "destroy" the aesthetic by "stretching the view". If the goal is to maintain sharp pixels at different display sizes, you can do this, and there are several options available to you. It's the same scenario as in the beginning of your article - you need to know what hardware displays you're targeting and design the game to look good on those displays. In modern times, we can afford the game to be "responsive" and adjust itself to look good on a variety of screen ratios and resolutions. Usually by cropping and adjusting the GUI to align with the edges properly. Of course you can just scale and apply filtering and have slightly fuzzy pixels but not have to do any tweaking for different display sizes.
I like your notion of being "consistent", that's the key in any good artwork and the one thing that matters above all else.
As for myself, I used to prefer all pixel art games to render to the low resolution pixel buffer first as above, but after seeing all the amazing pixel art games that play with the limitations, I've come to a similar 2 options you have I think, I just like to define them a little further:
1. For a nostalgic option, I like the idea of "faithfully retro" games that only render to the low resolution pixel buffer, and never use any transparencies or any gradient effects, only using GPU shaders to emulate old hardware effects like scanline effects and palette swapping effects. And then on top of that, sticking to the colour and sprite size limitations of the hardware you're pretending to be. This is only necessary when you want to hit a target audience that wants to see your game and feel like they would have seen this kind of game growing up in the 80's or 90's.
2. For a modern pixel art aesthetic, It's enough that the pixels are all of a consistent size, but it's rendered to the high resolution display with the individual elements scaled up by the same amount, meaning they move in "less than 1 pixel increments" for smoother movement, and rotations show the actual rotated pixels, and they are free to add lighting effects and gradient colours, transparency, glowing effects, particles etc. as they see fit to fit their artistic vision. It's great that the pixel art aesthetic is hanging around through this approach and being appreciated by a new, younger audience.
Thanks a lot, I am glad you enjoyed it. Let's go a bit deeper on some of your points. I really tried to keep things short and on point on the article, generally for each example a lot more could be said. Le tme add some short notes to your questions:
a) rotating the sprites: There are countless games which have sprites drawn in 8 or 16 directions. Both retro games and modern indie games. Usually you see it with things like arrows or other projectiles which are used a lot, where you then jgot 8 or 16 sprites for them.
Yes you don't have to clean them "necessarily" up, you could get away with a single picture. but still usually a set of multiple cleaned up sprites is used, of which then each direction gets rotated with a smaller distortion of the rotation. but the wording is chosen the way it is to emphasize the point.
b) Games which first render to a low res and then are scaled up:
THat's generally the "low-resolution setup" as described later in the article.
if you render to a low resolution first and then scale this up you also run into problems with laptop screens or any hardware which is not an integer-scaling multiple of the small resolution you have
c) There is however no agreement if the user then stretches the view."
developers understand soemthing as pixel-perfect for their game. And some end-users understand soemthing as pixel-perfect which has more to do with what options to choose. Let's say you got a game like Cross-Code (568x329 px native resolution) or Blazing Chrom (427x240px native resolution) - just by the setup the programming side chose here there is no way to ever show those with nice integer scaling on most screens. So if the end user just chooses "full-screen" for them, you end up with a slightly blurred/stretched image. Generally as a developer you can provide options for your user and you can choose a basic resolution, but the user might not display the game you intented as a developer. And a lot of users also talk about "pixel-perfect" games, just by the way of the options they chose to display them.
1.) I also like this option, but it really depends on the original system system. If you want to code something like this you go with the "low resolution-setup" and add the shaders on top.
It's however hard to put all of the specific retro choices into a simplified term because the tech-limitations of each retro system differ.
2.) That's exactly what the "high-resolution setup" provides.
Ah yes, you are correct, of course many sprite based games have hand drawn artwork for each direction. It's just that, the way I read it, the article seemed to tell the user; if they want to avoid seeing rotated pixels they needed to hand draw the sprites. So I was responding to that.
> "but the user might not display the game you intented as a developer"
Well, its your game, they can only choose the options you provide. It's true you can just let your "full screen" setting scale to fill whatever display the user has, it's certainly the easiest option, but the developer has final say - it's just whether or not you want to take on the extra work of designing how the game behaves on the different display sizes.
Eg. for my game HopSquash! when the user undocks and goes to handheld mode which is 1280x720, I scale my 480x270 game up 3x, and then I only had to crop 1 row of tiles off the top, and 1 column of tiles off either side, and the pixels stay sharp. Cross Code and Blazing Chrome could do something like that if they wanted, Most displays on desktop are 1920x1080 or 4k. But it's not free of course. You have to add the extra work of designing your game like a mobile game or a website, where your game has to be "responsive" to the likely different display sizes. I had to make sure all my levels were playable without those extra tiles on the edges :) I don't know if I'd bother with this for every game, it certainly does add extra work, but the point is the control is always in your hands, you just have to test on the different hardware.