はじめに
前回の続きです。
今回はついに横スクロールさせます。
実装
横スクロールを実現するためにはいくつか方法があるかと思いますが今回はカメラをプレイヤーに追従させて横スクロールします！
こんな感じの構成（背景は固定にしてます）。
シーン上にカメラ、床、プレイヤーをのせ、カメラの上に背景をのせてプレイヤーの位置に合わせてカメラを移動させることで横スクロールさせます。
カメラ表示
固定するものは SKCameraNode 上にのせます。
final class GameScene: SKScene {
private let cameraNode = SKCameraNode()
override func didMove(to view: SKView) {
camera = cameraNode
cameraNode.position = .init(x: frame.midX, y: frame.midY)
addChild(cameraNode)
let backNode = SKSpriteNode(imageNamed: "background")
backNode.size = frame.size
cameraNode.addChild(backNode)
}
override func update(_ currentTime: TimeInterval) {
// カメラのx座標だけ移動
cameraNode.position = .init(x: player.position.x, y: frame.midY)
}
}
注意点としてカメラの初期化は下記のようにしてはダメです。
camera = SKCameraNode()
SKScene.camera の定義が下記のように weak なので保持できません。
weak open var camera: SKCameraNode?
ボタン表示
ボタンは常に表示するためカメラに置きます。そのまま置くと床の背面に表示されるので下記のように zPosition を設定してやる必要があります。
override func didMove(to view: SKView) {
let up = UIImage(systemName: "arrow.up")!
let upNode = SKSpriteNode(texture: .init(image: up), size: .init(width: 40, height: 40))
upNode.color = .white
upNode.name = "up"
upNode.position = .init(x: -(frame.width/2) + 40, y: -(frame.height/2) + 40)
upNode.zPosition = 10 // これで床より前に持ってくる
cameraNode.addChild(upNode)
let right = UIImage(systemName: "arrow.right")!
let rightNode = SKSpriteNode(texture: .init(image: right), size: .init(width: 40, height: 40))
rightNode.name = "right"
rightNode.zPosition = 10 // これで床より前に持ってくる
rightNode.position = .init(x: -(frame.width/2) + 120, y: -(frame.height/2) + 40)
cameraNode.addChild(rightNode)
}
おわりに
前回のと合わせるとこんな感じになります。
このままではただ動くだけなので次回は敵キャラを表示します！（次回はもっとボリュームのある記事になるはず
）
SpriteKit あまりさわったことないのでもっといい方法あればぜひ教えて下さい