6
\$\begingroup\$

I'm started with Unity development and my artist asked me what size she should make the sprites for the game.

They are all pixel art and she didn't know if she should make them on Photoshop on a small resolution, do them already on the iOS resolution 1920x1080 or even if she should use a vector program and then rasterize them.

How is this normally done?

\$\endgroup\$
5
  • 4
    \$\begingroup\$ just an fyi to explain my edits: in game development, a "designer" is different from an "artist" \$\endgroup\$
    – jhocking
    Commented Mar 17, 2015 at 20:55
  • \$\begingroup\$ no seriously don't edit it back, "designer" is a completely different role from "artist". One person could fill both roles on a tiny team, but this question is about the "artist" role, not the "designer" role. \$\endgroup\$
    – jhocking
    Commented Mar 18, 2015 at 21:37
  • \$\begingroup\$ You're probably thinking of "graphics designers", which usually get the "designer" shorthand. In game development, "designers" design gameplay among other things. See also: level designers. \$\endgroup\$ Commented Mar 18, 2015 at 22:41
  • \$\begingroup\$ Are you really talking about "pixel-art" or just bitmaps? You shouldn't do pixel-art in a vector-program and rasterize it. \$\endgroup\$
    – bummzack
    Commented Mar 19, 2015 at 10:18
  • \$\begingroup\$ I actually referred the OP to this stackexchange from graphic design. I am concerned about his repeated concept of 1920x1080 as a set resolution for sprites, and I warned about potential problems with non-power-of-2 textures (lack/limited support in opengl, disabled mipmapping etc). Perhaps these concepts might be touched on or answers linked to. \$\endgroup\$
    – Yorik
    Commented Mar 19, 2015 at 18:52

5 Answers 5

9
\$\begingroup\$

Pixel art generally responds extremely bad to any scaling. Just a small size adjustment will make pixel art appear either blurry or distorted, depending on what scaling algorithm your engine uses. For that reason it is important to make sure that the graphics are designed in exactly the resolution in which they appear in the finished game.

Here is a pixel-art sprite from one of my projects, interpolated with linear interpolation and nearest neighbor interpolation. As you can see only the original size looks well:

enter image description here

When stepless scalability of graphics is important for your game concept, you should consider to use vector-based graphics instead of pixel-art. Just keep in mind that the hardware requirements can become a lot higher when the vector graphics are not specifically designed to be fast to render. When your artist comes from a general visual design background with not much game development experience they might not know what they need to do and avoid to ensure this (it also depends on the platform and technology you use. Different vector graphic rasterizers have different strengths and weaknesses).

Another option when you want scaling is to go for a retro-look, design very low resolution sprites and upscale them with nearest neighbor. Nearest neighbor preserves the "blockyness" which is usually undesirable, but preserves the aesthetics of 90s style pixel art on high-DPI screens. This usually only works when you upscale by a large amount. When you downscale, most other algorithms are preferable to nearest neighbor, even on pixel art. Here is a very small sprite from the first Final Fantasy game upscaled a lot with nearest neighbor interpolation:

Zoomed sprite from FF1

As you can see the retro aesthetics are preserved, and the image quality doesn't suffer even with a very uneven zoom factor. But this only works because the original sprite is so tiny and the zoom level is so high. Also, this look is not appropriate for every game.

\$\endgroup\$
4
  • \$\begingroup\$ hi @Philipp, I'd told the designer to do them on very low resolution and upscale them with nearest neighbour as you mention on your last paragraph. But everything else you said before says the opposite! I tested scaling by a factor of 5 or 10 and I didn't see any loss of quality. So I recommended her to use a resolution that was divisor of 1920x1080 (as we are targeting the iPhone6). Will we be losing quality? I imagine in your example the problem is that the scale is to 1.5 instead of an integer. \$\endgroup\$ Commented Mar 19, 2015 at 13:26
  • \$\begingroup\$ also we would never shrink them since she would work on the smallest resolution possible. 1 "simulated" pixel will be a 1 pixel in photoshop \$\endgroup\$ Commented Mar 19, 2015 at 13:28
  • \$\begingroup\$ @LisandroVaccaro Upscaling of pixel art only looks good when you do it by even integers or very large numbers. My example shows how scaling behaves in the area near the original size. \$\endgroup\$
    – Philipp
    Commented Mar 19, 2015 at 13:29
  • \$\begingroup\$ @LisandroVaccaro I added a second example which should illustrate better in which case nearest-neighbor can work. \$\endgroup\$
    – Philipp
    Commented Mar 19, 2015 at 18:34
2
\$\begingroup\$

Make them the size they would normally be. Don't try to make them big and scale them down later. That way there will be less time loading the images (Not that it's all that long.) Less data stored as well. Make sure that when you are scaling them up to draw them to the screen, you don't use a any sort of filter. Anotherwords... Use no mipmapping. Ie point sampling. (It looks bad in 3d but not with 2d pixel art.) enter image description here

Graphics API's usually have a flag to set mipmapping. For Unity: http://answers.unity3d.com/questions/22491/how-do-i-turn-off-mip-mapping.html

\$\endgroup\$
1
\$\begingroup\$

Vector images are useful since they would work with any resolution, and you can even use them directly in the game, letting OpenGL/DirectX rasterize it only when they are rendered to the frame buffer.

But since you specifically mentioned pixel art it doesn't sound like you would get the right look with vector graphics, in that case you want to be careful about resizing them (as the other answers have mentioned).

In pixel art a lot of the style comes from each pixel having importance, so shrinking the image would rarely give good results. Increasing their size also has pitfalls, although there are some algorithms that have been made specifically for pixel art (they are often used with emulators of older systems).

If the art looks good as vector graphics then that is a good choice, specifically because it lets you postpone the decision about precise size of things until a later date, thus making it easy to resize things if you realize that a certain character should be taller or shorter. If not then your artist will have to make the sprites in the proper size to begin with for the best results.

\$\endgroup\$
1
\$\begingroup\$

If you can only afford to have one set of sprites drawn (i.e. your artist time/effort is limited) then get them to do the largest resolution. It's far easier to make hi-res sprites look okay when scaled down than it is to make low-res sprites look okay when scaling up.

Neither approach is better than having sets of sprites tailored for your target resolution, but that can be expensive to have developed. If you have a wide range of target resolutions you may still want to have two or more sets of sprites made up, so that if you do have to do scaling that you don't have to go too far. 50% is probably a reasonable limit, any more than that and they'll look very muddy once scaled. But if you have small and large versions then you can scale whichever one is nearest to the target resolution.

In all cases, do your scaling offline using the best filters you can, even if those filters are too expensive to do at runtime. Storage for your assets is generally cheap, and you don't want to be burning performance on scaling and filtering at runtime. You'd have to have a very, very large sprite-set to be worrying about the storage footprint of your app more than how it performs. You want to keep your sprite sets separate as well, so that you're only ever loading the data the game needs, not loading a larger version and scaling down, or loading multiple sets and then picking one of them.

\$\endgroup\$
0
\$\begingroup\$

Depends on what look you're going for. Usually you'd design for your target platform and then scale/rework art assets for secondary platforms. Make it look nice for the largest chunk of your players, essentially.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .