提供: Japanese Scratch-Wiki

分岐.png:この項目はScratch 2.0を説明しています。Scratch 1.4については、ペイントエディター (1.4)をご覧ください。

ビットマップモード
ベクターモード

Scratchペイントエディターは、Scratchに付属する画像編集ソフトである。多くのScratcherがこれを使ってオリジナルのスプライトコスチューム背景 を作成し、プロジェクトのさまざまな場面で活用している。ペイントエディターが付属するというのは、Scratchの大きな特徴の1つであり、その他の多くのプログラミングツールと異なる点である。

ペイントエディターでは、ベクター画像ビットマップ画像 (ラスター画像) の両方を扱える。ベクター画像では、ピクセルの集合として画像を扱うビットマップ画像と違って、画像情報を数式などの形で保存するため、ステージをフルスクリーンで表示してもきれいに表示される。

Warning メモ: この記事では「コスチューム」 を例に取り上げることが多いが、ほとんどの場合、同じことが「背景」にも適用できる。

目次

画像の種類

ベクター画像

詳細は「ベクター画像」を参照

ベクターモードは、ビットマップモードに比べると少し操作が難しいが、ベクターモードで作成されたベクター画像にはビットマップ画像に比べて様々な長所がある。

たとえば、ベクターモードの鉛筆ツールで描かれた線は、複数の制御点で構成されたスプライン曲線(数式による曲線) として保存される。これらの制御点は、あとからドラッグすれば線の形を何度でも自由に変形できるので、(根気さえあれば) 単純な操作で複雑な形を完璧に描くことができる。また、画像の構成要素 (オブジェクト) は個別に操作できるので、それぞれのパーツを自由に拡大したり、回転したりすることができる (複数のオブジェクトに同時に適用したい場合は、これらをグループ化 しておけばよい)。

ベクター画像にはアンチエイリアスが適用されるので、解像度の高い、細部まできれいな画像を描くことができる。さらに、比較的ファイルサイズも小さい。なお通常は、画像を構成するスプライン曲線の数が少なくなければなるほど、ファイルサイズも小さくなる。

オブジェクト

ベクター画像を構成する各要素を「オブジェクト」と呼ぶ。ベクター画像では、変更できる要素はすべてオブジェクとして扱われる。それぞれのオブジェクトは、ベクトル、制御点、スプライン曲線で構成されており、さらに色や線の情報を持っている。

複数のオブジェクトを1つにまとめて扱えるようにしたり (グループ化 )、1つのオブジェクトを分割して複数のオブジェクトにすることもできる。

Warning メモ: より専門的に言うと、オブジェクトとは、スプライン曲線の集合 (またはグループ化されたスプライン曲線の集合) を1つにまとめたもの、と表現できる。

ビットマップ画像

詳細は「ビットマップ画像」を参照

ビットマップ画像 (ラスター画像) では、画像データを格子状に並んだピクセル情報として保存する。ビットマップ画像の画質とファイルサイズは、保存するファイル形式によって変わる。ビットマップ画像では保存する画質を落とせば落とすほど (大きく圧縮すればするほど)、ファイルサイズが小さくなる。ドット絵など、ピクセル単位できっちりと並べた画像を作成するときは、ビットマップ画像を使うとよい。

なお、ペイントエディターのビットマップモードでは、作成した画像にアンチエイリアスが適用されないが、透明 (透過) を扱うことはできる。

ベクター画像がなめらかに見える理由

ベクター画像の円とビットマップ画像の円の違い

Scratchペイントエディターで作成した場合、ベクター画像のほうがビットマップ画像よりなめらかできれいに見える。これは、ベクトル画像の線やオブジェクトの境界線は、背景や後ろの画像に溶け込むように表示されるからである。この機能をアンチエイリアスと言う。たとえば、白い背景に黒い円を描くとき、ビットマップモードで描いた場合は境界線がでこぼこするのに対し、 ベクターモードで描いた場合は境界線が白い背景に溶けこんで薄くなっていくため、よりなめらかに見えるはずだ。自分の目でこれを確認するには、次の手順を試してほしい。

  • ペイントエディターをベクターモードにして、円を描く
  • コスチュームペイントで描いた円を右クリックして複製する
  • 複製した円を開いて、[ビットマップに変換]ボタンをクリックする
  • それぞれの画像を400%以上に拡大して境界線を見比べる

スプライン曲線による描画

スプライン曲線は、数式で表現される曲線であり、制御点と呼ばれる点で操作することができる。ベクターモード でイラストを描くときは、スプライン曲線を描画する鉛筆ツールや、スプライン曲線を変形する形を変えるツールが重要な役割を果たす。

スプライン曲線には、なめらかで美しい曲線が描ける、後から自由に変形できるというメリットがあるが、ビットマップモードのような直感的な操作はできないので注意が必要だ。ビットマップに変換にボタンをクリックすれば、ベクター画像をビットマップ画像に変換できるが、この結果、スプライン曲線の情報は失われる (制御点による変形ができなくなる)。

