Scratch3.0のペイントエディター「塗りつぶし」と「グラデーション」の使い方!

Scratch

Scratch3.0のペイントエディターの「塗りつぶし」と「グラデーション」の使い方や、画像を読み込む方法・コスチュームの中心の設定の仕方を紹介します。

Scratch3.0のペイントエディターはどこにある?

Scratch3.0を起動します。スプライトの名前が「スプライト1」では味気が無いので、名前を「ねこ」に変更します。「コスチューム」タブをクリックすることでペイントエディターに切り替わります。コスチュームの名前を変更するときは、「コスチューム」欄にキーボードで任意の名前を入力します。

Scratch3.0のペイントエディターの画像

  • コスチューム1を「右足のばし」
  • コスチューム2を「右足まげ」

としました。(^_^)/

「ベクターモード」と「ビットマップモード」の違いは?

Scratch3.0のペイントエディターは、デフォルトではベクターモードになっています。他のスプライトもベクターモードで作られているので、基本的にはこのままベクターモードで画像編集を行います。

ビットマップに変換の画像

ベクターモードは、なめらかな線で表現できるのが特徴です。しかし、キャラクターによってはカクカクとしたビットマップ画像の方が良いかもしれません。そんな時は、「ビットマップに変換」をクリックします。

ビットマップモード

カクカクした線でスプライトを表現したいときは、ビットマップモードを使います。

ビットマップモードの画像

塗りつぶしのやり方

スプライト色を変えたいときは、①「塗りつぶし」をクリックしてから②「プルダウンメニュー▼」をクリックします。

ペイントエディター塗りつぶしの画像

「塗りつぶし」の右の枠内の色を見ながら、

  • 鮮やかさ
  • 明るさ

を調整しましょう。

ペイントエディター塗りつぶしの画像2

塗りつぶしたい箇所をクリックすると、「塗りつぶし」が実行されます。

ペイントエディター塗りつぶしの画像3

グラデーションのやり方

グラデーションで塗りつぶしたいときは、赤□もしくは赤□の左にある2パターンのいずれかをクリックしてから塗りつぶしを行います。グラデーションのパターンは、全部で3種類あるのでいろいろ実験してみて下さいね。

ペイントエディターグラデーションの画像

スポイトの使い方

他のスプライトや背景と同じ色を使いたいときは、「スポイト」機能を使います。画面右下から色を吸いたいスプライトのアイコンをクリックします。

ペイントエディタースポットの使い方の画像

ペイントエディターを開き、スポイトのアイコンをクリックして、吸い取りたい色の上にマウスのポインターを当ててクリックします。てんとう虫の青色が吸い取れました。

ペイントエディタースポットの使い方の画像2

ねこのスプライトをクリックします。さきほど吸い取った色が、塗りつぶしの右隣りの枠内に表示されました。あとは塗りたい箇所をクリックすればOKです!

ペイントエディタースポットの使い方の画像3

コスチュームを追加する方法

「筆」や「直線」などでスプライトに書き加えることができます。枠線の横の数値を変えることで、線の太さを調整できます。

ペイントエディターの線の太さを調節する画像

コスチュームを削除する方法

描いたものを消したいときは、3つの方法があります。

  • 「戻る」をクリックする
  • 「消しゴム」を使う
  • 「ゴミ箱」をクリックする

ゴミ箱をクリックすると全て消えますが、範囲を選択してからゴミ箱をクリックすると選択した範囲だけ削除することが出来ます。

ペイントエディターのコスチュームを削除する画像

スプライトの形を変える方法

ねこのしっぽは上向きですが、下向きにしたり長くすることだって出来ますよ!

  1. 「形を変える」をクリックします。
  2. 形を変えたい箇所を選択します。
  3. ポチを少しずつドラッグして形を変えます。

ペイントエディターのスプライトの形を変える画像

グループ化する方法

スプライトと離れてしまったイラストは、グループ化することで1つのスプライトとして扱われるようになります。

  1. 「選択」をクリック
  2. グループ化するものを囲むようにドラッグ
  3. 「グループ化」をクリック

ペイントエディターのスプライトをグループ化する画像

「グループ解除」をクリックすると、解除できますよ。

ペイントエディターのスプライトグループ化を解除する画像

スプライトを反転する方法

Scratchのスプライトは、右向きのものが多いですよね!実は、簡単に左向きにすることができるんです。

  1. 「選択」をクリック
  2. 反転させるものをドラッグして選択
  3. 「左右反転」か「上下反転」をクリック

ペイントエディターのスプライトを反転する画像

ねこが左向きになりました!

「枠線をなし」でコスチュームを描く方法

図形を描くときに、枠線(輪郭線)が不要な場合がありますよね。「枠線なし」を選択してから図形を描くことで、枠が無い図形が描けます。

ペイントエディターの「枠線をなし」でコスチュームを描く画像

コスチュームの角度を変える

赤で囲った部分を左右にドラッグすることで、図形の角度が変化します。

ペイントエディターのコスチュームの角度を変える画像

手前・奥を入れ替える方法

ねこの足が図形で隠れてしまたので、図形を背面に下げます。図形を選択した状態にしてから、「下げる」をクリックしましょう。

ペイントエディターで手前・奥を入れ替える画像

テキストで日本語入力を入力する方法

「テキスト」をクリックしてから「日本語」を選択し、キーボードで入力してみましょう。1語ずつ改行することで縦書きもできますよ。

