キミも未来のトビラをひらこう!!

programmingSchool

できたを育むプログラミングスクール

レッスン53コママンガをつくろう!!

チャプター01はじめに

このチャプターのポイント

3コママンガを作ろう

完成形を見てみよう

今回は、メッセージの機能きのうを活用して、3コママンガのアニメーションを作っていこう。 動画どうがで、どんなストーリーなのかをしっかり確認かくにんしておくと、スクリプトを作る時にイメージがしやすくなるよ!

このチャプターでは、前にも使ったイベントの中にあるメッセージのブロックをいっぱいつかっていくよ。 今回の作品さくひんでは、 これまで使ったことを組み合わせながら長い作品を作っていくので、よく思い出しながらすすめていこう!

・作るストーリーを確認かくにんしよう

最初さいしょに今回作るマンガには3つのシーンがあるよ。どんなシーンがあるのかを、説明せつめいするね。

  1. Room1のシーン
  2. Urbanのシーン
  3. Room2のシーン
①Room1のシーン

Pico「プログラミング教室にいってきまーす!」 Nano「がんばれよ!」 Giga「パソコンわすれてるわよ!」 (GigaがPicoにパソコンをわたす)

②Urbanのシーン

会話はなし(Picoがステージの左から右まで歩く)

③Room2のシーン

Pico「Teraこんにちは!」 Tera「こんにちは」(1秒待つ) Tera「宿題(しゅくだい)やってきたかな?」(Picoが100歩前に出る) Pico「わすれてしまいましたーーーーー!」 Tera「こらー!」

チャプター02背景はいけい・スプライトを用意よういしよう

このチャプターのポイント

アニメーションにつかう背景はいけい・スプライトを用意よういして設定せってい していこう

・スプライトを確認しよう

まずは、スプライトを確認するよ。 合計5つ設定されていればOKだよ。

・コスチュームを確認しよう

Teraのコスチューム

・背景を確認しよう

次に、背景を確認しよう。合計3つ設定されていればOKだよ

完成だね。ここまで、みんなの画面でもやってみよう!

チャプター03Room1のシーンを作ろう①

このチャプターのポイント

背景はいけい登場とうじょうするスプライトを設置せっちしよう

背景はいけいえタイミングを作ろう

背景はいけいもいくつもあるので、いつのタイミングでどの背景をつかうのかをスクリプトを使って設定せっていしていくよ!

Room1のシーンはさいしょのシーンなので、 グリーンフラッグでRoom1のシーンになるようにしよう! まずは、背景が選択せんたくされた状態じょうたいで、スクリプトのタブをクリックしよう。

グリーンフラッグがおされた時はイベントの中から、そして見た目の中にある背景を~にするをスクリプトエリアに追加ついかしよう。 ファイル名が長くて切れてしまっているけど、背景を~にして待つとまちがえないように注意ちゅういしよう。

これで、背景の設定は完了かんりょうだよ!

チャプター04Room1のシーンを作ろう②

このチャプターのポイント

・スプライトの位置いちめよう

Room1のシーンでのスプライトの位置いちをきめて、背景はいけい がRoom1になった時にそれぞれのスプライトが決めた位置に行くようにしてみよう。

まず、タイミングはイベントの中にある背景が~になったときのブロックを使って決めるよ! 位置を決めるのは、うごきの中のx座標を~、y座標を~にするのブロックだったね。 それぞれのスプライトが背景が家になった時に、決めた位置に移動いどうするようにスクリプトを作ってみよう!

NanoとGigaは今のままだと、右をいたままなので、これも背景がRoom1になった時に左を向くようにしたいね! 向き(むき)をかえるにはどのブロックを つかうかおぼえているかな? 90度に向けるのブロックだよ! 今回は左を向かせたいので、「-90」だね! ただ、-90度に向けるだけだとNanoがひっくり返っちゃう!大変たいへんだ!

こんな時は、スプライトのiのマークから向きの設定せってい必要ひつようだったね。 逆さかさにならないように回転かいてん種類しゅるいを↔にしておこう。 これで、NanoとGigaの位置も決められたね.

[Nano]

[Giga]

さいごに、パソコンのスプライトだけど、さいしょは登場とうじょうしないよね。 そんな時は、見た目の中の隠すのスクリプトで Room1の背景になった時にかくれるように設定せっていしよう。

これで最初のシーンが完成だ!

チャプター05Room1のシーンを作ろう③

このチャプターのポイント

セリフとうごきを設定せっていしよう

前のチャプターでさいしょのシーンの位置いちができたね。 つぎは、それぞれのスプライトにメッセージを使ってセリフをつけていこう。 セリフを確認してみよう

