I'm using the spritekit scene builder to build my scene (aka the GameScene.sks file when you create the project in xcode 7 ios9). SpriteKit only uses pixel values when setting the screen height and width. My question is this:
If I set the pixels values to that of an iphone 6, will the game be too small for ipad and iphone 6+? Why is there no option to fit the device screen? What should I do to avoid this?
Pixel density
First of all the size of the Scene is defined in Points not Pixels.
Let's see how the devices that support iOS 9 deal with this:
1 point = 1x1 pixel: iPad 2, iPad mini
1 point = 2x2 pixels: iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPad mini 2, iPad mini 3, iPad mini 4, iPad 3,
iPad 4, iPad Air, iPad Air 2, iPad Pro, iPod touch 5, iPod touch 6
1 point = 3x3 pixels: iPhone 6 Plus, iPhone 6s Plus
This allow you to specify a size that is automatically converted for the pixel density of a particular device.
Screen size
There are several screen sizes available on the iPhone/iPad supported by iOS 9.
With SpriteKit you can easily face this problem setting the scaleMode property of your Scene.
You can chose among 4 options:
Fill: Scale the SKScene to fill the entire SKView.
AspectFill: Scale the SKScene to fill the SKView while preserving the scene's aspect ratio. Some cropping may occur if the view has a
different aspect ratio.
AspectFit: Scale the SKScene to fit within the SKView while preserving the scene's aspect ratio. Some letterboxing may occur if
the view has a different aspect ratio.
ResizeFill: Modify the SKScene's actual size to exactly match the SKView.
You probably want to set AspectFill but it really depends on your game.
To set the property open GameViewController.swift (or .m if you use Objective-C), in viewDidLoad you'll find this line. Just change it to mach your preference.
/* Set the scale mode to scale to fit the window */
gameScene.scaleMode = .AspectFill
Related
I am creating an iOS game using sprite kit scene. My sprite kit scenes are sit to a scale value of x = 1136 by y = 640, creating a horizontal game play. This resolution adjusts to all iPhones up to iPhone 8. However iPhone X and iPhone 11 have a different aspect ratio for their screen resolutions than the other iPhones. I was wondering if there is a setting or something that can be done programmatically to adjust the set game cg points and image sizes to adjust to the iPhone X and iPhone 11 without individually changing cg points of all images and image scales in code.
I figured it out. You can manually change the aspect ration to adjust to the device being used. To figure out the right aspect ratio you need use this link https://developer.apple.com/reference/spritekit/skscenescalemode
My new game is finished and now I'm just testing on multiple real devices. I came across multiple issues after testing. The big issue is how to handle screen sizes. The game is how I want it to look on 6 Plus/6s Plus, but not on 6s, 6, 5s, 5, 4s, 4, or iPad.
I found these two answers but I don't know how to implement them: How to support multiple screen sizes in SpriteKit?
and SpriteKit how to get correct screen size
I really would like any type of help, because this is irritating me.
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, 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.
For scale mode it is usually best to either use .aspectFill or .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
In my case I have a portrait game, and I want to keep the height fixed while showing more or less content left/right depending on the device's screen.
For that in Xcode's Scene Editor I added and set an SKCameraNode for my scene, and set the scene size to the "widest" aspect ratio device (iPhone X ), that is 2436x1125 pixels.
Then set a custom class for the scene and override sceneDidLoad:
override func sceneDidLoad()
{
super.sceneDidLoad()
self.size.width = self.size.height * (UIScreen.main.bounds.size.width / UIScreen.main.bounds.size.height)
self.scaleMode = .aspectFit
}
If I want to preview how my game will look in the "narrowest" device (any iPad has a 1.5:1 ratio) I just temporarily change my scene's width to around 1500 pixels.
Note: SKView's contentMode changes nothing.
I was reminded of checking the screen size and changing the node sizes, I found this as an answer: how to check screen size of iphone 4 and iphone 5 programmatically in swift
All I had to add was this in my GameScene and it was called in every .swift:
extension UIScreen {
enum SizeType: CGFloat {
case Unknown = 0.0
case iPhone4 = 960.0
case iPhone5 = 1136.0
case iPhone6 = 1334.0
case iPhone6Plus = 1920.0
}
var sizeType: SizeType {
let height = nativeBounds.height
guard let sizeType = SizeType(rawValue: height) else { return .Unknown }
return sizeType
}
}
And this
if UIScreen.mainScreen().sizeType == .iPhone4 {
// Make specific layout for small devices.
}
Ive been making an app using sprite kit in Xcode 7. I made all my sprite nodes positioned around by referencing other sprite nodes and self.frame
for example
self.block.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame)
When I came to test my app on an iPhone 6 Plus (I previously tested on iPhone 4s but it worked nicely on an iPhone 5) My app didn't scale the nodes, Just the space Between them. The game relies on everything being the same otherwise people playing on an iPhone 6 would find it easier then people playing on a smaller device. Is there anyway that I could make the iPhone 6 view just a stretched version of the iPhone 5 view? Thanks Guys!
It's best not to position your sprites using self.frame as a reference. Much better to treat the scene as the "true" coordinates and let SpriteKit scale your scene for you.
ie. Specify the scale mode of your scene when you create it (probably in the view controller viewDidLoad). I prefer AspectFill for the scale mode, which makes sure the screen is filled, but you will lose the edges on some devices. Just make sure the core gameplay is in the middle of the scene.
scene.scaleMode = .AspectFill
Then, position your sprites using the size of your scene for reference. On a landscape scene, I tend to use a scene size of 1024x768 (iPad size).
Hope that helps.
Another way: If you remove the iPhone 6 and iPhone 6+ launch images from the project then those devices will switch to "zoom mode", which is exactly the same view as on iPhone 5, just bigger (well, zoomed).
Just look in your project for "Images.xcassets", there is a image-set called "LaunchImage". In this image-set are multiple other images, just remove the one for iPhone 6 and 6+.
I am trying to make a game using sprite kit that works on both iPhone and iPad.
For iPhones I can set the scene size to 320x568 and scale it for all resolutions it works fine.
For iPads too this works fine. But as the point resolution on iPad is 768x1024 I can see scaling artifacts and also images are not sharp.
So I want to set the scene size to 768x1024 for iPads. Most of my game images are drawn using sprite kit instead of loading images. So when I set the new scene size the images look smaller.
What would be the best way to specify the correct dimensions for the images while drawing it? Would I have to convert each and every dimensions and points used based on the device type?
You can draw your images using the largest screen size and scale them down to fit smaller screen sizes. This works well if the aspect ratio is the same for devices like iPhone 5, 6 and 6+. You do have to create separate images and/or screen layouts for the iPad and iPhone 4 which have a different aspect ratio.
I have backgrounds for iPhone 4s, 5, 6, 6plus, iPad, iPad retina. My question is how to distinguish them from each other since many are retina(#2x). Can I use the same filename for the background and add #2x, #3x? It seems to pick up the wrong backgrounds from the #2x ones when I do this(i,.e iPhone 5 on a iPad Retina). There must be an easier way then checking every single resolution and pulling that image. Clarity on this would be very helpful thanks!
In the scene itself I use
SKSpriteNode * MainMenuBackground;
MainMenuBackground = [SKSpriteNode spriteNodeWithImageNamed:#"Background1"];
so for the other devices can I do these filenames:
Background1#2x~iphone5.png (1334 x 750)
Background1#2x~iphone6.png (1136 x 640)
Background1#3x~iphone6plus.png (2208x1242)
Background1~ipad.png (1024x768)
Background1#2x~ipadRetina.png(2048x1536)