内容

SKScene上でプログレスバーを表示する方法について

(※SpriteKitのSKSceneでは、UIViewControllerを多重継承できず、UIProgressViewが使えません。UIProgressViewを使わない方法を紹介します）

完成イメージ

実装

(1) 画像をプロジェクトにimport
(画像サイズは任意。今回では300×20を使用)

(2) プログレスバー専用のクラスを作成

Swift2.0

import SpriteKit

class ProgressBar: SKCropNode {
    
    override init() {
        super.init()
        
        let sprite = SKSpriteNode(imageNamed: "progressbar")
        sprite.anchorPoint = CGPoint(x: 0, y: 0)
        let maskSprite = SKSpriteNode(color: SKColor.blackColor(), size: sprite.size)
        maskSprite.anchorPoint = CGPoint(x: 0, y: 0)
        self.maskNode = maskSprite
        
        addChild(sprite)
    }
    
    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 初期値設定メソッド (0.0 〜 1.0)
    func setProgress(progress: CGFloat) {
        self.maskNode?.xScale = progress
    }
    
    // プログレスバーの数値を増やすメソッド
    func updateProgress(progress:CGFloat){
        self.maskNode?.xScale += progress
    }
}

(3) SKSceneにプログレスバー追加

Swift2.0

import SpriteKit

// プログレスバー
let progressBar = ProgressBar()

class GameScene: SKScene{
    
    override func didMoveToView(view: SKView) {

        // プログレスバーを追加
        self.addChild(progressBar)
        progressBar.setProgress(0.0) // 初期値
        progressBar.position = CGPoint(x: 30, y: self.frame.height-40)
        progressBar.zPosition = 1 // 背景バーよりレイヤーを前に

        // プログレスバー(背景)を追加
        let backgroundBar = SKSpriteNode(color: UIColor.grayColor(), size: CGSizeMake(150, 10))
        backgroundBar.anchorPoint = CGPoint(x: 0, y: 0)
        backgroundBar.position = CGPoint(x: 30, y: self.frame.height-40)
        
        self.addChild(backgroundBar)
    }
}

(4) プログレスバーの数値を増やす

体力の増減や経験値が増加したタイミングなどで使います。

Swift2.0

// 任意の場所で下記実行(引数に指定された数値分、加算される）
progressBar.updateProgress(0.1)

(5) SKSceneを表示するViewを作成

Swift2.0

import UIKit
import SpriteKit

class GameViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let scene = GameScene()
        let skView = self.view as! SKView
        scene.scaleMode = .AspectFill
        scene.size = skView.frame.size

        skView.presentScene(scene)
    }
}

作ったばかりで全然リファクタリングできてませんが、ひとまず上記でSKSceneにプログレスバーを表示することができます。