Scratchのペイントエディターでは、オブジェク内でスプライト曲線を枝分かれすることができない。したがって、1つの制御点から2つのスプライン曲線を伸ばすことはできない。つまりスプライン曲線は、常に1つの開始点からはじまり、1つの終了点で終わる必要がある。このような制限があるため、木の枝のような図形を描くときは、1つの枝をいくつかの小さな枝に分割して描画し、最後にそれを一緒にする、という方法以外で実現するのは難しい。

スプライン曲線は曲率という数値を持っており、これによって大量の制御点を使わなくても、数式によって自然なカーブが描くことができる。たとえば、多くの3Dゲームでは、よく見ると円を表現するために擬似的に多角形 (ポリゴン) を使っているが、 Scratchの2D ベクター画像では、このようなことはなく、拡大してもきれいな円となっている。

ビットマップモード

ペイントエディターでは、ベクターモードとビットマップモードを切り替えながら使用できる。

新しいスプライトを作成するためにエディターを最初に開いたときは、ビットマップモードになっている。ベクターに変換ボタンでビットマップモードからベクターモードに切り替えたとき、ビットマップモードで作成した画像はビットマップ画像のまま残される。これは、Scratchのペイントエディターでは、すでに描かれたビットマップ画像をスプライン曲線で構成されたベクター画像に変換できないためである。

ただし、Scratch以外のソフトウェア中には、トレース機能によってビットマップ画像の境界線を検出してベクター画像に変換してくれるものもある。また、外部ソフトウェアで作成したビットマップ画像 (拡張子svg以外の画像) をインポートしたものも、そのままビットマップ画像になる。ビットマップ画像のスプライトや背景をフルスクリーンで表示すると、画像を構成するピクセルが見えるようになるだろう。

ベクターモード

ビットマップモードからベクターモードを切り替えるときは、ペイントエディター右下にあるベクターに変換ボタンをクリックする。ベクターモードでは、スプライン曲線で構成されたベクター画像 を作成・編集できる。 右側に並んだベクターツールの中には、ビットマップツールと見た目が似ているものもあるが、動作は違うことが多いので注意してほしい。たとえば、ビットマップの塗りつぶすツールとベクターの図形の色ツールは、アイコンがよく似ているが、動作には違う点も多い。ベクターモードを使うと、「イラストをパーツごとに作成し、最後にそれを1つにまとめる」という方法で画像を制作できるので便利である。

ベクターモードでは、オブジェクトをキャンバスの外 (描画エリアの外) に拡大したり移動できる (このため、ベクター画像で作ったコスチュームや背景は、480×360より大きな解像度にできるが、ベクター画像の場合、解像度はそれほど大きな意味をもたない)。ただし、キャンバスの外まで描画エリアをスクロールすることはできないため、キャンバスの外で画像を正確に配置したり、修正するのは難しい。なお、ビットマップモードでは、キャンバスの外には一切、画像情報を置くことができない。

Warning メモ: Scratchペイントエディターのビットマップモードのような、ビットマップ単位で画像を編集するソフトを一般に、ペイントソフトという。これに対し、ベクターモードのような、ベクター形式で画像を編集するソフトを一般に、ドローソフト (ドロー系ソフト)という。

ビットマップモードとベクターモードの比較

ビットマップモードとベクターモードにはそれぞれ長所と短所がある。

多くの人にとって、ビットマードのほうがベクターモードより簡単に扱えるだろう。 たとえば、ビットマップの塗りつぶすツールは境界線で囲まれたエリアに色をつけるシンプルなツールだが、ベクターの図形の色ツールでは、まず開始点と終了点が連結されたオブジェクトを作成しないと、好きな場所に色をつけることができない。また、複数のオブジェクトが重なってできている形は、1つのオブジェクトでないため、そのまま色をつけることができない。

一方、ベクターモードで描かれた画像の境界線は、ビットマップ画像に比べると、滑らかでうつくしい (フルスクリーンで表示すると特にはっきりと違いがわかる)。また、ベクターモードには、形を変えるツールで後から線を曲げたり延ばしたりして自由に形を変形できるというメリットがある。

モードの切り替え

ペイントエディターの右下には、ビットマップモードとベクターモードを切り替えるボタンが用意されている。 モードを切り替えたときの画像の扱いは次のとおり。

  • ビットマップモード → ベクターモード : 現在の画像はビットマップ画像のまま、1つのオブジェクトに変換される。以後作成する画像はベクター画像になる
  • ベクターモード → ビットマップモード : 現在の画像はビットマップ画像に変換される。以後作成する画像はビットマップ画像になる

ビットマップモードからベクターモードへの切り替え

ビットマップモードで作成した画像は、ベクターモードに切り替えると、画像全体がそのまま1つのオブジェクトに変換される。 ビットマップモードの四角形ツールや楕円ツールで描いた形であっても、それらがベクターモードのオブジェクトやスプライン曲線に変換されることはない。描かれた画像をそのまま含むオブジェクトとして扱われる。

Warning メモ: 描画システムのバグのせいで、ビットマップ画像がマゼンダ色の長方形になってしまうことがある。この場合、プロジェクトをリロードするか、もう一度ビットマップモードに切り替えると、復活できる。

ベクターモードからビットマップモードへの切り替え

ビットマップエディターへの切り替えボタン

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

