0
\$\begingroup\$

I'm working on an iOS SpriteKit game and I'm currently designing some images to be used as character animations in Photoshop. There are many different iPhones with various screen sizes and resolutions, because of this designers generally have to create assets in 1,2,3x multiples.

I've read a few design articles that suggest to use design your assets/images at 1x points with a small resolution like 72 and then scale it up by a multiple like 2x or 3x for higher resolution devices (like those with a Retina display).

Why would this be the suggested route, won't this cause blurring every time we scale up? Would it not instead make sense to work with a very high resolution PPI? Or maybe even use something like vector graphics - although I don't see options for Vector graphics in Photoshop, not sure if this is properly supported?

Thanks for any help in clearing up my confusion.

\$\endgroup\$
5
  • 2
    \$\begingroup\$ What kind of look are you trying to achieve? Is it pixelart and you need them to be always crisp/ pixel perfect? You can't create vector files with Photoshop. You can only create raster files with some embedded vector data. \$\endgroup\$
    – Zibelas
    Jan 6, 2022 at 20:50
  • 1
    \$\begingroup\$ Scaling up does not necessarily means blurry. It depends on the algorithm used for scaling up. Working from the small scale makes sure that all the detail is visible on the small resolution. You can also tweak the scaled up versions if needed. However, at the end it depends on the style you want to get. As per vector graphics… On runtime, I think, you would need some library to convert them, which would not be yield the best performance. But you could make vector graphics - not in Photoshop, but other tools - and export them at the desired resolutions, if that works for the style you want. \$\endgroup\$
    – Theraot
    Jan 6, 2022 at 21:37
  • 1
    \$\begingroup\$ We get questions like this every so often, usually hoping that there's some universal best practice that works optimally for every game. The reason you haven't found one that satisfies you yet in your research is a good sign that there probably isn't one. Each game needs to make different trade-offs depending on their needs. I have some past answers explaining some of the considerations, which may be a helpful primer. \$\endgroup\$
    – DMGregory
    Jan 7, 2022 at 1:36
  • \$\begingroup\$ @zibelas they're closer to cartoon animations than pixel art, I wasn't suggesting that I needed to use vectors but figured that would future-proof the resolutions \$\endgroup\$
    – muZero
    Jan 7, 2022 at 18:28
  • \$\begingroup\$ @Theraot that's interesting to hear - so you'd suggest starting small and 2x 3x multiplying the image dimensions instead of starting large and scaling down? \$\endgroup\$
    – muZero
    Jan 7, 2022 at 18:29

1 Answer 1

1
\$\begingroup\$

There is no way I will cover every possible style out there.

I will mention pixel art, because it is probably the one that requires more care, but I'm not going into much detail here. DMGregory has done a better job than I could over other answers already linked in comments: here, here, and here.

I will suggest a general style independence approach. And then I will talk about cartoon styles. With the caveat that I'm looking at this from the perspective of a developer who may sometimes draw.

But, before any of that…


Future proof for what?

You might want one of these, I'm not entirely sure which:

  • An application that will continue to look good on larger resolutions, without any updates.
  • A no effort solution to support new resolutions.
  • A guaranteed that your images are usable for a team that wants to make a high resolution remake of your game.

These aren't the same thing. Keep that in mind.

And you may also future proof in the sense of using an artistic style that will not look dated. Or that is designed to look dated? Like Pixel Art? "Everything that was ever popular is still fun for some people, it's just not fashionable anymore" -- Matthew Colville. In my opinion cartoon styles age better.


Pixel Art

For pixel art, I would suggest working from the small resolution - where every pixel matters - to make sure all the detail is visible. And then scale it up with your graphics software (avoiding any algorithms would make the image blurry, and sticking to integer factors), tweak and iterate. You would be providing custom images for different resolutions. This yields the BEST results, but it is not future proof in the sense that supporting more resolution might mean scaling and tweaking again.

For future proof, you could also have logic to pick at runtime an integer factor of the image scales available, and use that one up scaled. To make sure the pixel art looks OK. Perhaps introducing borders if sensible, or let it reveal more of scenario (if that does not introduce a form of cheating or unfair advantage, as would be the case in a multiplayer game). Example by Kenney.

You may also be interested in Pixel-art scaling algorithms. You could implement some via shaders. For what I read, SpriteKit supports this: Understanding Shaders in SpriteKit.


General approach

For other - not pixel art - styles that do not suffer so much from runtime scaling. I would suggest to work at a scale you are confortable at, on a tool you are confortable with. Test scaling up and down with your graphics software from there, tweak and iterate. This would allow you to make future proof graphics in the sense that they look OK under scaling.

Starting from a large image size and scaling down might make some sense. And for that hypothetical team that will make the remake decades for now, it would be fantastic. Ideally you would want to choose a scale that is an integer factor of the ones you want to support, that would allow you to have grid lines that matches the pixels for smaller resolutions. [Insert meme about days without using least common mumtiple]. So, you want to support 3X and 2X scaling? Work at 6X scaling. Future proof for 4X scaling? Work at 12X scaling. Future proof for 5X scaling? Work at 20X scaling. Future proof for 6X... Still 60X scaling. Future proof for 7X... Work at 420X scaling, ha! You still need to test, tweak and iterate. And make sure no important detail is lost at the smaller resolutions. This is not a get away without iterating free card.


Cartoon styles

If you have a cartoon - not pixel art - style, then vector graphics are probably a good fit. You can use a software with vector graphics support, and - if sensible for your style - configure it to keep a constant pixel thickness for the lines. And, of course, make sure to test on the smaller resolutions, tweak and iterate.

For what I read SpriteKit will allow you to import vector graphics and will handle exporting them to PNGs for you. See SpriteKit Vector graphics performance. This is future proof in the sense that it would require no additional effort to support more resolutions in an update.

Since you are suing SpriteKit, the decision I mention in the next paragraph might have already been taken for you.

You - and your team - have to decide between having vector graphics rendered at runtime (getting better results at the cost of performance), or exporting at different resolution. If there is a developer that will handle this for you in your team, give them a vector graphic file in some format they can work with (if in doubt, SVG※). There is - of course - the option of using exported images for small resolutions and using runtime vector graphics for the larger ones, which would cover any future ones.

※: I will advocate SVG because being an open standard it is likely to stick around long term and have wide software support, including free tools: inkscape - We don't want another Macromedia/Adobe Flash situation, do we? That hypothetical future team will have a hard time getting a legal copy of that one privative software that supports the other format you are using.


Beyond that, using shaders opens a lot of possibilities.

Aside from doing custom up scaling as I mentioned about pixel art… You can use signed distance fields (implement their rendering with shaders). They give you very efficient, resolution independent, not blurry, 2D monochrome images. See Improved Alpha-Tested Magnification for Vector Textures and Special Effects. That could be your solution for outlines in a cartoon style. And you can let the coloring be blurry, which is OK if your style uses gradients or flat colors… Such as a cartoon style.

I will also mention that some styles will tile textures instead of scaling them. Have you seen Chowder? Something like that.


AI?

I want to close mentioning that neural networks trained for up scaling images are a thing. [Insert enhance meme]. And while that might or might not match human authored quality, and while it won't work or perform well on every device, that might be the future option. And there is nothing special you need to do to today… Well, except keeping a copy of your assets at the highest resolution and on a standard format free from licensing issues. There will be new technology, and there is only so much future proofing you could do on that regard.

\$\endgroup\$

You must log in to answer this question.

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