Modern Pixel Art Games

Pixel art has always been a trend with indie developers because it’s easy to learn, doesn’t require a lot of cpu or gpu power, and can look great.

I wanted to bring up a question that I’ve been thinking about for a while. A lot of newer, more modern indie pixel art games feel very fluid, almost as things move at a float pixel rate instead of a 1x1 pixel.

Anyone who has tried to make this type of game has run into “why does my camera jitter” or “why does every look like it’s stuttering when moving on screen”. Do developers draw their pixel art at, say 640x360 and then scale everything up to 4-8x in game? Or are we missing a trick somewhere? Is it a bad idea to do something like that?

I’m currently trying it with varying degrees of success. Things like tilemaps, unfortunately can’t be scaled, so they need to be brought in at 4x increasing memory. However it’s still heaps less than it would be if it were a high-res game.

So my question is, how do games like hyper light drifter or titan souls look like pixel art but REACT like high Rez?

Any takers? I'm starting to second guess my approach and I don't want to develop too far before I realize what I'm doing is a mistake :)

There's a setting called pixel rounding. You can guess what it does.

You don't have to use it.

Then again there's no reason the camera should be stuck to rounded xy's.

You might want to check out various ways to manipulate the scrollx, and scrolly properties.

You will absolutely want to turn off rendering interpolation. That will ensure upscaling looks good when upscaled to larger dimensions.

No need to upscale your source art. That is a very bad idea.

What you're looking for is "Fullscreen Quality" in the project properties, with "Pixel Rounding" off.

Setting Fulscreen Quality to high will upscale your pixel art as usual, but everything will move, scale, rotate, etc. on "sub-pixels" giving a much smoother overall appearance. The amount of "sub-pixels" will depend on how much you scale up the window.

That's the simple explanation, at least.

It has a few drawbacks and will annoy pixel purists but most players these days would prefer the smoothness.

You would need to be a bit more specific, but keep in mind there's little gotchas when moving in pixel space, just as there is drawing in it. Like rotations, odd diagonals, overlapping textures etc.

You would need to be a bit more specific, but keep in mind there's little gotchas when moving in pixel space, just as there is drawing in it. Like rotations, odd diagonals, overlapping textures etc.

Right, I know not to rotate and do things like that.

Basically the main thing I'm struggling with is coding the camera:

SET CAMERA POSITION TO:

lerp(camerax, playerx, dt)
lerp(camaeray, playery, dt)

Im not real clear on what you mean by squished. Moving a camera is either smooth, or jittery.

You have most of the basic formula there, but the dt is a bit concerning.

lerp(scrollx,target.x,speed*dt)

lerp(scrolly,target.y,speed*dt)

Where speed is in pixels per second.

Now if you don't like the easing, you might try one of the other expressions like cosp(), but keep in mind you would have to change the speed.

Im not real clear on what you mean by squished. Moving a camera is either smooth, or jittery.

You have most of the basic formula there, but the dt is a bit concerning.

lerp(scrollx,target.x,speed*dt)

lerp(scrolly,target.y,speed*dt)

Where speed is in pixels per second.

Now if you don't like the easing, you might try one of the other expressions like cosp(), but keep in mind you would have to change the speed.

Honestly the more I research it, I believe it's due to the fact that I'm using Letterbox Scale instead of Letterbox Scale Integer. The problems go away, I just have to figure out a way to deal with the black bars which I'm not sure is possible in C3.

What is concerning to you about dt? I think it's necessary depending on the framerate of the game to include it.

Interesting about cosp(); I didn't know that was a thing. I'll try it out, thanks!

I fully understand your issue because I went through all what you went through above.

I just gave up on crisp but filtered pixel art.

I think you may be on to something with the integer letterbox scale, to try to get rid of the black bars, try changing canvas size on runtime each time you change the fullscreen mode.

Rory - thats the problem. Everyone has tried to solve it, but no one has a solution. The most obvious one would be to use scale outer and then adjust the UI and other things as necessary, but I'm not sure how viable that is because I don't think it does an integer scale (and you could technically make the window super wide to see the entire layout).

I just opened Dead Cells to see how the game looked. I noticed something interesting; the game itself is a stylized pixel game. But there are some high-res art pieces in there as well, which makes me think they're somehow scaling the game to a large resolution. And also the camera movement is as smooth as butter. No jerkiness, no distorted pixels.

I'm at a loss!

Perhaps they are using a 3d engine, so the sprites are polygons with a texture.

This may not be the best workaround, but you can try using billinear filtering and then applying about a 20% sharpen on the pixel art layers or the entire game.

Dead Cells is 3d with literally pixel shaders.

You don't have to use fullscreen you know.