Search code examples
swiftsprite-kitscale

How to scale to be at the same distance in all devices?


I'm having problems opening my game in different divices , in the 6s iphone plus looks much bigger the circle the center, also the small circle that is on the line changes position , I would like that the center circle was the same size and that the small circle always this half on the line.

import SpriteKit


struct Circle {
var position:CGPoint
var radius:CGFloat
}

 class GameScene: SKScene {
 let node = SKNode()
let sprite = SKShapeNode(circleOfRadius: 6)
 var rotation:CGFloat = CGFloat(M_PI)
var circles:[Circle] = []
 var circuloFondo = SKSpriteNode()
 var orbita = SKSpriteNode()

let padding2:CGFloat =  26.0
let padding3:CGFloat =  33.5

let padding5:CGFloat =  285.5
var circulo = SKSpriteNode()
override func didMoveToView(view: SKView) {
scaleMode = .ResizeFill

    backgroundColor = UIColor(red: 0.3, green: 0.65, blue: 0.9, alpha: 1)

orbita = SKSpriteNode(imageNamed: "orbita2")
orbita.size = CGSize(width:view.frame.size.width - padding2 , height: view.frame.size.width - padding2)
orbita.color = UIColor.whiteColor()
orbita.colorBlendFactor = 1
orbita.alpha = 1
orbita.position = view.center
self.addChild(orbita)
orbita.zPosition = 3


circuloFondo = SKSpriteNode(imageNamed: "circuloFondo")
circuloFondo.size = CGSize(width:view.frame.size.width - padding5 ,  height: view.frame.size.width - padding5)
circuloFondo.color = UIColor.whiteColor()
circuloFondo.alpha = 1
circuloFondo.position = view.center
self.addChild(circuloFondo)
circuloFondo.zPosition = 0

    let radius1:CGFloat = (view.frame.size.width - padding3)/2 - 1
    let radius2:CGFloat = (view.frame.size.width - padding5)/2 + 6.5

circles.append(Circle(position: view.center, radius: radius1))
circles.append(Circle(position: view.center, radius: radius2))
addChild(node)


node.addChild(sprite)
if let circle = nextCircle() {
node.position = circle.position
sprite.fillColor = SKColor.whiteColor()
sprite.zPosition = 4.0
sprite.position = CGPoint(x:circle.radius, y:0)
rotate()
}

enter image description here

enter image description here


Solution

  • You can get the width of the screen like this:

    let screenSize: CGRect = UIScreen.mainScreen().bounds
    let screenWidth = screenSize.width
    

    and then set elements in your UI to be a proportion of the screenWidth. For instance:

    let radius1:CGFloat = screenWidth/4
    //this would always give you a radius that is one quarter of the screen width
    

    I've used this method a few times with success, hope it works for you.