提供: Japanese Scratch-Wiki
ペイントエディターは、Scratchのエディターに付随する機能である。この記事では、ペイントエディターの一般的な項目について紹介する。バージョンごとの各機能については以下を参照。
- ペイントエディター (1.4) — Scratch 1.4
- ペイントエディター (2.0) — Scratch 2.0
- ペイントエディター (3.0) — Scratch 3.0(現行バージョン)
画像の種類
ベクター画像
- 詳細は「ベクター画像」を参照
Scratch 2.0以降。ベクターモードは、ビットマップモードに比べると少し操作が難しいが、ベクターモードで作成されたベクター画像にはビットマップ画像に比べて様々な長所がある。たとえば、ベクターモードの鉛筆ツールで描かれた線は、複数の制御点で構成されたスプライン曲線(数式による曲線)として保存される。これらの制御点は、あとからドラッグすれば線の形を何度でも自由に変形できるので、(理論上は)単純な操作で複雑な形を完璧に描くことができる。
また、画像の構成要素(オブジェクト)は個別に操作できるので、それぞれのパーツを自由に拡大したり、回転したりすることができる(複数のオブジェクトに同時に適用したい場合は、これらをグループ化しておけばよい)。
ベクター画像にはアンチエイリアスが適用される。そのため、解像度の高い、細部まできれいな画像を描くことができる。さらに、比較的ファイルサイズも小さい。なお通常は、画像を構成するスプライン曲線の数が少なくなければなるほど、ファイルサイズも小さくなる。
オブジェクト
ベクター画像を構成する各要素を「オブジェクト」と呼ぶ。ベクター画像では、変更できる要素はすべてオブジェクトとして扱われる。それぞれのオブジェクトは、ベクトル、制御点、スプライン曲線で構成されており、さらに色や線の情報を持っている。複数のオブジェクトを1つにまとめて扱えるようにしたり(グループ化)、1つのオブジェクトを分割して複数のオブジェクトにすることもできる。

ビットマップ画像
ビットマップ画像(ラスター画像)では、画像データを格子状に並んだピクセルの情報として保存する。ビットマップ画像の画質とファイルサイズは、保存するファイル形式によって変わる。ビットマップ画像では保存する画質を落とせば落とすほど(大きく圧縮すればするほど)、ファイルサイズが小さくなる。ドット絵など、ピクセル単位できっちりと並べた画像を作成するときは、ビットマップ画像を使うとよい。
なお、ペイントエディターのビットマップモードでは、作成した画像にアンチエイリアスが適用されないが、透明(透過)を扱うことはできる。
ベクター画像がなめらかに見える理由
Scratchのペイントエディターでは、ベクター画像のほうがビットマップ画像よりなめらかできれいに見える。これは、ベクトル画像の線やオブジェクトの境界線は、背景や後ろの画像に溶け込むように表示されるからである。この機能をアンチエイリアスと言う。
たとえば、白い背景に黒い円を描くとき、ビットマップモードで描いた場合は境界線がでこぼこする。逆にベクターモードで描いた場合は境界線が白い背景に溶けこんで薄くなっていくため、よりなめらかに見えるはずである。
次の方法で、実際に確認できる。
- ペイントエディターをベクターモードにして、円を描く
- コスチュームペイントで描いた円を右クリックして複製する
- 複製した円を開いて、「ビットマップに変換」ボタンをクリックする
- それぞれの画像を400%以上に拡大して境界線を見比べる
スプライン曲線による描画
スプライン曲線は、数式で表現される曲線であり、制御点と呼ばれる点で操作することができる。ベクターモードでイラストを描くときは、スプライン曲線を描画する鉛筆ツールや、スプライン曲線を変形する形を変えるツールが重要な役割を果たす。スプライン曲線には、なめらかで美しい曲線が描ける、後から自由に変形できるというメリットがある。しかし、ビットマップモードのような直感的な操作はできないので注意が必要である。
「ビットマップに変換」のボタンをクリックすれば、ベクター画像をビットマップ画像に変換できるが、ビットマップには制御点という概念が無いため、スプライン曲線の情報は失われる。
Scratchのペイントエディターでは、オブジェクト内でスプライト曲線を枝分かれすることができない。したがって、1つの制御点から2つのスプライン曲線を伸ばすことはできない。つまりスプライン曲線は、常に1つの開始点からはじまり、1つの終了点で終わる必要がある。
このような制限があるため、木の枝のような図形を描くときは、1つの枝をいくつかの小さな枝に分割して描画し、最後にそれを一緒にする、という方法以外で実現するのは難しい。スプライン曲線は曲率という数値を持っており、これによって大量の制御点を使わなくても、数式によって自然なカーブを描くことができる。
たとえば、多くの3Dゲームでは、よく見ると円を表現するために擬似的に多角形(ポリゴン)を使っているが、 Scratchの2Dベクター画像では、このようなことはなく、拡大してもきれいな円となっている。
モード
ペイントエディターでは、ベクターモードとビットマップモードを切り替えながら使用できる。
ベクターモード
新しいスプライトを作成するためにエディターを最初に開いたときは、ベクターモードになっている。ベクターモードでは、スプライン曲線で構成されたベクター画像を作成・編集できる。 ベクターモードを使うと、「イラストをパーツごとに作成し、最後にそれを1つにまとめる」という方法で画像を制作できるので便利である。
ベクターモードでは、オブジェクトをキャンバスの外(描画エリアの外)に拡大したり移動できる(このため、ベクター画像で作ったコスチュームや背景は、480×360より大きな解像度にできるが、ベクター画像の場合、解像度はそれほど大きな意味をもたない)。ただし、キャンバスの外まで描画エリアをスクロールすることはできないため、キャンバスの外で画像を正確に配置したり、修正するのは難しい。なお、ビットマップモードでは、キャンバスの外には一切、画像情報を置くことができない。
ビットマップモード
ビットマップモードからベクターモードに切り替えるときは、ペイントエディターの左下にある「ベクターに変換」のボタンをクリックする。右側に並んだビットマップツールの中には、ベクターツールと見た目が似ているものもあるが、動作は違うことが多いので注意してほしい。たとえば、ベクターの図形の色ツールとビットマップの塗りつぶすツールは、アイコンがよく似ているが、動作には違う点も多い。
ベクターに変換ボタンでビットマップモードからベクターモードに切り替えたとき、ビットマップモードで作成した画像はビットマップ画像のまま残される。これは、Scratchのペイントエディターでは、すでに描かれたビットマップ画像をスプライン曲線で構成されたベクター画像に変換できないためである。
ただし、Scratch以外のソフトウェア中には、トレース機能によってビットマップ画像の境界線を検出してベクター画像に変換してくれるものもある。また、外部ソフトウェアで作成したビットマップ画像(拡張子が.svg
以外の画像)をインポートしたものも、そのままビットマップ画像になる。ビットマップ画像のスプライトや背景をフルスクリーンで表示すると、画像を構成するピクセルが見えるようになるだろう。


