【Swift】SpriteKitの使い方。ノードをシーンに追加してゲーム画面を表示する。【Swift】SpriteKitの使い方。ノードをシーンに追加してゲーム画面を表示する。2020年6月16日SpriteKitとは本記事からSpriteKitの説明を開始する。SpriteKitとは、2Dゲーム開発用のフレームワークである。SpriteKitを使うと、画像が他の画像に触れたときの動きを実装したり、画像に重力をかけて落下させたりなどアクションゲームには欠かせない動きを簡潔に実装できるようになる。アイディア次第ではアクションゲームに限らず、アプリの演出などにも使えそうだ。UI部品配置との違い前回までの記事は、下図のようにUIView(以下、ビュー)にUI部品を配置し、部品をタップしたときの動きなどを実装した。SpriteKitでは、下図のように部品(SKNode)をSKScene(ゲームのシーンごとに用意するクラス)に追加し、そのSKSceneをSKView(ビューを継承したクラス)の現在シーンに設定することでゲーム画面が表示される。ゲームのシーンを切り替えるにはSKViewの現在シーンを変更する。ちなみに接頭辞のSKはSpriteKitの略。シーンを画面に表示してみる実際にシーンを画面に表示してみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる人はご利用下さい。Application」でプロジェクトを作成し、検証で使う画像を追加しておいただけです。下図赤枠の「Main.storyboard」を選択、黄緑枠の「View」を選択、紫枠のアイデンティティインスペクタボタンを押して設定画面を表示し、Classに「SKView」を入力する。これで、ビューコントローラーのルートビューにSKViewが使われるようになった。メニューから「File」⇒「New」⇒「File...」を選択する。File」を選択し、「Next」ボタンを押す。Asに「TestScene」を入力する。保存場所がプロジェクトフォルダであることを確認し、「Create」ボタンを押す。これで、TestScene.swiftというファイルがプロジェクトに追加された。TestScene.swiftを以下のコードに変更する。TestSceneクラスが現在シーンに設定されたときにdidMoveToViewメソッドが呼び出されるので、そのメソッドで背景画像と鳥画像のノードを作成し、シーンに追加している。//背景画像のノードを作成する。//背景画像のサイズをシーンのサイズと同じにする。//鳥のノードを作成する。//ノードをシーンに追加する。{//背景画像のノードを作成する。"mountain")//背景画像のサイズをシーンのサイズと同じにする。self.frame.size//鳥のノードを作成する。"bird1")//ノードをシーンに追加する。self.addChild(backNode)self.addChild(birdNode)}}ViewController.swiftを以下のコードに変更する。SKViewと同じサイズのSKSceneインスタンスを生成し、現在シーンとして設定している。//SKViewを取得する。//SKViewと同じサイズのSKSceneインスタンスを生成する。//現在シーンを設定する。{super.viewDidLoad()//SKViewを取得する。SKView//SKViewと同じサイズのSKSceneインスタンスを生成する。TestScene(size:skView.frame.size)//現在シーンを設定する。skView.presentScene(scene)}}この段階でシミュレーターを実行すると、背景と鳥の画像が画面の左下に表示される。0)がフレームの左下にあるためである。0)から水平方向にx、垂直方向にy進んだ座標に部品の中心があることを表している。座標を扱う場合は混乱しないように注意しよう。背景と鳥の画像を画面中央に表示するには、TestScene.siwftを以下のコードのように変更する。各ノードのpositionプロパティにシーンの中心座標を設定した。//背景画像のノードを作成する。//背景画像のサイズをシーンと同じにする。//背景画像の位置をシーンの中央にする。//鳥のノードを作成する。//鳥の位置をシーンの中央にする。//ノードをシーンに追加する。{//背景画像のノードを作成する。"mountain")//背景画像のサイズをシーンと同じにする。self.frame.size//背景画像の位置をシーンの中央にする。CGRectGetMidY(self.frame));//鳥のノードを作成する。"bird1")//鳥の位置をシーンの中央にする。CGRectGetMidY(self.frame));//ノードをシーンに追加する。self.addChild(backNode)self.addChild(birdNode)}}下図は実行結果これからしばらくはSpriteKitの記事を続ける。【Swift】SpriteKitの使い方。シーンを重ねて表示する。...【Swift】SpriteKitの使い方。物理ボディにバネをつけたかのように振動させる。...【Swift】SpriteKitの使い方。8方向隣接グループを使ってタイルをサクサク配置する。...【Swift】SpriteKitの使い方。物理ボディをクネクネさせながら進ませる。...【Swift】SpriteKitの使い方。シェイプノードを使って多角形や円を描画する。コメントをキャンセルメールアドレスが公開されることはありません。