マナティ

大人のためのやさしいプログラミング教室体験記

第5回 アニメーションをよりリアルに - ポーズを使いこなす

この連載では、プログラミングの経験が全くない方でもわかるように、プログラミングの学び方を説明していきます。
仕事でプログラミングをどうしても覚える必要がある方、最近流行りのプログラムに興味はあるけど何をするものか全くわからない方、近い将来必須科目になるプログラムを子供に習わせたいけど親である自分がプログラムが何なのかわからなくて不安な方など、そんな方でも気軽に読んでいただける連載です。
みなさんもプログラム初心者のMさんと一緒にプログラミングに触れてみてください。

プログラミング初心者のMさんが、ビジュアルプログラミング教材「プログラミングゼミ」を学びながら、
プログラミングの思想と技術を習得していくストーリーです。
Mさん、少しずつではありますが着実に進歩しているようですよ。

ポーズでアニメーションを動かす

ai_san03-75x85.png Mさん。今日は、リアルなアニメーションに挑戦してみましょうか。
OL_09-75x117.png リアルなアニメーション?
難しいんですか?
ai_san01-75x85.png これまでよりは難しいですが、Mさんならきっとできますよ!
OL_01-75x117.png そうですかー?
では、やってみます。
ai_san03-75x85.png この前、星を動かしたときは、星の位置が変わっていっただけで、
星の形は同じでしたね。
OL_03-75x117.png そうですね。ということは、今度は形を変えるんですか?
ai_san04-75x85.png その通りです!
それには「ポーズ」という考え方を使います。
ひとつのキャラに、複数の画像を割り当てておくことです。
OL_06-75x117.png へぇ。
難しそう。
ai_san03-75x85.png 少し手間はかかりますが、難しくはないですよ。
「習うより慣れろ」です。早速やってみましょう!
まず、「あたらしくつくる」→「じゆうにつくる」を開いてみてください
OL_01-75x117.png はい。

pic5-1.png

pic5-2.png

pic5-3.png

OL_01-75x117.png なんにもないんですね~。
ai_san03-75x85.png そうですね。
その代わり、本当に自由に作れますよ!
まず、左の「キャラ」の下の「+」をクリックしてみてください。
OL_01-75x117.png はい。

pic5-4.png

OL_01-75x117.png こんな画面が出てきました。
ai_san03-75x85.png ここで、キャラの画像を取り込めるんです。
画像は、ファイルからも取り込めますし、写真を撮ってもいいんですよ。
OL_03-75x117.png そのファイルはどうするんですか?
ai_san01-75x85.png 自分で書いてもいいですが、
今回は、あらかじめ用意されている画像を使いましょう!
「しゃしんをえらぶ」の下にあるicon5-1.pngをクリックしてください。
OL_01-75x117.png やってみますね。

pic5-5.png

OL_03-75x117.png えっ!?
これって…、わたし?
ai_san03-75x85.png 細かいことは気にしないで、とりあえず、「OL_01.png」を取り込んでみてください。
OL_06-75x117.png なんか、恥ずかしいな。

pic5-6.png

OL_03-75x117.png 取り込みました。
ai_san03-75x85.png 見栄えをよくするために、背景の白い部分を消しておきましょうか。
右のアイコンを選択すると、消しゴムとして使えますよ。
輪郭の線を自動認識して消してくれるので便利ですよ。
OL_05-75x117.png なるほど。こうして背景を消すのか。
 
 
OL_05-75x117.png できました!
ai_san01-75x85.png はやいですね。
では、今できたMさんのキャラをもう一度クリックしてください。
OL_05-75x117.png わかりました。

pic5-7.png

ai_san03-75x85.png そこで、「しゃしん」をクリックすると、先ほどと同じ画面が表示されますね。

pic5-8.png

ai_san03-75x85.png ここで、画面の上の方に顔が2つ表示されていて、その右に「+」がありますね。
そこをクリックしてみてください。
OL_03-75x117.png はい。

pic5-9.png

OL_03-75x117.png 画像が消えましたよ。
ai_san03-75x85.png 心配しないでください。上の方には、画像が残っていますから。
ここで、もう一度icon5-1.pngをクリックして、今度は、「OL_02.png」を取り込んで、さっきと同じように背景を消してください。
OL_05-75x117.png はい。

pic5-10.png

OL_05-75x117.png できました。
ai_san03-75x85.png 慣れてきましたね。
では、画面の上の部分に注目してください。
二つの違った表情のMさんがありますね。
OL_03-75x117.png あ、本当だ。前に取り込んだ画像は消えてしまったわけではないんですね。
ai_san03-75x85.png そうです。
そして、これが、「ポーズ」です。
このキャラには、2つの違ったポーズが用意されたことになります。
OL_03-75x117.png これをどう使うんですか?
ai_san03-75x85.png 左下の矢印をクリックして、プログラムの画面に戻りましょうか。
「キャラ」のグループをクリックしてみましょう。
OL_01-75x117.png なんか、ポーズのブロックが増えてますね。
ai_san03-75x85.png そうですね。
では、Mさんが1秒ごとに表情を変えるプログラムを作ってみてください。
OL_01-75x117.png 分かりました。
うーん。試しに「つぎのポーズにする」のブロックを使ってみようか。
一秒ごとに表情を変えるから、「1びょうまつ」のブロックをつないで、…これを繰り返せばいいのかな。

