
入門教材#2 シューティングをつくってみよう
ワークづくりの基本である「コロコロゲーム」がつくれるようになったら、次はステップアップして「シューティングゲーム」をつくってみましょう。
シューティングゲームとは、一般的に敵や標的に対してビームや弾を撃つゲームです。
シューティングゲームをつくることで、スプリンギンの機能である属性をアイテムにつけるだけでなく、属性のついたアイテムを組み合わせて関係をつくる方法を学ぶことができます。
これを学ぶことでイベント型のプログラミングを理解することができ、つくれるワークの表現の幅が広がります。
①ワークに使用するアイテムを描く
コロコロゲーム同様、まずはワークに使用するアイテムを作成します。
今回はシューティングゲームなので、コロコロゲーム以上にアイテムが必要になります。また、今回は背景の設定も行うので、背景もアイテムとして作成しましょう。
なにを描いていいかわからない場合は、まず動画で描かれているアイテムをマネして描いてみましょう。(アイテム作成から再生されます)
▼使用するアイテム
・撃つもの(発射するもの)
・撃たれるもの(敵・標的)
・バー
・ボタン(発射/方向変更)
・ゲームクリアの文字
・ゲームオーバーの文字
・背景

②画面に配置してみる
次に、作成したアイテムをワーク作成画面に配置していきます。(アイテム配置から再生されます)
まずはゲーム画面に必要なアイテムを配置していきます。
配置するときにはボタンの押しやすさなどに気をつけ、位置や大きさを調整しましょう。
画面下に方向変更用のボタンを置くときには、便利な機能であるアイテムの反転&コピーを使いましょう。

右まわりの矢印をタップし、出てきたメニューの真ん中にある、〇が重なっているアイコンがアイテムをコピーできるボタンです。そのアイテムにすでにつけられた属性ごとコピーできます。

コピーしたアイテムは同じ向きの矢印のままなので反対向きにする必要があります。そこで使うのがコピーアイコンの3つ隣にあるアイテムを反転できるボタンです。
これをタップするとアイテムが反転されます。
同じアイテムをたくさん使ったり、反転したものを使いたいときはぜひ活用してください。
③基本の属性を設定する
では、次にアイテムの基本の属性を設定しましょう。
今回は属性を組み合わせて使っていくので、細かい部分を説明していきます。(動きをつけるところから再生されます)
まずは撃つものと撃たれるものに物理無効という属性をつけます。

物理無効をつけると他のアイテムとぶつかってもはね返らなくなったり、重力の影響を受けなくなったりと、あらゆる物理的な影響を受けなくなります。
(他のアイテムとぶつかってもすり抜けるようになりますが、属性の衝突はおこります)
また、バーやボタンには前回のコロコロゲームでもやったピン止めをしておきましょう。
④背景を設定しよう
次は背景の設定をしましょう。
背景の設定は画面下のメニューにある背景ボタンからできます。(背景を設定するところから再生されます)
背景ボタンをタップすると、背景を設定する画面がでてきます。

左上のアイテムリストから最初に作成しておいた背景を選択し配置します。背景を一色にしたい場合は、アイテムを画面より大きく広げて設定しましょう。

設定し終わって左下の背景設定終了のボタンを押すと、最初につくったゲームの背景が設定された状態ででてきます。

これで背景の設定は完了です。
⑤「撃つ」しくみをつくる
次は、シューティングゲームのメインである「撃つ」しくみをつくっていきます。
このしくみにはゴーストという属性を使います。(ゴーストをつけるところから再生されます)
ゴーストとは名前の通り、お化けのように分身を発射させることのできる属性です。この分身を発射して、敵や標的を撃ちます。

ゴーストをタップすると、ゴーストの設定画面が開きます。
ゴーストをどの向きで、どのくらいの速さで発射するかを設定することができます。遠くに設定すればするほど速く発射されるので、自分の好きな速さに設定してみましょう。
ゴーストの設定が完了したら、今度はボタンを押すとゴーストが発射されるしくみをつくります。

