Springin’でゲームを作ろう!(7) ブロック崩しを作ろう

ブロック崩しを作ろう

今日は前回までに勉強したことを使って、ブロック崩しゲームを作ってみましょう。

Springin'(スプリンギン)SHIKUMI Designさんが出しているiPhone/iPad用アプリです。
公式サイトはここです。
無料で楽しめますので、親子で是非チャレンジしてみてください!
注意!
Springin’はiPhoneとiPadで少しメニューの配置などが異なりますが、基本的な動作は同じです。
本サイトでは、画面の見易さを考慮してiPhoneSEで撮影した画像を載せています。

ここに書いてあるSpringin’のワークについては、こちらのリンクからダウンロードできますよ!
Springin’から↓のQRコードを読み込んでもOKです?

クリックで拡大

クリックで拡大

概要

画面とそれぞれのアイテムの概要を説明します。

画面概要

画面概要

名前 機能
ブロック ボールが当たると消えるブロックです。
ボール 画面内を飛び回るボールです。ブロックに当たるとブロックが消えます。
スタートボタン ゲームを開始するボタンです。
画面の枠 画面の枠です。ボールが当たると跳ね返ります。
バー 右移動、左移動ボタンで左右に動くバーです。ボタンが当たると跳ね返ります。
左移動 タップすることでバーが左に移動します。
右移動 タップすることでバーが右に移動します。

アイテムを作ろう

まずはゲームに使用するアイテムを作りましょう?

画面の枠

画面の枠を作成します。これがないとボールが画面外に飛んで行っちゃいますね?

「まっすぐ線が引けない〜?」というかたは画面の縁を利用するといいですよ?

枠を作成

枠を作成

ブロック

ボールに当たると消えるブロックを作成します。
これも画面の縁を利用すると良いでしょう。

⬇️の画像では縦の線になっていますが、配置するときに横に変更できますので問題ありません?
もちろん、横で作成してもいいですよ!

ブロックを作成

ブロックを作成

ボール

ボールを作ります?
ボールを作るコツは、丸を描くのではなく、ペン先を一番太くしてポンっと置くだけ?

大きさは配置してからスワイプで調整しちゃいましょう♪

ボールを作成

ボールを作成

移動ボタン

右移動、左移動のボタンを作ります。どちらか一つだけ作ってください。もう一つは回転して作れます。
作り方は、まず全体を塗ってから、消しゴムで<を書くといいですよ?
大きさは後で調整可能です。もちろん、ご自身でサイズを決めて書いても大丈夫です?

移動ボタンを作成

移動ボタンを作成

スタートボタン

スタートボタンも同じように作っちゃいましょう?

スタートボタンの作成

スタートボタンの作成

アイテムの配置

では、作成したアイテムを配置していきます✨

画面の枠

画面の枠を配置します。できるだけ画面ギリギリに寄せると、画面が広く使えるようになりますよ?

枠の大きさが足りない場合は、2本指でスワイプして拡大・縮小してみてくださいね♪

このように拡大して

このように拡大して

そこから画面端までドラッグして画面ギリギリまで寄せちゃいます?

画面端へ

画面端へ

最後に枠の属性を設定します。
ここでは「固定」と「高反発」の2つを設定してくださいね♪

属性を設定

属性を設定

残りの画面上と画面右の枠も同様に設定してくださいね?
これで画面の枠の配置は終了です‼️

ブロック

次はブロックを配置していきまーす?
が、その前に!!

ブロックにも属性が必要になります。ここで必要な属性は「固定」と「高反発」と「消滅」ですが、ブロックを置いて3つの属性を設定して、また一つブロックを置いて3つ属性を設定して…とやっていたら面倒臭いので(?)、まとめて設定しておきましょう?

アイテム一覧のブロックをタップすると、属性一覧が表示されます。ここでブロックの共通した属性として設定できますので、画面に配置してから属性を設定する必要がなくなります?

ブロックの共通属性を設定

ブロックの共通属性を設定

属性が設定できたら、画面に配置していきましょう?
数が多くて大変ですが、頑張ってください?
画面の拡大を使うと整理しやすいですよ〜

拡大して整理

拡大して整理

とりあえずここ⬇️まで頑張りましたっ (๑˃̵ᴗ˂̵)و ‼️

ブロックを配置

ブロックを配置

ボール

次はボールを配置します。
場所は……ぶっちゃけどこでも構いませんwww

ただし、⬆️のアイテム作成で作ったやり方だとボールが小さいので、ちょっとだけ拡大しといてくださいね?
画面を拡大して、2本指でタップ&スワイプするとやりやすいですよ✨

