Pixel Art: Common Mistakes (2020) | Hacker News Reader

Pixel Art: Common Mistakes (2020)

derekyu.com

308 pointsmemorable83 comments

For those unaware, Derek Yu is the creator of Spelunky. Here’s one of his best posts, it’s about how to actually finish making a game: https://makegames.tumblr.com/post/1136623767/finishing-a-gam...

That post is also full of pre-indieapocalypse charm. It assumes that a decent, finished game will get its author the recognition

That is still true today. This is going to sound a bit harsh but the market really is flooded with bad to mediocre games and people who think they’ve created a masterpiece. If you take a look at /r/gamedev it’s full of people sharing their games and asking why they weren’t successful. It’s easy to see by looking at any of those games exactly why. They don’t look good. Games that are actually good do get the recognition they deserve. I struggle to find evidence proving this wrong.

This is just not true. There are tons of good games that don’t get anywhere near the attention and sales that they would have during the early 2010s. In fact the only way this is true is if your definition of “good game” is “commercially successful game”.

Easy examples to point out are things like Tumbleseed: https://store.steampowered.com/app/457890/TumbleSeed/ or Mushroom 11: https://store.steampowered.com/app/243160/Mushroom_11/

And those are both 5 years old and things have only gotten harder since then!

Idk how much attention and sales you're talking about, but Mushroom 11 seemed to be successful. I actually heard of it before because it got featured on the App Store, and on the Steam page IGN gave it a 9/10.

That’s kind of the thing. It got the featuring and critical attention but still not many sales. Especially considering that it was under development by two people for many years. If it had released in 2012 it would have sold way more copies.

Tumbleweed is known I think but the genre is not very big

As a reminder, the original Game Maker Spelunky was a genre-defining smash hit in the indie scene. So Derek had nothing to worry about on that front.

What’s the indieapocalypse?

I googled it but all the results are commentary pieces that assume you already know what it is.

There was a window, from about 2007 to 2013, where basically any decently well made indie game that came to market would be financially successful. But the trick was, to get your game to market you had to establish a relationship with Microsoft, Valve, or whoever controlled the platform you were targeting.

Around 10 years ago the platforms started to open up and it got a lot easier to get a game into the marketplace. Seeing the success of the previous wave of Indie games and lower barriers to entry, people started to make a lot more indie games. Competition got more intense and finding financial success became less certain.

The worry of the "Indiepocalypse" is that as this trend continues, it will become harder and harder to make indie game development a viable, sustainable business. Which isn't suggesting that people will stop making indie games, it's suggesting that they will mostly be made at a loss and it won't be a viable business for the vast majority of developers.

The degree to which this worry has come to pass over the years is debatable.

Thanks for the explanation. I payed a bit of attention to the indie gaming scene years ago (must have been circa 2012 ... has it been 10 years already?!), so it's always nice to hear stories from that little corner of the internet. :)

Yep this all checks out. The thing to keep in mind is that there will still be just as many indie successes per year (maybe even a few more or a few larger ones). The issue is that the larger number of participants means the odds of any indie dev finding success are much lower. The standards for what kind of game will be successful have gone waaaay up.

Derek Yu is also the author of the fabulous Eternal Daughter, one of the few platformers I ever finished.

Bad pixel art is a pet peeve of mine. This is really advanced advice compared the problem most games have:

- pixels of different sizes

- rotating (!) pixels

- scaling pixels

- smooth gradients with millions of colours

- dynamic lighting overlayed on top