Warning 警告: ベクターモードからビットマップモードに切り替えた後、もう一度ベクターモードに戻しても、ベクター情報は復活しない。このようなときは、アンドゥ機能 (「やり直し」ボタンをクリックする、または、Ctrl+Zを押す) を使うとよい。

コスチュームペイン

コスチュームペイン
詳細は「コスチュームペイン」を参照

ペイントエディターの左端の部分が、コスチュームペインである。ここには、 新しいコスチュームを作る ためのメニューボタンと、各コスチュームのサムネイル (小さい画像) が表示されている。コスチュームペインには、選択中のスプライトのすべてのコスチュームが並んでいる。コスチュームの数が多すぎて画面に収まりきらないときは、スクロールバーが表示され、上下にスクロールして確認できるようになる。

コスチュームバーにいつもScratch Catが表示されるのはなぜ? 新しいプロジェクトを作成すると、スプライトとして自動的にScratch Catが用意される。これを消したいときは、サムネイル画像の右上に表示される[×]ボタンをクリックして削除すればよい。

基本メニュー

新しいコスチューム (背景) を作る

ペイントエディターで新しいコスチュームを作るには、次の4つの方法がある:

  • ペイントエディターでコスチュームを描く:[新しいコスチュームを描く]ボタン
  • あらかじめライブラリーとして用意されている画像のなかから選択する:[ライブラリーからコスチュームを選択]ボタン
  • 自分のコンピュータに保存されている画像 (ダウンロードした画像や、外部ソフトで作成した画像など) をインポートする:[ファイルから新しいコスチュームをインポート]ボタン
  • USB経由でデジタルカメラを接続するか、Webカメラなどを使用して、写真をとる:[カメラから新しいコスチュームを作る]ボタン

コスチューム/背景を切り替える

ペイントエディターの左端には、選択したスプライトのコスチュームのサムネイルが並んだコスチュームペインがある。現在、選択中のコスチュームは、青い四角で囲まれて、右上に「x」ボタンが表示されている。ペイントエディターのキャンバス上には、現在、選択中のコスチュームのみが表示される。別のコスチュームを変更したいときは、コスチュームペイン上でそのコスチュームをクリックすればよい。これによって、キャンバスに新しく選択したコスチュームが表示され、変更できるようになる。

詳細カラーパレット

色を選択する

詳細は「カラーパレット」を参照

ペイントエディターには2つのカラーボックスが用意されており、ここに2色を取り出しておき、切り替えながら使用することができる。現在選択中のカラーボックスは、常に手前に表示される。新しい色を選択した場合は、現在選択中のカラーボックスの色が、選択した色に変わる。もう1つのカラーボックスを使うときは、そちらをクリックすればよい。2色によるグラデーションや、透明の効果を扱う場合には、これら2つのカラーボックスを同時に使用する。くわしくはグラデーションと透明を参照のこと。

色を選択するには、2つの方法がある:

  • カラーパレットから選択する
  • キャンバス上の画像からスポイトツールで色を取得する

カラーパレットとは、ペイントエディターの下部にあるカラフルな四角が並んだ部分のことで、ここには基本的な色が用意されている。ここにない色が必要な場合は、カラーパレットの左下にある虹色の四角をクリックして、パレットを「詳細パレット」に切り替える。詳細パレットには、膨大な色が含まれているが、色を選ぶ方法は先ほどと同じで、好きな色の上でマウスをクリックすればよい。この詳細パレットでは、上にいけばいくほど、色の彩度は低くなる(灰色っぽく、色味がなくなる)。色の明度 (明るさ/暗さ) を変えるには、右にあるスライドを上下すればよい。元の基本パレットに戻るには、左下の画像をクリックする。

スポイトツールを使う方法でも色を選択できる。スポイトツールを使うには、カラーパレットの右にあるスポイトの絵の[色を選ぶ]ボタンを押す。この状態でキャンバスの中の好きな場所をクリックすると、選択中のカラーボックスにクリックした場所の色が入る。なお、このツールでは、キャンバスの外にある色は選択できない。

Warning メモ: 基本パレットの一番右上にある白地に赤い斜線は、透明 を表しており、これをクリックすると「色がない」状態になる。

ペンの太さを変える

ペンを使用するツールを選択すると、ペイントエディターの左下部分に[ペンの太さ]スライダーが表示されて、これを左右に動かすとペンの太さを変更できる。スライダーの左端がもっとも細く、右端がもっとも太い状態である。スライダーの上には、現在のペンの太さの見本が表示される。

Warning メモ: ツールを切り替えていると、ペンの太さがリセットされることがあるので注意が必要だ。

コスチューム名を付ける

コスチュームに名前を付けるには、ペイントエディターの上部にあるテキストボックスをクリックして、新しい名前を入力すればよい。コスチュームにきちんとした名前を付けておくと、スクリプトをつくるときにもわかりやすくなる。

「コスチューム #」ブロックが返す値と間違えやすいので、「1」「2」のような数字だけのコスチューム名は使用しないほうがよい。コスチュームはそれぞれのコスチューム名と別に、コスチュームペインでの順番をもとにしたコスチューム番号 (「コスチューム #」ブロックが返す値) を持っているが、たとえば、コスチュームペインの3番目にあるコスチュームの名前が「2」であると、コスチューム名は「2」、コスチューム番号は「3」となり、たいへん紛らわしい。

