いろラボブログ

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

ビスケットプログラミングで「春の世界」をつくろう!(Viscuitの使い方④「アニメーション」)

f:id:koba1426:20190330151729p:image

お花見シーズン、満開ですね!

 

ということで、きょうは

「春の世界(はるのせかい)」

です!

 

おはなみにいったひとも、いってないひとも、

おえかきプログラミングで春(はる)をつくってみよう!

アニメーションで、「ぴょんぴょん」「にょきにょき」する わざもしょうかいします!

 

⬇︎はじめてのひとは、こちらからどうぞ!

Viscuitの使い方①「海の世界」(動きの方向と速さ)

www.irolaboblog.com

 

Viscuitの使い方④「春の世界」アニメーション

f:id:koba1426:20190330152940j:image

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

①「みんなでつくる」をえらんで、

②「きみどり」のいろのへやをえらんで、

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

 

ステップ1  「おはな」のえをかこう!

①「えんぴつ」ボタンをおして、

f:id:koba1426:20190330153132j:image

②「おはな」のえをかこう!
f:id:koba1426:20190330153136p:image

③かんせいしたら、もういっかい

「えんぴつ」ボタンをおしましょう。

f:id:koba1426:20190330153650j:image

④みぎうえに、さっきかいた「おはな」がでてきてますね。これをタッチ!

f:id:koba1426:20190330153221j:image
⑤そしたら、「したえ」がうすくでます。

みぎうえには、さっきつかったいろもでてきます。
f:id:koba1426:20190330153128j:image

⑥これをつかって、

「ジャンプしたおはな」をかいてみよう!

f:id:koba1426:20190330154020p:image

⑦これで、2つのおはなができました。

f:id:koba1426:20190330154252j:image

 

ステップ2  「ぴょんぴょんアニメ」をつくろう!

①「おはな」をなんこか、ひろばにだそう!

f:id:koba1426:20190330154550j:image

②こんなメガネをつくってみよう!
f:id:koba1426:20190330154540j:image

おおきくすると、こういうの
f:id:koba1426:20190330154557j:image

  • 「おはな」が「ジャンプおはな」にかわる メガネです。

 

そしたら、おはながジャンプした!
f:id:koba1426:20190330154553j:image

③こんどはもうひとつ、こんなメガネもつくろう!
f:id:koba1426:20190330154546j:image

おおきくすると
f:id:koba1426:20190330154543j:image

  • 「ジャンプおはな」が「おはな」にかわる メガネです。

 

そしたら、おはながちゃくちした!

f:id:koba1426:20190330154756j:image

 

ずっとみてると

「ジャンプ!」

f:id:koba1426:20190330155006p:image

「ちゃくち」

f:id:koba1426:20190330154937p:image

「ジャンプ!」

f:id:koba1426:20190330154844p:image

「ちゃくち」

f:id:koba1426:20190330154937p:image

ぴょんぴょんアニメのできあがり!

 

 

ワンポイント メガネのひみつ①
アニメーションのメガネのしくみは、Viscuitの使い方③「宇宙の世界」(チカチカアニメ)で紹介したものと同じです。詳しく知りたい方は、こちらも合わせてご覧ください⬇︎

www.irolaboblog.com

 

ステップ3  「にょきにょきアニメ」をつくろう!

①こんどは、「つくし」のえをかこう!

f:id:koba1426:20190330160900p:image

②「したえ」をりようして、おなじいろをつかって、
f:id:koba1426:20190330160913j:image

③「のびたつくし」のえもかこう!
f:id:koba1426:20190330160852p:image

④「つくし」をなんこか、ひろばにだして
f:id:koba1426:20190330160909j:image

⑤こんな2つのメガネをつくろう!
f:id:koba1426:20190330160906j:image

おおきくすると
f:id:koba1426:20190330160849j:image

  • 「つくし」が「のびたつくし」にかわる
  • 「のびたつくし」が「つくし」にかわる

 

そうすると…

「ちぢみ」
f:id:koba1426:20190330160835p:image

「にょき!」
f:id:koba1426:20190330160840p:image

「ちぢみ」
f:id:koba1426:20190330160845p:image

「にょき!」

f:id:koba1426:20190330160840p:image

にょきにょきアニメ かんせい!

 

ステップ4  「さくらのはながさく」アニメをつくろう!

これは、ちょっとだけおうようへん

①「め」をかいて、

f:id:koba1426:20190330161711p:image

②「つぼみ」をかいて、
f:id:koba1426:20190330161737p:image

③「はなびら」をかいて、
f:id:koba1426:20190330161730p:image

④「め」をいっぱいだそう!
f:id:koba1426:20190330161718j:image
f:id:koba1426:20190330161727j:image

⑤このメガネで、「め」が「つぼみ」に!
f:id:koba1426:20190330161734j:image

⑥もうひとつ、このメガネで「つぼみ」が「はなびら」に!
f:id:koba1426:20190330161715j:image

おおきくすると、この2つのメガネですね。
f:id:koba1426:20190330161723j:image

⑦さらに、このメガネつくると

「ゆらゆらおちる」はなびらのできあがり

f:id:koba1426:20190330162122j:image

⑧さいごに「はなびら」が「め」にもどるメガネをつくると

ときどき、「め」にもどったりします!

(あとで、どうがでみてね)

f:id:koba1426:20190330162247j:image

 

ワンポイント メガネのひみつ②
f:id:koba1426:20190330162524j:imageこの3つのメガネは、左の部屋に全部同じ「はなびら」の絵が入っているので、「はなびら」の絵はこれら3通りの命令のどれか1つを選択し、動き続けます。これで、はなびらは「ゆらゆらうごくけど、たまに め にもどる」というふうにプログミングされたワケですね。

 

ステップ5  すきな「はるのせかい」をつくろう!

「さくらのき」

f:id:koba1426:20190330163022p:image

「ちょうちょ」
f:id:koba1426:20190330163027p:image

なんでもオッケー!

おはなみのせかいもできそうですね!

 

じぶんだけの「はるのせかい」をつくろう!

 

できた!
f:id:koba1426:20190330163037p:image

 

動画でみてみよう!

アニメーションなので、うごいているところをぜひみてね。

つくりかたも、どうがでたのしく!わかりやすく!まなべます。

youtu.be

 

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

https://develop.viscuit.com/env/view.html?control=edit%3A00300010%3A0456%2F1-1%2F021.json%3A1-1%3A

⬇︎アプリは無料でインストールできます

viscuit
viscuit
開発元:Digital Pocket Limited Liability Company

 

 

さいごに

きょうはメガネ2〜3つのかんたんなアニメーションのつくりかたでしたが、

100こメガネくらいあったら、めっちゃすごいアニメもつくれそうですよね。

「パラパラまんが」みたいにアニメづくりにゅうもんとして、

チャレンジしてみるのもいいかも!

 

https://www.instagram.com/

 

 

⬇︎かんたんなプログラミングゲームの作り方入門は、こちらです

www.irolaboblog.com

 

今週のお題「桜」