Sceneファイルの使い方。ストーリーボードのようにノードをマウスで運んで配置する。Sceneファイルの使い方。ストーリーボードのようにノードをマウスで運んで配置する。ノードを追加する処理をソースコードで実装したが、ノードの数が増えてくると座標の把握が大変だ。Sceneファイル(以下、SKSファイル)を使えば、ストーリーボードのようにノードをマウスで運んで好きな場所に配置できるようになる。SKSファイルを追加する実際にSKSファイルを使ってシーンを画面に表示してみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。前回の手順と同様の流れでTestScene.swiftまでを作成しています。⇒「テスト用プロジェクト」メニューから「File」⇒「New」⇒「File...」を選択する。Scene」を選択し、「Next」ボタンを押す。Asに「TestScene」を入力する。保存場所がプロジェクトフォルダであることを確認し、「Create」ボタンを押す。これでTestScene.sksというSKSファイルがプロジェクトに追加される。SKSファイルにノードを追加する下図赤枠の「TestScene.sks」を選択すると中央に灰色の画面が表示される。そこに表示されている黄色い枠がシーンの領域で、枠内に配置したノードが画面に表示される。この画面のことを巷ではシーンエディタという。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、SizeのWに「500」、Hに「400」を入力する。これはシーンのサイズを幅500×高さ400にする設定である。ビューのサイズ(幅320×高さ568)と異ならせたのは、シーンの拡大縮小を検証するためである。Sprite」をシーンに配置する(下図赤矢印)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Textureに「mountain」を入力する。PointにX「0」、Y「0」を入力する。これで背景画像がシーンの枠いっぱいに表示された。Sprite」をシーンの好きな場所に配置する(下図赤矢印)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Textureに「bird1」を入力する。これでシーン内に鳥が表示された。同じようにして、シーン内の好きな場所に「bird2」を配置する。Point(アンカーポイント)とは基準位置のことで、ノードの座標はアンカーポイントの位置を示している。拡大縮小や回転させるときの中心位置になる。値は0.0〜1.0の値を設定する。下図のように、X「0.0」、Y「0.0」は画像の左下がアンカーポイントになり、X「1.0」、Y「1.0」は画像の右上がアンカーポイントになる。0.5」でノードの中心がアンカーポイントになる。SKSファイルを指定してシーンを作成するViewController.swfitを以下のコードに変更する。SKSファイルを指定してSKSceneインスタンスを生成している。//SKViewを取得する。//SKSファイルを指定してSKSceneインスタンスを生成する。//現在シーンを設定する。{super.viewDidLoad()//SKViewを取得する。SKView//SKSファイルを指定してSKSceneインスタンスを生成する。"TestScene")//現在シーンを設定する。skView.presentScene(scene)}}TestScene.swiftは変更無し。{}シミュレーター(iPhone5)を起動すると下図になる。シーンの右端ががっつり見切れた。先ほど設定したように、シーンのサイズが400×500なのに対し、画面のサイズは330×568である。そのため、下図のように画面左下を基準にして330×568に収まりきらなかった部分が見切れたということだ。スケールモードを変更する「シーンとビューのサイズを同じにしないと画面サイズいっぱいに表示できないのか?」と心配しそうだが、シーンのscaleModeプロパティでシーンの表示領域を変更できる。以下にscaleModeプロパティの設定例を記述する。Fillビューの縦、横両方のサイズとピッタリ同じになるようにシーンのサイズが拡大、縮小される。シーンに配置しているノードも一緒に拡大、縮小される。具体的には以下のコードをviewDidLoadメソッドに追加する。Swift//スケールモードを変更する。.Fill123//スケールモードを変更する。.Fill以下は実行結果。鳥がびよーんと縦長になるのが気になる。Fillビューの縦横の短い方の長さとノードの長さが一致するまで縦横比を維持しながらノードが拡大縮小される。Swift//スケールモードを変更する。.AspectFit123//スケールモードを変更する。Fillビューの縦横の長い方の長さとノードの長さが一致するまで縦横比を維持しながらノードが拡大縮小される。ノードの縦横比が異なる場合、ビューからノードがはみ出すことになる。Swift//スケールモードを変更する。.AspectFill123//スケールモードを変更する。.AspectFill下図は実行結果。Fillノードを拡大縮小せずに、シーンのサイズをビューに合わせてリサイズする。これがデフォルトの設定。Swift//スケールモードを変更する。.ResizeFill123//スケールモードを変更する。.ResizeFill今回の例では、シーンのサイズと同じノードがあるのでリサイズは行われない。ゆえに、そのままのサイズでシーンが表示され、画面右端が見切れた。下図のようにノードのサイズを変更したらどうなるか。シーンのサイズは幅400×高さ500のまま、背景ノードのサイズを幅320×高さ568、鳥ノードを別の場所に移動した。シーンがリサイズされて背景画像が画面いっぱいに表示された。【Swift】SpriteKitの使い方。ノードをシーンに追加してゲーム画面を表示する。本記事からSpriteKitの説明を開始する。...【Swift】SpriteKitの使い方。SKEffectNodeを使って画像をぼかす。...【Swift】SpriteKitの使い方。8方向隣接グループを使ってタイルをサクサク配置する。...【Swift】SpriteKitの使い方。タイトル画面、プレイ画面、結果画面の順番でシーンを切り替える。...【Swift】Spritekitの使い方。衝突した位置にパーティクルを放出する。コメントをキャンセルメールアドレスが公開されることはありません。