Springin’でゲームを作ろう!(2) ボールを転がそう!

アイテムを作ろう

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

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

今日はボール(アイテム)を作って転がすところまでをやってみましょう!

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

ボールを作ろう

ここでは、アイテムとしてボールを作ってみたいと思います。複雑な線を書くアイテムも作れますが、まずはアイテム作りの基本を覚えちゃいましょう‼️

Springin’を起動し、「つくる」から「ワーク」を一つ作ります。

「ワーク」ができたら、画面上のアイテムメニューから+ボタンを押してみてください。

アイテムを作ろう

アイテムを作ろう

下の画面のようにアイテムを編集する画面に移動します。

アイテム編集画面

アイテム編集画面

注意!

アイテム編集画面に移動すると、何かアイテムを作らないと「ワーク」画面に戻れません。
アイテムを作ろうとしたけどやっぱりやめた、ということができないので、一度決定ボタンを押してから「ワーク」画面でアイテムを消す必要があります。

色を決めよう

今からボールを作っていきますが、最初にどんな色にするか決めましょう✨

カラーパレットをタップすると、最初から様々な色が用意されているのがわかりますね?
直感的に好きな色を選べるので、迷わないと思いますよ❤️

色を決める

色を決める

え? 好きな色がない??

そんな時は色のボタンをもう一度タップしてみてください?
より詳細なカラーパレットが表示されるので、ご自分でスライダーを動かして好みの色を設定できますよ?

細かい色設定もできます

細かい色設定もできます

ペン先を決めよう

次にペン先を決めましょう!ペン先には次の3種類がありましたね✒️

  • 丸ペン:ペン先が丸い。書く速さによって大きさが変わらない。
  • 筆ペン:ペン先が(やや)丸い。書く速さによって大きさが変わる
  • 角ペン:ペン先が四角い。書く速さによって大きさが変わらない。

今回はボールを作るので、ペン先の太さを変える必要もありませんし、四角くする必要もありませんので「丸ペン」を選択しましょう。

丸ペンを選択

丸ペンを選択

大きさを決めよう

次にペン先の太さを決めましょう?

ペン先の太さは上にあるスライダーで決められます。
右に行けば細く、左に行けば太くなりますよ。

太さを決めよう

太さを決めよう

今回はボールを作るので、一番太くしてくださいね?

決定して画面に配置しよう

色、ペン先、太さが決まったらボールを書いてみましょう!
とはいえ、今回はポンとタップするだけです?

丸く書いて中を塗りつぶしても良いですよ‼️
自分の好きなように書いてみましょうね?

ボールを作ろう

ボールを作ろう

ボールを作ったら画面右下の緑色のボタンをタップして決定しましょう!

決定ボタンを押しましょう

決定ボタンを押しましょう

決定ボタンを押すと「アイテム編集」画面から「ワーク」画面に戻ります。
「アイテムメニュー」に今作ったボールが表示されていますね。
これでボール作りが完了です✨

ボールの完成!

ボールの完成!

次はこのボールを動かしてみましょう‼️

動かしてみよう

では、作ったボールを動かしてみましょう!

まずはボールをワーク内に移動しますよ?

ボールをワーク内に配置しよう

「アイテム」メニューからボールをタップしながらワーク内にドラッグします。

アイテムメニューからドラッグしよう

アイテムメニューからドラッグしよう

簡単ですね?

大きさを変えよう

ここでちょっと気がつくと思いますが、ボールは一番太いペンで書いたのに、ワークに配置するとそんなに大きくありませんね?

これだと指で操作しにくいので、ちょっと大きくしてみます。
「ズームボタン」を押して2倍→4倍にしてみてください?

ズームボタンを一回押すと2倍になります。

2倍にしましょう

2倍にしましょう

もう一度押すと4倍になります。

4倍にしましょう

4倍にしましょう

拡大すると作業しやすくなりますよ‼️

ボールを二本指でスワイプしてボタンを大きくしてみましょう。
好きな大きさに変えたら、ズームボタンを押して1倍に戻しておいてくださいね?

ボールを大きくしよう

ボールを大きくしよう