ビットマップモードとベクターモードの比較
ビットマップモードとベクターモードにはそれぞれ長所と短所がある。
ビットマップの利点として、ビットマップの塗りつぶすツールは境界線で囲まれたエリアに色をつけるシンプルなツールだが、ベクターの図形の色ツールでは、まず開始点と終了点が連結されたオブジェクトを作成しないと、好きな場所に色をつけることができない。また、複数のオブジェクトが重なってできている形は、1つのオブジェクトでないため、そのまま色をつけることができない。
一方、ベクターモードで描かれた画像の境界線は、ビットマップ画像に比べると、滑らかである(全画面で表示すると特にはっきりと違いがわかる)。また、ベクターモードには、形を変えるツールで後から線を曲げたり延ばしたりして自由に形を変形できるというメリットがある。
モードの切り替え
ペイントエディターの右下には、ビットマップモードとベクターモードを切り替えるボタンが用意されている。 モードを切り替えたときの画像の扱いは次のとおり。
- ビットマップモード → ベクターモード : 現在の画像はビットマップ画像のまま、1つのオブジェクトに変換される。以後作成する画像はベクター画像になる
- ベクターモード → ビットマップモード : 現在の画像はビットマップ画像に変換される。以後作成する画像はビットマップ画像になる
ビットマップモードからベクターモードへの切り替え
ビットマップモードで作成した画像は、ベクターモードに切り替えると、画像全体がそのまま1つのオブジェクトに変換される。ビットマップモードの四角形ツールや楕円ツールで描いた形であっても、それらがベクターモードのオブジェクトやスプライン曲線に変換されることはない。描かれた画像をそのまま含むオブジェクトとして扱われる。

ベクターモードからビットマップモードへの切り替え
ベクターモードからビットマップモードに切り替えた場合、ビットマップモードで扱える画像の最大サイズは480 × 360のため、キャンバスからはみ出した部分は切り捨てられる。
ビットマップモードからベクターモードへの変換と異なり、それぞれのベクター画像がもつプロパティは失われてしまう。アンチエイリアスも失われてしまうため、ベクターモードではきれいに見えていたオブジェクトが、ギザギザでピクセルが目立つようになる。
