What is wrong with the coordinate system in this SpriteKit setup? - ios

I created a SKView which presents an SKScene subclass like this:
SKView *skv = [[SKView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:skv];
self.skScene = [[TestScene alloc] initWithSize:v.bounds.size];
[skv presentScene:_skScene];
Then to see coordinate system origin, I add a small 10x10 colored square to the scene.
SKSpriteNode *ori = [SKSpriteNode spriteNodeWithColor:[UIColor greenColor] size:CGSizeMake(10,10)];
[self addChild:ori];
You can see green square in lower left corner:
From what I thought, SpriteKit coordinate system is such that origin is always in center. But in the scene the origin is in lower left corner. When I add a child node to {0,0} it appears in lower left corner as well.
When I add a SKSpriteNode and position it {0,0} in the scene, it appears in lower left corner. But it is centered around scene origin in lower left corner (clipped off half to left, and half to bottom).
But now it gets more confusing. When I add a SKSpriteNode to another SKSpriteNode, the sub-sprite is CENTERED in the parent.
So does it mean the Scene coordinate system works different than the sprite coordinate system?
Recap:
When I position a sprite in scene at {0,0}, it appears in bottom
left, clipped off 50% (centered around origin).
When I position a sprite in a sprite at {0,0}, it appears centered in the sprite.
Is my Scene configured wrong or is this the way it works?

This is the way it works. All OpenGL views (the 2D ones at least) have their origin at the lower left corner.
The position of your sprites is correct too. Both are located at 0,0 by default. The texture of the sprites is drawn relative to the node position based on the anchorPoint factor. It's default value of 0.5, 0.5 places the texture centered on the node's position.
You can change the anchorPoint of the scene to 0.5,0.5 which will move the sprites to the center of the scene. You can also change the sprite's anchorPoint though that isn't recommended since it affects things like rotation, scale, collision detection and child node position.

you can add this code to GameViewController.swift :
override func viewDidLoad() {
super.viewDidLoad()
// Detect the screensize
var sizeRect = UIScreen.mainScreen().applicationFrame
var width = sizeRect.size.width * UIScreen.mainScreen().scale
var height = sizeRect.size.height * UIScreen.mainScreen().scale
// Scene should be shown in fullscreen mode
let scene = GameScene(size: CGSizeMake(width, height))
// Configure the view.
let skView = self.view as! SKView
skView.showsFPS = true
skView.showsNodeCount = true
/* Sprite Kit applies additional optimizations to improve rendering performance */
skView.ignoresSiblingOrder = true
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}

What I did was to set the size of the SKScene you want to show to the bounds.size of the Viewcontroller you want to show the scene from. Something like this:
if let scene = GameScene(fileNamed:"GameScene") {
// Configure the view.
let skView = self.view as! SKView
skView.showsFPS = true
skView.showsNodeCount = true
/* Sprite Kit applies additional optimizations to improve rendering performance */
skView.ignoresSiblingOrder = true
scene.size = skView.bounds.size
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}
I hope this worked for you as well, if I made any mistakes here, please let me know as well :)

Related

Swapped width and height values

