54

I'm playing around with SpriteKit in Xcode 6, iOS 8 beta 5. Everything is all laid out and working perfectly on the iPhone 4S simulator, however when switching to the 5S, the elements at the bottom of the screen are cut off.

It was to my understanding that the bottom left corner of the iPhone screen should be CGPoint(0, 0) but after checking the location by printing the coordinates to the console that the lowest point of the left corner I could click was around (5, 44). Is there something wrong in my scene setup thats causing this?

No changes have been made to the GameViewController file and even after I strip the GameScene file the problem persists.

Can anyone at least point me in the right direction with this?

Epic Byte
  • 33,840
  • 12
  • 45
  • 93
Sawyer05
  • 1,604
  • 2
  • 22
  • 37
  • Just in case, try doing CMD+1, worked for me. Some of the elements were cut off because they were simply not displayed in Simulator - I stress this, this is just a simulator feature (and a bug if you ask me, wasted hours of time to solve this). CMD+2, CMD+3 views can sometimes hide parts of the scene. – Vladimir Despotovic Oct 04 '16 at 00:21

3 Answers3

120

Adding the following code will fix your problem (code is in Swift):

scene.scaleMode = SKSceneScaleMode.ResizeFill

Now if you want to know why this fixes your problem, what your problem actually is, and how to handle multiple resolutions – I suggest you continue reading.

There are three things that can impact the position of nodes in your scene.

1) Anchor Point
Make sure your scene's anchor point is set to (0,0) bottom left. By default the scene's anchor point starts at (0,0) so i'm assuming that is not causing the issue.

2) Size
Check the size of your scene. I typically make my scene size match the size of the device (i.e. iPad, iPhone 4-inch, iPhone 3.5 inch), then I place another layer in the scene for storing my nodes. This makes me able to do a scrolling effect for devices with smaller resolutions, but it depends on your game of-course. My guess is that your scene size might be set to 320, 480 which could be causing the positioning problems on your iPhone 5s.

3) Scale Mode
The scale mode has a huge effect on the positioning of nodes in your scene. Make sure you set the scale mode to something that makes sense for your game. The scale mode kicks in when your scene size does not match the size of the view. So the purpose of the scale mode is to let Sprite Kit know how to deal with this situation. My guess is that you have the scene size set to 320,480 and the scene is being scaled to match the iPhone 5 view which will cause positioning problems identical to what you described. Below are the various scale modes you can set for your scene.

SKSceneScaleMode.AspectFill

The scaling factor of each dimension is calculated and the larger of the two is chosen. Each axis of the scene is scaled by the same scaling factor. This guarantees that the entire area of the view is filled, but may cause parts of the scene to be cropped.


SKSceneScaleMode.AspectFit

The scaling factor of each dimension is calculated and the smaller of the two is chosen. Each axis of the scene is scaled by the same scaling factor. This guarantees that the entire scene is visible, but may require letterboxing in the view.


SKSceneScaleMode.Fill

Each axis of the scene is scaled independently so that each axis in the scene exactly maps to the length of that axis in the view.


SKSceneScaleMode.ResizeFill

The scene is not scaled to match the view. Instead, the scene is automatically resized so that its dimensions always matches those of the view.


Conclusion
It looks like you want to remove the scaling of your scene, that way your positions in the scene will match the actual positions in the view. You can either set your scene's size to match the view size, in which case no scaling will take place. Or you can set your scene's scale mode to ResizeFill which will always make the scene's size match your view's size and it won't scale anything. In general I would stay away from any scaling and instead adjust the interface and the scene size to best suit each device. You may also want to add zoom and/or scrolling to allow devices with smaller resolutions to achieve the same view field.


But what if I want to scale my scene?
If however you need to scale your scene, but you still want positions to be relative to the view (i.e. You want (0,0) to be the bottom left of screen even when scene is cutoff) then see my answer here


Additional Info
See answer here for sample code showing how I layout nodes dynamically.

See answer here for more details about scaling to support multiple devices.

Community
  • 1
  • 1
Epic Byte
  • 33,840
  • 12
  • 45
  • 93
  • thanks Epic Byte . what size we must design our games for universal games? we must design in size of iPhone 6+ or iPhone 4 and then scale for the others device size ? – nmokkary Jun 14 '15 at 08:27
  • 2
    @nmokkary It really depends on how you want to layout your game. I'll give you an example of what I did. I have an rts game for iOS and OS X. For iOS I don't scale the scene at all. I always make the scene the same size as the view. Now in my game I have a large world with scrolling. So what this means is that iOS users with larger screens will see more content because there is no scaling. The larger the screen, the more they can see. On OS X however, I scale everything to the iPad size. This is because large desktop screens will see too much of my world if I didn't scale. – Epic Byte Jun 14 '15 at 15:18
  • 2
    @nmokkary It's tough planning how your game should look under various sizes. I recommend you draw all the screen sizes in an editor and plan how your game should look like on each one. Then see what you need to do in code to solve the problem. For example some screen sizes might be the same aspect ratio so you can simply scale your assets. Others sizes will have different ratios so you will need to tweak the layout somehow or use scrolling. Hope this helps. See my answer here as well http://stackoverflow.com/a/30820076/2158465 – Epic Byte Jun 14 '15 at 15:25
  • thanks @Epic Byte .my game interface like 2048 game. what is the best option? – nmokkary Jun 15 '15 at 10:37
  • 2
    @nmokkary In a game like that you probably wouldn't have any scrolling or zooming so your interface must fit the screen entirely. The problem is each device has a different size and aspect ratio. In my opinion, I would layout your buttons so that they fill the screen. So the buttons should be larger on some devices like an iPad and smaller on others. You shouldn't need to scale the scene at all. Instead set the size of your sprites so that they align and fit the screen. You need to come up with some mathematical layout rule to achieve this. The rule will directly depend on the screen size. – Epic Byte Jun 16 '15 at 02:25
  • Thanks for the detailed answer! Where do you set the scene size or find out what it's set to? There is no `size`, `frame`, or `bounds` property according to the class docs for SCNScene. – Crashalot Aug 04 '16 at 00:41
2

If you want to preserve the size of your scene (usually desired when you work with a fixed size and coordinates system), you might want to add padding to either side of your scene. This would remove the letter boxing and preserve all the physics and dynamics of your app on any platform.

I created a small Framework to help with this:

https://github.com/Tokuriku/tokuriku-framework-stash

Just:

  1. Download the ZIP file for the Repository
  2. Open the "SceneSizer" sub-folder
  3. Drag the SceneSizer.framework "lego block" in your project
  4. Make sure that the Framework in Embedded and not just Linked
  5. Import the Framework somewhere in your code import SceneSizer

And you're done, you can now call the sizer Class with: SceneSizer.calculateSceneSize(#initialSize: CGSize, desiredWidth: CGFloat, desiredHeight: CGFloat) -> CGSize

Tokuriku
  • 1,332
  • 13
  • 22
1

Just in case, try doing CMD+1, worked for me. Some of the elements were cut off because they were simply not displayed in Simulator - I stress this, this is just a simulator feature (and a bug if you ask me, wasted hours of time to solve this). CMD+2, CMD+3 views can sometimes hide parts of the scene.

Vladimir Despotovic
  • 3,200
  • 2
  • 30
  • 58