文字の色を管理する小技（ & 引数省略カスタムブロック）

さぁ、スクラッチでナニ作る！？

1つのカスタムブロックに色と明るさの2引数を持たせ、空か否かを条件分岐で判定する設計が光っている。値が入っているときだけ対応するエフェクトを適用する仕組みにより、「色だけ変える」「明るさだけ変える」「両方変える」という3パターンを1ブロックで使い分けられる。呼び出し側のコードが統一されるため、新しいプリセットを追加するコストも低い。引数省略というパターンをどう組み立てているのか、作り方を見ていこう。

動画で見てみよう

チュートリアルの元になった作品

今回の目標

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1初期化処理

準備

スプライト「カラースプライト」を開く

カラースプライト

スプライトについて
キーボード入力に応じてスプライトの色相・明度エフェクトを変化させるスプライト
どんな役割か
キーを押すとスプライトの色や明るさがパッと変わる仕組みを作るよ。`change_color`プロシージャに色相と明度をまとめて渡せるようにして、いろんなキーで見た目を切り替えられるようにするよ！

カスタム定義「色を変える」を追加

引数で指定した色相・明度のエフェクトをスプライトに適用するプロシージャ。値が空でない場合のみ各エフェクトを設定する

実装

まずイベント が押されたときで旗をクリックしたら見た目画像効果をなくすを実行。画像効果が全部クリアされて、スプライト本来の色に戻るよ。いつでもやり直せるセーフティネットみたいなもんだね。

今回のポイントは真っ赤な色でコスチュームを用意しておくこと。真っ赤にしておくのがスクラッチでは最も管理しやすいとされている。これは古いスクラッチの仕様に引きづられている慣習でもあるんだけど、前は真っ赤じゃないと「明るさを100」にしても白くならなかった時代がある。それ以来スクラッチでは文字を赤にしておくっていうのが王道になってる。

#2カスタムブロックの定義

ブロック定義定義 ( )で定義して、「画面を再描画せずに実行する」（warpモード）をオンにしてある。まず画像効果を全リセットしてから、演算( ) > ( )で引数が空じゃないかチェック。値が入ってるときだけ「色」や「明るさ」の効果をセットするよ。

[talk]普通はこういうとき、色用と明るさ用でカスタムブロックを分けて作りがち。でもこの作品では1つにまとめて、引数を空にしておくことで「色だけ」「明るさだけ」「両方」を自由に使い分けられるようにしてるんだ。これが「引数の省略」っていう考え方で、実際のプログラミングでもバリバリ活躍するテクニックだよ。[/talk]

#3明るさを最大にする

イベント( ) キーが押されたときで「s」キーに反応させて、「色を変える」ブロックを呼び出す。色相は空のまま、明るさだけ100を渡すと、色はリセットされて明るさだけが適用されるってわけ。

[talk]キーを押したら色が変わるっていうのは、今回はサンプルとして便利だからそう作ってるだけ。みんなは自分の作品に合わせて自由な方法で文字の色を変えてOKだよ〜、もちろん[/talk]

#4色だけ変える

イベント( ) キーが押されたときで「a」キーに反応させて、色相に120、明るさは空で呼び出す。色相120だと緑っぽい色になるよ。同じカスタムブロックでも、どの引数に値を入れるかで全然違う効果が出るのがこの仕組みの面白いところ。

#5別の色に切り替え

やってることは「a」キーと同じで、色相の値だけ違う。呼び出し方が統一されてるから、新しいプリセットを追加するのもラクなんだよね。

#6色と明るさを同時に

色相66、明るさ-30で「色を変える」ブロックを呼び出す。2つの引数を組み合わせることで、色のニュアンスまで細かくコントロールできるんだ。

[talk]Scratchの色の効果は0〜200の値で色がぐるっと一周する仕組みだよ。22でオレンジ、66で黄緑、120で緑…って感じで、数値と色の対応がわかると便利。明るさのマイナス値を重ねると同じ色相でもトーンが落ちて、渋い色合いが出せるんだよね。[/talk]

#7暗くする

色相は空のまま渡してるから色の変化はなし。明るさの効果は-100（真っ暗）から100（真っ白）までの範囲で、もしこの効果を使わなかったら、色相をどう変えてもスプライトを真っ暗にすることはできないんだよ。5つのキー全部にプリセットが揃ったから、いろいろ試してみよう。

まとめ

1つのカスタムブロックで「色だけ」「明るさだけ」「両方」を使い分けるテクニック、マスターできたかな？引数を空にしておくことで呼び出し側がすっきりするこの設計、ほかのプロジェクトでも使いまわせるよ！Scratchの画像効果は組み合わせると面白い表現が生まれるから、ぜひいろいろ試してみてね。