ロング体験会 ご応募受付中です

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

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

スプライトに影をつける方法について解説していきます。

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

コードで簡単に影をつける方法を解説します。

ネコに影をつけたプログラム
ネコに影をつけたプログラム
目次

結論:影を付けるコード

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

影をつくるコード
影をつくるコード

拡張機能のペンを使うこと
見た目の効果で、明るさと幽霊の効果を使うこと

がポイントです。

スプライトの動きに合わせて影も連動するようにするのであれば、
このように、ずっと繰り返し呼びます。

影をつくるを呼び出すコード
影をつくるを呼び出すコード

「全部消す」を入れるのは、都度影が描かれてしまうためです。

スタンプブロックでできること

拡張機能「ペン」の中にある、「スタンプ」ブロックをつかうことが1つ目のポイントです。

拡張機能の追加1
拡張機能を選ぶ_ペン
拡張機能を選ぶ_ペン

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

例えば、スプライトStarを使って、星空にStarをペタペタ貼るプログラムを書いてみましょう。

Starのスタンプをつかったプログラム
Starのスタンプをつかったプログラム

マウスをクリックするたびに、スプライトをペタっと貼ってくれます。

ちなみにコードはこちら

Starを貼るプログラムのコード
Starを貼るプログラムのコード

この機能を生かして、ネコの影を貼るんです。

見た目の効果で影をつくる

何もせずにスタンプをすると、ネコがどんどん貼られるだけなので、
ネコを影っぽくしてから、スタンプします。

つまり、2つ目のポイントである、「明るさの効果」と「幽霊の効果」で影っぽくするんです。

明るさの効果は、-100が真っ黒 +100が真っ白です。

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

明るさの効果を-100にする
明るさの効果を-100にする

これだけで影っぽくなるのですが、よりリアルにするために、
幽霊の効果を使います。

幽霊の効果は、いわゆる「透明度」のことです。

100にすると、クリア(無色透明)になります。

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

幽霊の効果を90にする
幽霊の効果を90にする

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

明るさ-100幽霊90のネコ
明るさ-100幽霊90のネコ

影っぽくなりましたね。

位置を調整してスタンプする

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

位置を調整してスタンプする
位置を調整してスタンプする

サンプルでは、左下に影が付くようにしています。

お察しの通り、右に付けたければXは+方向へ、上に付けたければ、Yは+方向へずらします。

元に戻すと影っぽいネコと普通のネコが描画される

最後に仕上げです。
このままだとネコは影のママですので、元に戻してあげます。

つまり、座標を元の位置まで戻し、画像効果をなくします。

ネコを元に戻す
ネコを元に戻す

ブロック定義にするときの注意点

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

影をつくるブロックの定義
影をつくるブロックの定義

上図のように、「画面を再描画せずに実行する」をONにします。

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

Scratchは、MITメディア・ラボのライフロング・キンダーガーテン・グループの協力により、Scratch財団が進めているプロジェクトです。https://scratch.mit.edu から自由に入手できます。

シェアおねがいします
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

もつさん
プログラミングスクールLの代表
妻、息子、娘の4人家族
プログラミング教育は、子どもの将来を変え、社会を変えるという信念のもと、日々子どもと向き合っています。

目次