【Swift】SpriteKit Sceneファイルの設定。カメラノードを使って画面をスクロールする。(Swift 2.1、XCode 7.2)
SpriteKit Sceneのアトリビュートインスペクタ
本記事では、SpriteKit Sceneファイル(以下、SKSファイル)のアトリビュートインスペクタについて説明する。
SKSファイルの作り方の基本については前回記事を参照されたし。⇒「前回記事」
アトリビュートインスペクタを開くには、SKSファイルを選択したあとに下図赤枠のアトリビュートインスペクタボタンを押す。
どのノードも選択していない状態では、下図のようにScene(以下、シーン)の設定項目が表示される。
設定項目を1つずつ説明する。ただし、仕様が明確になっていないものは記載しない。
検証に利用したXCodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。
⇒「テスト用プロジェクト」
Name
シーンの名前。ソースコードから名前を参照したり、ノードの設定で親ノードを指定するときに利用する。
Camera
シーンの表示にカメラを使う場合はカメラノードの名前を指定する。
カメラノードを使うと、シーンの一部分をズームアップして特定のノードを追いかけるように画面をスクロールする演出が可能だ。
実際にカメラノードを設定してみよう。
鳥の上にカメラノードを配置する(下図赤矢印)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Nameに「test_camera」、Parentに「test_scene」、ScaleにX「0.7」、Y「0.7」を入力する。
シーン枠外(灰色背景)をクリックしてカメラの選択を外す。下図赤枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Cameraに「test_camera」を入力する。これで、カメラが鳥を追随するようになった。
TestScene.swiftを以下のコードに変更する。
画面がタッチされたらタッチされた座標に鳥ノードを移動するようにした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// // TestScene.swift // import Foundation import SpriteKit class TestScene:SKScene { //画面タッチ時の呼び出しメソッド override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { //タッチした座標を取得する。 let location = touches.first!.locationInNode(self) //タッチした位置まで移動するアクションを作成する。 let action = SKAction.moveTo(CGPoint(x:location.x, y:location.y), duration:1.0) //SKSファイルに配置した鳥ノードを取得する。 let bird = self.childNodeWithName("bird1") as? SKSpriteNode //アクションを実行する。 bird?.runAction(action) } } |
以下は実際のプレイ動画。鳥の移動とともに画面表示が移動するようになった。
Color
シーンの背景色。ノードが配置されていない箇所はこの色が画面に表示される。
Size
シーンのサイズ。「W」は幅(Width)、「H」は高さ(Height)を表している。
このサイズが必ず画面に表示されるとは限らない。シーンのサイズ内がすべて表示されない事象については次の記事も参照されたし。⇒「記事」
Anchor Point
シーンのアンカーポイント。アンカーポイントとは中心座標のことである。0.0〜1.0の間で表現される。
デフォルトのアンカーポイントは(0.0, 0.0)なので、ノードの座標はシーン左下を基準座標として水平方向にX、垂直方向にY進んだ場所として表される。アンカーポイントを変更すれば基準座標を好きな位置に持っていける。
Gravity
重力加速度を水平方向(X)と垂直方向(Y)で指定する。
デフォルトはX「0」、Y「-9.8」なので、画面下を地面と見なすと地球の重力と同じで、1秒あたり9.8m/s加速する。
Show Physics Boundaries
チェックを入れた場合、ノードの境界線が表示される。下図のように、ノードの周りに描かれている水色線が境界線で、ノード同士がぶつかったと判定されるのは境界線が触れたときである。実際にアプリを起動したときは境界線は表示されない。
ノードの設定で境界線は四角や丸、画像のフチなどが設定できる。境界線の種類と設定については別の記事で説明する。
Show Node Names
チェックを入れた場合、ノードを選択したときに吹き出しでノード名が表示される。
Use Camera Node
明確になれば追記する。チェックを外してもカメラノードを使うことはできる。
Custom Shader
明確になれば追記する。