真ん中の矢印ボタンをタップし、メニューから連鎖(全て)をタップします。この属性のついたアイテムにイベント(押されるなど)が起こると、対象にしたアイテムのイベントも発生させるという属性です。

撃つものを対象のアイテムに設定することで、真ん中の矢印をタップ→撃つもののイベントが発生し、ゴーストが発射されるというしくみができあがります。
設定が完了したら、再生ボタンを押して、撃てるかどうかを試してみましょう。
⑥「撃たれる」しくみをつくる
撃つもののしくみができたので、今度は「撃たれる」しくみが必要になります。シューティングゲームでは撃たれると敵や標的は消えます。そのしくみをつくっていきましょう。
このしくみには消滅という属性を使います。(消滅をつけるところから再生されます)
まず、撃たれるものをタップしメニューを開きます。真ん中の上から2つ目にある円状の消えたようなアイコンが消滅なのでそれをタップします。

撃たれるものに消滅の属性が追加されたので、次は撃たれたら消えるしくみをつくります。

撃つものをタップしメニューを開き、赤枠で囲われている接触という属性をつけます。これは、接触した対象がアイテムのイベントを発生させるという属性です。これで、撃つものから出たゴーストが撃たれるものに触れると消えるというしくみができあがります。
設定が完了したら、再生ボタンを押して、撃ったあとに撃たれたものが消えるかどうかを試してみましょう。
⑦方向変更をする
次は、撃つものの方向を変更できるように回転ボタンをつけます。これには動力という属性を使います。これは動かしたい方向にアイテムを動かせる属性です。(方向変更をつけるところから再生されます)
まずは右向きの方向変更ボタンをタップし、メニューを開きます。
メニューの中から右まわり矢印の動力アイコンをタップします。すると、アイテムを選択する画面になるので、動かしたいアイテム=撃つものを選択しましょう。
これで、右回りに動かすことができます。

同じことを左向きの変更ボタンにも行います。
左右どちらも設定が終わったら再生ボタンを押して方向変更ができるか確認してみましょう。
⑧撃たれるものを動かす
次は撃たれるもの=敵が自動で動く設定をします。
これには移動という属性を使います。これを設定すると、設定した動きに合わせてアイテムを移動させることができます。(移動をつけるところから再生されます)
まずは、敵をタップしてメニューを開きます。そして下の画像の赤い四角で囲まれたアイコンをタップします。これが移動です。

移動をタップすると、移動設定画面が開きます。
画面上の緑のバーが残っている間に、画面の中で動かしたい道筋を描いて動きを設定することができます。
今回は最後にオレンジのバー部分にたどりつくように描いてみましょう。

動きを設定し終わったら、再度敵をタップしてメニューを開きます。
今度はオートを設定します(下の画像の赤い四角で囲まれたアイコンをタップ)。これを設定すると、先ほど設定した移動をゲームが始まると同時に自動的に発生させることができます。

ここまで設定ができたら、動く敵に合わせて狙いを定めて撃つシューティングゲームの基本形ができました。
再生ボタンを押して動きを確認してみましょう。
⑨ゲームオーバー/ゲームクリアを設定する
次は、ゲームオーバー/ゲームクリアの画面を設定しましょう。
今回のゲームでは、
・敵がバーに触れたらゲームオーバー
・敵をやっつけたら(撃ったら)ゲームクリア
という設定にします。(ゲームオーバー/ゲームクリアの画面を作成するところから再生されます)
まずは、ゲームクリア/ゲームオーバーの画面を作成します。
画面の追加は右上の+ボタンをタップすることでできます。

アイテム作成の際につくっていた「GAME OVER」の文字を配置しましょう。

