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

ブロック崩しを作ろう

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

ここに書いてあるSpringin’のワークについては、こちらのリンクからダウンロードできますよ！

Springin’から↓のQRコードを読み込んでもOKです

クリックで拡大

概要

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

画面概要

アイテムを作ろう

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

画面の枠

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

「まっすぐ線が引けない〜 (´;︵;`) 」というかたは画面の縁を利用するといいですよ (◍ ´꒳` ◍)b

枠を作成

ブロック

ボールに当たると消えるブロックを作成します。

これも画面の縁を利用すると良いでしょう。

↓の画像では縦の線になっていますが、配置するときに横に変更できますので問題ありません。

もちろん、横で作成してもいいですよ！

ブロックを作成

ボール

ボールを作ります。コツは、丸を描くのではなく、ペン先を一番太くしてポンっと置くだけ ٩(ˊᗜˋ*)و

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

ボールを作成

移動ボタン

右移動、左移動のボタンを作ります。どちらか一つだけ作ってください。もう一つは回転して作れます。

作り方は、まず全体を塗ってから、消しゴムで＜を書くといいですよ ♪(o´▽`o)ﾉ

大きさは後で調整可能です。もちろん、ご自身でサイズを決めて書いても大丈夫です ٩(ˊᗜˋ*)و

移動ボタンを作成

スタートボタン

スタートボタンも同じように作っちゃいましょう ٩(ˊᗜˋ*)و

スタートボタンの作成

アイテムの配置

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

画面の枠

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

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

このように拡大して

そこから画面端までドラッグして画面ギリギリまで寄せちゃいます ヾ(*´∀`*)ﾉ

画面端へ

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

属性を設定

残りの画面上と画面右の枠も同様に設定してくださいね ٩(ˊᗜˋ*)و

これで画面の枠の配置は終了です！！

ブロック

次はブロックを配置していきます (｀・ω・´)ﾉ

が、その前に！！

ブロックにも属性が必要になります。

ここで必要な属性は「固定」と「高反発」と「消滅」ですが、ブロックを置いて３つの属性を設定して、また一つブロックを置いて３つ属性を設定して…とやっていたら面倒臭いので、まとめて設定しておきましょう ヾ(*´∀`*)ﾉ

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

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

属性が設定できたら、画面に配置していきましょう＼(^o^)／

数が多くて大変ですが、頑張ってください（笑

画面の拡大を使うと整理しやすいですよ〜

拡大して整理

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

ブロックを配置

ボール

次はボールを配置します。

場所は……ぶっちゃけどこでも構いません（笑

ただし、↑のアイテム作成で作ったやり方だとボールが小さいので、ちょっとだけ拡大しといてくださいね

画面を拡大して、２本指でタップ＆スワイプするとやりやすいですよ ♡＾▽＾♡

ボールを拡大

移動ボタン

移動ボタンは画面下にそれぞれ配置します。一つは画像を回転させてくださいね♪

でないと矢印の方向がおかしくなっちゃうので (´;︵;`)

移動ボタンを配置

バー

ボールを跳ね返すバーを配置します。これは画面下中央に置いてください。

（スクショ撮り忘れて画面なしです…上の概要を参考にしてください (т_т) ）

スタートボタン

最後にスタートボタンを配置しましょう(⌒▽⌒)

これはボールのすぐ下に置いてくださいね。理由は後で↓

スタートボタンを配置

アイテムの属性設定

画面への配置が完了しましたが、これで完成ではありません。

ここからは必要な属性を設定していきましょう ٩(ˊᗜˋ*)و

画面の枠、ブロックには属性を設定してありますので、それ以外の属性設定を見ていきますよ ♥

ボール

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

「接触」属性とは、自身（ボール）が他のアイテムに当たった時に他のアイテムのイベントを発生させるものです。

この場合「他のアイテム」とはブロックのことになりますので、次のように言い換えられます。

やってみましょう！

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

「接触」属性を設定

続けて、対象となるアイテムを設定していきます。ブロックをタップすると対象のアイテムになります。

全部のブロックをタップする必要がありますので、根気が必要ですが頑張ってください

対象を設定

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

バー

バーには「固定」「高反発」「タッチ移動無効」の属性を設定します。

