流れる風景ワークの作り方
この記事では、ビジュアルプログラミングアプリ Springin’ のワーク作りコツ、「流れる風景のワークの作り方」をご紹介します。
動画版はこちらです。
この記事では、「すすめ！ウサさん」のウサさんが進んでるように見える仕掛け、建物や雲がどうやって動いているのかを解析します。
この仕掛けがわかると、下記のワークのような流れる風景を使ったワークが作れるようになり、ワーク作りの幅がグンと広がります。ぜひ真似してみて下さい。
「すすめ！ウサさん」を実行すると、画面下にある建物はスーっと流れるように左に動き、画面上にある雲は少しゆっくり左に動きます。また、画面右側から、次々と雲や建物が登場し続けます。
これはどうやって作られているのでしょう？
・風景アイテム（雲や建物）の動かし方
・新しい風景アイテム（雲や建物）を登場させる方法
の2つのステップに分けて説明します。
【step１】風景のアイテム（雲や建物）の動かし方
「すすめ！ウサさん」を見ると、画面上の雲は少しずつゆっくり左に動き、画面下の建物はスーっと早く左に動きます。速度の違いはありますが、左に動くという動作は同じです。つまり、基本的な動作は同じ作りになっています。
【スーっと早く】風景のアイテム（雲や建物）を動かそう
（１）動かしたい風景アイテムと起動用アイテムを作ろう。
山と赤丸ボタンを作って、方眼紙に置きます。
（２）起動用アイテムに、動かしたい風景アイテムへの動力を設定する。
赤丸ボタンをタップしたら、山が左に動くように設定します。
これを実行してみます。赤丸ボタンを指でタップすると、山が左に動きました。次は、ボタンを指でタップしなくて済むようにしましょう。
（３）星マークを作り、赤丸ボタンと接触すると、左向き動力が起動されるように設定する。
指でタップしつづけなくてもすむように、星マークを作って、星マークに赤丸ボタンをタップし続けてもらうように設定します。
星マークを作って、方眼紙の赤丸ボタンに重ねて置きます。
星マークと赤丸ボタンが接触したら、赤丸ボタンのイベント（左に動く）が起動されるように設定します。
また、山が動くスピードは加速してほしくないので、山に対して物理無効を設定しておきます。
これを実行してみると、重ねておいたはずの赤丸と黄色の星が、少しズレて動いてしまいました。赤丸と黄色の星が重なるように物理無効を設定、動かないようにピンでとめておきましょう。また、指でさわって移動できたり、イベント起動もできたりしてしまうので、タッチ移動無効とタッチトリガー無効も設定しておきます。
これを実行してみます。
星マークをコピーして増やしていくと、左へ行く力が増えるので、どんどんスピードアップします。
次は、スピードを遅くする方法を解説します。
【ゆっくり少しずつ】風景のアイテム（雲や建物）を動かそう
さきほど作ったワークを引き続き使います。山をゆっくり動かすために、星マークと赤丸ボタンを少し離して置きます。
（１）星マークを赤丸ボタンから離れた場所に移動させる。
（２）星マークを赤丸ボタンに向かって動かす設定をする。
青い四角と緑の三角を新しいアイテムとして作成し、方眼紙に重なるように置きます。
緑の三角が黄色の星を左に動かす（＝黄色い星が赤丸ボタンに向かっていく）という設定をします。
青い四角が緑の三角に接触したら、緑の三角のイベント（＝黄色の星を左に動かす）が起動されます。緑の三角と青い四角を重ねて置いておきたいので、物理無効も設定します。
この状態で実行してみると、星マークが左に動き続けて、画面から消えてしまいました。
そこで、赤丸ボタンが星マークに接触したら、元の場所に戻る（リセット）という設定をします。
星マークが赤丸ボタンに接触
赤丸ボタンが星マークを元の場所にリセット
これを実行してみます。
山が右に動くのは、星マークが接触しているときだけなので、少しずつ動くようになりました。接触するまでのキョリを変えることで、山の動くスピードが変えられます。
【step2】新しい風景のアイテム（雲や建物）を登場させる方法
「すすめ！ウサさん」を見ると、画面右上の青い四角部分から雲が次々と登場します。雲の形は２種類あり、どの雲が出るかはランダムです。画面左下の青い部分からは建物が次々と登場します。建物の形は４種類あり、どの建物が出るかはランダムです。
【同じ風景アイテムを出し続けたい場合】
さきほどのstep1で作成したワークをそのまま使って説明します。山が画面右側から左に動き、画面左端まで到達したら、また山が始めの場所にコピーされて登場するように設定します。
（１）Step1で作ったワークを開く。
さきほど作ったワークを引き続き使います。（スーっと動くワークでも、ゆっくり動くワークでも、どちらでもOKです。今回の説明では、ゆっくり動くワークで作っています。）
（２）コピー起動用の青丸ボタンを作り、山が通る場所（画面左側）に置く。
新しいアイテム追加で青丸ボタンを作り、山が通る場所（画面左側）に置きます。
（３）青丸ボタンに山が衝突したら、山をコピーするように設定する。
山と青丸ボタンが接触したら、青丸ボタンのイベント（コピー）が起動されるように設定します。
青丸ボタンに山をコピーする設定をします。また、ぶつかった後、青丸ボタンは動かずに、山は青丸ボタンの上を素通りしてほしいので、青丸ボタンにピンと物理無効を設定します。
これを実行してみます。
山が左へ動きながら、同じ山が何度も現れるようになりました。次は、同じ山ではなく、色んな形の風景がランダムに登場するように作ってみましょう。
【違う風景アイテムをランダムに出したい場合】
さきほど作成したワークをそのまま使って説明します。複数の風景アイテムを用意し、風景アイテムが画面右側から左に動き、画面左端まで到達したら、風景アイテムのどれか一つがコピーされて登場するように設定します。
（１）さきほど作った同じ風景アイテムが出てくるワークを開きます
（２）登場させたい風景アイテムを作って方眼紙に置きます。
（３）登場させる風景アイテム全てに対して、左に動く動力を設定する。
この状態で実行すると、全部の風景アイテムが一斉に左に動いていきます。どんどん加速したくない場合は、風景アイテムをピンで止めておきましょう。
青丸に接触すると山がコピーされる設定をしていましたが、一旦これを削除します。
次に、青丸と風景アイテムが接触すると、風景アイテムのどれかがコピーされて登場するように設定していきます。
（４）風景アイテムの数だけコピー起動ボタンを作り、それぞれの風景アイテムがコピーされるよう設定する。
風景アイテムの数だけコピー起動ボタンを作ります。
それぞれの風景アイテムがコピーされるよう設定していきます。
これをコピーする風景アイテム全てに設定しておきます。
（５）青丸に風景アイテムが接触したら、コピー起動用アイテムのどれかが起動するように設定します。
それぞれの風景アイテムに対して、青丸に接触の設定をします。
青丸に接触したら、コピー起動ボタンのどれか一つが起動されるように設定します。
これを他の風景アイテムにも設定しました。
実行すると、風景アイテムがランダムに登場します。
今回は説明のために、コピーや起動用のアイテムをそのまま見える状態にしていますが、これらのアイテムを隠す背景を用意して上からかぶせたり、背景と同じ色でアイテムを作ったりすると、かっこよくなります。