さぁ、スクラッチでナニ作る！？
1つのカスタムブロックに色と明るさの2引数を持たせ、空か否かを条件分岐で判定する設計が光っている。値が入っているときだけ対応するエフェクトを適用する仕組みにより、「色だけ変える」「明るさだけ変える」「両方変える」という3パターンを1ブロックで使い分けられる。呼び出し側のコードが統一されるため、新しいプリセットを追加するコストも低い。引数省略というパターンをどう組み立てているのか、作り方を見ていこう。
動画で見てみよう
チュートリアルの元になった作品
スクラッチ小技：色を変える
今回の目標
- 色相と明度の2引数を持つカスタムブロックを作る
- 引数が空のときは効果を適用しない省略パターンを実装する
- 5つのキーにプリセットを割り当ててスプライトの見た目を切り替える
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1初期化処理
準備
スプライト「カラースプライト」を開く
カラースプライト| スプライトについて |
|---|
| キーボード入力に応じてスプライトの色相・明度エフェクトを変化させるスプライト |
| どんな役割か |
| キーを押すとスプライトの色や明るさがパッと変わる仕組みを作るよ。`change_color`プロシージャに色相と明度をまとめて渡せるようにして、いろんなキーで見た目を切り替えられるようにするよ！ |
カスタム定義「色を変える」を追加
引数で指定した色相・明度のエフェクトをスプライトに適用するプロシージャ。値が空でない場合のみ各エフェクトを設定する
実装
まず が押されたときで旗をクリックしたら画像効果をなくすを実行。画像効果が全部クリアされて、スプライト本来の色に戻るよ。いつでもやり直せるセーフティネットみたいなもんだね。
今回のポイントは真っ赤な色でコスチュームを用意しておくこと。真っ赤にしておくのがスクラッチでは最も管理しやすいとされている。これは古いスクラッチの仕様に引きづられている慣習でもあるんだけど、前は真っ赤じゃないと「明るさを100」にしても白くならなかった時代がある。それ以来スクラッチでは文字を赤にしておくっていうのが王道になってる。
#2カスタムブロックの定義
定義 ( )で定義して、「画面を再描画せずに実行する」（warpモード）をオンにしてある。まず画像効果を全リセットしてから、( ) > ( )で引数が空じゃないかチェック。値が入ってるときだけ「色」や「明るさ」の効果をセットするよ。
#3明るさを最大にする
( ) キーが押されたときで「s」キーに反応させて、「色を変える」ブロックを呼び出す。色相は空のまま、明るさだけ100を渡すと、色はリセットされて明るさだけが適用されるってわけ。
#4色だけ変える
( ) キーが押されたときで「a」キーに反応させて、色相に120、明るさは空で呼び出す。色相120だと緑っぽい色になるよ。同じカスタムブロックでも、どの引数に値を入れるかで全然違う効果が出るのがこの仕組みの面白いところ。
#5別の色に切り替え
やってることは「a」キーと同じで、色相の値だけ違う。呼び出し方が統一されてるから、新しいプリセットを追加するのもラクなんだよね。
#6色と明るさを同時に
色相66、明るさ-30で「色を変える」ブロックを呼び出す。2つの引数を組み合わせることで、色のニュアンスまで細かくコントロールできるんだ。
#7暗くする
色相は空のまま渡してるから色の変化はなし。明るさの効果は-100（真っ暗）から100（真っ白）までの範囲で、もしこの効果を使わなかったら、色相をどう変えてもスプライトを真っ暗にすることはできないんだよ。5つのキー全部にプリセットが揃ったから、いろいろ試してみよう。
まとめ
1つのカスタムブロックで「色だけ」「明るさだけ」「両方」を使い分けるテクニック、マスターできたかな？引数を空にしておくことで呼び出し側がすっきりするこの設計、ほかのプロジェクトでも使いまわせるよ！Scratchの画像効果は組み合わせると面白い表現が生まれるから、ぜひいろいろ試してみてね。