SpriteKit は 2Dゲーム用のフレームワークです。
文字やグラフィック、パスなどを表示し、2D物理エンジンを適用して物理的な動きを表現することができます。
SpriteKit の超概要
SpriteKit では、基本画面である SKView の上に SKScene を配し、この SKScene の上に SKNode を配置します。
SKNode には、文字列を表示する SKLabelNode、画像やスクエアなどを表示する SKSpriteNode、パスを表示する SKShapeNode などがあります。また、SKNode に重ねて、別の SKNode を配置することができます。
画面上の位置は、左下を(0, 0) とした、右方向への横軸を x、上方向の縦軸を y とした座標 (x, y)を使います。
SKNode で配置した画像などをスプライトと呼びます。
このスプライトに動かすには、SKAction で動きを設定し、runAction で動きを開始させます。この動きには移動や回転、拡大、縮小、透明度の変化などがあります。つまり、アニメーションです。
2D物理エンジンを使うには、物理動作を行う範囲を設定し、スプライトを配置して、そのスプライトに physicsBody を設定します。
SpiriteKit を扱うには、少なくとも、上述した超概要についての理解が必要です。また、SpriteKit で記述するクラスメソッドにしてもプロパティーにしても、引数の型が厳密なので、「型」について意識して扱います。
では、試してみましょう。
開発環境
Xcode Version 6.1.1 です。
下準備
swift:iOSのSpriteKitで楕円を描く : R for Radio を参考にして、下準備です。SpriteKit をインポートし、Sceneサイズを設定します。
SKNode の配置
次に、背景色を設定し、文字列、画像、パスの3つの SKNode を、SKScene上に配置します。
文字列を表示する SKLabelNode、画像やスクエアなどを表示する SKSpriteNode、パスを表示する SKShapeNode の3つを使いました。
シミュレーターで動作を確認すると、文字列と画像、パスが表示されます。
アニメーション(SKAction)
スプライトに、SKAction で動きを設定し、runAction でアニメーションを開始します。
試しに、画像を動かしてみましょう。末尾にコードを追加します。ほんの2行です。
アニメーションさせてみましょう。
元の場所(中央)から左端へ移動します。下のイメージ図のような動きです。
では、アニメーションのことはいったん忘れて、次は物理シミュレーションです。
物理シミュレーション
2D物理エンジンを使うには、物理動作を行う範囲を設定し、スプライトを配置して、そのスプライトに physicsBody を設定します。
早速、コードを書いてみます。
画面設定を縦向きにしてみました。
Device Orientation を Portrait(縦向け)とします。
実行した際のイメージ図です。
重力の影響を受けて、下に落ちました。
コード
物理体の設定まで行った時点のコードを下記に示します。
まとめ
SpriteKit を使い、基本画面である SKView の上に SKScene を配し、この SKScene の上に SKNode を配置し、文字列・画像・パスを表示し、アニメーションや、2D物理シミュレーションを実行してみました。
簡単なコードで実現できるのが魅力ですね。
文字やグラフィック、パスなどを表示し、2D物理エンジンを適用して物理的な動きを表現することができます。
SpriteKit の超概要
SpriteKit では、基本画面である SKView の上に SKScene を配し、この SKScene の上に SKNode を配置します。
SKNode には、文字列を表示する SKLabelNode、画像やスクエアなどを表示する SKSpriteNode、パスを表示する SKShapeNode などがあります。また、SKNode に重ねて、別の SKNode を配置することができます。
画面上の位置は、左下を(0, 0) とした、右方向への横軸を x、上方向の縦軸を y とした座標 (x, y)を使います。
SKNode で配置した画像などをスプライトと呼びます。
このスプライトに動かすには、SKAction で動きを設定し、runAction で動きを開始させます。この動きには移動や回転、拡大、縮小、透明度の変化などがあります。つまり、アニメーションです。
2D物理エンジンを使うには、物理動作を行う範囲を設定し、スプライトを配置して、そのスプライトに physicsBody を設定します。
SpiriteKit を扱うには、少なくとも、上述した超概要についての理解が必要です。また、SpriteKit で記述するクラスメソッドにしてもプロパティーにしても、引数の型が厳密なので、「型」について意識して扱います。
では、試してみましょう。
開発環境
Xcode Version 6.1.1 です。
下準備
swift:iOSのSpriteKitで楕円を描く : R for Radio を参考にして、下準備です。SpriteKit をインポートし、Sceneサイズを設定します。
SKNode の配置
次に、背景色を設定し、文字列、画像、パスの3つの SKNode を、SKScene上に配置します。
文字列を表示する SKLabelNode、画像やスクエアなどを表示する SKSpriteNode、パスを表示する SKShapeNode の3つを使いました。
シミュレーターで動作を確認すると、文字列と画像、パスが表示されます。
アニメーション(SKAction)
スプライトに、SKAction で動きを設定し、runAction でアニメーションを開始します。
試しに、画像を動かしてみましょう。末尾にコードを追加します。ほんの2行です。
アニメーションさせてみましょう。
元の場所(中央)から左端へ移動します。下のイメージ図のような動きです。
では、アニメーションのことはいったん忘れて、次は物理シミュレーションです。
物理シミュレーション
2D物理エンジンを使うには、物理動作を行う範囲を設定し、スプライトを配置して、そのスプライトに physicsBody を設定します。
早速、コードを書いてみます。
画面設定を縦向きにしてみました。
Device Orientation を Portrait(縦向け)とします。
実行した際のイメージ図です。
重力の影響を受けて、下に落ちました。
コード
物理体の設定まで行った時点のコードを下記に示します。
class GameScene: SKScene {
override func didMoveToView(view: SKView) {
/* Setup your scene here */
println("self:\(self)")
println("w(x):\(self.frame.width), h(y):\(self.frame.height)")
self.backgroundColor = UIColor.whiteColor() // 背景色
// 画面サイズで、物理空間を設定
self.physicsBody = SKPhysicsBody(edgeLoopFromRect: CGRect(x: 0, y: 0, width: size.width, height: size.height))
let node1 = SKLabelNode(text: "文字列") // 文字列
node1.fontName = "Copperplate-Bold"
node1.fontSize = CGFloat(20)
node1.fontColor = SKColor.cyanColor()
node1.position = CGPoint(x: 420, y: 520)
// 文字列に、丸い物理体を設定
node1.physicsBody = SKPhysicsBody(circleOfRadius: 25)
self.addChild(node1)
let node2 = SKSpriteNode(imageNamed: "Spaceship.png") // 画像
node2.size = CGSize(width: 40, height: 40)
node2.position = CGPoint(x: 420, y: 430)
// 画像に、画像の輪郭で物理体を設定。
var texture = SKTexture(imageNamed: "Spaceship.png")
node2.physicsBody = SKPhysicsBody(texture: texture, size: CGSize(width: 40, height: 40))
self.addChild(node2)
// パス
let node3 = SKShapeNode(ellipseInRect: (CGRectMake(0.0, 0.0, 100, 30)))
node3.fillColor = SKColor.blackColor()
node3.position = CGPoint(x: 370, y: 315)
// パスに、四角形の物理体を設定。
node3.physicsBody = SKPhysicsBody(rectangleOfSize: CGSize(width: 100, height: 30))
self.addChild(node3)
}
}
まとめ
SpriteKit を使い、基本画面である SKView の上に SKScene を配し、この SKScene の上に SKNode を配置し、文字列・画像・パスを表示し、アニメーションや、2D物理シミュレーションを実行してみました。
簡単なコードで実現できるのが魅力ですね。