
Scratch スプライトに影をつける

スプライトに影をつける方法について解説していきます。
ペイントエディタで影をつけることもできますが、それはかなり手間ですし、コスチュームごとにつくらないといけないので、今回はその方法はとりません。
コードで簡単に影をつける方法を解説します。

結論:影を付けるコード
先に結論から、影をつけるコードはこちらです。

拡張機能のペンを使うこと
見た目の効果で、明るさと幽霊の効果を使うこと
がポイントです。
スプライトの動きに合わせて影も連動するようにするのであれば、
このように、ずっと繰り返し呼びます。

「全部消す」を入れるのは、都度影が描かれてしまうためです。
スタンプブロックでできること
拡張機能「ペン」の中にある、「スタンプ」ブロックをつかうことが1つ目のポイントです。


スタンプって分かりやすい表現だなと関心しちゃうんですが、
まさにスタンプの名の通り、スタンプブロックを実行したときのスプライトの状態をペタッとスタンプしてくれるんです。
例えば、スプライトStarを使って、星空にStarをペタペタ貼るプログラムを書いてみましょう。

マウスをクリックするたびに、スプライトをペタっと貼ってくれます。
ちなみにコードはこちら

この機能を生かして、ネコの影を貼るんです。
見た目の効果で影をつくる
何もせずにスタンプをすると、ネコがどんどん貼られるだけなので、
ネコを影っぽくしてから、スタンプします。
つまり、2つ目のポイントである、「明るさの効果」と「幽霊の効果」で影っぽくするんです。
明るさの効果は、-100が真っ黒 +100が真っ白です。

影をつくりたいので、-100で真っ黒にします。

これだけで影っぽくなるのですが、よりリアルにするために、
幽霊の効果を使います。
幽霊の効果は、いわゆる「透明度」のことです。
100にすると、クリア(無色透明)になります。

今回は透明度高めで、90で指定します。
(お好みで調整して下さい)

明るさの効果を-100に、幽霊の効果を90にすると、ネコはこんな感じになります。

影っぽくなりましたね。
位置を調整してスタンプする
ネコが影っぽくなったので、あとは位置を調整してスタンプします。

サンプルでは、左下に影が付くようにしています。
お察しの通り、右に付けたければXは+方向へ、上に付けたければ、Yは+方向へずらします。
元に戻すと影っぽいネコと普通のネコが描画される
最後に仕上げです。
このままだとネコは影のママですので、元に戻してあげます。
つまり、座標を元の位置まで戻し、画像効果をなくします。

ブロック定義にするときの注意点
上記のコードをブロックとして定義するときに1つ注意点があります。

上図のように、「画面を再描画せずに実行する」をONにします。
ブロックの処理の途中で画面を再描画する必要がない(すべて終わってから画面に反映されればよい)ので、わずかですが、ONにした方がプログラムのパフォーマンスをよくします。