I have been looking and trying all solutions I've found on the internet. None of them are working as expected. My game requires a border as shown in the image attached. It works fine with iPhone 8 and 8 Plus. On X, I cannot seem to find the proper way to fill it without disrupting my game scene. Even if I use resizeFill or aspectFill it cuts off the important contents from my gaming area. The one in the image is aspectFit but gives me black borders which does not look good and is not taking advantage of the larger screen. The layout in the GameScene file is not according to iPhone X. How can I make the game optimised for all of these 3 devices. I know how to do it for an app on storyboard with constraints and auto layout, but I am kinda new to SpriteKit and GameScenes. I do not mind even if the black borders on the iPhone X is filled the colour of my border. But I do not know how to implement it and I do not think its the best practice for optimising games for all of these 3 devices. Thank you in advance for your help.
I guess you want something like this right 👆
1. Resizable scene
First of all you want your scene to resize (changing size and aspect ratio) in order to perfectly match the display. So open GameViewController.swift and set
scene.scaleMode = .resizeFill
2. Resizable rectangle
Now you want to create a rectangle matching the perimeter of your scene.
That's easy, open your scene and write what follows
class GameScene: SKScene {
override func didMove(to view: SKView) {
let rectangle = SKShapeNode(rect: self.frame)
rectangle.strokeColor = .green
rectangle.lineWidth = 20
addChild(rectangle)
}
}
How does it work?
As you can see I am creating a rectangle using the same frame of the scene. So, you are sure your rectangle will always match the perimeter of the scene (which will match the display).
That's it.
Related
I would like the scenes of my game in SpriteKit to appear differently sized depending on the size of the device. Right now I am manually resizing and positioning some of my nodes with an 'if' statement checking for frame size, but unfortunately I cannot do this for all of my sprites due to the mechanics of my game (I am detecting collisions based off of the positions of my nodes, not by using PhysicsBodies. If I were to change the size of the nodes, these collisions would not be detected).
Is there a way to scale the appearance of the view according to the device size instead of actually scaling the sprites themselves (i.e. the view would stretch out to fit frame size but in reality the sprites would actually be the same size)? Is this something I would achieve by changing the SKSceneScaleModes from .ResizeFill (the one I am currently using)?
I don't believe there is an easy way to fix my problem, nor do I believe that the solution I was looking for exists. This is how I fixed my problem:
First, I changed my game mechanics. I've learned that when you are going about designing and initially planning out your game, you have to really focus on making your game both easily expandable and universal. The way that I had my game first set up was quite limited.
I figured out how I wanted to scale my game and set up my own little system (not really my 'own', its probably a pretty common setup):
var scene = GameScene(size: self.size)
var skView = self.view! as SKView
scene.size = skView.frame.size
var scale = self.frame.size.height / 736
Then I just set the scale to my nodes like so:
self.titleText.setScale(scale)
First, I am setting the size of the current scene as the size of the frame size of the skView. With that, I am creating a scale factor by dividing the size of the scene by the frame size of an iPhone 6 plus. The sprites will now appear at a scale factor of 1 on the iPhone 6 plus and downscale from there.
Anyways, I know this explanation wasn't perfect and that there is probably a more efficient way of doing this. I am relatively new to SpriteKit and have a lot to learn, but I didn't want to leave this question unanswered on the off chance that somebody stops by here. Thanks, and feel free to message me if you have any questions or I messed up somewhere.
I'm trying to get comfortable with Sprite Kit level editor. By default, there is one "gamescene.sks" file that's attached to "gamescene.swift".
If i'm making a "gameoverscene" or "playscene" for example, do I need to create both of them (.swift and .sks) if I want to work with my game in the level editor ?
Also, I'm interested in it's size management. I'm making a universal devices game. Should I change it's default size (1024x768) or do not bother ?
Also that scene canvas looks horizontal, should I change it if my game is a portrait-mode only ?
Short Answer. Yes.
Reason..
Every time you want to present or load an .sks file, You need to load it with a class like so
let doors = SKTransition.doorwayWithDuration(1.0)
let archeryScene = GameScene(fileNamed: "GameScene")
self.view?.presentScene(archeryScene, transition: doors)
If you look a the constant loads the file with a class
MyScene(fileNamed: "MyScene")
So yeah you do need a .swift file for each .sks file.
For more info on .sks files look here.
Techotopia - An iOS 8 Swift Sprite Kit Level Editor Game Tutorial
Also when I use the Spritekit Level Editor, I usually set the Scene size to 960 x 640 to support the smallest iPhone. Alsong as you have #1x, #2x, #3x and possibly #1x~iPad and #2x~iPad, Everything will be fine. Just to be sure in the ViewDidLoad or the initWithSize(CGSize) to add self.scaleMode = .AspectFill. You can set it to what ever it may be. Your options are,
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.
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.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.
(Credits to #epicbyte - Dealing with different iOS device resolutions in SpriteKit)
I'm doing my first iOs game using Sprite Kit and Swift.
I start positioning all my Sprites and labels like:
sprite.position = CGPoint(x: 0, y: 200)
when i run in a 4-inch device, it looks really good but when i run it in a 3.5 device the game looks incomplete.
Is there any good solutions to resize all the layers instead of redesign all my scenes?
If you didn't change the initial setting for your scene scaleMode, you should have it set to .aspectFill. This setting will size your scene keeping it's aspect ration but trying to fill your screen. It will chop part of it basically. There's little you can do except go for an .aspectFit setting. It will keep the aspectRation but will fit all your scene in the screen leaving you with black letter boxing bands.
Most people do not use .aspectFit but if you know how to resize the scene depending on the screen size, you can add the needed padding on either side to remove the black letter boxing. I created a framework that does that for you and also calculates your original anchor point for your scene so you loose nothing of your current coordinates implementation. All with 2 methods.. I highly suggest you take a look at it: SceneSizer
Just:
Download the ZIP file for the Repository
Open the "SceneSizer" sub-folder
Drag the SceneSizer.framework "lego block" in your project
Make sure that the Framework in Embedded and not just Linked
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
Documentation is in the folder for a clean and full use with a standard scene. Hope this helps!
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?
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.
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:
Download the ZIP file for the Repository
Open the "SceneSizer" sub-folder
Drag the SceneSizer.framework "lego block" in your project
Make sure that the Framework in Embedded and not just Linked
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
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.
I am having trouble fully grasping the coordinate system with SpriteKit using Swift. I have looked at many resources including apples dev docs but for some reason I am very confused (i'm sure this must be simple).
I have a GameScene class inheriting from SKScene. I am just trying to add a SKSpriteNode to the screen using various coordinates to get used to the screen layout. I believe that when you create any SKNode and give it a position by doing the following
var node = SKSpriteNode(color: UIColor.brownColor(), size: CGSizeMake(100, 100))
node.position = CGPointMake(0, 0)
and then place any SKNode using
self.addChild(node)
The coordinates that have been supplied to the node are coordinates in the parent node. Does this mean that the brown square that has been created should be placed at the bottom left corner?
This is obviously not the case and is what is confusing me. I am using the iPhone 5s simulator for testing in portrait.
The sprite node only appears in the bottom left when I set the position to (350, 50).
Select the GameScene.sks in the Project Navigator, select the SKScene (it should have a yellow border round it) and set its size property to 320 points x 569 points (this is assuming iPhone5 / 5S) either way this is the problem. Also make sure you double check it as I am sure it changed back to 1024x768 on me, but seems to be working now.
In the GameViewController class at the function viewDidLoad(), add this line of code:
scene.size = skView.bounds.size