【Swift】SpriteKitの使い方。ノードをシーンに追加してゲーム画面を表示する。(Swift 2.1、XCode 7.2)

2020年6月16日

SpriteKitとは

本記事からSpriteKitの説明を開始する。

SpriteKitとは、2Dゲーム開発用のフレームワークである。

SpriteKitを使うと、画像が他の画像に触れたときの動きを実装したり、画像に重力をかけて落下させたりなどアクションゲームには欠かせない動きを簡潔に実装できるようになる。アイディア次第ではアクションゲームに限らず、アプリの演出などにも使えそうだ。

 

UI部品配置との違い

前回までの記事は、下図のようにUIView(以下、ビュー)にUI部品を配置し、部品をタップしたときの動きなどを実装した。

ビューに部品を配置するイメージ

 

SpriteKitでは、下図のように部品(SKNode)をSKScene(ゲームのシーンごとに用意するクラス)に追加し、そのSKSceneをSKView(ビューを継承したクラス)の現在シーンに設定することでゲーム画面が表示される。ゲームのシーンを切り替えるにはSKViewの現在シーンを変更する。

ちなみに接頭辞のSKはSpriteKitの略。

シーンとノードの追加

シーンを画面に表示してみる

実際にシーンを画面に表示してみよう。

以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる人はご利用下さい。準備したといっても「Single View Application」でプロジェクトを作成し、検証で使う画像を追加しておいただけです。
⇒「テスト用プロジェクト

 

下図赤枠の「Main.storyboard」を選択、黄緑枠の「View」を選択、紫枠のアイデンティティインスペクタボタンを押して設定画面を表示し、Classに「SKView」を入力する。

これで、ビューコントローラーのルートビューにSKViewが使われるようになった。

ルートビューをSKViewに変更する

 

メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、iOSの「Source」⇒「Swift File」を選択し、「Next」ボタンを押す。

テンプレートから「Swift FIle」を選択する

 

ファイル名を入力する画面が表示されるので、Save Asに「TestScene」を入力する。そして、保存場所がプロジェクトフォルダであることを確認し、「Create」ボタンを押す。これで、TestScene.swiftというファイルがプロジェクトに追加された。

新規Swiftファイルのファイル名を入力する

 

TestScene.swiftを以下のコードに変更する。

TestSceneクラスが現在シーンに設定されたときにdidMoveToViewメソッドが呼び出されるので、そのメソッドで背景画像と鳥画像のノードを作成し、シーンに追加している。

 

ViewController.swiftを以下のコードに変更する。

SKViewと同じサイズのSKSceneインスタンスを生成し、現在シーンとして設定している。

 

この段階でシミュレーターを実行すると、背景と鳥の画像が画面の左下に表示される。

画像が左下に表示される

 

画面左下に表示される理由は、SpriteKitの座標の基準点(0, 0)がフレームの左下にあるためである。座標(x, y)は、基準点(0, 0)から水平方向にx、垂直方向にy進んだ座標に部品の中心があることを表している。

一方、UIKitではフレームの左上が座標の基準点(0, 0)になる。座標を扱う場合は混乱しないように注意しよう。

UIKitとUISpriteの座標の違い

 

背景と鳥の画像を画面中央に表示するには、TestScene.siwftを以下のコードのように変更する。

各ノードのpositionプロパティにシーンの中心座標を設定した。

 

下図は実行結果

背景と鳥の画像が画面中央に表示された

 

これからしばらくはSpriteKitの記事を続ける。