【Swift】SpriteKitの使い方。SKCropNodeで画像やシーンの一部分を切り出して表示する。(Swift 2.2、XCode 7.3)

2016年9月21日2020年6月16日

SKCropNodeとは

本記事ではSKCropNode（クロップノード）について説明する。クロップノードとは、画像の一部を切り出して表示するノードである。

例えば、下図のような模様が描かれた画像（以下、色紙）と鳥の画像があったとする。色紙を鳥の形に切り出して表示したいときがある。そんな時に利用されるのがクロップノードである。

クロップノードを使ってみる

実際に、クロップノードを使って色紙を鳥の形に切り出してみみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト」

事前準備では、背景と猿と鳥のノードをシーンに配置しておいた。この段階では何も起きない。

TestScene.swiftを以下のコードに変更する。クロップノードはシーンエディタの部品一覧に無いのでソースコードで実装する必要がある。なので、検証ではシーンに配置するノードはすべてソースコードから追加している。

画像を切り出すための型紙として使う鳥ノードをクロップノードのmaskNodeに設定している。そして、切り出す色紙をクロップノードの子に追加し、色紙が鳥の形に切り出されるようにした。

//
//  TestScene.swift
//

import Foundation
import SpriteKit

class TestScene:SKScene {
    
    //現在シーン設定時の呼び出しメソッド
    override func didMoveToView(view: SKView) {

        //ノードを作成する。
        let background = SKSpriteNode(imageNamed: "field")
        let monkey = SKSpriteNode(imageNamed: "monkey")
        let bird = SKSpriteNode(imageNamed: "bird_brown")
        let blueSheet = SKSpriteNode(imageNamed: "blue_sheet")
       
        //ノードの座標を指定する。
        background.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
        monkey.position =  CGPoint(x: self.frame.width/3, y: self.frame.height/5)

        //ノードをシーンに配置する。
        self.addChild(background)
        self.addChild(monkey)


        //クロップノードを作成する。
        let cropNode = SKCropNode()
        
        //マスクノードに鳥ノードを設定する。
        cropNode.maskNode = bird
        
        //クロップノードの子にblueSheetを設定する。
        cropNode.addChild(blueSheet)
       
        //クロップノードの座標を設定する。
        cropNode.position = CGPoint(x: self.frame.width*2/3, y: self.frame.height*3/5)
       
        //クロップノードをシーンに配置する。
        self.addChild(cropNode)
    }
}

// TestScene.swift

import Foundation

import SpriteKit

class TestScene:SKScene {

//現在シーン設定時の呼び出しメソッド

override func didMoveToView(view: SKView) {

//ノードを作成する。

let background = SKSpriteNode(imageNamed: "field")

let monkey = SKSpriteNode(imageNamed: "monkey")

let bird = SKSpriteNode(imageNamed: "bird_brown")

let blueSheet = SKSpriteNode(imageNamed: "blue_sheet")

//ノードの座標を指定する。

background.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))

monkey.position = CGPoint(x: self.frame.width/3, y: self.frame.height/5)

//ノードをシーンに配置する。

self.addChild(background)

self.addChild(monkey)

//クロップノードを作成する。

let cropNode = SKCropNode()

//マスクノードに鳥ノードを設定する。

cropNode.maskNode = bird

//クロップノードの子にblueSheetを設定する。

cropNode.addChild(blueSheet)

//クロップノードの座標を設定する。

cropNode.position = CGPoint(x: self.frame.width*2/3, y: self.frame.height*3/5)

//クロップノードをシーンに配置する。

self.addChild(cropNode)

}

下図は実行結果。色紙が鳥の形になった。

画面全体を切り出す

1つのノードだけを切り出すのではなく、スポットライトのようにシーンの一部分を切り出したいことがある。そんなときは、切り出すノードをすべてクロップノードの子にする。

実際にスポットライトの光を当てたかのようにシーンを切り出してみよう。

TestScene.swiftを以下のコードに変更する。背景、猿、鳥のすべてのノードをクロップノードの子に追加し、クロップノードのmaskNodeプロパティにはシェイプノードで作った円を設定している。これでシーン全体が円形に切り出されることになる。

なお、シーンの基準座標と合わせるために、クロップノードの座標も画面左下にしている。

//
//  TestScene.swift
//

import Foundation
import SpriteKit

class TestScene:SKScene {
    
    var circle:SKShapeNode!
    
    //現在シーン設定時の呼び出しメソッド
    override func didMoveToView(view: SKView) {

        //ノードを作成する。
        let background = SKSpriteNode(imageNamed: "field")
        let monkey = SKSpriteNode(imageNamed: "monkey")
        let bird = SKSpriteNode(imageNamed: "bird_brown")
        circle = SKShapeNode(circleOfRadius: 80)
        circle.fillColor = UIColor.whiteColor()
       
        //ノードの座標を指定する。
        background.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
        monkey.position =  CGPoint(x: self.frame.width/3, y: self.frame.height/5)
        bird.position = CGPoint(x: self.frame.width*2/3, y: self.frame.height*3/5)
        circle.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))

        //クロップノードを作成する。
        let cropNode = SKCropNode()
        
        //マスクノードに円を設定する。
        cropNode.maskNode = circle
        
        //クロップノードの子にノードを追加する。
        cropNode.addChild(background)
        cropNode.addChild(monkey)
        cropNode.addChild(bird)
       
        //クロップノードの座標を設定する。
        cropNode.position = CGPoint(x: 0, y: 0)
       
        //クロップノードをシーンに配置する。
        self.addChild(cropNode)
    }
}

// TestScene.swift

import Foundation

import SpriteKit

class TestScene:SKScene {

var circle:SKShapeNode!

//現在シーン設定時の呼び出しメソッド

override func didMoveToView(view: SKView) {

//ノードを作成する。

let background = SKSpriteNode(imageNamed: "field")

let monkey = SKSpriteNode(imageNamed: "monkey")

let bird = SKSpriteNode(imageNamed: "bird_brown")

circle = SKShapeNode(circleOfRadius: 80)

circle.fillColor = UIColor.whiteColor()

//ノードの座標を指定する。

background.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))

monkey.position = CGPoint(x: self.frame.width/3, y: self.frame.height/5)

bird.position = CGPoint(x: self.frame.width*2/3, y: self.frame.height*3/5)

circle.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))

//クロップノードを作成する。

let cropNode = SKCropNode()

//マスクノードに円を設定する。

cropNode.maskNode = circle

//クロップノードの子にノードを追加する。

cropNode.addChild(background)

cropNode.addChild(monkey)

cropNode.addChild(bird)

//クロップノードの座標を設定する。

cropNode.position = CGPoint(x: 0, y: 0)

//クロップノードをシーンに配置する。

self.addChild(cropNode)

}

下図は実行結果

クロップノードを動かす

他のノードと同様にマスクノードを移動、拡大したりして、切り出し結果を動的に変化させられる。

実際にやってみよう。TestScene.swiftに以下のメソッドを追加する。ドラッグした位置に円を移動し、ドロップすると円を縮小して消すようにした。

//画面タッチ移動時の呼び出しメソッド
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {

    //移動後の座標を取得する。
    let location = touches.first!.locationInNode(self)
    
    //移動後の座標に移動するアクションを作成する。
    let action = SKAction.moveTo(CGPoint(x:location.x, y:location.y), duration:0.1)
    
    //アクションを実行する。
    circle.runAction(action)
}


//画面タッチ終了時の呼び出しメソッド
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {

    //円を縮小して消すアクションを作成する。
    let action = SKAction.scaleTo(0, duration: 1.0)
    
    //アクションを実行する。
    circle.runAction(action)
}