①Room1のシーン

Pico「プログラミング教室にいってきまーす!」 Nano「がんばれよ!」 Giga「パソコン忘れ(わすれ)てるわよ!」 (GigaがPicoにパソコンをわたす) まずは、Picoが「プログラミング教室にいってきまーす!」と言うようにしてみよう。 これは一番最初のセリフだから、背景がRoom1になった時に言うようにすればいいね。

そして、そのあとPicoのセリフに合わせてNanoがセリフを言うようにしたいから、セリフと一緒いっしょにメッセージのブロックを使ってNanoに合図をおくるようにしておこう! まずはPicoを選択せんたくしよう。

次にセリフとメッセージのスクリプトを作っていこう。 メッセージの名前は、「いってきます」にしておこう。

次に、このメッセージを受け取って、Nanoが「がんばれよ!」と言いたいから、Nanoのスクリプトを作っていこう。 Nanoのセリフの後にGigaのセリフがあるから、Nanoのセリフの後にもメッセージで合図が必要ひつようだね。 メッセージの名前は、「頑張がんばれ!」にしておこう。

これで、PicoとNanoの会話が成り立つ(なりたつ)ようになったね。 さいごにGigaのセリフと、セリフに合わせてパソコンが出てくるようにしよう。 Gigaは「頑張れ!」のメッセージを受け取ったら「パソコン忘れてるわよ!」と言うように、メッセージとセリフを作っていこう。

そして、パソコンのスプライトにもスクリプトを作るひつようがあるね。パソコンのスプライトはNanoの「頑張れ!」の合図を受け取ったらGigaの左側に出てくるようにしよう。 かくれていたスクリプトを出す時は、見た目の中にある[表示する]のブロックをつかうよ!

これでRoom1のシーンが完成だね! グリーンフラッグをおして、完成形と同じようにできているかチェックしてみてね! 次のシーンを進めていこう!

チャプター06Urbanのシーンを作ろう①

このチャプターのポイント

背景と登場するスプライトを設置しよう

・背景を設定しよう

つぎはまちのシーンを作っていくよ! まずは街のシーンの背景を設定していこう!

Gigaのセリフがおわったら、この背景にすればよかったから、Gigaのセリフの後に背景をかえるスクリプトをつけるよ。 まずはGigaのスプライトを選択。

見た目の中にある[背景を~にする]をつかって、 お母さんのセリフの後にUrbanの背景にできたらUrbanのシーンの背景は完了だよ!

スプライトを設定しよう

Urbanのシーンで登場するスプライトはPicoだけだったね。 でも、グリーンフラッグで実行すると、Room1のシーンで登場していたNano、Giga、パソコンのスプライトが残っているから、Urbanのシーンになったらかくそう。

スプライトをかくす時は[隠す]のブロックを 使うんだったね。 背景が~になった時のロックと合わせそれぞれのスプライトにスクリプトを追加しよう!

ここまでを実行(じっこう)してみよう! 背景がUrbanになったときにNanoやGigaがきえたね!

さらに[背景が~になったとき(今回はRoom1)表示する]のブロックをNanoとGigaのスプライトに追加しよう。

グリーンフラッグをおして実行してみよう。 今度はRoom1のシーンでNanoとGigaがちゃんと出てきたね!

これで、Room1のシーンからUrbanのシーンまでの背景とスプライトの設定は完成だよ。

チャプター07街のシーンを作ろう②

このチャプターのポイント

Picoのうごきを設定しよう

・背景のえに合わせて動きを設定する

つぎに、Picoのうごきを設定していこう。シーンを確認しよう。 ②Urbanのシーン このシーンは、Picoが左から右へとうごくだけだよ。 どうすればいいか、すぐに分かるかな?

歩くようにスクリプトを追加。 これで、歩くようになったけど、このままだとPicoが真ん中あたりに配置はいちしていたら、歩いて右端みぎはし に行ったままになっちゃうね。

Urbanのシーンになった時に、X座標とY座標もきめてあげよう。 これで、グリーフラッグをおして問題もんだいないかどうかためしてみよう! これでここまでは完成だよ!

チャプター08Room2のシーンを作ろう①

このチャプターのポイント

背景と登場するスプライトを設置しよう

・背景を設定しよう

さいごにRoom2のシーンを作っていくよ! Picoがあるきおわったら、Picoの歩くスクリプトの後に背景を切り替えるようにスクリプトを追加しよう。

Picoのスプライトを選択。 見た目の中にある[背景を~にする]を使って、Room2の背景にできたらRoom2のシーンの背景は完了だよ!

