Springin’でゲームを作ろう!(5) 画面を変えよう!

画面を変えよう

今日も前回の続きで、Springin’を使って親子で楽しみながらプログラミングしてみましょう💕

Springin'(スプリンギン)SHIKUMI Designさんが出しているiPhone/iPad用アプリです。
公式サイトはここです。
無料で楽しめますので、親子で是非チャレンジしてみてください!

前回はボールが線にぶつかったら線が消えることを学びましたね✒️

今日はボタンを配置して、このボタンを押したら画面が変わるようにしてみましょう🤗

注意!
Springin’はiPhoneとiPadで少しメニューの配置などが異なりますが、基本的な動作は同じです。
本サイトでは、画面の見易さを考慮してiPhoneSEで撮影した画像を載せています。

シーン

ゲームを作る上でよく出てくるのが「画面を変えたい」という要望です。
「スタート画面」から始まって「ゲーム画面」➡️「クリア画面」と進むようにできると、「ゲームを作っている」感じがしてとても楽しいですよ🌈

ちなみに、画面が変わることを「画面遷移(がめんせんい)」と呼びます。
ゲーム に限らず、アプリなどを作る時にはよく出てくる言葉なので覚えておきましょう💕

というわけで今回は、画面の変え方(画面遷移)を説明したいと思います。

ちなみにSpringin’では画面のことを「シーン」と呼ぶので、これからはそう呼びますね✨
(たまに忘れてしまって画面と呼ぶことがあるかもしれませんが💦)

ボタンを作ろう

まずはボタンを作っていきます!
「アイテム」メニューの+ボタンを押して、次の2つのボタンを作ってくださいね👍

「作り方がわからない💦」という人は前回などを確認してください🤗

スタートボタン

スタートボタンを作ります。

スタートボタンを作ろう

スタートボタンを作ろう

色や大きさ、形はなんでも構いませんよ‼️
好きなように作っちゃいましょう😁
(字が汚いのはご勘弁🤣)

もどるボタン

続けて「もどる」ボタンを作ります。
これも好きなように作りましょう♪

戻るボタンを作ろう

戻るボタンを作ろう

アイテムを作ったら「スタートボタン」を画面に配置しておきましょう。
配置する場所はどこでも構いません✨

スタートボタンを配置

スタートボタンを配置

シーンを作ろう

ボタンができたら、今度は移動するシーンを作っていきますよ🌟

シーンを作るには、アイテムメニューの横にある上下の三角ボタンの下を押します。

シーンメニューに移動

シーンメニューに移動

スタートシーン

最初は先ほどスタートボタンを配置した画面しかありませんね。

最初は一つだけ

最初は一つだけ

ここにはスタートボタンを配置してありますので、何も触らなくて🆗です👍

ゲームシーン

次に、+ボタンを押してシーンを追加しましょう。
+ボタンを押すと、新しいシーンが「シーンメニュー」に追加されます。

新しいシーンが追加された

新しいシーンが追加された

この新しいシーンを選んだ状態で、先ほどの上下の三角の上を押して「アイテムメニュー」に戻ってください。

アイテムメニューに戻る

アイテムメニューに戻る

新しいシーンの方には「もどる」ボタンを配置しておきましょう。

もどるボタンを配置

もどるボタンを配置

シーンを変えよう

さぁ‼️いよいよシーンを変える設定を作っていきます。

スタートシーンからゲームシーンへ

まずはスタートシーンからゲームシーンへ移動するようにしてみましょう。
今の状態は「もどる」が画面に表示されていると思いますので、まずはスタート画面を選び直しましょう。

「シーン」メニューを開いて「スタート」画面を選択してください。

スタートシーンを選択

スタートシーンを選択

選択したらアイテムメニューに戻りましょう😁

「シーンチェンジ」属性

画面に配置してある「スタートボタン」にシーンを変える属性を設定します。
スタートボタンをタップして属性一覧を開いてください。

属性一覧を開く

属性一覧を開く

シーンを変更する属性は「シーンチェンジ」と呼ばれています。
これのことです⬇️

「シーンチェンジ」属性

「シーンチェンジ」属性

「シーンチェンジ」属性をタップすると、設定してあるシーン一覧が表示されます。

シーン一覧

シーン一覧

この中から先ほど作った「もどる」ボタンがあるシーンを選びましょう👍
選んだら画面右下にある緑色の決定ボタンを押してくださいね🤗

動作確認

ここまで作ったら、一度動作を確認してみましょう。
画面右下のプレイボタンを押して、ゲームを開始してください。

スタートボタンを押すと、画面が変わり「もどる」ボタンが表示されるはずです。
できましたか?

できたら次へ進みますので、一度プレイを終了してくださいね。
プレイの終了は画面右下にある赤いボタンでできますよ♪

ゲームシーンからスタートシーンへ

今度は反対にゲーム画面からスタート画面に戻ってみます。

「シーンメニュー」を開いて、「もどる」のボタンがあるシーンを選択してください。

「もどる」のシーンを選択

「もどる」のシーンを選択

シーンを選択したらアイテムメニューに戻ります。
そのまま戻るボタンをタップして属性一覧を開きましょう。

「もどる」の属性一覧

「もどる」の属性一覧

あとはさっきとほとんど変わりません。

「シーンチェンジ」属性を選択して、「スタート」ボタンがあるシーンを選択しましょう。

「スタート」のシーンを選ぶ

「スタート」のシーンを選ぶ

シーンを選んだら画面右下の緑色の決定ボタンを押してください🌟

動作確認

では、動作確認してみましょう。

プレイボタンを押して、スタートボタン、もどるボタンを押してみてください。

ちゃんとシーンが変わりましたか??

おめでとうございます🎉🎊🎊🎊🎊🎊

これでシーンを自由自在に変更できるようになりました‼️‼️‼️

最後に

今日はシーンを切り替える方法を説明しました。

スタート画面やクリア画面を作るとグッとゲームらしくなりますよね😆

次回は今までに説明したことを使って、「ブロック崩し」ゲームを作ってみたいと思います💖

ここまで読んでいただいてありがとうございました😘
ではまた‼️‼️

コメント