Explanation
For some reason, width and height values are being swapped in my game (as you can see below) that is set to be in landscape orientation. This way, the sprite that should be centered in the screen, is totally off the right position.
Code
You can download it here.
GameScene
import SpriteKit
class GameScene: SKScene {
override func didMoveToView(view: SKView) {
print("width:", self.frame.width)
print("height:", self.frame.height)
//Sprite
let sprite = SKSpriteNode (imageNamed: "sprite")
sprite.anchorPoint = CGPointZero
sprite.position = CGPoint(x: self.frame.width / 2 - sprite.frame.width / 2, y: self.frame.height / 2 - sprite.frame.height / 2)
addChild(sprite)
}
}
GameViewController
import UIKit
import SpriteKit
class GameViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Set view size.
let scene = GameScene(size: view.bounds.size)
// Configure the view.
let skView = view as! SKView
skView.showsFPS = true
skView.showsNodeCount = true
/* Sprite Kit applies additional optimizations to improve rendering performance */
skView.ignoresSiblingOrder = true
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .ResizeFill
skView.presentScene(scene)
}
override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {
if UIDevice.currentDevice().userInterfaceIdiom == .Phone {
return .Landscape
} else {
return .Landscape
}
}
}
Thanks in advance,
Luiz.
If you go to targets-General in your xCode project (where you set version number, bundle ID etc) did you untick portrait? You also might have to check your info.plist to see if all portrait entries are removed for both devices.
You approach unfortunately is bad practice a lot of tutorials teach you and I would not continue like this.
If you use "scaleMode ResizeFill" or set the scene size to "view.bounds" your game will never look consistent on all devices. Furthermore all your values (sprite sizes, font sizes, physics values etc) will also not be the same on devices different to the one you are testing on.
Basically you will have to adjust for all of this on like 5-6 devices and its madness, especially using xCode simulator. Trust me I have been there before with 2 games and it nearly killed me. Its a game of game of "yeah this looks about right".
Dont go through this, so what you should do is
1) Change your scene size to the default scene size used by xCode
GameScene(size: CGSize(width: 1024, height: 768)) // swap if portrait
Note: Check update at bottom
If you dont do this, and leave it at view.bounds.size, point 2 will not work.
2) Change your scene scale mode to .AspectFill (also default xCode settings).
This way all your stuff will look great on all iPhones. Your values will scale correctly and you save yourself a lot of work.
On iPads you will have some extra space at the top and bottom (landscape) or left and right (portrait) which you usually just cover with some more background and have as a non playable area
Your scene basically looks like this now.
The red area is your whole scene size (iPad) but if you run on iPhones you will only see the green bit. In Portrait mode that red area would be on the left and right side.
Thats why y positioning is usually done from the centre because if you use frame.minY or frame.maxY you would be in the red zone and won't see the sprite on iPhones. That red zone you just cover with some more background (your background full screen images should be iPad size).
This also make your game more balanced, because if your would just stretch up your game than it will be easier on iPads because you have more space.
So design your game within the green zone. Than on iPads the only thing you might have to do is move up some UI, like pause button or score label, when you want to show them at the top edge. I do it this way.
// Some button
...
someButton.position = CGPoint(x: frame.midX, y: frame.midY + 200)
addChild(someButton)
if UIDevice.current.userInterfaceIdiom == .pad {
// set for iPad
}
// Some label
someLabel.positon = CGPoint(x: frame.midX - 100, someButton.position.y) // because its y position is the same as someButton I only have to adjust someButton.position.y on iPads.
addChild(someLabel)
I would not continue with your approach, even if it means redoing a lot of work.
UPDATE:
It seems with xCode 8 apple changed the default scene size from 1024x768 (768x1024) to 1334x750 (750x1334). I have only played around with those settings for a bit and they seem confusing for a universal game.
So you scene would now look like this and stuff on the xAxis on iPads is offscreen.
That makes no sense as the iPad is clearly not more widescreen than an iPhone.
I actually opened a bug report to see what apple says about this so for now I would probably keep it at 1024x768.
Hope this helps
Override viewWillLayoutSubviews in your GameViewController to ensure you get the proper width/height of the view. The implication with this also is that any objects you may instantiate would need to wait until this method has been called.
So you would want to do something like
class GameViewController: UIViewController {
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
// NOTE: Add code to do this only once!
// Set view size.
let scene = GameScene(size: view.bounds.size)
// Configure the view.
let skView = view as! SKView
skView.showsFPS = true
skView.showsNodeCount = true
/* Sprite Kit applies additional optimizations to improve rendering performance */
skView.ignoresSiblingOrder = true
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .ResizeFill
skView.presentScene(scene)
}
Note I didn't try and compile this and it is missing a trailing }. Additionally, you would want to do this only once, I haven't added the code to do that. In my game, my scene is a property so I just check to see if it is nil and if it is, then I create the scene and present.
Following your code and according to how do you want to construct your sprite and position in GameScene you simply must change the scene.scaleMode to AspectFill or AspectFit (depend by what do you want to achieve):
sources:
#available(iOS 7.0, *)
public enum SKSceneScaleMode : Int {
case Fill /* Scale the SKScene to fill the entire SKView. */
case 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. */
case 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. */
case ResizeFill /* Modify the SKScene's actual size to exactly match the SKView. */
}

Swift SpriteKit: How to make an horizontal moving slider larger than screen

