いろラボブログ

ビジュアルプロミング言語「Viscuit(ビスケット)」の使い方、プログラミング作品やゲーム、プログラミング教育のアイデアなどを掲載していきます。

『ビスケット花火大会をひらこう!」ビスケット基本技マスターへの道!③さわったら…でてくる

f:id:koba1426:20190714092759p:image

今日は、かんたんに

「打ち上げ花火アニメーション」

がつくれる方法をしょうかいしたいと思います!

 

Viscuit(ビスケット)のプログラミングテクニックを楽しく学べる

「ビスケットプログラミング・基本技マスターへの道!」

ということで、

テクニックその③「さわったら…でてくる」

技もしょうかいしていきます。

 

 

みんなでオリジナル花火をつくって、

「ビスケット花火大会をひらこう!」

はじめての人でもチャレンジできるプログラミングです!

 

 

⬇︎今までのテクニック・ビスケットの使い方の基本はこちらをみてください!

www.irolaboblog.com

 

 

 

じゅんび  Viscuit(ビスケット)アプリを開く

f:id:koba1426:20190714094454j:image

「Viscuit(ビスケット)」のアプリをひらいて…

①「ひとりでつくる」をえらんで、

②黒色のへやをえらんで、

③「えんぴつ」ボタンをおしてください。

 

ステップ1  絵をかこう!

点(すきな色で)

f:id:koba1426:20190714152315p:image

ぼうがついた点

f:id:koba1426:20190714152319p:image

小ばくはつ
f:id:koba1426:20190714152454p:image

大ばくはつ(2色まぜるときれいかも)
f:id:koba1426:20190714152522p:image

 

ステップ2  「点」⇨「ぼうがついた点」に変わる

点を3つステージにだしましょう
f:id:koba1426:20190714152533j:image

こんなメガネをつくろう!
f:id:koba1426:20190714152535j:image

⬇︎ポイントは、ぼうがついた点の「しっぽ」を、うすい点のばしょに合わせることです。
f:id:koba1426:20190714152439j:image

これをつくったら、ステージの絵が変わりました!
f:id:koba1426:20190714154417j:image

「点」⇨「ぼうがついた点」に変わる

 

ステップ3  「ぼうがついた点」⇨「小ばくはつ」に変わる

次に、こんなメガネをつくろう!

f:id:koba1426:20190714152500j:image

⬇︎ポイントは、ぼうがついた点の「あたま」の部分の点を、小ばくはつと合わせることです。
f:id:koba1426:20190714155414j:image

⬇︎ステージの絵が変化しました!

f:id:koba1426:20190714152312j:image

「ぼうがついた点」⇨「小ばくはつ」に変わる

 

 

ステップ4  「小ばくはつ」⇨「大ばくはつ」に変わる

じつは、あと少しで完成です。  このメガネをつくろう!

f:id:koba1426:20190714152327j:image

⬇︎ステージの絵が変化しましたね。花火ドカーンです。
f:id:koba1426:20190714152511j:image

「小ばくはつ」⇨「大ばくはつ」に変わる

 

ステップ5  「大ばくはつ」はきえる

はい、これでアニメーションさいごのメガネです。

花火は、ばくはつしたらきえますよね。なのでこんなメガネつくろう!
f:id:koba1426:20190714152306j:image

⬇︎ばくはつした花火がきえましたね。
f:id:koba1426:20190714152526j:image

「大ばくはつ」はきえる

 

今までの動きを、全部みてみよう!

①点があります。
f:id:koba1426:20190714152443p:image

②ぼうがついた点に変わりました。
f:id:koba1426:20190714152324p:image

③小ばくはつに変わりました。
f:id:koba1426:20190714152517p:image

④大ばくはつに変わりました。
f:id:koba1426:20190714152514p:image

⑤大ばくはつはきえました。
f:id:koba1426:20190714152343p:image

これで、アニメーションのかんせいです!

 

ステップ6  さわったら点がでてくる

ここで、いよいよ

「さわったら…でてくる」の技をつかいます!

 

「ゆびマーク」をつかいましょう!

新しいメガネをだして

左のへやに「ゆびマーク」をいれます。

右のへやには「点」をいれます。

f:id:koba1426:20190714235735j:image

すごいかんたんですけど…

f:id:koba1426:20190714163623j:image

画面をさわったら、点がでてくる

 

「ゆびマーク」をつかうと、

「さわったら…」のめいれいがだせるようになります。
これだけで、タッチしたら変わるプログラムができちゃうのです!

 

あそぶ画面でためしてみよう!

⬇︎「あそぶボタン」をおしましょう。

f:id:koba1426:20190714164052j:image

画面をタッチしてみると…
f:id:koba1426:20190714152529p:image

でた!
f:id:koba1426:20190714152506p:image

あとは、さっきのアニメーションプログラムがうごいて…
f:id:koba1426:20190714152309p:image
f:id:koba1426:20190714152503p:image
f:id:koba1426:20190714152435p:image

⬆︎打ち上げせいこう!

 

きゅうきょく秘奥義・みだれうち!
f:id:koba1426:20190714164521p:image

ひゅーん
f:id:koba1426:20190714164516p:image

ドカーン!
f:id:koba1426:20190714164524p:image

 

やってみよう  ちがう色の花火もつくろう!

ちがう色の花火もかいて…
f:id:koba1426:20190714152330p:image

こういうメガネをつけたすと、どうなるでしょう?
f:id:koba1426:20190714152357j:image

あら、ちがう色の花火がまざった!なぜかな?
f:id:koba1426:20190714152334j:image

小ばくはつが変わるメガネが2しゅるいになったからですね!

f:id:koba1426:20190714164918j:image

「小ばくはつ」は

⇨「大ばくはつ(赤黄)」になったり

⇨「大ばくはつ(青緑)」になったりする

 

これで…

色どり花火大会のできあがり!いろんなオリジナル花火をつくってみよう!
f:id:koba1426:20190714152339p:image

 

つくりかたを動画で見てみよう

動画でもつくりかたが見れます!

ぜひアニメーションが動いているところを見てください!

youtu.be

きょうのプログラムは、こちらからViscuitアプリでひらけます!

https://develop.viscuit.com/env/view.html?control=edit%3A00300015%3A4227%2F1-1%2F015.json%3A1-1%3A

viscuit
viscuit
開発元:Digital Pocket Limited Liability Company

 

まとめ  テクニック③「さわったら…でてくる」

いかがだったでしょうか?

今日は「さわったら…でてくる」技をしょうかいしました。

 

スマホやタブレットやゲーム機など

「タッチすれば変わる」という現象は、もはや

小さい頃からICT機器を使い慣れている子どもにとっては、当たり前のことになっています。

 

…が、そんなタッチ操作も実はプログラミングでできている

という感覚が直感的に分かるのが、この「さわったら…でてくる」

テクニックではないでしょうか?

 

「さわったら…」は、まだまだ奥深い技が色々とありますので、

一つずつまた解説していきたいと思います!

 

あと、「ビスケットでつくる花火プログラミング」も

まだまだ色んなものがあると思います!

ぜひ自分のなりの花火プログラミングを見つけてみましょう!

 

 

⬇︎基本技その②「動いたら…ふえる」は、こちらです!

www.irolaboblog.com