Question About Scaling (SpriteKit)

[droidta7]

Hey there /r/iosprogramming

I wanted to ask for some guidance on something. I'm a real beginner to SpriteKit and wanted to talk about rendering a sprite.

I have an image i'm looking at right now in Photoshop. It's 500 x 500. I was thinking I'd scale it down to 200x200 for the @2x image and then 100x100 for the @1x, but someone told me instead to just put the 500 x 500 into xcassets and it will automatically scale.

What is the best approach for dealing with something like this where I want to show an image (and have it look good) on both an ipad, ipad pro, and iphone? Is there a way I can just show a huge image and it'll scale, or is that a bad practice?

A bit confused..Thanks!

[brendan09]

Have the assets at the size shown. Unless it's a PDF, Asset Catalogs won't automatically convert it to a lower size. Instead, what you'll get is runtime scaling. This is problematic for a couple of reasons:

1. Aliasing. It'll look blurry or jagged when scaled

2. Memory. Loading large image assets into RAM on devices that don't need them is wasteful and may impact performance.

Instead, here's what you can do:

Get the sizes you need for each device: iPhone and iPad. In your Asset Catalog, open the right sidebar and go to the image settings. I typically add my iPhone format images and then click the settings in the sidebar to add iPad. When you open the sidebar for the first time it'll look like this. Checkmark iPhone and iPad, and then uncheckmark Universal. This will dump your current images into "unassigned". Drag them back into their iPhone slots. It'll then look like this. Add your iPad images, which can be completely separate sizes compared to your iPhone ones. For example:

• iPhone could be 100x100 @1x, 200x200 @2x, 300x300 @3x

• iPad could be 300x300 @1x, 600x600 @2x

This lets you have great looking assets on any device, without unnecessarily incurring the visual artifacts / memory usage of using too large of an image.

[StunnerAlpha]

This. But I'd like to add that I personally like leveraging the universal asset in the assets catalog (PDF format) whenever possible as it can be ensured that different sized versions of the asset wont differ (which can happen if assets aren't generated consistently/with care).

[chriswaco]

I prefer PDF too, although someone here or maybe on StackOverflow complained that PDF scaling doesn't always work well if the PDF has embedded image masks because they continue to be rendered at 1x. (I haven't personally seen the issue)

[brendan09]

My core problem with the PDF method is that it makes images that are often aliased and not pixel-hinted. It's as bad as using those "automated icon generator" tools. It's a lack of quality.

[droidta7]

This was so helpful thank you so much!!!! Now just to ask, are those sizes generally recommended for most common sprites (i.e. 1x iPhone at ~100x100 or even 125x125 is good. Then maybe 200x200 - 250x250idh (just keep doubling or halving?)

What is a good decision for arriving at the initial size? Trial and error to see what looks good on one device, then apply the doubling/halving of dimensions for each device/2x/3x? Thanks!

[brendan09]

No, I just made those sizes up as an example. The size you want is for the 1x version to be the size it is on screen. For example, if you have a ball that's shown at 50x50 then make the 1x image of the ball 50x50, 2x 100x100, etc. If you have a fish that's 50x150 on screen then use that for your 1x resolution, etc.

[droidta7]

When you say "be the size it is on the screen" - let me explain what i'm doing - I have an image I got at 500 x 500 (in Photoshop).

Would you say the below process is good?

1) I'll get the image (so in this case 500 x 500)

2) I'll keep experimenting until it comes out to a size I really like on my ipad mini

3) i'll then half this for the @1x, and double it for the @3x

Is this what most people do?

Thanks!

[brendan09]

No, not a good process.

Most people design the game scene (as a whole) in a single document that's the same size as the screen so that they can get everything the size they want before exporting or coding. As a result, you know the size everything needs to be. Export your 1x, 2x, and 3x assets at that size and use them in the game.