I'm actually creating a puzzle game for iPad. I would like to create a moving slider containing all the jigsaw parts, independently from the other elements of the game.
I've succeded to create the puzzle on the screen, with the different jigsaw parts all around that user can move with finger. To create the moving slider, I think to use the instruction in my main .swift file.
addChild()
One to create the different elements of the game, standing on the screen and the other to create the moving slider. I've made that successfully, with the different jigsaw parts contained on the slider but I can't make it moved horizontally, even with a touchMoved function on the slider. I've created a 4096 pixels large slider, my scene size is fixed to 2048 x 1536 with a a scene.scalemode set to .AspectFill. I think the problem come from here (maybe).
If I create a much bigger scene (like 4096 x 1536) with the scene.scalemode set to .Fill, I get a deformed picture on the iPad. How to manage that ?
class GameViewController: UIViewController {
override func viewWillLayoutSubviews() {
// Configure the view.
let skView = self.view as! SKView
skView.showsFPS = true
skView.showsNodeCount = true
skView.ignoresSiblingOrder = true
let scene = GameScene(size: skView.frame.size)
scene.size.width = 4096
scene.size.height = 1536
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .Fill
skView.presentScene(scene)
}
Thanks by advance for your help,
Although the title and your actual question diverge somewhat, I assume your problem is how to create a SKScene that is larger than the UIView that presents it.
The size of the SKScene is the point resolution that the presenting view (typically an instance of SKView) renders it at. This is before the UIScreen scaling is taken into account, so a scene of 1024*768 in a fullscreen iPad view is rendered at 2048*1536. The SKScene's scaleMode property is only taken into account when the size of the scene and the containing SKView instance is different.
In my opinion, scenarios in which the scene's size differs from the SKView's size are scarce and exceptional. You could compare SKView and SKScene with UIImageView and UIImage, respectively. Only when the aspect ratio differs does the scaleMode impact the rendering/appearance of the UIImage inside the view.
So, how to create a scene bigger than the view? This is a trick question, because you don't need to.
Consider the size of SKScene to be the viewport of the scene. SKNodes inside the scene are not restricted to be positioned only inside the scene's viewport. With an SKScene of size 1024*768, it is perfectly legit to create an SKSpriteNode (say, of size 20*20) and position it at:
(0,0):you see a square of 10*10 points (or 20*20 pixels) in the bottom-left (with three-quarters of it hidden, out of the rendering viewport)
(500,500): completely visible
(1034,778): exactly out of bounds in the top right corner

How to change SKView letterbox color when scaleMode .AspectFit is used

I'm using standard full screen SpriteKit view from the boilerplate code (new game iOS project), and when I use
scene.scaleMode = .AspectFit
to make sure that scene fits, remaining (letterboxed) area is colored in black.
I've tried these options to change the color:
let skView = self.view as SKView
// was hoping this one would work
skView.backgroundColor = UIColor.redColor()
// didn't expect this would work, since scene is scaled anyways
scene.backgroundColor = SKColor.redColor()
Also tried to change SKView background color in storyboard editor to another color, but no luck.
Any tips on where to look to change the color of the letterboxed area?
I think the should be a way to set the colour or place sprites in the ears of the letterhead... but it seems that there isn't. Also, I disagree with LearnCocos2D. There's nothing wrong with AspectFit. It has its use.
What I've done is use AspectFit but also calculate the size of the scene based on screen size. This isn't that helpful for an OSX game but it'll work fine for iOS.
func createScene() -> GameScene {
let screenSize = UIScreen.mainScreen().bounds.size
var size:CGSize = CGSizeZero
size.height = Constants.sceneHeight
size.width = screenSize.width * (size.height / screenSize.height);
return GameScene(size: size)
}
override func viewDidLoad() {
super.viewDidLoad()
let scene = self.createScene()
// Configure the view.
let skView = self.view as SKView
skView.showsFPS = false
skView.showsNodeCount = false
/* Sprite Kit applies additional optimizations to improve rendering performance */
skView.ignoresSiblingOrder = true
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .AspectFit
skView.presentScene(scene)
}
After a scene is rendered, its contents are copied into the presenting view. If the view and the scene are the same size, then the content can be directly copied into the view. If the two differ, then the scene is scaled to fit in the view. The scaleMode property determines how the content is scaled.
The letterboxing is create IN the view so there is no way around it. That said there is often the need for an .aspectFit setting if you want to use a specific scene size and universal coordinate system. If that is your case, the following should help.
You need to figure out how much a standard .aspectFit would need in padding to remove the letter boxing from your current device and add that to your scene. You finish with a scene that is lighter a little bigger or a little wider then your original sizes but the scene has at least the same size as your original scene size. You can then move the anchorPoint to the original (0, 0) coordinates or the (0.5, 0.5) one depending on what coordinate system you want to use for your game.
The code for this is convoluted and could change in time. If you want a quick fix, I created a Framework exactly for that purpose. It's small but portable :)
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
Documentation is in the folder for a clean and full use with a standard scene. Hope this helps!

SpriteKit coordinate system messed up

In portrait mode, i created a SKShapeNode at the position of 0,0. Yet it seems that it does not appear in the screen at all.
This is the code i am using now
let test = SKShapeNode(rect: CGRectMake(0, 0, 10, 10))
test.fillColor = SKColor.blackColor()
self.addChild(test)
The background colour white, so the shape node will definitely appear if it was on the screen
Yet 0 node appears in the screen?
children.count returns 1
And this is how i display the scene
override func viewWillLayoutSubviews () {
super.viewWillLayoutSubviews()
if let scene = GameScene.unarchiveFromFile("GameScene") as? GameScene {
// Configure the view.
let skView = self.view as SKView
skView.showsFPS = true
skView.showsNodeCount = true
/* Sprite Kit applies additional optimizations to improve rendering performance */
skView.ignoresSiblingOrder = true
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}
}
The SKShapeNode is drawn, but it is outside the screen?
EDIT 1: I change the scale mode to .AspectFit, and this is what happened
Is the game forcefully running in landscape although the game is suppose to run in portrait?
Base on #fuzzygoat answer at https://stackoverflow.com/a/24170460/1879382.
Simply open GameScene.sks, then change the value of x and y to the appropriate value needed.
For me, I used 320 x 568 since i run the game on iPhone 5S

SpriteKit support multiple device orientations

I have a SpriteKit game which I want to support all orientations. Right now when I change the orientation, the node doesn't keep its position. I use the SKSceneScaleModeResizeFill for scaling, because it will keep the right sprite size.
When I start the game, the game player is positioned in the mid screen like this:
Then when I rotate the device, the position becomes like this:
Here is my view controller code:
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
// Configure the view.
SKView * skView = (SKView *)self.view;
if (!skView.scene) {
// Create and configure the scene.
SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];
scene.scaleMode = SKSceneScaleModeResizeFill;
// Present the scene.
[skView presentScene:scene];
}
}
And my scene code:
-(id)initWithSize:(CGSize)size {
if (self = [super initWithSize:size]) {
self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];
//Add spaceship in the center of the view
SKSpriteNode *spaceship = [SKSpriteNode spriteNodeWithImageNamed:#"Spaceship.png"];
spaceship.position = CGPointMake(size.width/2, size.height/2);
[spaceship setScale:.3];
[self addChild:spaceship];
}
return self;
}
Your sprite does keep its position after the scene resizes — you can see from your screenshots that it keeps the same horizontal and vertical distance from the lower left corner of the scene. The catch is that after the scene has resized, that absolute offset represents a different relative position in your scene.
Sprite Kit can resize a scene automatically, but the relative positioning of nodes after a scene resize isn't something it can do for you. There's no "right answer" to how a scene's content should be rearranged at a different size, because the arrangement of scene content is something your app defines.
Implement didChangeSize: in your SKScene subclass, and put whatever logic you want there for moving your nodes.
For example, you could make it so nodes keep their positions as a relative proportion of the scene size using something like this:
- (void)didChangeSize:(CGSize)oldSize {
for (SKNode *node in self.children) {
CGPoint newPosition;
newPosition.x = node.position.x / oldSize.width * self.frame.size.width;
newPosition.y = node.position.y / oldSize.height * self.frame.size.height;
node.position = newPosition;
}
}
Depending on what's in your scene and you you've arranged it, you probably don't want that, though. For example, if you have HUD elements in each corner of your game scene, you might want them at a fixed offset from the corners, not a proportion of the scene size.
I add I similar issue and found this question. I solved differently, using the viewWillTransitionToSize:withTransitionCoordinator:, as stated by #GOR here.
I added the following code in my view controller (that manage the SKView and its SKScene)
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
//skView is my SKView object, with scaleMode SKSceneScaleModeResizeFill
skView.frame = CGRectMake(0, 0, size.width, size.height);
//currentScene is my SKScene object
currentScene.size = skView.frame.size;
//Then, as all the objects in my scene are children of a unique SKNode* background, I only relocate it
currentScene.background.position = CGPointMake(CGRectGetMidX(currentScene.frame), CGRectGetMidY(currentScene.frame));
}
and it works like a charm!
For Swift 3,
override func didChangeSize(_ oldSize: CGSize) {
for node in self.children{
let newPosition = CGPoint(x:node.position.x / oldSize.width * self.frame.size.width,y:node.position.y / oldSize.height * self.frame.size.height)
node.position = newPosition
}
}
Thus we are able to use a constant and initialise it in one line. Then in node.position = newPosition we can set the new position.
Also we are able to make use of the enhanced for loop leading to a much more elegant solution.

Resources