第15回 PlaygroundとSprite Kitで遊んでみよう（中編）

パーティクルでリアルな泡を表現

前回はプレイグラウンドの上で、スプライト・キット（Sprite Kit）という2Dゲーム制作用のフレームワークを使って、熱帯魚の画像を表示して上下に動かしてみました。今回はその背景に水中の泡を出すことで、より本格的なアクアリウムを作ってみましょう。水に見立てた青い画面で、下から上に移動しながら消えていく泡を表現したいと思います。

泡のように、同じオブジェクトを位置やスピードだけ変えて多数同時に表示したいときには、「パーティクル」という機能を使います。パーティクルを使って同じような画像をいくつも重ねるだけで、まるで本物のような炎や煙などの表現ができます。RPGゲームの戦闘シーンなどで、光の粒が画面いっぱいに広がる光景を目にすることも多いですが、これにもパーティクルが使われています。

パーティクルは数や色、動きといったパラメータをほんの少し変化させるだけで、まったく違った見た目に仕上がります。変更した結果をすぐに確認できるプレイグラウンドは、パーティクルととても相性がいいのです。

【STEP 1】プレイグラウンドを作ろう

（１）プレイグラウンドを作成するには、Xcodeのメニューから［File］［New］［Playground］を実行します。

（２）［Name］エリアに「MyPlayground」と入力し、［Platform］には［OS X］を選択しましょう。右下の［Next］ボタンを押して、保存場所を選んでプレイグラウンドを作成してください。

（３）プレイグラウンドのウインドウのツールバー右側にある左から2つ目のボタンを押して、ウインドウの右側に「タイムライン」と呼ばれる画面を出しておきましょう。ウインドウの左側にスウィフトのコード編集画面、中央に実行結果画面、右側にタイムライン画面が表示されます。

【STEP 2】キットの準備

（１）まずはスプライト・キットが使えるように、図のようにコードを書いてください。画面表示を担当するビューと、ゲーム画面を表すシーンの2つのオブジェクトを作成して、背景色をセットしたあと、XCPlaygroundPageというクラスを使って、ビューがタイムラインに表示されるようにします。

（２）コードに間違いがなければ、右側のタイムライン上に青いシーンのビューが表示されます。これで準備は完了です。このシーンに泡を追加して、動かしていきましょう。

【STEP 3】パーティクルで泡を表示する

（１）泡を表示するためには、「エミッタ」と呼ばれるパーティクルを作るための装置が必要です。図のコードを書いてエミッタを作成して、それをシーンに追加します。エミッタには、パーティクルの色、サイズ、消えるまでの時間、1秒ごとに生まれる数、スピード、スピードの変化量、位置、位置の変化量を設定します。

（２）ためしに「エミッタ.particleBirthRate = 5」と書いてある行のコードを「エミッタ.particleBirthRate = 50」と書き換えてみましょう。1秒ごとに生まれる数が増えて画面いっぱいに泡が出てきます。ぜひほかの数値も書き換えて、泡の動きがどのように変わるかを試してみてください。

（３）シーンに追加されたエミッタがパーティクルを作るようになると、図のように青い画面上に白い点が現れて、上のほうに移動し始めます。スピードの変化量が設定してありますので、上がるのが速い泡も遅い泡もあります。

（４）前号で解説した手順で魚の画像をプレイグラウンドに追加してから、今回のコードの最後に、これも前号のSTEP3で書いたコードを追加すると、泡と同時に魚も現れて移動し始めます。涼しげなアクアリウムが完成しましたね！

（５）現在、アニメーションは10秒で終了するようにしていますが、プレイグラウンドのウインドウの左下にある停止ボタンと実行ボタンを使えば、何度でも実行することができます。なお、アニメーションを繰り返し実行していると、タイムライン画面が止まってしまうことがあります。そのような場合には、Xcodeを再起動して、プレイグラウンドを開き直してみてください。