Scratchで「しゃべって見つめるキャラクター」をつくろう！

パソコンのマイクに向かって話しかけると、キャラがパクパクしゃべっている(ように見える)。しかも、マウスを動かすと目で追いかけてくる——。
そんな“しゃべって見つめるキャラ”を、Scratchでつくってみました。

ちょっとした演出に使っても楽しいし、声と動きが連動することで、キャラクターが「生きている」感じもつくりだせます。

キャラクターのもとをつくろう

まずはスプライトを用意しよう！顔の輪郭(りんかく)、目は仮のものでOKです。

Scratch右下から新しいスプライトを追加して、顔のベースとなる形を描きます。目はまだ本番じゃなくてOK！あとで直せるので、気軽に作りましょう。口は後で別のスプライトとして作成します。

下の写真では顔の輪郭を丸で、仮の目を四角で描いています。

「あいうえお」の口を5種類用意して動かすと、それっぽくなる！

しゃべっているように見せるには、口のパターンをいくつか使うことがコツ。あ・い・う・え・お風の5パターンを作っておくと自然な動きになります。

下の写真のように、しゃべる口のスプライトに5つのコスチュームがあるようにしましょう。

コンピュータのマイクで音をひろって、口がパクパク！先ほど描いた口のスプライトにプログラムを作りましょう。

おんりょうブロックを使うと、マイクの音量に応じて口を動かすことができます。声に反応してパクパクするだけなのですが、意外としゃべっているように見えます。

プログラムができたら、コンピュータに話しかけてみましょう。うまくいかない場合はScratchのサイトにマイクの使用許可がされているか確認してみてください。

しゃべる／しゃべらないを切り替えられると便利！

しゃべるモードという変数を用意して切り替えられるようにしてみます。下のプログラム例ではおんりょうが小さい時はしゃべるモードを0にすることにしてみました。

作ったしゃべるモードの変数を使って、口のスプライトを表示したり、隠したりすることにします。ずっと表示してしまうと、マイクに話しかけていないときに、しゃべっている途中で止まっているように見えてしまうためです。しゃべっていない時の口は、この後作っていきます。

しゃべっていない時の口パターンを用意します！

常に動いていたり、しゃべっている口のままピタッと止まってしまうと不自然なので、閉じている口も準備。話しかけられるのを待っているような表情があるとキャラのリアリティも上がります。

白目と黒目を正円で描いて、目のパーツを完成！

見た目を整えるために、最初の仮の目は削除。白目と黒目をそれぞれ正円で描くと、動きがきれいに見えます。位置やサイズは、実際に動かしながら直せばよいかと思います。

黒目がマウスの方向を見つめるしくみを作ろう！

ベクトルの計算や三角関数を使わずに、位置のずれだけで“なんとなく”見つめてる感じが出せます。マウスまでの最大距離という変数と「〇〇までのきょり」ブロックを使って目を動かす距離を計算しています。

マウスまでの最大距離は画面の中心から、画面の右上の角までの長さを計算しています。ピタゴラスの定理という、中学生で習う内容を使っています。

マウスをクリックしている間だけ見つめてくるしくみ

ずっと見つめられてると変な感じがするので、クリックしている間だけ見てくるようにします。みつめるモードという変数を作り、マウスが押されている間だけ1(ON)にして、押されてない時は0(OFF)にします。

みつめるモードの切り替えができたら、両方の黒目のプログラムを下の写真のように改造します。違いは上から6番目のブロックの座標だけです。

目・口・輪郭…好きなパーツで“自分だけのキャラ”にしよう！

しゃべって見つめる土台ができたら、あとは創作の時間！いろんな表情や髪型を追加して、アニメキャラを完成させよう。