I played Nuclear Throne yesterday a few hours and I noticed that the whole game looks pixellated. I like this effect and I'd like to know how to recreate it in my own games.
\$\begingroup\$
\$\endgroup\$
7
-
\$\begingroup\$ The sprites are likely just drawn that way originally. The lines (like the laser line) I'm not sure. But if you draw your sprites the pixelated way, then by the time you're done with those I'm sure you'll figure out the line part. \$\endgroup\$– jeffluntNov 30, 2016 at 2:46
-
\$\begingroup\$ I never used libgdx. But the usual approach I would take in this case is to draw the whole scene in a low resolution to a hidden surface and then upscale it without interpolation when drawing it to the screen. \$\endgroup\$– PhilippNov 30, 2016 at 9:22
-
\$\begingroup\$ But what if i have a non pixelated sprite and wanna make it look like in the game using shaders/filters ? :) So how do i make a smooth picture pixelated ? \$\endgroup\$– genarayNov 30, 2016 at 12:06
-
\$\begingroup\$ Maybe you could draw in a low resolution frame buffer and then render the frame buffer on the screen. \$\endgroup\$– vdlmrcNov 30, 2016 at 13:30
-
1\$\begingroup\$ @genaray Recreate the sprite from scratch in a lower resolution. Automatic downsampling of pixel art rarely gives satisfying results. Less pixels means less space for details which means artists need to make better use of the pixels they have. This requires human judgment. You can't automatize that. \$\endgroup\$– PhilippNov 30, 2016 at 14:15
|
Show 2 more comments
2 Answers
\$\begingroup\$
\$\endgroup\$
There are several possible ways to accomplish this. Two of the most straightforward are:
Author your art assets in that style directly.
Scale your art assets up an runtime by rendering to a half-size render target at native pixel resolution of your art, and then using that render target as a texture for a full-screen quad at full size (thus pixel-doubling everything), using a point-sampling filtering mode.
Neither of these approaches require specialized shaders. The first option, simply creating the art that way, is the simplest from a programming perspective, but it is less flexible. Certain kinds of art (for example the tracking laser from that video) that is dynamically generated at runtime might be harder to generate directly in this style, although for specific cases you can certain find specific solution. For example, the classic Bresenham's line algorithm could be employed to generate runtime lines of any particular pixelation level.
Scaling the art up at runtime is somewhat more involved but does not require you to author the art pre-pixel-doubled. This can give you some flexibility to adjust your desired scale factor without redoing lots of art, and can naturally handle some of the kinds of dynamically-generated art you might run into. It also affords you the option to use more complicated scaling filters than just pixel-doubling, if that's what your into. There's a whole host of pixel art scaling processes you can apply, many of these are popular among emulator developers for improving the fidelity of older games' art on modern, large high-resolution displays.
Note that while the most basic point-filter upscaling will not require you to use shaders, some of the more involved scaling algorithms might, or at the very least might benefit in performance from doing so.
Note also that the upscaling doesn't need to be applied to the whole scene; if you only want to pixel-double a handful of sprites you can do that as well, simply by doubling the dimensions of their quads and ensuring you use a point-sample filter.
I think upscaling gives you the most flexibility for the amount of effort it requires, and that's the route I recommend you go.
\$\begingroup\$
\$\endgroup\$
2
The reason why the whole game looks pixellated is because all the art assets are pixel art.
Pixel art is a very common style for indie games, as it requires a lot less time invested to create quality assets, and thus will probably be a good idea for your game, unless you are a very good artist.
Thus, what you are looking for are pixel art tutorials.
The most basic kinds tell you to do four things- find a graphics program specifically for pixel art, look at other's sprites/drawings, try to draw some sprites, keep drawing sprites over and over while experimenting.
This is what I do, as I only use pixel art in my games- look at an image, and draw it out of pixels with very few details and a few very obvious characteristics. Seldom have I ever drawn a sprite without a reference image.
-
\$\begingroup\$ I'm a pixel artist myself, and that's how I always thought about it. However, I'd agree that what I'm trying to say is that you don't have to invest as much time in it as other styles of graphics and art. I'll edit the post. \$\endgroup\$– user112281Feb 8, 2018 at 1:13
-
\$\begingroup\$ I've done attempts to make an sprite artstyle without pixel art. But sometimes I'm thinking that it would have been faster if I've done it with pixel art. Since it's much easier to mass-edit, resize and animate them. It's a fun thing to do experiments with. But I certainely recommend pixel art for beginner developers. \$\endgroup\$– StevenFeb 8, 2018 at 13:00