背景の設定はもう完璧かな? グリーンフラッグで実行して問題ないかどうかチェックしておこう!

・スプライトを設定しよう

つぎにRoom2のシーンで登場するスプライトを設定していこう。 まず、グリーンフラッグで実行すると、Urbanのシーンで歩いたPicoが右側みぎがわ にいたままになっちゃってるね。 背景がRoom2になった時に、Room2のまんなかより、左に行くようにしよう。

X座標とY座標を設定してあげよう。 次はRoom2のシーンのセリフやうごきを追加していこう!

チャプター09Room2のシーンを作ろう②

このチャプターのポイント

Room2でのそれぞれのスプライトのうごきを設定していこう

・スプライトの動きを作っていこう

Room2でのスプライトのうごきを設定していこう。 シーンを確認しよう。

③Room2のシーン

Pico「Teraこんにちは!」 Tera「こんにちは」(1秒待つ) Tera「宿題しゅくだいやってきたかな?」 Pico(Picoが100歩前に出る) 「わすれてしまいましたーーーーー!」 Tera「こらー!」 こんなストーリーになるよ!

まずはPicoの動きから作っていくよ。 Room2のシーンになったら、「Teraこんにちは!」と言うようにして、 その後、Teraがあいさつを返すようにしたいから、セリフの後にはメッセージで合図をおくるようにしよう。 この時メッセージは「こんにちは」という名前をつけておこう。 Picoのスプライトを選択しよう。

スクリプトを追加していこう。

次に、「こんにちは!」に返すようにTeraのスクリプトを作っていこう。 まず、TeraはこのRoom2のシーンになったら登場させたいね。 ほかのシーンには出てこないから隠すのスクリプトを使って設定していこう。

Teraのスプライトを選択。 さらに、Teraの回転の種類を左右のみに設定しておこう。

これで、Teraのスプライトが教室のシーンで登場するようになったね。

次にTeraのセリフを作っていこう。 Tera「こんにちは」(1秒待つ) Tera「宿題やってきたかな?」だったね。 そして、宿題をやってきたかどうかの質問しつもんにPicoが答えるようにするから、セリフがおわったらメッセージをおくるように設定しよう。 メッセージの名前は、「宿題やってきたかな?」にしよう。

そして、「宿題やってきたかな?」の セリフに返すようにしていこう。 Picoのスプライトを選択。

シーンを確認しよう。 Tera「宿題やってきたかな?」 Pico(Picoが100歩前に出る) Pico「わすれてしまいましたーーーーー!」

また、「わすれてしまいまたーーーーー!」のセリフの後にメッセージで合図をおくるようにしよう。 メッセージの名前は、「わすれてしまいました」にするよ。

メッセージの使い方にはもうなれてきたかな? メッセージがいっぱいになるとわからなくなるから、よく頭を整理せいりしながらすすめていこう。

さあ、さいごのシーンだよ! Teraは、「わすれてしまいました」をうけとったら、Tera_dのおこっているコスチュームにして、「こらー!」と怒るようにしていこう。

グリーンフラッグで実行して3コママンガを再生してみよう! ぜんぶのシーンができたね! ただ、もう一回再生するとTeraが怒ったコスチュームのままだね。 これはRoom2のシーンになった時、元のコスチュームにもどるようにしておこう。

チャプター10最後に

・まとめ

さいごにここまで学んだことをおさらいしてみよう。 このレッスンでは、メッセージや背景を~にするを使って3コママンガを作ったね。 これまで使ったスクリプトを組み合わせることで複雑ふくざつなアニメーションを作ることに成功したね! ただ、スクリプトがふえるとどうしても頭がごちゃごちゃしちゃうので、スクリプトを追加したら何度も実行して問題ないか、追加するスクリプトはあるか?を確認していこう!

ブロックが多くなってきたときは、実行される順に上からブロックのかたまりをならべたり、シーンごとにブロックを近くにおくとわかりやすくなりるよ!

シーンや実行のとちゅうでコスチュームをかえたりスプライトを隠したりするときは、もういちど実行したときにちゃんと現れるように、元の状態じょうたい に戻すのを忘れないようにしよう。

メッセージを使ってアニメーションを作る時は、まず、キャラクター同士のやりとりを台本だいほんにして書き出して、背景の切り替わりを合図あいず としてそれぞれのシーンを作っていくとわかりやすいよ! さあ、今回勉強したことを復習ふくしゅうして、メッセージをふやしたり、スクリプトをふやして自分だけのアニメーションを作ってみよう!