内容
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にプログレスバーを表示することができます。