ボールを拡大

ボールを拡大

移動ボタン

移動ボタンは画面下にそれぞれ配置します。一つは画像を回転させてくださいね♪
でないと矢印の方向がおかしくなっちゃうので?

移動ボタンを配置

移動ボタンを配置

バー

ボールを跳ね返すバーを配置します。これは画面下中央に置いてください。
(スクショ撮り忘れて画面なしです?上の概要を参考にしてください?)

スタートボタン

最後にスタートボタンを配置しましょう?
これはボールのすぐ下に置いてくださいね。理由は後で?

スタートボタンを配置

スタートボタンを配置

アイテムの属性設定

画面への配置が完了しましたが、これで完成ではありません。
ここからは必要な属性を設定していきましょう?
画面の枠、ブロックには属性を設定してありますので、それ以外の属性設定を見ていきますよ?

ボール

ボールには「接触」属性を設定します。

「接触」属性とは、自身(ボール)が他のアイテムに当たった時に他のアイテムのイベントを発生させるものです。
この場合「他のアイテム」とはブロックのことになりますので、次のように言い換えられます。

ボールがブロックに当たったら、ブロックの属性である「消滅」が発生する。

やってみましょう!

ボールをタップして、「接触」属性を選択します。

「接触」属性を設定

「接触」属性を設定

続けて、対象となるアイテムを設定していきます。ブロックをタップすると対象のアイテムになります。
全部のブロックをタップする必要がありますので、根気が必要ですが頑張ってください?

対象を設定

対象を設定

設定が終わったら画面右下の緑色のボタンをタップして決定してくださいね?

バー

バーには「固定」「高反発」「タッチ移動無効」の属性を設定します。
「固定」を設定しますが、後で移動ボタンで動かせるようになるのでご心配なくっ( •̀ .̫ •́ )✧

バーに属性を設定

バーに属性を設定

移動ボタン

移動ボタンには「固定」「高反発」「動力(左右)」を設定します。
「動力」属性とは、自身のイベントが発生したら、他のアイテムを移動させるイベントを発生させるものです。
この場合「他のアイテム」とはバーのことになりますので、次のように言い換えられます。

移動ボタンがタップされたら、バーが左(または右)に移動する。

左ボタン

まずは左ボタンから。
属性の「固定」「高反発」を設定したら、「動力」の左矢印をタップしてみてください。

動力(左)

動力(左)

これをタップして対象のアイテムにバーを設定します。
設定が終わったら画面右下の緑色のボタンを押して決定してくださいね?

動力(左)を設定

動力(左)を設定

右ボタン

右ボタンも同様です✨
属性の「固定」「高反発」を設定したら、「動力」の右矢印をタップしてみてください。

動力(右)

動力(右)

タップして、バーを対象のアイテムにします。

動力(右)を設定

動力(右)を設定

スタートボタン

スタートボタンは「タップされたらボールを発射し、ボタン自身は消える」という属性を設定したいと思います?

まず「ボールを発射」する属性についてですが、これは「爆発」属性で実現可能です。

「爆発」属性

「爆発」属性


「爆発」属性は、他アイテムを弾きとばす属性で、自身に近ければ近いほど?威力?が増します。
なので、上のボールとスタートボタンの配置でできるだけ近づけましたが、もしボールのスピードが早すぎる場合は、この距離を少し離してみてくださいね♪

続いてスタートボタン自身を消す属性についてですが、これは「消滅」属性で実現できますね?

「消滅」属性

「消滅」属性

これでスタートボタンの属性が設定できました٩(๑❛ᴗ❛๑)۶

スタートボタンの属性

スタートボタンの属性

試してみよう

ここまでできたら、ゲームとしてはほとんど完成です?
試しにプレイしてみましょう‼️‼️
 
 
ちゃんと動きましたか?
動いた人、おめでとうございます?
動かなかった人は上の各属性を見直してくださいね?
大丈夫! ゆっくり見直せば必ず動くようになりますよ?

シーンを作ろう

さて、ここまででかなりゲームらしくなりましたが、

  • ブロックが全て消えた時
  • ボールが画面外に飛んで行った時

には、わざわざ手でストップボタンを押してゲームを止める必要があります?

一度ならいいですが、何度もやっていると面倒に感じてきますので、クリア画面やり直し画面を作って、それぞれの画面からゲーム画面に戻れるように改良しちゃいましょう?

シーンの作り方は、画面左上に上下の矢印が並んでいるところがありますので、そちらをクリックします。