より高度な内容

オブジェクトを正確に移動する

ベクターモードでオブジェクトを選択中は、矢印キーを使うとオブジェクトを正確に1ピクセルずつ移動できる。ビットマップモードでは、選択ツール による選択中と、四角形ツール楕円ツールテキストツールで描画を確定する前の状態で、同じように矢印キーによる移動が利用できる。正確な位置に絵を描きたいときや、きっちりオブジェクトを並べたいときに便利である。

コスチュームに別の画像を組み合わせる

ペイントエディターの上部にある[読み込み]ボタンをクリックすると、使用中のコンピュータや外部メディアに保存してある画像を、現在のコスチュームに追加できる。これによって、現在のコスチュームに新しい画像を追加し、組み合わせたコスチュームが作成できる。

ペイントエディターで作った画像同士を組み合わせるには、 バックパック を使用する。バックパックに保存したコスチュームは、キャンバスにドラッグして使用することができる。

レイヤー

ナノの前にギガがレイヤー機能で重なっている

ベクターモードでは、それぞれのオブジェクトがレイヤー と呼ばれる層にわかれて配置されている。レイヤーは、透明なシートのようなもので、シート1枚にオブジェクトが1つ描かれていると考えるとよい (オブジェクトをグループ化しておけば、1つのレイヤーに複数のオブジェクトを置くことができる)。レイヤーの順番を入れ替えると、画面に見えるオブジェクトが変わる。

Warning メモ: ステージ上でスプライトが持つレイヤーと、基本的な考え方は同じである。

レイヤーの順番を入れ替えるには、オブジェクトを選択するとツールボタンの下に表示される、2つのボタン[レイヤーを上げる][レイヤーを下げる]を使う。

  • [レイヤーを上げる]ボタンをクリックすると、現在のオブジェクトのレイヤーが1つ手前に移動する
  • [レイヤーを下げる]ボタンをクリックすると、現在のオブジェクトのレイヤーが1つ奥側に移動する。
  • シフトキーを押しながら[レイヤーを上げる]ボタンをクリックすると、現在のオブジェクトのレイヤーが一番手前 (最前面。すべてのレイヤーの一番上) に移動する。
  • シフトキーを押しながら[レイヤーを下げる]ボタンをクリックすると、現在のオブジェクトのレイヤーが一番奥側 (再背面。すべてのレイヤーの一番下) に移動する。
Warning メモ: レイヤーとして扱えるのはオブジェクト単位である。個々のスプライン曲線をレイヤーに分割することはできない。

グループ化

ベクターモードにおいて、オブジェクトが大量になって扱いづらい場合は、それらをグループ化すればよい。これによって、複数のオブジェクトをまとめて1つのオブジェクトとして扱えるようになる。なお、グループ化しても、個々のオブジェクトの色や形は変わらない。

グループ化を行うには、まずグループに入れるオブジェクトを選択しなければいけない。これには、[選択]ツールを選択して、対象のオブジェクトの周辺をドラッグして長方形で囲むか、Shiftキーを押しながらオブジェクトを1つずつ選択すればよい。オブジェクトの周りにいくつか点がついた長方形が現れるはずだ。この状態で右側に現れた[グループ]ボタン (四角と丸がくっついたボタン)を押すと、選択したオブジェクトがグループ化される。

グループ化したオブジェクトを選択すると、今度は[グループ解除]ボタンが表示されるので、これをクリックするとグループ化が解除される。

Warning メモ: オブジェクトをグループ化しても、オブジェクトのスプラインが消えるわけではないので、中身のオブジェクトはいつでも変形できる

上下、左右に反転する

オブジェクトを選択した状態で、エディターの右上にある[左右を反転][上下を反転]をクリックすると、オブジェクトの左右、上下を反転できる。

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

テンプレート:関連項目 コスチュームの中心とは、コスチュームが持つ座標で縦軸と横軸が交わる点を指す。シンプルに言えば、コスチュームの中心となる点である。コスチュームを回転するときは、この点にそって動く。したがって、コスチュームの中心を違う場所に設定すると、スプライト向きを変えたり、「() 度回す」ブロックなどを使用したときに、回転の仕方が変化する。また、スプライトに対し「() へ行く」ブロックを使ったとき、目標となるのはこの「コスチュームの中心」である。

コスチュームの中心を変更する方法は次のとおり:

  1. ペイントエディターの右上にある十字マークの[コスチュームの中心]ボタンをクリックする。ペイントエディターの描画エリア内に十字が表示される。
  2. この状態で、中心にしたい場所をクリックする。その点がコスチュームの中心になる。

画像を作成中に位置を確認できるよう、コスチュームの中心には、キャンバス上で常に薄い灰色の十字マークが表示されている。

Warning メモ: Scratch2.0では、1.4と異なり、コスチュームの中心がコスチュームのサイズに応じて自動的に変更されることはないので、自分で変更する必要がある。

コスチュームの中心を変えると、どのような変化があるかを調べるには、次の手順を実行してほしい:

  1. 四角形ツールで、長方形を描く
  2. 塗りつぶすツールで、好きな色を塗る
  3. コスチュームの中心を、長方形の中心あたりに設定する (回転方法 を「自由に回転」にしておく)
  4. このスプライトに、次のスクリプトを追加する
