0

I'm relatively new to swift programming. I have made an app where I didn't use SpriteKit and I would size most views by scaling down the images to a multiple of the screens width and height. Not sure if this is the best tactic, but it worked and I was able to build an app that looked good on all devices.

With spritekit and the scene.sks files, I don't have the option of auto-layouts to size my sprites like I did before. There isn't a lot of content about universal apps online, so I'm struggling to find a solution.

My question is how do I go about sizing objects and making sure my scenes look the same across different devices?

If you have a good example that could explain this that would be very helpful. Thank you!

Discoveringmypath
  • 1,049
  • 9
  • 23
  • In general, you provide 1x,2x and 3x assets. You should concentrate on a specific problem, eg. I am using this image, and scene has that scale mode and on these devices it looks different... Otherwise, you can search about Ray Wenderlich tutorial called "Making Universal App". But even that tutorial is not a solution in every case and this really depends from game to game. – Whirlwind Mar 22 '17 at 08:01
  • Thanks for the tip. I have seen that tutorial, but skipped it because it was posted in 2013. Maybe there is still some good things I can pick up out of it. – Discoveringmypath Mar 22 '17 at 11:31

1 Answers1

2

What we usually do in SpriteKt is to give the SKScene a fixed size and let SpriteKit do the scaling for you on different devices.

So basically we have 2 ways to do it correctly

1) Set scene size to iPad (e.g 1024x768 -landscape, 768x1024 - portrait). This was the default setting in Xcode 7.

You than usually just have/show some extra background at the top/bottom (landscape) or left/right (portrait) on iPads which gets cropped on iPhones.

Examples of games that show more on iPads / crop on iPhones:

Altos Adventure, Leos Fortune, Limbo, The Line Zen, Modern Combat 5.

2) Apple changed the default scene size in xCode 8 to iPhone 6/7 (750*1334-Portait, 1337*750-Landscape). This setting will crop your game on iPads.

Examples of games that show less on iPads:

Lumino City, Robot Unicorn Attack

Choosing between those 2 options is up to you and depends what game you are making. I usually prefer to use option 1 and show more background on iPads.

Regardless of scene size scale mode is usually best left at the default setting of .aspectFill.

You would use the Universal asset slot and/or device specific images. This way you will have a consistent experience on all devices

Spritekit scale full game to iPad

How to make SKScene have fixed width?

Hope this helps

Community
  • 1
  • 1
crashoverride777
  • 10,581
  • 2
  • 32
  • 56
  • With the iPad Pro having a bigger screen size, should I set the size of the scene to: 1024 x 1366 or 1366 x 1024? Otherwise the scene would scale up on that device right? – Discoveringmypath Mar 22 '17 at 11:29
  • I set it to 1024*768 (landscape) or 768*1024 (portrait). But you could also set it to iPad pro resolution if you want. SpriteKit will use the scaling mode (.aspectFill) to fit each device. As long as you add all the correct images (1x, 2x, 3x) you will be fine. – crashoverride777 Mar 22 '17 at 11:31
  • The best way is to create a new Game template and play around with the scene size and the images. – crashoverride777 Mar 22 '17 at 11:38
  • Okay, so the scaling up wont be an issue as far as placement goes. – Discoveringmypath Mar 22 '17 at 12:42
  • 1
    Nope, it will look perfect on all iPhones. It will also look perfect in iPads apart from the fact that the iPad has a different Aspect ratio. Thats why depending if you choose option 1 or 2 it will either show more or crop a bit on iPads. You just have to keep that in mind when you design your game. Why not create a sample game template. Use option 1 and add a full screen image that fits the iPad scene perfectly. Than run on iPhone and see how much gets cropped. Than try option 2 and add a background image that fits the whole iPhone screen perfect. Than run on iPad and see what gets cropped. – crashoverride777 Mar 22 '17 at 12:48
  • This way you get a feel for what option is best for your game and what gets cropped. – crashoverride777 Mar 22 '17 at 12:48
  • I'm wondering if I'm understanding this wrong, I'm curious about the aspect ratio of 1024 * 768, it is 3:4, ipad ratio. With .aspectfill on a iphone device that has 9:16, won't it cut off the top and bottom a little bit? Would .aspectfit be better, then it wouldn't cut off any of the scene, I would just have extra space on the sides. Or I can set the scene to 9:16 ratio and have extra space on top and bottom for ipad? – Discoveringmypath Mar 22 '17 at 12:49
  • I'll have to test later. but yes I plan to do this. I appreciate the help so far. I have another quick question. Does the scaling also scale the actual textures or images I use? for example ipad is a 2x device and iphone 7 is a 2x device, but the iphone is a lot smaller. I want to be sure that it will scale down the image on its own – Discoveringmypath Mar 22 '17 at 12:52
  • 1
    I always use .aspectFill. Yes you are right that if you use option 1 than it will crop a bit at the top and bottom on iPhone (landscape). I prefer to say that it will show more on iPads, but its the same idea. That area that gets cropped on iPhone is stuff you only see on iPads, which is usually some more sky and ground. If you use option 2 it will crop on iPads. – crashoverride777 Mar 22 '17 at 12:54
  • You usually just need the 3 images in the universal asset catalogue (1x, 2x, 3x) for a iPhone/iPad app. SpriteKit will do the rest for you. – crashoverride777 Mar 22 '17 at 12:55
  • Like I said its best to test both options in a new template with a full screen background image that is the exact size of the scene. – crashoverride777 Mar 22 '17 at 12:56
  • Thanks for the tips, I will test later today. You definitely answered my question and I definitely have a better understanding now. Marked as correct. – Discoveringmypath Mar 22 '17 at 12:57
  • Yeah testing is always the best option to get a better understanding. You want to make sure your structure is correct before you get too far into development. Make that basic game template with both options. Create 1 character with your 3 images in the universal asset catalogue (e.g 100x100, 200x200, 300x300). Than Create 1 full screen background image that has a distinct texture, one for iPad resolution (option 1) and 1 for iPhone (option 2) resolution. Than test both options in the simulator on each device using the correct background image. – crashoverride777 Mar 22 '17 at 13:04
  • Regardless of option it will always look the same on each iPhone or iPad model, so you dont have to worry about that. You just have to take the difference into account between iPhone and iPad. Thanks for marking. Happy coding. – crashoverride777 Mar 22 '17 at 13:06
  • My pleasure. Happy coding – crashoverride777 Mar 22 '17 at 13:50
  • @crashoverride777 When I set my scene to 1337*750, everything fits nicely on iPhone but on iPad everything is blown up and nodes are off the screen. How do I position the nodes to fit in the iPad screen? – Brejuro Jun 24 '17 at 15:47
  • Using this setting you will crop on iPads. You will have to take this into consideration when designing your game. – crashoverride777 Jun 24 '17 at 16:33