UIView의 좌표와 SKNode의 좌표의 차이

SpriteKit에서 게임을 만들 때 UIKit과 결합했을 때 혼란 스러웠습니다.

뷰 좌표와 장면 좌표

MyPlayground.playground

import UIKit
import SpriteKit
import XCPlayground

let liveView = SKView(
    frame: CGRect(
        origin: CGPointZero,
        size: CGSize(width: 300, height: 300)
    )
)

XCPlaygroundPage.currentPage.liveView = liveView
XCPlaygroundPage.currentPage.needsIndefiniteExecution = true

// 今回適応してみるCGRect
let rect = CGRect(
    origin: CGPoint(x: 40, y: 20),
    size: CGSize(width: 80, height: 40)
)

// SKSceneを作って、Nodeを入れる
let skScene = SKScene(size: liveView.frame.size)
liveView.presentScene(skScene)

let node = SKShapeNode(rect: rect)
node.fillColor = UIColor.blueColor()
skScene.addChild(node)

// 同じCGRectのUIViewを入れるとどうなるの？
let uiView = UIView(frame: rect)
uiView.backgroundColor = UIColor.redColor()
liveView.addSubview(uiView)

UIView와 SKNode에 같은 Rect를 적응해도,
origin의 원점 위치와 xy축의 방향이 다른 것을 알 수 있다

중심점

덧붙여서 각각 중심점은 frame.midX, frame.midY로 알 수 있다 (get only)

MyPlayground.playground

CGPoint(x: uiView.frame.midX, y: uiView.frame.midY) // {x 80 y 40}
CGPoint(x: node.frame.midX, y: node.frame.midY) // {x 80 y 40}

SKNode의 경우 position을 지정하여 중심에서 그릴 수 있습니다.

MyPlayground.playground

let center = CGPoint(x: liveView.frame.midX, y: liveView.frame.midY)
let node2 = SKShapeNode(rectOfSize: rect.size)
node2.position = center
node2.fillColor = UIColor.purpleColor()
skScene.addChild(node2)

좌표 변환

뷰 좌표와 장면 좌표는 서로 변환할 수 있습니다.

convertPointToView

MyPlayground.playground

// シーン座標からビュー座標へ変換
let convertToViewOrigin = skScene.convertPointToView(uiView.frame.origin)
convertToViewOrigin     // x 40 y 280

let node3 = SKShapeNode(
    rect: CGRect(
        origin: convertToViewOrigin,
        size: rect.size
    )
)
node3.fillColor = UIColor.brownColor()
skScene.addChild(node3)

이렇게하면 UIView와 origin이 함께 위치가됩니다.
그러나 size에 의한 그리기 방향은 각각 다릅니다.



convertPointFromView

MyPlayground.playground

// ビュー座標からシーン座標へ変換
let convertFromViewOrigin = skScene.convertPointFromView(node.frame.origin)
convertFromViewOrigin   // x 38.65 y 281.35

let uiView2 = UIView(frame:
    CGRect(
        origin: convertFromViewOrigin,
        size: rect.size
    )
)
uiView2.backgroundColor = UIColor.yellowColor()
liveView.addSubview(uiView2)

미묘하게 좌표가 어긋나 소수점이 나오고 있는 것은,
SKNode의 테두리가 들어있는 분도 계산해주기 때문인 것 같았다



애초에 SpriteKit와 UIKit 짱으로 게임을 만드는 것은 이상한 것일까.
전부 SKNode로 하는 것이 좋을까. 잘 모르겠어요.

설명하기 쉽도록 「뷰 좌표」와 「장면 좌표」라고 명명하고 있습니다만,
공식적인 부르는 방법인지 모르기 때문에 너무 신용하지 마십시오. . .