@ がクリックされたとき
ずっと
@turnRight (3) 度回す
  1. 緑の旗をクリックして、長方形がどのように回転するか確認する
  2. コスチュームの中心を、長方形の角の部分に変更する
  3. 緑の旗をクリックして、長方形がどのように回転するか確認する

グラデーションと透明

グラデーションを使って透明を表現

グラデーションとは、2つの色の間をだんだん変化させて、2色を溶け合わせるような「塗り」のことである (画像に適用するときは、ビットマップの塗りつぶすツール、または、ベクターの図形の色ツール) を使用する)。グラデーションには、水平方向、垂直方向、放射状という、3つのオプションが存在する (これらは、「塗りつぶすツール/図形の色ツール」を選択中、カラーパレットの左に表示される) 。水平方向は左から右、垂直方向は上から下に色が変わる。放射状では、「塗りつぶすツール/図形の色ツール」でクリックした場所から外側に向かって広がるように色が変わる。

なお、通常の塗り (グラデーションではないベタ塗り) スタイルに戻すときは、グラデーションオプションの左上のボタンをクリックする。

グラデーションは、コスチュームや背景で透明を扱いたい場合にも使用される。2色のカラーボックスのうち、1つに色相、明度、彩度をもった普通の色、もう1つに色なし (基本カラーパレットの右上にある赤い斜線「/」) が入った色) を選択してグラデーションを適用すると、指定した色からだんだん色が薄くなり、最後に完全に透明になるように色が塗られる。右図は、透明を適用したグラデーションがどのように見えるかを示している。

Shift/右クリックオプション

コスチュームペインに並んだコスチュームのサムネイルを右クリック、またはShiftキー+クリックすると、コンテキストメニューが表示される。このメニューの内容は次のとおり:

  • 複製 — コスチュームをコピーして新しいコスチュームを作成する
  • 削除 — スプライトから指定したコスチュームを削除する
  • ローカルファイルに保存 — 指定したコスチュームを使用中のコンピューター (または外部デバイス) に保存する
ビットマップモードツール

ビットマップツール

ビットマップモードのツールとベクターモードのツールには、名前が同じだったり、似ているものもあるが、描画方法には違いがある。次に、ビットマップモードで左側に表示されるビットマップツールについて、上から下に順番に説明していく。

筆ツール

キャンバス内でマウスをドラッグすると、そこに線を引くツールである。ペイントエディターの下側で線の太さや色を変えることができる。現在、選択中の色や太さは、描画エリア内のマウスのポインターに反映される。

直線ツール

まっすぐな線を引くツールである。キャンバスに対して水平な線や垂直な線を引きたいときは、Shiftキーを押しながら直線を引けばよい。ビットマップモードの直線ツールで引いた線は、後から変更できない (これに対し、ベクターモードの直線ツールで引いた線は、形を変えるツールで自由に変形できる)。ビットマップモードの直線ツールではサブピクセルを利用しているため、これを利用していないその他のツールと一緒に使うと、問題を引き起こすことがある。

四角形ツール (正方形)

長方形 (すべての角が直角な四角形) を描くためのツールである。Shiftキーを押しながらマウスをドラッグすると、正方形になる。

長方形の中は、指定した色で塗りつぶすか、透明のまま残しておくかを選択できる。このツールを選択すると、ペイントエディターの左下に、線だけの長方形のボタンと、1色で塗りつぶされた長方形のボタンが表示されるが、線だけの長方形を選択すると、中身が透明の線だけの長方形になる。塗りつぶされた長方形を選択すると、中身が現在の色で塗りつぶされた長方形になる。

楕円ツール (円)

好きな大きさの円や楕円を描くためのツールである。Shiftキーを押しながらマウスをドラッグすると、きれいな円になる。長方形と同様、ツールを選択すると、ペイントエディターの左下に、線だけの楕円のボタンと、1色で塗りつぶされた楕円ボタンが表示され、線だけの楕円を選択すると、中身が透明の線だけの楕円になる。塗りつぶされた楕円を選択すると、中身が現在の色で塗りつぶされた楕円になる。

テキストツール

使用できる6つのフォント

コスチュームや背景に文字 (テキスト) を入れるときに使うツールである。現在、日本語 (日本語フォント) は使用できない。 このツールを選択して、キャンバス内の好きな場所をクリックすると、そこに入力カーソルが表示される。この状態で文字を入力すると、それがキャンバス上に反映される。文字の大きさを変更したいときは、文字の四隅に表示された小さな四角をドラッグすればよい。また、四隅ではなく各辺の中点をドラッグすると、幅の広い文字や狭い文字になる。ただし、このような変更ができるのは、入力が終わってすぐ、文字のまわりに長方形と小さな四角が表示されているときだけである。このツールで入力した文字は、入力直後はベクターモードと同じ状態に見えるが、一度、キャンバスの別の場所をクリックしたり、別のツールを選択したりしてテキストの選択状態が解除されると、ピクセル情報に変換されてしまう。 フォントを変更するときは、ペイントエディター左下に表示されるメニューから選択する。

