【SpriteKit】背景と地面を設定してみた

こんにちは、のっくんです。

今回の記事では、背景と地面を設定していきたいと思います。

実装後のイメージはこんな感じ。

背景を設定するとゲーム感が出てきて良いですね！

では設定方法を見ていきましょう。

zPositionの設定

zPositionで位置関係を整理しておきます。

enum ZPositions: Int {
    case background
    case foreground
    case player
    case otherNodes
}

背景、前景、プレイヤー、他ノードの順番で、手前に来るように設定しています。

背景画像の設定

背景画像を`SKSpriteNode`として設定します。

import SpriteKit

class Background:  SKSpriteNode{
    func createBackgound(frameSize:CGSize,num:Int){
        var i = 0
        while i < num {
            let bg = SKSpriteNode(imageNamed: "Cartoon_Forest_BG_01")
            bg.position = CGPoint(x: CGFloat(i) * frameSize.width,y: 0)
            bg.size = frameSize
            self.addChild(bg)
            i += 1
        }
    }
}

frameSizeはスマホ画面のサイズです。

numは表示する画像の枚数です。

１枚だけだと右スクロールした時に途切れてしまうため、複数枚を設定できるようにしました。

GameSceneで以下のようにセットします。

// 背景画像をセット
bg.createBackgound(frameSize: self.size,num: 3)
bg.zPosition = CGFloat(ZPositions.background.rawValue)
addChild(bg)

背景の枚数は３、Zポジションは背景として設定します。

地面の設定

キャラクターが落ちないようにするために地面を設定します。

Groundクラスでは`SKPhysicsBody`でエッジを設定して、エッジ以下のエリアにキャラクターが入り込まないようにします。

import SpriteKit

class Ground: SKSpriteNode {
    
    let Height:CGFloat = 60
    
    func createGround(frameSize:CGSize,num:Int){
        
        let halfY = frameSize.height/2
        let rightEdge = (CGFloat(num)*frameSize.width) - (frameSize.width/2)
        
        // 地面の高さ分、エッジを作る
        let pointTopLeft = CGPoint(x: -frameSize.width/2, y: Height - halfY)
        let pointTopRight = CGPoint(x: rightEdge, y: Height - halfY)
        
        self.physicsBody = SKPhysicsBody(edgeFrom: pointTopLeft, to: pointTopRight)
    }
}

GameSceneで以下のようにセットします。

// 地面をセット
ground.createGround(frameSize: self.size, num: 3)
ground.zPosition = CGFloat(ZPositions.foreground.rawValue)
self.addChild(ground)

zPositionで前景に設定することで地面が有効になります。