見出し画像

電車ワークに音をつけてみた

<電車ワークシリーズ>

第1弾:べた塗り画像を使ったアイテムの作り方
第2弾:色違いのアイテムを作る時に便利な方法
第3弾:ボタンで電車が走るワークの作り方
第4弾:「音」を使ったワークをつくる方法

前回のブログ↑ではSpringin’で【音】を使ったワークのつくりかたを紹介しました。今日のブログはその実践編。

とにかく電車が大好きな息子さん。彼のために作った電車ワークに【音】をつけてみました。

<今回の目的>
ボタンを押すと電車が走るワークに走行音をつける

<記事中にあるテクニック一覧>
アイテムに録音した音をつける
録音した音を編集する
録音した音を再編集する
アイテムの【音】を解除する
ボタンでアイテムを動かす
アイテムを衝突させて音を鳴らす
アイテムの形状で接触頻度を調整する
配置したアイテムを別のアイテムと入れ替える

ボタンを押している間だけ走る電車ワーク。この電車に「ガタンガタン!」という音をつけます。

画像1

本物の電車の音を録音しに行きたいところですが、ひとまず息子のおもちゃを拝借。この電車のおもちゃ、転がすと「ガタンガタン!」と音が鳴ります。

画像2

この音を録音して、Springin’の電車ワークでも音を鳴らしたい。電車ワークではオレンジ色のボタンがコントローラーになっているので、このボタンを押すと「ガタンガタン!」と音が鳴ればいいはず。

そこでまずはSpringin’で録音できる最大時間の10秒間、おもちゃの電車を走らせて、その音を録音。オレンジ色のボタンに音を追加しました。これで目的は果たされるはず……?

画像3

録音して

画像4

ボタンに【音】が追加

オレンジ色のボタンをタップ。電車が動き出し、「ガタンガタン! ガタンガタン!」と音も鳴るようになった! やった!……というのも束の間でした。

画像5

この電車ワークはオレンジ色のボタンをタップしているあいだだけ電車が動くもの。手を離すと電車は止まります。ただ今の状態では電車は止まっているのに、「ガタンガタン」と10秒間鳴り続けてしまう。

画像6

ちがう、押している間だけ鳴って欲しい。
なんでだろう……。

実はこの「なんでだろう」を考えるのがプログラミングの大切な時間。こんなのつくりたい! をイメージして、それを実現するためにはどうしたらいい? と考えて、このやり方はどうだ? と何度かトライアンドエラーしながら作りたいものに近づいていく過程はプログラミングそのものです。このプロセスをプログラミングの世界では「デバッグ」という言葉を使っています。

そうか。今のワークの設定では、タップすると録音した音を全部再生するという仕組みになっているからか。そこで次のように作り方を変えてみました。

→音を最小単位(=「ガタン」一つ)まで短くして、押している間だけ鳴るようにする

Springin’では一度録音した音を再編集することができます。そこで音設定画面で先ほど録音した音をコピー。音波形の枠をスライドさせて、繰り返したい音の最小部分(「ガタン」の1回だけ)を抜き出して保存。音設定画面に抜き出した音が追加されました。

画像7

コピーボタン

画像8

音を最小単位までカット

画像9

加工した音が音設定画面に追加

今度こそ!と再生モードでオレンジ色のボタンをタップ。

画像10

うーん。今度は電車は走っているのに、「ガタン」と1回鳴っただけで終わってしまいました。ちがう、押している間はずっと鳴っていてほしい。

画像11

どうしたらいいんだ……!?

そこで電車はタップしているあいだだけ動くのに、なぜ音は止まってしまうのか、電車が動くしくみと音が鳴るしくみの違いを考えればいいのかと気づきました。

そうだ。電車は【動力】を使っている。

Springin’の【動力】は、トリガー(この場合指で押していること)が続く限り効果が持続。ボタンをタップしているあいだに発動する【動力】は、タップしている間ずっと効果が持続している。

そうか、音を鳴らすしくみも同じように【動力】を使ってつくればいいのか!

ということで、電車と同じように【動力】で動くアイテムをつくって、そのアイテムが繰り返し音を鳴らす、というしくみを作ってみます。

その前に、オレンジ色のボタンにつけた【音】がそのままなので解除します。オレンジ色のボタンの【音】属性をタップして、緑色のチェックが外れたことを確認したら、右下のOKボタンをタップ。これでオレンジ色のボタンの【音】が解除できました。

画像12

【音】属性をタップ

画像13

選択されている(=緑のしるし)をタップして解除

画像14

選択が解除されていることを確認してOKボタン

そして【動力】を使って、電車が走っている間だけ音がなるしくみを考えます。