塗りつぶしツール

ある1色で囲まれた範囲を、指定した色、または、グラデーションで塗りつぶすツールである。これを行うには、キャンバス内の塗りたい領域をマウスでクリックすれば良い。グラデーションについてくわしくは、グラデーションを参照のこと。

Warning メモ: 色を透明にして塗りつぶしツールを使用すると、背景を削除ツールと同じように画像の一部分を透明にすることができる

消すツール

キャンバス上のクリックした場所のイラストを取り除く (消す) ツールである。消したあとの場所は、透明になる (ステージに置いたときに、下にあるものが見える)。

選択ツール

このツールを使うと、キャンバスの一部を長方形で指定して、その部分の画像を移動したり、拡大・縮小、回転することができる。使用するときは、ツールを選択して、キャンバス内の変更したいエリアをドラッグすればよい。これによって、選択した範囲に小さな四角がついた長方形が表示される。この状態で、まんなかの小さな緑の丸をドラッグすると、選択した範囲が移動する。四隅の小さな四角をドラッグすると、拡大、縮小、長方形の外に飛び出た小さな丸をドラッグすると回転になる。

背景を削除ツール (魔法の杖ツール)

選択が終わって削除予定の部分がグレーになっている
Warning メモ: このツールは、時々、不具合が発生する

画像の使用したい部分を選択し、それ以外の部分を削除するツールである。写真などの画像から一部分を長方形以外の形に切り抜きたいときに便利である。 使用するときは、ツールを選択してから、切り抜きたい部分 (使用する部分) をマウスでドラッグしてグリーンの線で囲めばよい。これによって、削除予定の部分が白黒で表示される。この状態で、別のツールやコスチュームをクリックして選択状態を解除すると、白黒になっていた部分が削除される。 一度範囲を選択したあと、選択を解除する前であれば、Shiftキーを押しながらさらに別の部分を囲むと、先ほどの範囲に新しく指定した範囲が追加される。 なお、範囲が正しく選択できなかったときは、アンドゥ機能を使えば、元の状態に戻すことができる。

選択して複製ツール (スタンプツール)

キャンバスの一部を複製 (コピー) するツール。このツールを選択して、キャンバス上でマウスをドラッグすると、指定した範囲の長方形の画像がその場にコピーされる。コピー後は自動的に選択ツールに切り替わるので、このままコピーした画像の移動や拡大・縮小などが可能。

ベクターモードツール

ベクターツール

ベクターモードのツールでは、ビットマップモードのツールと違い、コスチュームや背景の画像を、ピクセル単位での情報ではなく、スプライン曲線として作成する。ビットマップモードのツールとベクターモードのツールは似ているものもあるが、この違いがあるため異なる点も多い。次に、ベクターモードで左側に表示されるベクターツールについて、上から下に順番に説明していく。

選択ツール

オブジェクトを選択して、移動、変形、拡大・縮小、回転を行うツールである。このツールでオブジェクトを選択すると、オブジェクトを囲む小さな四角がついた長方形が表示される。この状態で真ん中のグリーンの小さな丸をドラッグすると、オブジェクトが移動する。オブジェクトを回転するときは、長方形から飛び出た直線の先にある小さな丸をドラッグする。このとき、回転の中心となるのはオブジェクトの中心点である。また、長方形の上の小さな四角をドラッグすると、オブジェクトを変形、縮小・拡大できる。

Warning メモ: グループ化されていない複数のオブジェクトを同時に選択したいときは、選択するオブジェクトがすべて長方形内に含まれるようにマウスをドラッグすればよい。その他、1つめのオブジェクトを選択したあと、CtrlキーまたはShiftキーを押しながら次のオブジェクトを選択する方法でも、複数のオブジェクトが選択できる。

形を変えるツール

形を変えるツールで、オブジェクトを変形した例。

スプライト曲線の開始点、終了点、制御点をマウスでドラッグして、変形するためのツールである。 このツールを使用中にオブジェクトを選択すると、ペイントエディターの左下に[滑らか]というボタンが表示されるが、これをクリックすると、オブジェクトの制御点が適度に削除され、デコボコの直線や曲線がより滑らかになる。鉛筆ツールでスプライン曲線を描画すると、大量の制御点が含まれることが多いので、そのようなときに使用するとよい。オブジェクトの制御点が減ると、ファイルサイズの削減、描画スピードの向上などのメリットがある。

形を変えるツールには次のようないろいろな機能がある。

  • オブジェクトを削除する (オブジェクト制御点すべて消す、または、オブジェクトを選択した状態でDeleteキーまたはBackSpaceキーを押す)
  • スプライン曲線を切り離す (制御点上で、マウスを動かさずにShiftキー+クリックすると、その部分でスプライン曲線が切り離される

円や四角などの「閉じた」 (線がぐるっとつながった) 形のオブジェクトでは、スプライン曲線を切り離すと、形が壊れてしまい、塗りの情報が削除される)

  • 制御点を追加する (オブジェクトの境界線上の制御点がないところでマウスをクリックする。追加した制御点は、クリックした線が直線なら尖った点、曲線ならカーブの一部になる)
  • 直線・曲線を切り替える制御点を追加する (オブジェクトの境界線上の制御点がないところでマウスをShift + クリックする。追加した制御点は、クリックした線が直線なら曲線から直線の切り替え点、曲線なら直線から曲線の切り替え点となる)
  • 制御点を消す (制御点の上でマウスを動かさずにクリックする)
  • 制御点を重ねて、スプライン曲線で閉じた形をつくる。
  • オブジェクト同士をくっつける(閉じていない線同士の両端の点をきっちり重ねると、全体で1つのオブジェクトになるため、同じ線の太さや塗りが適用できるようになる)

