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

公式LINEで相談♪

programmingSchool

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

レッスン3キャラクターがおしゃべりするアニメーションを作ろう!!

チャプター01はじめに

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

キャラクターにおしゃべりをさせてみよう

完成形を見てみよう

まずは、今回のレッスンで作るものを見ていこう。 今回は、ボタンを押すとキャラクター同士がおしゃべりをするアニメーションを作っていくよ

ボタンをおすと、それぞれのボタンに合わせて背景がかわったり、キャラクターが会話をするようにしていくよ。 ボタンは左から順に朝、昼、夜となっていて、それぞれの時間帯じかんたいにあったアニメーションになっていたね!

このチャプターでは、イベントの 中にあるメッセージのブロックをつかっていくよ。この機能きのうはこのあとにもつかっていくからしっかりつかいかたをおぼえよう!!

実際にアニメーションを作っていこう!

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

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

アニメーションに使う背景スプライトを用意して設定していこう

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

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

次に、コスチュームを確認しよう。

Catのコスチューム Dog1のコスチューム
・背景を確認しよう

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

・スプライトと背景を調整しよう

最後に、スプライトと背景を整えよう。 朝・昼・夜のボタンは大きさを50にしよう。

・背景を切り替える

今回の作品では、ボタンを おした時(クリックされた時)に、背景をそれぞれのボタンの 時間帯に合わせたいので、設定していこう。 イベントの中にある、このスプライトが 押されたときというブロックをつかうよ!

つぎに、見た目の中にある背景を~にするというブロックを組み合わせることで、クリックされた時に特定とくていの背景になるように設定せってい してみよう。

完成だね!

設定せっていができたら、それぞれのボタンをクリックして 背景はいけいがかわることを 確認かくにんしてみてね!

ここまで、みんなの画面でもやってみよう!

チャプター03おしゃべりをさせてみよう

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

メッセージをつかってキャラクターが会話をするようにしていこう

・セリフを作ろう

まずは、おしゃべりをしているようにするために、ステージ上でスプライトをむかいあわせにしましょう。

Catを少しうごかして左側ひだりがわに、 Dog1の方はステージの右側みぎがわにうごかして、左(-90ど)の方向ほうこうをむく ようにしてみよう!

これでおしゃべりをしているようになったね。

つぎ、ふたりの会話かいわをつくっていくよ。 朝の会話では、

Cat:「おはよう」とあいさつ Dog1:「いい天気だね」と返事へんじをする

という会話を作っていこう。

まずは、Catのスプライトの方で、 イベントの中にある背景が~になった時の ブロックをつかって、朝の背景(はいけい)になった時に、「おはよう」と2びょう言うようにしてみよう。

「おはよう」と2秒言う。は、 見た目の中にある、~と2秒言うの ブロックを組み合わせることでできるね。 これで、朝のボタンをおした時 (クリックされた時)に「おはよう」と 言うようになったね。

つぎに、Dog1の方でも同じように、「いい天気だね」と言うようにしてみよう。

同じように、背景が朝になったときのブロックをつかえば、朝のボタンをおした時(クリックした時)にセリフを言うようにはなったけど、同じタイミングで話してしまって、会話になってないね。 会話にするにはどうしたらいいのだろう?

Catが「おはよう」と言った後に、 Dog1の「いい天気だね」をつなげられればいいんだけど、 べつのスプライトのスクリプトをつなげることはできないんだ。

こういう場合は、イベントの中のメッセージのブロックをつかっていくよ!

メッセージとは、スプライトとスプライトがタイミングを合わせるために、おくったり、うけとったりする合図のことだよ。

メッセージを送るのブロックをつかうと、 スクリプトが設定せっていされている スプライトが全体ぜんたい合図あいずをおくるよ それを、メッセージを受け取ったときの ブロックが設定されている スプライトがることで、 合図をうけとることができるんだよ。

また、メッセージをうけとった時に どんなうごきをするかのスクリプトを つくっておくことで、合図にあわせたうごきができるようになるよ。実際じっざいにつかってみよう! まずは、メッセージをおくるがわの スクリプトを追加ついかするよ。

