今回つくるもの
難易度
今回は動く塗り絵を作っていきます。好きな色で塗ったキャラクターが最後には動き出します。これに取り組むことで”スプライト”についてよく理解できるようになると思います。
以下が最終的につくる動く塗り絵です。パレットの色をクリックで選択してオウムを塗っていきます。最後に左下の再生ボタンを押すと、オウムが動き出します。
塗り絵のベースを作る
まず、新しいプロジェクトを作ります。はじめは下図のようにネコのキャラクターがいますが、今回はネコは使わないのでゴミ箱マークで削除します。
次に、右下のネコマークからスプライトを選ぶを押し、動物のカテゴリーにあるparrot(オウム)を選びます。
オウムのコスチュームのタブにうつり、矢印の選択パーツで全体を選択します。
そして、塗りつぶしを白色に、枠線を灰色に設定すると、塗り絵の下絵ができます。２つ目（羽が下向き）のコスチュームも同様に処理して、下絵の完成です。
色の塗り方について
次にこのオウムにどのように色をつけていくのか解説します。コスチュームの編集画面で、オウムの色を好きな色で塗っていくことはできるんですが、プログラムでは色を塗ることはできません。
スクラッチには”ペン”という拡張機能が用意されていて、ペン機能を使うと画面に絵を描いたり色を塗ったりすることはできるのですが、スプライトの上に色を乗せることはできません。
そこで、今回使うのは”色の効果”という機能です。
オウムのコードに以下を書いてみてください。すると下記右側の動画のように、１秒ごとに色が変わっていくのがわかります。
これが色の効果と呼ばれているもので、好きな色にすることはできませんが、色の効果が０〜２００の間で少しずつグラデーションで色が変わっていきます。この機能を使って塗り絵を作ります。
今回は色の効果を20,40,60,80・・・・180,200、と20づつ変えたパレットを作ります。
色の効果の数字と色の関係は以下のようになります。
パレットをつくる
ここまで理解できたら、次にパレットを作っていきます。画面下部分に上記の１１色が表示されて、色を選択できるようにします。
スプライトを追加して、パレットの丸を描いていきます。下図のようにプレビュー画面を確認しながら、丸の大きさと位置を調整していきます。このとき、必ずx:0、y:0にするようにしてください。
そして、このパレットの丸のコードを以下のように書きます。
このパレットの色を色の効果２０（薄いオレンジ色）に設定します。
そして、”ペンの色”という変数を新たに作って、このスプライト（パレット）が押された時に、ペンの色を２０にするという指示を入れます。
そして、次に、オウムのコードに移り、以下のようにプログラムを組みます。最初は色の効果を０（白色）に設定し、オウムを押すと、色の効果が設定されたペンの色になるようにします。
つまり、パレットを押すと、そのパレットの色がペンの色として記憶され、オウムを押した時にその色が反映されるということです。
実際にやってみましょう、下の動画のように色が塗られれば成功です。
では、パレットを追加していきます。先ほど作ったパレットのスプライトを右クリックして複製します。コードで座標を指定していくという方法もありますが、プレビューを見ながら位置を調整していくほうがうまくいく場合もあります。しつこいですがこの時に必ずx:0、y:0にするようにしてください。
位置が確定したら、コードに移動して、以下のように色の効果とペンの色をそれぞれ４０に変更しましょう。
同様に６０〜２００および０のパレットを追加していきます。追加できたら、パレットがきちんと機能するか確かめましょう。下の動画のように動けば成功です。
塗り絵を動かす
今回つくるのは動く塗り絵ですので、塗り絵が終了したら動くようにします。下図のように再生ボタンのスプライトを新たに作成します。再生ボタンの大きさや配置もプレビューを見ながら設定します。
エディターの使い方はこちらをさんこうにしてください。
つぎにコードを書いていきます。再生ボタンが押されるとオウムが羽ばたきながら左右に移動するようにします。まずは再生ボタンのコードに、以下のように、このスプライトが押されたときに動かすというメッセージを送るようにします
次に、オウムのコードに移動します。
以下のように、緑の旗が押された時に座標を0:0に設定し、回転方法を左右のみにして９０度に向けるという初期設定を追加します。
さらに、動かすのメッセージを受け取った時に、羽ばたかせる（コスチュームを変える）のと、
左右に動かすコードを追加します。
ちなみに・・スクラッチには端に行ったら跳ね返るというブロックがあり、それを使うともっと簡単なコードで左右に動かすことができますが、今回はこの後の作業で、オウムをバラバラのスプライトに分解するのでそのやり方ができません。
実際にオウムに色を塗って再生ボタンを押してみてください。下の動画のように羽ばたきながら左右に移動すれば成功です。
オウムを分解する
ここまでで一旦プログラムは完成なのですが、オウムが一色になってしまうと塗り絵としてはかなり微妙です。羽や足や胴体・くちばしといった、各パーツごとに色を塗れるようにしていきます。
そのために、すべてのパーツを分解します。つまり、すべてのパーツを分解して、別々のスプライトとして存在しているけど、画面上ではそれが合成されてオウムに見えるということになります。
オウムのパーツは以下のように11個に分解できます。１〜１１の数字は最背面から順番に並べています。（少し難しいですが、羽が下にあるときのコスチュームを考慮して順番を振っています）
この１〜１１の順番にコスチュームを分解していきます。
まずは、オウムのスプライトを１１個複製します。プレビューで複製したオウムがバラバラの場所にいるのはxとyの値がバラバラだからです。
ですので、すべてのオウムの複製スプライトの座標を0:0に再設定します。そうすると下図のようにすべてのオウムが重なって一つのオウムになります。
では、それぞれ分解していきます。一つ目のスプライトは左羽の奥側だけ残します。
不要な部分を選択ツールで削除していきます。左羽の奥側と手前側はグループ化されているので、グループ化を解除して、奥側だけを残します。二つ目のコスチュームに関しても同様の処理をするのを忘れないようにしましょう。
これを順番に繰り返していって、１１個のパーツに分解していきます。
次に各パーツのコードを少しだけいじります。
さきほど１〜１１の番号の順番に最背面から最前面になっていると説明しました。つまり左羽奥が最背面で黒目が最前面です。その位置をコードに記載しなければなりません。以下のように左羽奥は最背面に設定し、次の左羽手前は最背面にしてから１層手前にします。同様に左足は２層手前にし、胴体は３層手前にします。これをくりかえしていくことですべてのパーツが順番にならび、合成した時にもとのオウムの形になります。
ただしく順番に並べられれば下図のように元のオウムの形に合成されます。
では、実際に色を塗ってオウムを飛ばしてみましょう。以下の動画のように動けば成功です。
最後にもうひと工夫
最後に、再生ボタンを押した時に、パレットと再生ボタンがすべて消えて、背景が現れてオウムが飛び始めるというギミックを追加していきます。
再生ボタンが押された時、つまり動くのメッセージを受け取った時に、パレットと再生ボタンを隠します。そのかわり緑の旗を押した時に現れる指示も忘れないように。
また、背景にBlueSkyを追加し、緑の旗が押された時は背景がなしで、動かすのメッセージを受け取った時に背景をBlueSkyに変更するようにします。
実際に動かしてみましょう。下の動画のように動けば成功です。
おつかれさまでした。完成のコードはこちらからも確認できます。