pic5-11_005.png

 
 
OL_01-75x117.png できたー!
ai_san05-75x85.png できましたね。意外と簡単でしょう?
OL_01-75x117.png そうですね。
アニメーションで表情を変えるときに使えますね。
ai_san01-75x85.png そうそう。ほかの表情も取り込んでやってみると面白いですよ
 
 

動きの条件分岐 サッカーゴール

ai_san03-75x85.png 今度は、サッカーのアニメーションにチャレンジしましょうか?
OL_05-75x117.png 面白そうですね。
ai_san03-75x85.png さっきと同じように、ファイルの取り込みから始めましょう。 1番目から6番目のポーズを取り込んでください。
ai_san03-75x85.png では、ボールを蹴りながらゴールに近づき、ゴールするプログラムを作って下さい。
OL_01-75x117.png はい。分かりました。
OL_03-75x117.png これでいいのかな?

pic5-12_003.png

OL_03-75x117.png 動かしてみよう。
 
 
OL_09-75x117.png 動きが早すぎる! もっと遅くしないと。
「ちょっとまつ」ではなく、「0.1びょうまつ」にしてみようかな。
動かしてみよう。
 
 
OL_09-75x117.png 動きはなめらかになったけど、動く速さが遅すぎるなー。
ai_san03-75x85.png 同じポーズのまま何回か進んで、次のポーズにするといいですよ。
OL_03-75x117.png なるほど、その手がありましたね。
では、早速やってみよう。

pic5-13_003.png

 
 
OL_03-75x117.png できた―!
ai_san03-75x85.png うまく動きましたね。
Mさん、センスいいですね。
OL_01-75x117.png ありがとうございます。 でも、せっかくゴールしたんだから、7番目のicon5-2-50x54.pngのポーズも使いたいですね。
ai_san05-75x85.png ですよねー。
では、そのポーズはどんな時に表示したいですか?
OL_01-75x117.png ゴールした時ですね。
ai_san05-75x85.png そうですよね。
では、それは、キャラがどこについた時ですか?
OL_05-75x117.png 画面の端についた時ですね。
ai_san03-75x85.png では、条件ブロックで、「がめんのはしについた」というブロックがあるので、
それを使ってみましょうか。
OL_05-75x117.png はい。
まず、7番目のポーズを取り込もう。
OL_05-75x117.png できた。
次は、「ずっとくりかえす」ではなくて、「(がめんのはしについた)になるまでくりかえす」を使ってみよう。

pic5-14_004.png

 
 
OL_09-75x117.png あれ?
ゴールしてないのに、ゴールのポーズが入っちゃった。
先生、7番目のポーズを最後だけ表示させるにはどうすればいいですか?
ai_san03-75x85.png 特定のポーズを指定するには、「キャラ」のブロックリストの「いまのポーズのじゅんばん」を使えますよ。

pic5-15.png

ai_san03-75x85.png それを使って、うまく条件を考えてみてください。
Mさんなら、きっとできますよ。
OL_03-75x117.png 自信ないけど、やってみよう。

画面の端に着くまでは、7番目のポーズを表示させてはいけないんだから、6番目のポーズの次は1番目のポーズにすればいいのね。
こうかな?

pic5-16_004.png

 
 
OL_03-75x117.png できたー。
でも、ここからゴールのポーズにするにはどうすればいいんだろう?
ai_san05-75x85.png ゴールした後に7番目のポーズにしたいんですから、
ループを抜けてからポーズを変えてみたらどうですか?
OL_03-75x117.png あっ、そうですね。
では、やってみます。

pic5-17_3.png

OL_03-75x117.png これでどうかな?
 
 
OL_01-75x117.png やったー、できた!
ai_san04-75x85.png Mさん、すごいですね。
プログラミング、すごく上達しましたね。
OL_10-75x117.png 先生が褒めるときは、何かウラがありそうだな―。

演出のために背景を変えよう -メッセージの概念

ai_san03-75x85.png 鋭いですね。実はあるんです。
もっとカッコよく見せるために、2点ほど改良してみましょう!