鉛筆ツール (スプライン曲線ツール)

ビットマップモードの筆ツールに相当するツールで、マウスによって自由に線を描くときに使う。ただし、筆ツールとちがってこのツールが作成するのは数式にもとづくスプライン曲線なので、後から自由に変形できる。

このツールを使用するには、キャンバスの上でマウスをドラッグする。別のスプライン曲線の端の点から新たに線を引くと、新しい線は自動的に前の線と連結され、太さ、色などが同じになる。

直線ツール

直線ツールは、ベクターエディター上で直線を引くために使用される。直線は、開始点と終了点の2つの端点からなるスプライン曲線である (直線であるが、曲線の特殊系として考える)。このツールを使用するには、マウスを開始点でクリックして、ドラッグし、終了点で離せばよい。

Warning メモ: 曲線を描く場合ときに、最初はこのツールで大まかな直線を描き、その後、形を変えるツールで線上をShift+クリックし、曲線の制御点を足していくという方法もある。

四角形ツール (正方形)

長方形 (すべての角が直角な四角形) を描くためのツールである。使用するときは、キャンバス上をクリックして、マウスを斜めにドラッグすればよい。Shiftキーを押しながらマウスをドラッグすると、正方形になる。このツールで描かれた長方形・正方形は、四隅の4つの制御点で構成されている。

楕円ツール (円)

好きな大きさの円や楕円を描くためのツールである。使用するときは、キャンバス上をクリックして、マウスを斜めにドラッグすればよい。ドラッグした位置にあわせた形の楕円が作成される。Shiftキーを押しながらマウスをドラッグすると、きれいな円 (正円) になる。

テキストツール

キャンバスに文字 (テキスト) を入れるときに使うツールである。現在、日本語 (日本語フォント) は使用できない。 このツールを選択して、キャンバス内の好きな場所をクリックすると、そこに入力カーソルが表示される。この状態で文字を入力すると、それがキャンバス上に反映される。文字の大きさを変更したいときは、文字の四隅に表示された小さな四角をドラッグすればよい。また、四隅ではなく辺の中心の点をドラッグすると、幅の広い文字や狭い文字になる。文字の編集が終わった後は、キャンバスなどの何もない場所をクリックすると、入力状態が解除される。入力後の文字は、テキストツールを選択した状態でクリックするか、選択ツールで選択してからダブルクリックすれば、後からでも自由に入力しなおすことができる。さらに、選択ツールで選択した文字は、後からでも自由に拡大・縮小、変形などができる。

Warning メモ: 現在、テキストツールでは6種類のフォント (Gloria, Scratch, Helvetica, Mystery, Marker, Donegal) を利用できる。フォントを変更するときは、ペイントエディター左下に表示されるメニューから選択する。なお、Google図形描画などの外部ソフトウェアで文字を含んだSVGファイルを作成し、Scratch側でインポートするという方法であれば、上記以外のフォントもあつかえる。一部のソフトウェアで作成したSVGデータをインポートすると、画像に黒い長方形などの不要なオブジェクトが含まれることがあるが、不要オブジェクトを削除すれば、文字データを含むその他のデータは問題なく使用できる。

フォントを変更するときは、ペイントエディター左下に表示されるメニューから選択する。

図形の色ツール

図形の色ツールは、特定の色で囲まれた領域を塗りつぶすツールではなく、ベクター画像のオブジェクトや線の内部に色やグラデーションを適用するツールである。たとえば、何も描いていないキャンバス全体をこのツールで塗りつぶすことはできない。キャンバスはベクター画像のオブジェクトではないからだ。 このツールを使うときは、ツールを選択し、好きなオブジェクトの内部/境界線をクリックすればよい。これによって、クリックした対象に、現在選択中の色が適用される。

Warning メモ: ビットマップモードのように、見た目的に線で囲まれていれば色が塗れる、というわけではないので注意が必要だ (その領域がオブジェクトになっていなければ色が適用されない)。キャンバス全体を塗りつぶしたいときは、最初にビットマップモードで色を塗って、その後、ベクターモードに切り替えるとよい。

複製ツール (スタンプ)

オブジェクトを複製するツールである。複製ツールを選択して、いずれかのオブジェクをクリックすると、そのオブジェクトが複製されてキャンバスに追加される。スタンプ後は、自動的に選択ツールに変わるので、複製されたオブジェクトを、好きな場所に移動したり、変形したりできる。

なお、Shiftキーを押したまま何度もクリックすると、1つのオブジェクトを連続して何度も複製できる (最初の1回だけは、マウスボタンを離したタイミングで複製されるのに対し、それ以降はマウスボタンをクリックしたタイミングで複製される)。 複数のオブジェクトをまとめて複製したいときは、あらかじめそれらをグループ化しておく必要がある。