音を持つアイテムに他のアイテムがぶつかることでその音が鳴る、という方法を使います。オレンジ色のボタンをタップしている間だけ【動力】で動き、【音】を持つアイテムにぶつかり続ける【接触】を持つアイテムを準備すればよさそう。そこで棒と丸のアイテムを新しく作って、棒を風車のように回して、棒と丸がぶつかったときに「ガタン」と鳴るように設定することに。

オレンジ色のボタンをタップ→棒が風車のように回る→棒が丸とぶつかると「ガタン」と鳴る

画像15

これを繰り返す(繰り返し)。
オレンジ色のボタンから指を離す→棒の回転が止まる→もう「ガタン」と鳴らない!

では早速棒と丸いアイテムを作ります。(わかりやすく赤で作成)

画像16

赤い棒

画像17

赤い丸

邪魔にならないところに小さめに配置。

画像18

次に、さっきまでオレンジ色のボタンについていたけていた「ガタン」の音を赤い丸に追加します。赤い丸が動かないように【ピン】で固定するのを忘れないように。こうしないと赤い棒と赤い丸がぶつかった時に、赤い丸が動いてしまいます。棒と何度ぶつかっても、根気強く赤い丸にはその場に居続けてもらわないといけません。

画像19

赤い丸の【音】属性をタップ

画像20

最小単位に編集した音をタップ

画像21

選択できたら(=緑のしるしがついたら)OKボタンをタップ

次はオレンジ色のボタンを押しているあいだ、赤い棒が風車のように回るように設定をします。オレンジのボタンを選択して、【動力(回転)】の属性をつけて、対象アイテムに赤い棒を選択してOKボタンをタップ。これで「オレンジ色のボタンを押しているあいだ、赤い棒は風車のように回ってね」という設定をしたことになります。

画像22

ボタンの【動力(回転)】をタップ

画像23

対象アイテムに赤い棒を選択

画像24

OKボタン

そして忘れちゃいけない【ピン】での固定。赤い棒をタップして、動かないように【ピン】で固定します。そして【接触】を選択。対象アイテムに「ガタン」音をつけた赤い丸を選択します。これで「赤い棒が赤い丸とぶつかった(接触した)とき、赤い丸は”ガタン音”を鳴らしてね」という設定をしたことになります。

画像25

【接触】をタップ

画像26

対象アイテムに赤い棒を選択

画像27

OKボタン

よし、今度こそ!

再生モードでオレンジ色のボタンをタップ。ボタンを押している間だけ赤い棒が回転し、その赤い棒が赤い丸に接触するたびに音がなるようになりました。ボタンから手を離すと、赤い棒の動きも止まるので、音も鳴らなくなり、電車の止まるタイミングと音が止むタイミングが一致しました。

でも音の間隔が長い……。

今のままだと「ガタン……ガタン……」と、ゆっくり走っている電車のような音にしかなりません。ちゃんと「ガタンガタン!ガタンガタン!」と鳴ってほしい!

そこで赤い棒を十字のアイテムにして、赤い丸への接触回数を増やしてみることに。これで棒のときより2倍の回数、音が鳴るようになるはず。アイテムリスト上で赤い棒をタップして、コピーボタンをタップ。赤い棒に横棒を追加して十字のアイテムを作ります。

画像28

コピーボタン

画像29

横に棒を書き足します

画像30

OKボタン

まさに風車っぽくなりました。そして先ほど赤い棒に対してやった設定を繰り返す……必要はありません! Springin’の「アイテム切り替え」機能を使って、赤い棒と赤い十字を切り替えてやれば、設定が全部引き継がれます。これはうれしい!

画像31

アイテム入れ替えボタン

画像32

入れ替えたいアイテム(=赤い十字)を選択

画像33

OKボタン

赤い棒が赤い十字に入れ替わりました。

この「アイテム切り替え」機能は、実はプログラミングでは重要な考え方の一つにつながっているそうです。その説明は長くなるので今回は省略しますが、気になる方は「オブジェクト指向プログラミング」で検索してみてください。

画像34

これで、電車の動きに合ったいい感じの音が鳴るようになりました!

最後にもう一つ!わかりやすくに赤で作成したこれらのアイテムは見えている必要がないですよね。そこで同じ形のアイテムを背景と同じ色で作れば再生中にこれらのアイテムは隠れて見えなくなります。さらに他のボタンにも同様のしくみを適用すれば、全部の電車で「ガタンガタン!」と音が鳴ります。

画像35

同じ形、背景と同色のアイテムを作成

これで音を追加した電車ワークの完成です。

今回は「十字のアイテムを風車のように回して、十字が丸とぶつかったときに音を鳴らす」という方法で電車に音をつけてみましたが、これはほんの一例です。

この方法以外にも、他の属性を使って同じ表現をすることができるのですが……今回はとりあえずここまで。別の機会に解説します!

画像36

Springin’でできることはまだまだあります。次回は「こんなものもできるのか!」と可能性を感じてもらえるようなワークを紹介しながら、実際にその作り方を紹介します!