動かしてみよう

では、ボールを動かしてみましょう!

ワーク画面右下のプレイボタンを押してくださいね。

プレイボタン

プレイボタン

プレイボタンを押すとゲームが始まります。

ゲーム開始!

ゲーム開始!

あれ???

動きませんね?

これはミスではなく、正しい動作です?
試しにボールをタップして上の方に投げてみてください‼️

ボールがぴゅーんと上の方に行って見えなくなりましたね。
実は、画面に何も設定していないので、ボールは自動的には動きません。
もし画面を傾けて動かしたり、ボールが自動的に下に落ちるようにするには、画面にその設定をしなければなりません。

次にその設定を行なっていきますので、一度ゲームを止めましょう。
ゲームを止めてワーク画面に戻るには画面右下の四角いボタン(赤)を押します。

ゲームを止めよう

ゲームを止めよう

ボールの動かし方を変えよう

シーンに属性を設定をしてボールの動きを変えてみましょう。
ワーク画面でアイテムが何もない背景の箇所をタップしてみてください。
何かボタンが2種類出てきましたね。

これが画面の属性設定ボタンです?

画面やアイテムに動きなどを設定するこのボタンのことを「属性(ぞくせい)」と言います。

シーンの属性には次の2種類があります。

  • 重力:画面の傾きに関係なく、重力を設定してその方向にアイテムが向かっていくように設定できます。
  • 傾きセンサー:画面の傾きを検出して、そちらの方向にアイテムが向かっていくように設定できます。

重力の属性を設定

左のボタンは重力を設定する画面です。タップしてみましょう。

重力の設定

重力の設定

こんな画面が開きますね。

重力属性の設定

重力属性の設定

これは重力の向きと強さを設定する画面です。真ん中のリンゴをタップして、重力の方向と強さを設定してください。線を長くすればするほど重力が強くなりますので、より早くアイテムがそちらへ向かって移動します。

一度ご自分で好きな重力を設定して、ゲームを開始してみてください。
ボールがご自分の設定した方向に向かっていくのがわかりますね?

重力属性をキャンセルするには、もう一度設定画面を開いて重力の線をリンゴに戻してください。これで「何も設定されていない」という状態になりますので、キャンセルと同じ意味になります。

傾きセンサーの属性を設定

傾きセンサーはiPhone/iPadの傾きを検出して、そちらに向かってアイテムが進む設定になります。
属性ボタンの右側をタップすることで設定できますよ!

傾きセンサーの属性を設定

傾きセンサーの属性を設定

傾きが大きければ大きいほど、アイテムの進む速度が速くなることを確認してください。

キャンセルするときはもう一度傾きセンサーのボタンをタップしてくださいね?

重力&傾きセンサーの属性を設定

両方の属性を同時に設定することもできます。

例えば、何もしなければ下に向かってボールが落ちるけれども、iPhone(iPad)を傾けることでバランスをとって落ちないようにする、という設定が可能です?

動作確認しよう!

全ての設定が完成したら、もう一度プレイボタンを押して動作を確認してみましょう!

ご自分の想定通りに動きましたか?
納得がいかなかったから何度も試せるので、試行錯誤してみてくださいね?

ボールが外に出てしまったら?

今はまだボールの配置とシーンの属性しか設定していないので、ボールが画面外に出てしまうと何もできなくなってしまいます?

その時はプレイボタンをもう一度押してワーク画面に戻ってくださいね✨

最後に

今日はSpringin’を使ってボールを配置して動かすところまでをプログラミングしました。

多分、皆さんが思っていた「プログラミング」とかなり違っていたかと思います?
Springin’を使うとプログラミングしている感覚ではなく、どちらかというとお絵描き+動き設定という感じになりますね。

最初からコードを書いて覚えるよりも、こういうアプリで楽しみながらプログラミングに触れるのもいいのではないかと思います。特に小さいお子さんは「もっとしたい!」ということ間違いなしなので、ぜひ親子で楽しみながらSpringin’に触れてみてくださいね?

次回は線を引いて、ボールをはじき返してみましょう?

ではまた!

コメント