その他のツール

ベクターモードには、そのほかに3つのツール (「レイヤーを上げる」「レイヤーを下げる」「グループ化/グループ解除」ツール) がある。これらは、他のツールとあわせて使用するサブツールであり、特定の場合のみ表示される。これらを使うと、オブジェクトを適切に管理できるので、選択ツール形を変えるツールなどを使って、複雑なイラストを描く場合などに便利である。

  • レイヤーツールについては、レイヤーを参照のこと。
  • グループ化とグループ解除ツールについては、グループ化を参照のこと。

その他のプログラムと連係する

Scratch ペイントエディターで作成した画像は、ファイルに保存すればScratchの外部に持ち出すことができる。

コスチュームを画像ファイルとして手元のコンピューターに保存するには、ペイントエディターの左側にあるコスチュームペインでコスチュームのサムネイル画像を右クリック、またはShift+クリックして、[ローカルファイルに保存]を選択する。

ビットマップモードで作成した画像は、たいていのペイントソフトで読み込み可能な.png形式で保存される。一方、ベクターモードで作成した画像は、.svg というファイル形式で保存される。このファイルは、ドローイング系 (ベクター) ソフトであれば、読み込み可能であることが多い。

使い方のヒント

  • コスチュームや背景の解像度 (縦 × 横のピクセルサイズ) は、コスチュームペインのサムネイル画像の下に表示されている。
  • コスチューム名や背景名は、ペイントエディターの上部にあるテキストボックスで変更できる
  • オブジェクトの線の太さは、エディターの左下に表示されるスライドバーで変更できる。
  • 画面右下の虫眼鏡ツールをつかうと、キャンバス表示を拡大したり、戻したりできる。「+」が拡大表示、「–」が縮小表示である。これらの間にあるボタンは、表示を100 % (もともとのサイズ) に戻すボタンである。細かい部分を修正するときなどは、このボタンで表示を拡大すると、作業がしやすい。
  • 何か操作を間違えたり予期せぬ結果になったときは、エディター上部の中央付近にある「取り消し」ボタンと「やり直し」ボタンを使うとよい。
    • 「取り消し」は、ショートカットキーCtrl+[z]キー または Cmd+[z]キーで行うこともできる。
  • (コスチューム自体は消さず) キャンバスを白紙に戻すとき エディター丈夫にある[消す]ボタンを使用する。
  • コスチューム自体を消すときは、コスチュームペインのサムネイル画像の右上に表示される[x]ボタンをクリックするか、サムネイル画像を右クリック、またはShift + クリクして、[削除]を選択する。
  • コスチュームを複製 (コピー) するには、いサムネイル画像を右クリック、またはShift + クリクして、[複製]を選択する。
  • コスチュームや背景の順番を並び替えるには、コスチュームペイン内でサムネイル画像をドラッグして好きな場所に移動すればよい。
  • ベクターモードで、キャンバス全体に色を塗りたいときは、キャンバスいっぱいに大きな長方形を作成して、図形の色ツールでその中と境界線に色を適用すればよい (ビットマップモードで色を塗ってからベクターモードに切り替えて作業する、という方法もある)。
  • オブジェクトはキャンバスの外に置くこともできるが、ステージ上には表示されないことがある。
  • Scratch 2.0で、ステージの境界線を崩す (スプライトが自由に境界線を通り抜けられるようにする) 裏技。ベクターオブジェクトを4つ作成して、塗りに透明を設定して、キャンバスの外側4ヶ所に配置する。これによってスプライトがステージの外にどこまでも移動できるわけではないが、見た目上は、ステージの境界を通り抜けたように見える。
  • Scratchプログラムの最上部のツールバーには、スプライトの大きさを変更する[拡大]と[縮小]の2つのボタンがあるが、これらのツールを選択中に、ベクターモードのオブジェクト (またはグループ化されたオブジェクト) をクリックすると、オブジェクトが拡大、縮小される。選択ツールで選択してマウスのドラッグで拡大/縮小する代わりとして使用できる。


ペイントエディター以外のペイントソフト

詳細は「ペイントエディター以外のペイントソフト」を参照
SandCastleIcon.png このページには、ScratchのWebサイトまたはWikipedia,Scratch Wiki以外へのリンクがあります。 他のサイトの安全を保証することはできないため、インターネットを使用する際は常に安全を忘れないようにしてください。

画像を編集するときは、スクラッチ付属のペイントエディター以外に、次のようなソフトを使用できる。

  • Inkscape — フリーソフト。高度な機能を持つドロー系 画像編集ソフト
  • Microsoft Paint — Windows付属のペイント系 画像編集ソフト
  • Paintbrush — フリーソフト。Macで使用できる基本的なペイント系画像編集ソフト
  • GIMP — フリーソフト。さまざまな特殊効果や画像編集に対応した高機能なペイント系 画像編集ソフト
  • Adobe Photoshop — プロも使用する高価だが高機能なペイント系画像編集ソフト。とても高度な画像編集ができる。
  • Adobe Illustrator — プロも使用する高価だが高機能なドロー系画像編集ソフト。

関連項目