同じように「GAME CLEAR」の画面を追加し、画面の準備は完了です。
次は「敵がバーに触れたらゲームオーバー」の設定をします。
この設定にはシーンチェンジという属性を使います。(シーンチェンジの設定から再生されます)
オレンジのバーをタップしメニューを開き、シーンチェンジを押します。

シーンチェンジを押すと、シーン(画面)の選択画面が出てくるので、バーに敵がふれた後にいかせたい「GAME OVER」のシーンを選択し決定します。
次に敵をタップしメニューを開きます。そこで接触を選択し、敵がバーにふれるとイベントが発生するという設定を行います。

接触を選択すると、アイテムの選択画面になります。今回は敵がバーにふれるとイベントが発生するようにするので、バーを選択しましょう。

これで「敵がバーに触れたらゲームオーバー」の設定は完了です。
再生ボタンを押して、ちゃんと画面が切り替わるのか試してみましょう。
次は「敵をやっつけたら(撃ったら)ゲームクリア」の設定をします。
ここでもシーンチェンジを使いますが、今回はさらにフラグという属性も使います。少し複雑なので、細かく説明していきます。(シーンチェンジを作成するところから再生されます)
このゲームは敵をやっつけたらゲームクリアなので、シーンチェンジの属性を設定するアイテムが画面上にありません。そのため、隠しアイテムを設定します。
今回は背景に同化させて目立たなくしようと思うので、背景に使用したアイテムを隠しアイテムとして使います。

隠しアイテムは他のアイテムの位置にかぶったりしなければ、どこに配置しても大丈夫です。今回は左下端に配置しました。(黄色い枠部分)
隠しアイテムに触られてしまうといけないので、物理無効とタッチトリガー無効&タッチ移動無効を設定します。(赤枠部分)
これを設定しておくことで、ゲームのプレイヤーに隠しアイテムを触れさせないようにすることができます。
上記の設定ができたら、シーンチェンジを設定します。

「GAME CLEAR」の画面に移動するように設定しましょう。
これで、隠しアイテムになにかが起こればゲームクリアの画面に移動する設定ができました。
次に、隠しアイテムに敵をやっつけたときのイベントを設定します。
ここで使うのがフラグという属性です。フラグを使うと、対象のアイテムが消えたとき自分のイベントを発動させることができます。(フラグをつけるところから再生されます)
まずは、隠しアイテムをタップしメニューを開きます。
メニューを開き、旗のアイコンのフラグを押します。

フラグを押すと、アイテムの選択画面が出てくるので敵を選択しましょう。
選択出来たら決定ボタンを押してフラグ付け完了です。

これで「敵をやっつけたらゲームクリア」の設定は完了です。
こちらも再生ボタンを押して、ちゃんと画面が切り替わるのか試してみましょう。
⑩敵を増やしてゲームを面白くしてみよう
最後は、敵の数を増やしてもっと面白いシューティングゲームにしてみましょう!ここで、②の画面配置で使用したコピーを活用します。(コピーすることろから再生します)
敵をタップし、メニューからコピーを押します。コピーした敵を画面に配置していきましょう。

コピーした敵にはこれまで設定されていた属性などすべてが引き継がれます。動きはバラバラに設定したいので、再度移動をつけなおしましょう。いったんタップして属性を外し、再度タップするとつけなおすことができます。

動かす速さも反映されるので、ゆーっくりな敵や、すごく素早い敵を設定することもできます。ゲームがおもしろくなるように、さまざまな動きをつけてみてください。
これでシューティングゲームの完成です。
・撃つものの移動を回転じゃなく左右に平行移動する
・ゲームオーバー/ゲームクリアの条件を変える
などを工夫してみるだけで、またひと味違うゲームになります。
個性を生かしたシューティングゲームをつくってみましょう!
スプリンギンは下のリンクからダウンロード可能です。
この機会にぜひお試しください。
◆ダウンロードはこちら


▼その他フェスで学べるコンテンツはこちら
▼スプリンギン・フェス シーズン2の最新情報はこちら