Modern Pixel Art Games

From the Asset Store
Easily generate many levels from a set of pre-built scenes (Construct 3 template)
  • 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.

  • 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.

    newt - I know what pixel rounding does. And I know I don't have to use it. However, if you turn it off, you get awkward squished pixels as the camera moves (unless you're full screen at the correct aspect ratio, in which case you just get screen tearing).

    Tokinsom - I was just thinking lerping the camera would be smoother if the resolution was higher but still with pixel rounding on. Like I said, it's just an experiment at the moment. With all of the indie pixel art games that look and feel gorgeous out there, I'm wondering if this is only possible with a native engine instead of HTML5?

    I currently have high full screen quality; its not that quality I'm worried about. It's basically what you're saying about trying to avoid seeing "sub pixels". Is that what other companies do and I'm just not noticing the pixel distortion?

  • 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)
    

    This is my usual go to for camera movement (with more advanced alterations here or there), but the pixels constantly get squished and go back to full size unless pixel rounding is on. If it IS on, then the camera stutters as it moves (because it's only moving in integers). Obviously I can just do set position playerx and y, but it's not as nice as moving the camera towards the player, and especially things like "dash" mechanics get tricky if the camera is stuck up your behind that closely.

  • 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!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Perhaps they are using a 3d engine, so the sprites are polygons with a texture.

  • mOOnpunk - Either that, or they somehow have more control over the resolution/scaling settings.

    Part of the problem is that I absolutely LOVE construct's workflow, but I'm so afraid to release a game with it and see people complaining about the things I can't change (which has already happened twice).

  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)