「固定」を設定しますが、後で移動ボタンで動かせるようになるのでご心配なくっ( •̀ .̫ •́ )✧

バーに属性を設定

移動ボタン

移動ボタンには「固定」「高反発」「動力（左右）」を設定します。

「動力」属性とは、自身のイベントが発生したら、他のアイテムを移動させるイベントを発生させるものです。

この場合「他のアイテム」とはバーのことになりますので、次のように言い換えられます。

左ボタン

まずは左ボタンから。

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

動力（左）

これをタップして対象のアイテムにバーを設定します。

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

動力（左）を設定

右ボタン

右ボタンも同様です ♡＾▽＾♡

属性の「固定」「高反発」を設定したら、「動力」の右矢印をタップしてみてください。

動力（右）

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

動力（右）を設定

スタートボタン

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

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

「爆発」属性

「爆発」属性は、他アイテムを弾きとばす属性で、自身に近ければ近いほど！！威力！！が増します。

なので、上のボールとスタートボタンの配置でできるだけ近づけましたが、もしボールのスピードが早すぎる場合は、この距離を少し離してみてくださいね♪

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

「消滅」属性

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

スタートボタンの属性

試してみよう

ここまでできたら、ゲームとしてはほとんど✧٩(ˊωˋ*)و✧完成✧٩(ˊωˋ*)و✧です

試しにプレイしてみましょう！！！！

ちゃんと動きましたか？

動いた人、おめでとうございます (ᗒᗨᗕ)

動かなかった人は上の各属性を見直してくださいね

大丈夫！　ゆっくり見直せば必ず動くようになりますよ ٩(^ᴗ^)۶

シーンを作ろう

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

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

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

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

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

シーン切り替え

アイテムメニューからシーンメニューに切り替わりましたね (◍ ´꒳` ◍)b
この状態で＋ボタンを押すと新しいシーンが追加されます(*ﾟ▽ﾟ)ﾉ

シーンメニュー

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

クリアシーン

ゲームをクリアした時のシーンを作成します。アイテムに「クリア」の文字と「もう一回」のボタンを作って、配置してみてください。

こんな↓感じでOKです。字が汚いのはご容赦ください（笑）

クリアシーン

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

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

「シーンチェンジ」属性

「シーンチェンジ」の属性をタップすると、画面選択ができるようになります。

ここでどの画面に戻るかを決めましょう。

ここではゲーム画面を設定してくださいね(っ*´∀｀*)っ

ゲームシーンを選択

ゲームオーバーシーン

ゲームオーバのシーンを作成します。アイテムに「ざんねん」の文字と「もう一回」のボタンを作って、配置してみてください。

こんな↓感じでOKです（字が汚い… (тωт`) ）

ゲームオーバーシーン

あとはゲームクリアシーンと同じです。

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

シーン設定

ここまででシーンの作成は完了です。

この後は、それぞれの条件に従って画面が切り替わるように設定していきましょう！

条件設定

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

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

それぞれ見ていきましょう(⌒▽⌒)

ボールが画面外に出た

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

左右どちらでも構いませんが、画面の枠に対して属性を追加します。

ここでは画面右の枠に対して、「タッチ移動無効」「タッチトリガー無効」「フラグ」「シーンチェンジ」の属性を設定していきます。

それぞれ順番に説明しますね ٩(ˊᗜˋ*)و

タッチ移動無効

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

タッチ移動無効

タッチトリガー無効

アイテムがタップされてもイベントが発生しなくなります。

「画面の枠」アイテムにはまだイベントが設定されていませんが、この後「シーンチェンジ」の属性を設定します。

その時にタッチによって発動しないようにしたいので、この属性が必要になります。

タッチトリガー無効

フラグ

対象となるアイテムがなくなった場合に、自身のイベントが発生します。

ここではボールを対象アイテムとしてください。

（他にも色々な条件がありますが、今のところはこのように覚えてください）

フラグ

シーンチェンジ

これはわかりますね？　画面を変える属性です。

ボールがなくなったらシーンを変えるので、シーンの変更先は「ゲームオーバー画面」に設定してくださいね＼(^o^)／

ゲームオーバー

これで右枠の設定が終わりました。

こんな設定↓になっていればOKですよ！！

右枠の属性設定