1点目は、ゴール後のキャラの位置です。
今は画面からはみ出てるので、もう少し左に移動させて表示させるといいですよ。
2点目は、ゴールの演出です。
ゴールした時、背景をピカピカさせてみましょうか。
OL_03-75x117.png 1点目は簡単そうですね。
でも、2点目は、どうすればいいのか見当が付きません。
先生、何かヒントをお願いします!
ai_san03-75x85.png キャラが画面の端に着いたときに、背景が変わるようにするには、キャラから背景に「着いたよ!」というメッセージを送るといいですよ。
OL_07-75x117.png メッセージ?
ピンとこないなー。
ai_san03-75x85.png これまでは、キャラに自分を動かすプログラムを作ってきましたね。
でも、あるタイミングで、他のキャラを動かしたいとき、「メッセージ」を送るんです。
仕事でも、契約を取るのは営業、金銭の受け渡しは経理、というふうに、分業化されていることがありますよね。そのとき、営業から経理に「あとはお願いね」という申し送りをしますよね。それと同じです。
OL_07-75x117.png なるほど、なんとなくイメージは掴めました。
プログラミングではどうすればいいんですか?
ai_san03-75x85.png 「キャラにメッセージを送る」と「メッセージを受け取った」のブロックをペアで使います。

pic5-18.png

pic5-19.png

ai_san03-75x85.png サッカー少年には、これまでと同じプログラムで、最後にメッセージを送るブロック、
背景には、メッセージを受け取った後の動きのプログラムを書くようにします。
そのとき、メッセージには、「ゴール」のように、分かりやすい名前を付けておくといいですよ。
OL_01-75x117.png とりあえず、やってみますね。
OL_01-75x117.png サッカー少年のプログラムは、
画面の端から少し戻るので、「はんたいをむく」を使って、
最後に、背景に「ゴール」というメッセージを送る、…これでいいかな。

pic5-20_004.png

ai_san01-75x85.png いいですね。
今度は、背景にプログラミングしてみてください。
OL_06-75x117.png 背景をピカピカさせるには、新しい画像をポーズで取り込むんですか?
新しい画像はないんですけど。
ai_san03-75x85.png 別の画像を取り込んでもいいんですが、今回は、今ある画像を加工してみましょう。
背景のプログラムで、「しゃしん」をクリックして、今と同じ画像を新しいポーズとして取り込んでください。
OL_01-75x117.png はい、分かりました。

pic5-21.png

OL_05-75x117.png 取り込みました。
ai_san03-75x85.png では、次に、画面右下の「OK」ボタンのすぐ上のスライドバーをずらしてみてください。
OL_05-75x117.png はい。

pic5-22.png

OL_03-75x117.png 背景の色が変わりました!
ai_san01-75x85.png いいですね。
これらを何回か交互に表示させれば、画面がピカピカしますよね。
OL_01-75x117.png なるほど!
これでバリエーションが広がりそうです!
何回か交互に表示させるには、ポーズを切り替えればいいのね。

pic5-23_003.png

OL_05-75x117.png 動かしてみようっと。
 
 
OL_01-75x117.png カッコいい!
わたしって天才かも!?
ai_san04-75x85.png 素晴らしい!カッコいいですね~!
OL_05-75x117.png 先生、今日は、ちょっと難しかったけど、すごく楽しかったです!
ai_san01-75x85.png その調子です!
今回は、「ポーズ」とメッセージを扱いましたが、二つともリアルな動きをさせるときに不可欠な考え方です。
もちろん、アニメーションだけではなく、ビジネスプログラミングにも役立ちますよ。
OL_03-75x117.png ええっ、そうなんですか?
どのように役立つんですか?
ai_san01-75x85.png 複雑なシステムを組む時には、一つのプログラムで書こうとするのではなく、
処理を分割して、それぞれをメッセージでつないでいく手法がとられます。
パーツパーツをまず作って、それを組み合わせるので、
作りやすいし、デバッグも楽なんです。
是非マスターして下さいね!
OL_01-75x117.png はいっ、分かりました!

皆さんも、Mさん同様、楽しくなってきましたか?
やはり、できることが増えてきて動きのあるプログラムを作るのは楽しいですね。
今回学んだ「ポーズ」と「メッセージ」は先生が指摘したように、プログラミングに不可欠の概念ですので、是非マスターしてください。
次回は、「プログラミングで図形を描こう」というテーマです。
お楽しみに!

著者プロフィール

特定非営利活動法人 ロジカ・アカデミー 理事長 関 愛(著者)
中学生の頃からプログラミングを独学し,18歳の時に北海道の田舎町でシステムエンジニアとして起業。19歳で情報処理推進機構(IPA)から「天才プログラマー/スーパークリエータ」の認定を受ける。23歳の時に新入社員研修講師として活動を開始し,Yahoo! JAPAN,UFJ銀行,日本生命をはじめとする大手企業で1,000名以上の現役プログラマーを育成してきた。33歳で特定非営利活動法人ロジカ・アカデミーを設立し,理事長に就任。
現在は「すべての人に生きる力を授けるプログラミング教育」をコンセプトとした「ロジカ式」教材の開発を指揮する傍ら,プログラミング教育の普及と講師育成を中心とした活動に携わっている。
著者ホームページ:https://logica.academy