そして、合図をおくったら、こんどは受け取るがわ設定せっていしないとだね。

これで、 「朝のボタンをおす」 →「背景が朝になる」 →「Catがおはようと言う。」 →「合図を送る(おくる)」 →「Dog1がいい天気だねと言う。」 という連続れんぞくしたうごきができたね!

こんなふうに、メッセージをつかうと、 アニメのような複雑ふくざつな会話シーンもつくることができるんだよ! それぞれのスプライトを正しい順番じゅんばんでうごかすにはメッセージを どんな風におくったり、うけとったりすればいいのか、頭の中でよく考えてつかっていこう。 これで、朝のボタンをおした時のうごきはバッチリだね!

チャプター04連続れんぞくしたおしゃべりをさせてみよう

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

メッセージをうけとって、さらに メッセージをおくることで会話のやりとりができるようにしてみよう

・2つ以上いじょうのメッセージをつかおう

昼のボタンのうごきを、つくっていこう

昼の会話では

Dog1:「おなかすいたー」と話しかける Cat:「何食べよっか」と返事へんじをする Dog1:「お肉」とこたえる

という会話をつくっていこう

前のチャプターでつかった、メッセージを2つつかうことで、メッセージをうけとって、 さらにメッセージを返すといううごきをつくっていくよ!

まずは、今回、Dog1が話しかけるので、Dog1のスプライトを 選択せんたくして、イベントの中の背景が昼になったら、見た目の中の~と 2秒言うで昼の会話がはじめるように設定していこう。

そして、「おなかすいたー」と言ったあとに、メッセージを送るを使って合図を出していこう。 今回メッセージの名前は「おなかすいたー」にしておきましょう。 これで、昼のボタンをおした時に 「おなかすいたー」と話すようになったね

つぎに、Catは、2つのうごきをしなければいけないね!

メッセージ(おなかすいたー)をうけとって、「なに食べよっか」と言う 「なに食べよっか」とい言った後にさらに、合図をおくる

Catのスクリプトを作っていこう! もう、なれてきたからすぐにできちゃうかな?

メッセージがふえてきたから、 ちがうメッセージをうけとったり、 おくったりしないように注意ちゅういしながら見てみてね。

ここで、Dog1がメッセージをうけとって、 「お肉!」とこたえられるようにしてみよう。

これで昼のボタンの会話も完成だ! ここまでできたら、実際じっさいにボタンをおしておしゃべりができているか確認(かくにん)してみよう!

これで会話のやり取りがあるうごきがつくれたね! いくつもメッセージが出てくると、まちがえちゃうことも多くなって くるので集中しゅうちゅうしていこう!

チャプター05会話と合わせたうごきをつくろう

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

メッセージを活用して、会話といっしょにスプライトがうごくようにしていこう

・メッセージをつかってスプライトをうごきだすようにしよう

昼のシーンでスプライト同士どうしがメッセージによって、会話のやりとりが できるようになったね。 メッセージは会話のやりとりだけじゃなくて、メッセージをうけとって 別のうごきをする合図にもなるんだよ!実際じっさい実際にやってみよう!

今回は、「お肉!」と回答した時に、 うれしくて足踏あしぶみを しているようなアニメーションをつくってみよう 足踏あしぶみはさいしょに 設定せっていした、コスチュームのAとBを交互こうごに変えることでうごきを作ることができるね。

ここで、メッセージを受け取ったらを活用してうごきをつけてみよう。 今回は、何食べよっかを受け取ったときに足踏あしぶみをさせたいので、 Dog1のスクリプトを追加ついかするよ!

こんなスクリプトができたかな?

メッセージをうけとったと同時にちがったうごきをさせたい時は、メッセージを受け取った時のブロックを2つつかうことで出来るようになるよ!

これで、会話をしたりうごいたり色々なうごきをさせることができるようになったね。 なんだか、テレビで見ているアニメやパソコンでみるアニメーションに近づいてきてるね! さいごに夜のボタンでも、会話と動きがセットになっているスクリプトをつくっていこう!

チャプター06動きと会話を組み合わせよう

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