シーン切り替え

シーン切り替え

アイテムメニューからシーンメニューに切り替わりましたね?
この状態で+ボタンを押すと新しいシーンが追加されます?

シーンメニュー

シーンメニュー

アイテムメニューに戻るには、再度画面左上の上下矢印をタップすると戻れますよ?

クリアシーン

ゲームをクリアした時のシーンを作成します。アイテムに「クリア」の文字と「もう一回」のボタンを作って、配置してみてください。
こんな⬇️感じでOKです(字が汚いのはご容赦ください?)

クリアシーン

クリアシーン

「クリア」には「固定」の属性を設定してください。

「もう一回」にはシーンチェンジの属性を設定します。

「シーンチェンジ」属性

「シーンチェンジ」属性

「シーンチェンジ」の属性をタップすると、画面選択ができるようになります。
ここでどの画面に戻るかを決めましょう。
ここではゲーム画面を設定してくださいね(っ*´∀`*)っ

ゲームシーンを選択

ゲームシーンを選択

ゲームオーバーシーン

ゲームオーバのシーンを作成します。アイテムに「ざんねん」の文字と「もう一回」のボタンを作って、配置してみてください。
こんな⬇️感じでOKです(字が汚い…?)

ゲームオーバーシーン

ゲームオーバーシーン

あとはゲームクリアシーンと同じです。
「ざんねん」と「もう一回」にそれぞれの属性を設定して、シーンチェンジの属性でゲーム画面を設定してください。

シーン設定

シーン設定

ここまででシーンの作成は完了です。
この後は、それぞれの条件に従って画面が切り替わるように設定していきましょう!

条件設定

シーンの作成ができましたので、後はそれぞれの条件に応じたシーン切り替えを作っていきます。

  • ボールが画面外に出た:ゲームオーバーシーンへ
  • ブロックが全部消えた:ゲームクリアシーンへ

それぞれ見ていきましょう?

ボールが画面外に出た

ボールが画面の外に出たらゲームオーバーシーンに変わるように設定します。

左右どちらでも構いませんが、画面の枠に対して属性を追加します。
ここでは画面右の枠に対して、「タッチ移動無効」「タッチトリガー無効」「フラグ」「シーンチェンジ」の属性を設定していきます。
それぞれ順番に説明しますね?

タッチ移動無効

アイテムをタップしても移動や拡大縮小ができなくなります。すでに「画面の枠」アイテムには「固定」属性が設定されていますが、これと合わせて全く動かないようになります。

タッチ移動無効

タッチ移動無効

タッチトリガー無効

アイテムがタップされてもイベントが発生しなくなります。
「画面の枠」アイテムにはまだイベントが設定されていませんが、この後「シーンチェンジ」の属性を設定します。
その時にタッチによって発動しないようにしたいので、この属性が必要になります。

タッチトリガー無効

タッチトリガー無効

フラグ

対象となるアイテムがなくなった場合に、自身のイベントが発生します。
ここではボールを対象アイテムとしてください。
(他にも色々な条件がありますが、今のところはこのように覚えてください)

フラグ

フラグ

シーンチェンジ

これはわかりますね? 画面を変える属性です。
ボールがなくなったらシーンを変えるので、シーンの変更先は「ゲームオーバー画面」に設定してくださいね?

ゲームオーバー

ゲームオーバー

これで右枠の設定が終わりました。
こんな設定⬇️になっていればOKですよ?

右枠の属性設定

右枠の属性設定

ブロックが全部消えた

ブロックが全部消えたら、画面を「クリア画面」に変更するように設定しましょう?

画面左の枠に対して、「タッチ移動無効」「タッチトリガー無効」「フラグ」「シーンチェンジ」の属性を設定していきます。「タッチ移動無効」「タッチトリガー無効」については上記の通りなので省略しますね?

フラグ

対象となるアイテムがなくなった場合に、自身のイベントが発生します。
ここでは全部のブロックを対象アイテムとしてください。
数が多いですが頑張りましょう?

全部のブロックをフラグ対象にする

全部のブロックをフラグ対象にする

シーンチェンジ

ブロックが全部なくなったらシーンを変えるので、シーンの変更先は「ゲームクリア画面」に設定してください?

完成!動作確認しよう

おめでとうございます‼️‼️‼️

長かったですが、これでブロック崩しの完成です?

あとはゲームを楽しんでください!もし良ければ、Springin’で作品も公開できますので、興味のある方は是非後悔してみてくださいね♪

最後までお読みいただいてありがとうございました?
ではまた!

コメント