... I could go on :(

There are two main categories of pixel art in games.

In one category it’s about retro authenticity and these games are defined by the fact that their final buffer is the same low resolution as their art. They also often feature limited palettes, especially ones that were actually used on retro consoles.

There’s also a second category of pixel art, where the style is more modern. The art is still low res, but the final screen buffer is high res. This is where you’re more likely to see stuff like smooth rotating sprites and lighting effects.

You may have a preference for one style or the other, but neither style is bad or “wrong”. Most people who use the modern style are doing it on purpose. There are fantastic looking games in both categories.

Having pixel art and then each “pixel” being 4 or 16 pixels, obvious when scaled or rotated, I think is bad artistic form regardless of whether it’s a vintage styled or modern styled game. It breaks the flow and suspension of disbelief that comes with pixel art. The brain can’t interpolate anymore. Besides, it’s not hard to render to a buffer and scale it up nearest-neighbor, and it always looks better IMO

When I picture good uses of pixel art in modern (not retro-aesthetic) games, I picture it not as a pixel “camera” — a low-res CCD capturing a grid of samples of an originally-high-fidelity world; but rather as the world itself being made up of a bunch of vector squares — like the 2D equivalent of a Minecraft voxel world. The camera is a regular high-resolution camera, looking at a weird blocky world.

In such a world, rotating a pixel sprite by 45 degrees should just look like there being multiple invisible “grids” to the world, each rendered at infinite resolution and downsampled to your display, where the sprite isn’t rotating per se, but rather the pixel grid “layer” the sprite is on (i.e. the hi-res texture the sprite layer is being rendered onto for compositing) is itself rotating.

Of course, if you’re going to use things like rotation/scaling, sub-pixel particle effects, 3D, etc. then you then either have to embrace it in your game setting’s art design everywhere so particular uses of it don’t stick out; or you have to acknowledge that any uses of it are basically “non-Euclidean geometry” from the viewpoint of in-setting observers, and thus slide your game’s mood toward something approaching either science-fantasy (e.g. Fez) or horror (has anyone done a Flatland Cthulhu game yet?)

Also note that “multiple distinct pixel grids” isn’t even unprecedented in retro games, either; there were plenty of consoles where you got one resolution for your tile map and a different (usually higher) resolution for your sprites; where sprites could sit on top of tiles in non-aligned positions. A few consoles and arcade cabinets even combined pixels with vectors!

"Modern style" pixel art doesn't always mean higher resolution. You could use low resolutions but high bitdepth or lighting or transforms or shaders or ...

(Although I would consider a low-res limited-palette game which uses transparency, lighting, rotation, scaling and other transforms as retro since that was already possible decades ago.)

I (and many others) think mismatched pixel sizes look bad, but that there's nothing inherently wrong with those other things.

Can you recommend any games in the first category?

I surveyed the indie-game landscape a couple of years back, specifically looking for games in your first category, but struggled to find any recent examples. 2D transforms, alpha-blending and lighting effects seem to be the standard now.

Empire Strikes Back remake for c64 https://megastyle.itch.io/esb-by-megastyle

Celeste uses high resolution dialogue text, but its gameplay is strict about the pixel grid.

Loop Hero is strict about its pixel art and uses a fixed 16-colour palette that is reminiscent of the Commodore 64.

Baba Is You has visuals that you could basically render on a ZX Spectrum.

And in addition to doing pixel art well, these are all pretty great games.

There are a bunch of retro inspired games (ex Shovel Knight) that do the retro inspired thing. More interesting is a game like Celeste, where it has a 3D level select but during the actual gameplay, the characters move in integers and the screen buffer is still fixed at a low resolution.

Shovel Knight actually has a high-resolution render buffer and "subpixel" movement, but nobody seems to notice because the rules are mostly held in-place.

Cave Story, Shovel Knight?

Can you suggest some games of the second category? Enter the Gungeon?

Why are any of these things "bad"? Back in the day pixel art was constrained by technical limitations, but now you can use the same style but with less technical constraints, and include these sort of things. It's not "true" pixel art from 1990, but that doesn't make it "bad".

For the same reason people like the hiss and pops of a record, film grain, or even VHS tracking artifacts. Yesterday's technical limitations become today's aesthetic.

But the real answer is they aren't inherently bad. People don't actually need it to conform to the past limitations. More that they want it to feel authentic to the nostalgic memory they have in their head.

For example, games like Shovel Knight go for an 8bit style, but they're not limited to an 8 bit color space, NES sprite limitations, etc.

Shovel Knight used the 54-color NES palette, with 4 additional "cheater" colors:

https://www.gamedeveloper.com/design/breaking-the-nes-for-sh...

I get all that; I really enjoy the sound of some "imperfections" of old blues and jazz records, but I also don't consider any modern records which doesn't replicate those "imperfections" to be bad.

I'm not sure about Shovel Knight because I've never played it, but Mina the Hollower (also by Yacht Club) actually does conform to the those limitations. It's based on the art style of Zelda: Link's Awakening, and does so quite accurately.

https://www.yachtclubgames.com/games/mina-the-hollower

Check out La Mulana.. the original version of the game conforms to the limitations of the MSX, but remakes do not. There’s plenty of room to do things either way!

A post from the author about the remade art: https://la-mulana.com/en/blog/graphic_full_remake.html

Compared to the art from the screenshots on Wikipedia: https://en.m.wikipedia.org/wiki/La-Mulana

It's been a while since I played Shovel Knight, but I don't remember it having any of the issues OP talks about.

It doesn't. I was using it as an example of it being done right, without actually following the limitations of the NES. But you can see from the article linked by one of the other replies the dev team put in a lot of effort to make it as close to authentic as possible.

Some people on twitter take offense when opinions such as parent's are said, but I believe he has a point. I'm talking specifically about the amount of colors and also the use of tiles instead of a discrete art.

There's something to limited color space that those people do not seem to understand, be it the ones saying such critique, or the ones getting mad at it. We see color quantization in any realistic painting after the renaissance. Limiting the color space actually makes the pixel art look more realistic, because then every shade or shadow fits the overall drawings. Once you go Stardew Valley, sure it's pixel art, but just like a Picasso is great, it's not a Caravaggio, it's not "realistic" when it comes to how lighting reflects off surfaces.

Then there's the use of tiles/repeating background parts or having a full canvas where every pixel is unique. Although it's nice to look at, there's just too much information for the brain to process. That kind of art is nice, but in a game it's distracting. I personally call that kind of art pixel paintings and separate it from classic pixel art with tiles and limited colors.

It might be all just rose tinted glasses of nostalgia, but I firmly believe there's some science to what I just described. Look at any Caravaggio painting but especially portraits to see how limited the color space really is, how sometimes he uses shades of a color to give the impression of a very distant (color-space-wise) second color. It's really about that.

The techniques he mentioned don't serve the higher principle.

Adding lights from a lighting engine over the top of sprites with baked shading, might make a pretty image but it is not pushing pixel art forwards. Scaling and rotating can produce poor quality sprites.

P.s. Ashford is the best.

Who’s Ashford?

Reference to the username "Beltalowda", a character in "The Expanse" book and TV series.

The article explicitly says it’s okay to disagree. Agreement or disagreement on art style isn’t really the point. If you see pixel art differently and can decide for yourself which effects you want to use then you’ve learned something.

I'd agree with most of those, but I'll disagree on dynamic lighting. It's quite possible to do that tastefully without sacrificing the integrity of the underlying pixels.

'Enter the Gungeon' is one example of that. The lighting adds atmosphere, doesn't harm the pixel art, and it's not distractingly over-the-top.

I share your preferences, but it's a rock and a hard place. Performing any of the tasks you listed by hand is extremely labour-intensive. Doing without those features is a harsh creative limitation - in my experience, the result isn't "this game feels retro", but instead "this game feels oddly flat, repetitive and static", which is much less forgivable.

I've worked on a game which aimed for authentically retro pixel art, but in hindsight I think it was a silly misallocation of resources. There's a reason it's so uncommon nowadays. If I were to try again, I'd at least include high-resolution 2D transforms in the engine, and possibly dynamic lighting too.

I briefly explored the possibility of developing a style-preserving realtime rotation algorithm for sprites, but it's a hard problem.

how exactly is it a hard problem? You don’t have to rotate the sprite by sining and cosining pixels by hand, you can just render to the same resolution as your sprites and it’ll look fine.

The problem is that most indie games render at 2x or 3x or more natively.

Nearest-neighbour, low-resolution rotation produces unpleasant results when the sprite contains fine details with a thickness of one or two pixels, e.g. outlines: https://imgur.com/a/UiAZ49z

Artistic preferences are subjective, but I expect most players would find that rotated sprite unappealing. This is especially true when the rotation is animated - the aliasing causes a distracting, staticky, random-noise effect which gives the impression that the sprite's fine details are chaotically changing. It's almost the aesthetic opposite of what most pixel artists are aiming for.

> Nearest-neighbour, low-resolution rotation produces unpleasant results…

That’s the reason why some games use versions of the rotated sprites that have been tweaked by hand. See also tools like RotSprite (http://info.sonicretro.org/RotSprite).

Back in the day I found Privateer's in-game rotations jarring and hideous. Modern games and remasters should at least use higher resolution frame buffers, even if they downscale back to OG--ideally using high color and alpha channels. And I think higher resolution rendering is fine too.

I think the points you mention are easily noticed by people who lived in that era as anachronisms. At least that's true for me. And yet, Minecraft does all of those things and more, and I liked its style. I think it really depends on how well it's done.

A lot of these are stylistic choices (or could be at least) rather than mistakes.

And / or saving time and money because the artists need to draw less pixels by hand.

These are artistic choices, not proof of bad art. Take a look at „Hell is other Demons“ eg - it breaks a few of those rules and does a phenomenal job at pixel art.

Scaling and rotating sprites definitely used to be overused but I don't think they're that bad considering they were featured in many classic consoles (GBA, DS, Sega Saturn, PS1 etc.) and too many arcade boards to count

I dislike lighting though (unless it's implemented tastefully) and I think normal maps look absolutely disgusting in any situation.

E: Also, overuse of shaders is discouraged. Especially non-pixel effects like blurring.

Where do you rate the latest Square Enix art style as shown in Octopath Traveler? I think ut uses quite a few of these and it looks great to me at least.

I like the version in step 1 the most. The contrast is a great improvement, then the 3D effect made it kinda weird and the restyling completely ruined the cuteness and simplicity of the characters.

The tutorial might be better called “pixel art for animation” or “pixel art for games.” There’s a practicality to the restyling: it vastly improves the ability of the character’s parts to be animated, without things looking strange. (E.g. without the thin little arms on the human suddenly being thicker when taken away from the body.)

You might call the initial work “impressionist” — it has proportions that might be emotionally evocative, but that impression only works in that static framing, and can’t really be pulled out into a coherent aesthetic model. (I.e. you can’t just take the scene, mentally rotate it about the Z axis 30 degrees, and know what it should look like.)

I like the second version. The final version looks like some kind of monkey/Sun-Wukong.

The final one somehow looks lower resolution, more crude, but also has a style that’s a lot more reminiscent of older low pixel count games.

The final version reminds me of something that would have looked great on Gameboy Advance!

He says specifically that the final one is his own style and it might not appeal to some readers as much as the second one.

Completely replacing the character design is still an odd odd choice for an example about improving pixel art, even if the author acknowledges that that is what was done.

I've always fancied japanese style pixel art. I still remember playing megaman x and it hasn't aged a bit. Or even simpler ones like super mario world or the last few pixel based pokemon games.

I remember looking for tutorials for this style, but ended up copying sprites and trying to understand why they such and such decisions. Interestingly enough, I find it harder to recreate pokemon style sprites because they're so abstract and yet a single pixel can make or break it. I know this is a bit off topic, but would love to know if there are any resources for this.

Not trying to be a contrarian but I honestly like the first image best. I like the "pillow shading". It's bright and fun.

Before: mouse looks like a mouse; boy looks like a boy

After: mouse looks like a dog; boy looks like a monkey

Not sure if it still counts as pixel art, but I've always preferred Maplestory's art style [0] over the art used by rougelikes like Dead Cells [1].

[0] https://youtu.be/k2rf45EXWTc?t=26

[1] https://youtu.be/pU6GHVvHCRk

I don't think MS has pixel art. Chibis with a relatively low res sprites indicative of the era (Released 2003-2007).

I do like the style though, and if I made a sidescroller, that's one of the art styles I'd like to have.

Of course this is entirely subjective, but do you think you prefer it because Maplestory’s art is better, or because you like the game so much due to playing it during a formative time in your life (ex. high school)? Perhaps it even helped define your aesthetic sense in the first place.

Yeah, sinking thousands of hours into that game has probably brainwashed me in one way or another.

I'd like to say the art is less noisy than the more common low-rez styles (narrower color palettes, less shading, easier to separate the background from the platforms / play area). But looking at screenshots now, I can't say it looks good. But it's charming and unique enough that I'd pick it over most other styles if I was making a game.

For comparison...

- Maplestory - https://mmos.com/wp-content/gallery/maplestory-3/MapleStory-...

- Dead Cells - https://www.mobygames.com/images/shots/l/916116-dead-cells-w...

- Hades - https://media.npr.org/assets/img/2020/11/13/hades_09-dec-201...

- Stardew Valley - https://gamefaqs.gamespot.com/a/screen/full/4/9/9/556499.jpg

- Mother 3 - https://lparchive.org/Mother-3/Update%2023/10-7.png

For me, Hades is the clear aesthetic winner among those.

Nice simple tutorial!

But I think the definition of pixel art is too constrained, e.g. there are great pixel art styles with a larger palette and thin limbs.

My favorite pixel art style is Superbrothers’, which flies entirely in the face of this advice and embraces the limitations of pixelation by simplifying forms.

That to me, is more artistic because instead of making a statement yourself through careful colorization, depth representation, and characterization as this article does, the Superbrothers’ art style relied on your mind making interpretations based on what wasn’t there.

Each step made it worse. By the end it was a monstrosity.

This is of course subjective, but I think the intermediate step with flat shading is the one I like the most. The initial naive shading looks pretty bad to me, while the final redesign is way too complex.

I don't know if I would agree that the final scene is more readable - especially the treasure chest. I can't deny it looks much nicer though! I spent a lot of time tweaking the sprites in my game for readability. I touch on it here [1] but maybe I should do a full tutorial with intermediate steps.

https://smoldungeon.com/design

Step 3: Draw the rest of the owl

Inspiration:

https://reddit.com/r/pixelart

Also for examples of varying quality:

https://everyonedraw.com

Love before, don't like after.

I actually prefer the first one

Whoa, wtf happened at the end?

I liked the before better. The latter looks over saturated in my opinion.

This was not improvement

Kind of a "draw the rest of the fucking owl" step there at the end.

and to think I almost made this comment if I hadn’t continued scrolling!

Also the form of the sprites changed significantly, it was a massive shift in artistic personality and aesthetic direction that the tutorial just called it “not using straight lines”. I think they could have made their point while not swapping in a different set of tastes entirely.

Absolutely. Came here to say exactly the same thing. The first couple of steps were clear and informative. The last step was almost a joke.

I suspect he ran into the infamous '90%' problem: he did the first two and the final end-stage and wrote it down nicely, which took 90% of the time & energy he had, then looked at the difference between the last two and realized that it'd need another like 5 images+explanations and that would take the next 90% of the time... which wasn't going to happen, so he posted it as-is FWIW.

Exactly my thought!

"part of what I enjoy about art is admiring craftsmanship - the skill and knowledge of the artist at work."

I'm a devrel person my art is writing tutorials and guides. And this one is a very naive approach at it.

Reply on news.ycombinator.com