これまで学んだことを活用して、さいごのボタンのうごきをくっていこう

・メッセージをつかってうごきを完成させよう

朝、昼のシーンが完成したので、さいごに夜のシーンをつくっていこう! ここまで学んだ内容ないようをもとにうごきを作ることができるので、 これまでのことを思い出しながらすすめていこう。

夜のシーンでは

Cat:「バイバイ」と話しかける Dog1:「またね!」と返事(へんじ)をする それぞれべつ方向ほうこうにあるいてかえっていく

といううごきを作っていこう。まずは、Catのうごきからだね!

背景が夜になったら、バイバイと言ってメッセージをおくる スクリプトをつくっていこう。

今度こんどはDog1がわだね。 バイバイのメッセージをうけとったら、 「またね!」と返事をするんだったね。 そして、またね!を合図にそれぞれ、 はんたい方向にうごきだす必要があるから、またメッセージをつかおう!

またね!のメッセージをうけとったら、 Catはぎゃくの方をむいて歩いていくようにしてみよう!

前にも作ったことのあるスクリプトだけど、1つずつ確認かくにんしながらつくっていこう。

夜のボタンをおしてみよう。 うまくいくかな? さかさまになっちゃったね。 これは、スプライトのiのボタンの ところから回転の種類しゅるいをへんこうしよう。

逆さまになっちゃう時は、回転の種類しゅるいがどうなっているかを見るようにしよう!

Dog1も右をむいて歩き出すようにスクリプトを つくっていこう。

Dog1は、またね!のメッセージをおくった後に歩き出せばいいから、 またね!を送るのブロックにつづけてブロックをつくろう。 これで、夜のボタンをおすと会話をした後にそれぞれがうごいて帰っていく、うごきができたね。

ここまで完成かんせいおめでとう! べつのボタンもおしてほかのボタンが正しくうごくかも確認しよう。

夜のボタンでうごいた分、 へんなところにいってしまって、 これじゃ、ちゃんとむかいあっておしゃべりができてないね。 さいごにスタートの位置をそろえて完成させよう!

・スタートの位置を設定せっていしよう

どちらのスプライトもスタートの位置と向きをきめよう。 それぞれのボタンがおされ、背景がかわった時、スタートの位置と向きに移動いどうするようにしよう! まずは、Catから設定していこう。

今回は90度に向けるのブロックと x座標を-111y座標を-30にする ブロックをつかってスタート位置を設定しよう。 今回、3つの背景分スタート位置を設定する必要ひつようがあるから、同じスクリプトを3つつかうようにしてみよう。 上のバーにある複製ふくせいのボタンをおして、スクリプトをタッチすると同じスクリプトがコピーできるよ!

これを、それぞれ背景がかわったときのスクリプトに合わせていこう。 ただし、背景が昼になったときはCatのスクリプトエリアにはなかったので、これはイベントの中からもってこよう。 最終的さいしゅうてきに、Catのスクリプトはこんなかんじになるよ! あっていたかな?

同じようにDog1のスタート位置も設定してみよう。 スタートの位置はぜったいにここではないとだめだよ!という位置はないから、自分のステージで位置をきめてスクリプトをつくってみてね。 テキストでは、正解せいかい一例いちれいとして、Dog1の最終的さいしゅうてき スクリプトを紹介しょうかいするね。

チャプター07最後さいご

にここまで学んだことをおさらいしてみよう。 このレッスンでは、メッセージについて勉強べんきょうしたね。

メッセージはおくったり、うけとったりすることができて、メッセージによって スプライト同士どうし連動れんどうしたり、やりとりできるようになったね。 メッセージをうけとってしゃべったり、メッセージをうけとってうごきだしたり、いろんなうごきを作ることができたよ。 それぞれのスプライトのうごきにあわせて、メッセージをおくりあうことで アニメーションができたように、このメッセージを活用する場面ばめんが いっぱい出てくるからしっかりこのレッスンでおぼえてしまおう! 時間のある人は、メッセージをふやしたり、スクリプトをふやして自分だけの アニメーションをつくってみよう!