ペイントエディターで日本語入力する画像

コスチュームの中心を設定する方法

Scratchのスプライトライブラリーにあるスプライトは中心が設定されています。しかし、自分で作成したオリジナルのスプライトやスプライトをコピーして中心がズレてしまった場合などには、スプライトの中心を設定する必要があります。スプライトやコスチュームが複数の場合は、

  1. 選択をクリックしてスプライトを囲み
  2. 「グループ化」をクリック

してグループ化します。

ペイントエディターでコスチュームの中心を設定する画像

ステージには、薄いグレーの点が敷きつめられています。中でも、ステージの中心の点は他の点よりも大きくなっています。ここが中心となるので、中心を設定したい(グループ化した)スプライトをドラッグして中心の点が中心になるようにします。

ペイントエディターでコスチュームの中心を設定する画像2

これで、スプライトの中心が設定されました!

ペンタブレットがおすすめ

ペイントエディターの「筆」でスプライトや背景を自由に描くことが出来ますが、マウスで描くと線がカクカクして上手く描きずらいです。そんなときは、ペンタブレットがおすすめですよ。高いものは必要ありません。私が使っているのは安価なものです。マウス代わりにペンのように使えるので便利です!

ペンタブレットの画像

ペンタブレットは、マウスのように右クリック・左クリックも出来るのでマウスが無くても操作が完結します。

オリジナルのスプライトを作る方法

オリジナルのスプライトを作ってみましょう!ねこは邪魔なので、消しておきましょう。「×」をクリックすると、スプライトが削除されます。

ペイントエディターでスプライトを削除する画像

「スプライトを選ぶ」をクリックして、「描く」をクリックします。これから描くスプライトの名前を入力しておきましょう。

ペイントエディターでオリジナルのスプライトを描く画像
塗りつぶしにグラデーションを使うと立体的に見えますよ!

ペイントエディターでかぼちゃを描く画像

コスチュームをコピーする方法

かぼちゃの中に絵を描けないので、外側に目を描いて後から組み合わせます。目をコピーします。

  1. 「選択」をクリック
  2. コピーしたいものをドラッグで選択
  3. 「コピー」をクリック

します。「貼り付け」をクリックすると、コピー完了です。左右反転して、任意の場所にドラッグすればOKです。

ペイントエディターでコスチュームをコピーする画像

スプライトが完成したら、忘れずにグループ化しておきましょう。

スプライトを拡大・縮小する方法

スプライトが大きすぎたり小さすぎるときは、倍率を変更できます。「大きさ」はデフォルトで100(%)になっているので、

  • 数値を100より小さくすると縮小
  • 数値を100より大きくすると拡大

することが出来ます。

ペイントエディターで拡大縮小する画像

画像の「書き出し」をする方法

作成したスプライトをパソコンに保存することが可能です。スプライトのアイコンの上で右クリックして「書き出し」を選択しましょう。

ペイントエディターで「書き出し」をする画像

パソコン内にスプライトが保存されます。

画像を読み込む方法

パソコンに保存してある画像を読み込むときは、

  1. 「スプライトを選ぶ」をクリック
  2. スプライトをアップロード

でScratch3.0へアップロードできます。

ペイントエディターで画像を読み込む画像

背景を塗りつぶす方法

オリジナル背景も、スプライトと同じように

  1. 背景を選ぶ
  2. 描く

から作ることが出来ますよ!背景を塗りつぶしたいときは、「ビットマップに変換」をクリックします。ビットマップモードにすると塗りつぶしができるようになります。

ペイントエディターで背景を塗りつぶす画像

色を選択したら「塗りつぶし」をクリックしましょう。背景に画像を書き加える場合は、ベクターに変換してから描くと線がなめらかになります。

ペイントエディターで背景を塗りつぶす画像2

背景をグラデーションにする方法

2色でグラデーションを作ります。「塗りつぶし」右隣りのプルダウンメニュー▼をクリックして、好みのグラデーションのパターンをクリックしましょう。

ペイントエディターで2色でグラデーションにする画像

このままだと、紫と紺のグラデーションになってしまいます。紫とオレンジにしたいので、紺色をクリックして、オレンジに変更します。「塗りつぶし」をクリックすれば、紫とオレンジのグラデーションの完成です!

ペイントエディターで2色でグラデーションにする画像2

2色のグラデーションは、スプライトを塗るときも同様の操作で出来ますよ。

画像を拡大する方法

背景にイラストを描くときは、拡大をしてから描くと上手く描けます!描き終わったら、「=」をクリックして等倍に戻しておきましょう。

ペイントエディターで画像を拡大する画像

さっそく遊んでみよう!

オリジナルのスプライトで作ったゲームで遊ぶのは、また格別ですね!魔女がカボチャを連射しておばけとかんおけをやっつけるゲームです。

魔女の連射ゲームのGIF画像

Scratch3.0とマイクロビットをつなげてみよう

Scratch3.0の拡張機能を使えば、マイクロビットと連携できます。マイクロビットがコントローラーのようになるのでぜひ挑戦してみて下さい!

魔女の連射ゲームのGIF画像2

micro:bit はじめてセット (microbit/ケース/USBケーブル/電池ボックス/教本」なら、Scratchとmicrobitをすぐに連携できるのでおすすめです。

ScratchはMIT Media LabのLifelong Kindergarten Groupによって開発されました。https://scratch.mit.edu/を参照してください。