【Scratch】かんたんなペイントソフトを作る

子どもにScratchで線の描き方を教えました
次はカラーパレットで色が変えられるペイントソフトにチャレンジしてもらおうと思っているので、サンプルを作ってみることにしました

かんたんなペイントソフトを作る

スポンサーリンク
Google336 記事下

実装1:一番簡単な方法

カラーパレットの1つ1つの色をスプライトで作成して、それをクリックしたら描画担当のスプライトに色変更のメッセージを送るようにする。これが一番簡単な実装だと思います。子どもが作るのものこの形かな

かんたんなペイントソフトを作る

流れは・・・

カラーパレットの赤いスプライトを押す

「赤にして!」というメッセージを送る

「赤にして!」というメッセージを受けたらペンの色を赤にする

問題点
選べる色が増えるたびにメッセージが増える
色の設定場所が2箇所に分散する(カラーパレットのスプライトの色、描画で設定する色)

できれば、パレットの色と描画する色を1つで管理できるようにしたい

かんたんペイント1 Scratchで作成

実装2:「ペンの色(数値)」と「ペンの明るさ」を使う

ペンの色は
・画面上の色をスポイトで取得する形で設定
・数値での設定
の2つの方法があります

かんたんなペイントソフトを作る

今回は数値の設定を使います

「ペンの色」と「色の効果」の数値が同じ色になるのを利用して、カラーパレットのスプライトの色を「色の効果」で変更して、そのスプライトをクリックすると、色の効果で設定している数値をペンの色に設定するという形で実装してみました

かんたんなペイントソフトを作る

赤の数値で0なので、赤でスプライトを作ります

かんたんなペイントソフトを作る

カラーパレット用スプライトの色を20ずつ変えます
左から、0、20、40、60、80、100、120、140、160、180

黒だけスプライトの色を黒で用意します。「ペンの濃さ」を0にすることでペンの色を黒にします

かんたんなペイントソフトを作る

実行するとこうなります。
実行と同時にパレットの色が変わるのがプログラムの醍醐味という感じです

かんたんなペイントソフトを作る

問題点
白(消しゴム)が使えない
「ペンの色」と「ペンの濃さ」をどのように組み合わせても白にはならない

かんたんペイント2 Scratchで作成

実装3:ペンの色をRGBで設定する

ペンの色はRGB値でも設定できるので、それを利用します。本来スポイトで色を設定する部分にRGBから計算した値を入れることができます。これは気づかなかった

ペンの色を () にする (ブロック) – Japanese Scratch-Wiki

計算式は
(R * 65536) + (G * 256) + (B)
R・G・Bで指定できる数値は0〜255です

かんたんなペイントソフトを作る

かんたんなペイントソフトを作る

スプライト自体の色はRGBで変更できないので、スプライト内で描画するというちょっとトリッキーな実装です。今回はパレットのスプライトは別々に10個用意していますが、クローンで複製するのがメンテナンス的によさそうです

かんたんなペイントソフトを作る

かんたんペイント3 Scratchで作成

関連コンテンツ
A8広告
ブログランキング
  • にほんブログ村 子育てブログ 子供の習い事(教室・業者)へ

  • スポンサーリンク
    Google336 記事下
    Google336 記事下

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする

    トップへ戻る