I'm creating universal game for all iOS devices in portrait mode using Swift. In GameViewController I'm creating scene like this:
let scene = GameScene(size:CGSize(width: 1536, height: 2048))
scene.scaleMode = .AspectFill
Background image has resolution 1536x2048, and so with above scaleMode on iPad it's displayed in its full size, on iPhone 6 1152x2048 is displayed with sides trimmed. Works perfectly fine on all devices, and only one background image is needed. Problem is that if I call for size.width or self.frame.size.width it always returns 1536, even if the actual visible area is e.g. 1152.
How can I set SkSpriteNode's position relative to visible area, so that it'll be for example 50x50 from the corner on every device?
How can I set SkSpriteNode's position relative to visible area, so
that it'll be for example 50x50 from the corner on every device?
The "visible area" is simply the view.
So you can make your positions relative to the view, and not the scene. I actually do this a lot in my game, which is universal and runs on both OS X and iOS.
In my case I typically do this for the user-interface, so I might have a scaled scene but I want to set some positions not relative to the scaled scene but relative to the visible area (i.e. the view).
To do this, you can write a function that converts view coordinates to the corresponding scene coordinates.
Here is my function that I use. Note that I subtract my desired y-position from height of view so that I can treat (0,0) as the bottom-left like sprite-kit does instead of the top-left like UIKit does.
func convert(point: CGPoint)->CGPoint {
return self.view!.convert(CGPoint(x: point.x, y:self.view!.frame.height-point.y), to: self)
}
Here is an example of using this function:
self.node.position = convert(CGPoint(x: 50, y: 50))
This will always force the position of the node to be at (50,50) relative to the view (the visible portion of the screen) regardless of how your scene is scaled and sized.
I don't think this is really the best approach. You should creating the GameScene based on SKView's size
let scene = GameScene(size: self.skView.bounds.size)
I don't think you should be setting one universal size for every device. You need to let the device set the scenes dimensions based on the screen's resolution. Then you need to be creating different images based on the device. 2x, 3x, 2x~ipad etc..
This tutorial is a good place to start:
http://www.raywenderlich.com/49695/sprite-kit-tutorial-making-a-universal-app-part-1
Related
When creating my game in spriteKit I used the game size 1080x1920. Now however If I am to run it on Ipad it looks bizarre. Is there an easy fix? I am simply worried that my app will get rejected. Thank you in advance?
Its quite a commonly asked question.
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, 1334*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.
Regardless of scene size scale mode is usually best left at .aspectFill or .aspectFit, again depending on what you prefer and need (e.g cropping with aspectFill or black bars with aspectFit)
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
When you present the scene's you also set the aspect ratio.
example :
if let scene = SKScene(fileNamed: "GameScene") {
// Set the scale mode to scale to fit the window
scene.scaleMode = .aspectFill
// Present the scene
view.presentScene(scene)
}
There are 4 different aspect radios you can set
aspectFit
aspectFill
fill
resizeFill
You can find out about the 4 different types here in the apple documents.
It looks to me that you currently have it set to aspectFill but you would be better off using aspectFit. This will create a black bar on the top and bottom on some devices but it will keep the aspect ratio the same.
If you want it to look good on all devices(no black bar) you would need to check which device it is running on then update the size and position of your sprites accordingly.
Whenever scenes are hard coded, (not made within the editor) using .resizeFill will ensure that the width AND height of the scene ALWAYS conform to the view. So your game will scale correctly on any device. For scenes that are made within the editor, this is not the case.
Personally, I hardcoded all the levels in my game "Astro Path" (it's on the app store for reference) and used .resizeFill so it would scale correctly on any device without any cropping or black bars. (who wants that stuff yuck) For my title screens, I used:
.aspectFill on iPhone
.fill on iPad
because they were designed within the editor. I checked for the current device using: if UIDevice.current.userInterfaceIdiom == .pad { do w/e }
I am making a spriteKit based game and wonder if I can make the SKScene fixed width (to make it easier to layout the sprites), and let it resize to the actual screen width while keeping the aspect ratio. Is it possible to achieve this goal and is it recommended (will sprites not be rendered clearly due to resizing)?
Giving the scene a fixed size is actually what we want to do in SpriteKit games. SpriteKit will than scale the game for each device using the scaleMode settings (defaults to .aspectFill). Its not a good idea to make the scene the size of the device or use .resizeFill for scale mode as that will lead to massive inconsistencies on different devices. I have been there before with 1 game and it was an absolute nightmare.
So we basically 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 show some extra background at the top/bottom (landscape) or left/right (portrait) on iPads.
Examples of games that show more on iPads:
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. This way you will have a consistent experience on all devices.
I would not try to do some random hacks where you manually change scene or node sizes/scales on difference devices, you should let xCode/SpriteKit do it for you.
In code you would initialise a SKScene with your preferred size like so
let gameScene = GameScene(size: CGSize(width: 1024, height: 768))
If you use the visual scene editor you set the scene size directly in the inspector panel on the right.
Hope this helps
Any resizing comes with a performance penalty and resizing artifacts such as blurred edges or others.
Scene size is defined by the ViewController when it instantiates the scene before presenting it. Isn't it better to create the scene with the same size as the actual screen size and don't resize it any further?
Is there a bug in SKCameraNode when used with .AspectFill on devices where the aspect ratio of the SKScene does not match that of the devices view?
I have a minimal demo of the issue I see: an SKScene created in an SKS file, to be 768w x 1024h, filled with an image (also 768w x 1024h). It's loaded with .AspectFill. An SKLabel is positioned in the middle of the scene programmatically. The demo is simply the out-of-the-box iOS template for a SpriteKit game, with a background image added.
An iPad in Portrait (so 768w x 1024h) displays this fine. An iPhone 6+ in Portrait (414w x 736h) displays fine. An iPhone 5S (320w x 568h) displays fine.
If I add a camera to the scene, position it in the middle by setting its coordinates to (384, 512) in the SKS file and set the scene to use it, the iPad is fine but now the iPhones (and any other device with a aspect ratio other than 3:4) does NOT work. It displays the right-hand side of the scene. It is not centered. Screen shot from the iPhone below.
The camera being in the middle of the scene, should ALWAYS work.
I am currently using a work-around. When you use .AspectFill the sides of the scene are cropped by an amount - let's call it cropAmount - to fit on the narrower screen. The work-around is to move the camera left, so it is off-center by cropAmount, then the scene displays correctly.
The background image here is an #3x of a 768w x 1024h background for my game. I've put in green the cropAmount corresponding to the SKView for 9:16, and in red the scene bounds. Given the camera is set in the middle of the scene, same as the label and the pink dot in the middle of the image, why is the center of the view not also there?
If this is a bug, and I leave in my "fix" where I offset the camera by cropAmount, later updates could break production code running on devices.
Also I am not using .ResizeFill as it doesn't fix the camera node issue, and would also mean that the assets are incorrectly sized and positioned in the scene for the thousands of lines of code and dozens of SKS files I already have over 6 months of work.
Question has been edited. Originally I had my "fix" added as an extension but this just caused confusion so I have removed it.
I need to display a few images in my IOS Application. What should I do so that the images display appropriately across all devices?
Do I have to set the size of the image manually based on the device? Please clarify.
You wouldn't use SpriteKit just to display images. You would load the images as UIImage and then create a UIImageView that you can place on the screen wherever and however you want and then you just assign the UIImageView your UIImage. UIImageView has a lot of properties you can set how images are displayed (e.g. if they are scaled and how they are scaled or if they are not scaled, how they shall be aligned within the viewable area, and so on). You can draw a UIImageView on top of a SpriteKit scene, that is no problem on iOS (on iOS everything is drawn by OpenGL ES or Metal anyway).
Of course you can also embed any image as a sprite if you like:
UIImages * img = ...;
SKTexture * tex = [SKTexture textureWithImage:img];
SKSpriteNode * sprite = [[SKSpriteNode alloc] initWithTexture:tex];
// If you don't use ARC, I'd add the following below:
// [sprite autorelease];
Now you can perfectly integrate it into the scene in whatever way you like an perfectly align it will all your other sprites. Yet if you just want to paint an image over the scene:
SKScene * scene = ...;
SKView * sceneView = scene.view;
UIImageView * imgView = [[UIImageView alloc] init];
imgView.image = img;
// Whatever content mode you prefer
imgView.contentMode = UIViewContentModeScaleAspectFit;
// Where shall it be placed and how big shall it be.
imgView.frame = CGRectMake(posX, posY, width, height);
// If you'd use this, it will cover the whole scene:
// imgView.frame = sceneView.frame;
// Add it on top of your scene
[[sceneView parent] addSubview:imgView];
// If you don't use ARC, don't forget to release it:
// [imgView release];
If you load an UIImage from your application bundle with [UIImage imageNamed:#"blah"] and the image exists in different resolutions for retina devices (blah.png, blah#2.png, blah#3.png), the system will automatically load the image it considers most suitable for the screen of the current device. This is nothing you have to deal with.
If you need to convert between scene coordinates and view coordinates, SKScene offers -convertPointFromView: and -convertPointToView: for this case. If the scene fills the whole screen, then these actually convert between scene and screen coordinates.
Even if devices have different resolutions, your scene can always have the same "virtual size". So you can always say that the scene is 400x300, no matter what the real screen resolution is. In that case placing a sprite of virtual dimension 200x150 at the virtual coordinates (100,75) will always center it on the screen, no matter what device or how big the screen really is (well, assuming that the SKSceneView really covers exactly the whole screne, of course). The size of a SKScene is just the coordinate system you want to have for layouting your game, it can be whatever you want it to be, it can be bigger or smaller than the real screen.
The scene is always drawn into a SKSceneView. The size of the SKSceneView is the real size of your scene in screen coordinates. So if you SKScene is 480x320 and the size of the SKSceneView is 1440x960, then moving a sprite one pixel in your scene will in fact move it 3 pixels on the screen. Yet if your SKScene is 1136x640, but your SKSceneView is only 586x320, then moving a sprite two pixels in your scene will only move it one pixel on screen. Your scene is always scaled up or down as required.
Personally I'd either stick with the same size across all devices or maybe just make two or three device classes but not adopt the game for every single device and every existing screen resolution.
There a lot of things to consider when dealing with images in SpriteKit, The short answer is you should be creating images in 1x, 2x, and 3x (background.png, background#2x.png and background#3x.png). You will get the best image quality if you do that.
As far as resizing images based on different devices that usually is done at the scene level. There are a lot of good SO questions out there that cover a lot of the questions you will have.
For example:
Dealing with different iOS device resolutions in SpriteKit
I recommend searching for "creating a universal app with SpriteKit".
Hopefully that answers your immediate question and helps get you started with the other questions you will have.
In learning SpriteKit so I'm making a scene with 1 buttons. I do not understand the way positions work. What I read was that 0,0 was the bottom left corner and the default anchor point is in the middle of each button (0.5,0.5). The scene is scene.scaleMode = .AspectFill. If I write:
self.playButton.position = CGPointMake(self.playButton.size.width/2,CGRectGetMidY(self.frame))
self.addChild(self.playButton)
I get what is in the screenshot below.
If I set the playbutton.position.x to be self.playbutton.size.width/2 then I would assume it would be on the left edge of the screen. Not weirdly somewhat off the screen. I've read the documentation about size for a couple of days now and I still can't seem to understand it. I've also explicitly set:
self.size.width = 768
self.size.height = 1024
Meaning the scene size width and height. Also I have "Use Auto Layout" in the main storyboard checked.
If you change your scene's scale mode to .AspectFit you'll be able to quickly see what the problem is. The resolution you're setting for your scene is a completely different aspect ratio from that of your device. In fact, when I answered your last question, I assumed that your usage of the 768x1024 resolution meant that you were developing for an iPad, for which this is the correct resolution.
On an iPhone with a 4 inch screen, you should be setting the scene's size to be 320x568, and 320x480 for 3.5 inch screens. This can however be simplified by adding this line to the creating of your scene in your view controller. It will set the scene's size to the size of the view controller's view.
scene.size = skView.bounds.size