スクラッチ(Scratch)のペイントエディターを使うと、
オリジナルのスプライトや背景をを作ることができます。
この記事では、ペイントエディターの中の
「ベクター形式」のツールの使い方を紹介します。
- 背景やスプライトを自分で描きたい。
- 色ちがいや逆向きなど、コスチュームの編集のしかたを知りたい。
- ゲームで使う弾やボタンを作りたい。
という方向けです。
下の記事で、ビットマップ形式のツールの使い方について書いています。
スプライトや背景を描く
自分でスプライトを描く場合は、
右下にある「ネコ」のマークをクリックして、
「筆」のマーク（描く）をクリックします。
背景を自分で描きたい場合は、
ネコのとなりにある「山の絵」のマークをクリックして
「筆」のマーク（描く）をクリックしましょう。
「筆」のマークをクリックすると、
ペイントエディターが表示されます。
ペイントエディター画面の見かた
最初はベクター形式で表示されていて、
「ビットマップに変換」ボタンで
ビットマップ形式に切り替えることができます。
ビットマップ形式とベクター形式のちがい
ビットマップ形式
ビットマップ形式の画像とは、
色のついた点（ドット）の集まりでできている画像。
色の変化を細かく表現することができるので、写真向きです。
点の集まりなので、拡大すると画像が荒くなってしまいます。
ベクター形式
ベクター形式の画像とは、
点の位置や線、色などを数値化した情報から
コンピュータが計算して描いている画像。
拡大・縮小しても画像が荒くならないので、図形やイラストに向いています。
しかし、写真のような複雑な色の表現は苦手です。
ツールの使い方
筆（ブラシ）
曲線を自由に描くことができます。
色（塗りつぶし）とブラシのサイズを選んで
キャンバス上をドラッグします。
色の選び方
色の３属性（色相・彩度・明度）を
0～100の値で調整し、色を作ります。
〇を左右にドラッグしましょう。
色（色相）
色相（しきそう）とは、
「赤」「黄」「青」のような
色の種類のことをいいます。
鮮やかさ（彩度）
彩度（さいど）とは、
色の鮮やかさの度合いのことをいいます。
彩度が高くなると、はっきりとした色になり、
低くなると、無彩色（白・灰色・黒）に近づきます。
明るさ（明度）0 ～ 100
明度（めいど）とは、色の明るさの度合いのことをいいます。
低くなると、黒に近づきます。
スポイト
すでに使っている色と同じ色を使いたい時に使います。
スポイトを選択し、キャンバス上にある使いたい色の上でクリックします。
グラデーション
グラデーションの種類と色（2色）を選びます。
直線／円／四角形
図形（直線、丸、四角形）を描くことができます。
塗りつぶしの色（直線はなし）、枠線の色と太さを選んで
キャンバスの上をドラッグします。
丸、四角形は対角線をなぞるようにドラッグしましょう。
「Shift」キーをおしながらドラッグすると円や正方形になりますよ。
また、直線ツールで描いた直線のはし（〇になる場所）から
ドラッグすると、続いた直線を描くことができます。
塗りつぶし
塗りつぶしの色を選んで、塗りつぶしたい部分をクリックします。
消しゴム
消しゴムのサイズを選び、消したい部分をドラッグします。
形を変えたり、穴もあけられます。
選択
パーツをクリックして選択します。
- 移動
パーツをドラッグすると移動します。 - 大きさを変える
枠の端のつまみ（〇）を外側または内側にドラッグすると、
大きさを変えられます。 - 回転
枠の下にある矢じるしを弧を描くようにドラッグすると、回転できます。
「Shift」キーをおしながらドラッグすると45度ずつ回転します。
コピー／貼り付け
選択したパーツを「コピー」ボタンでコピーし、
「貼り付け」ボタンでコピーしたパーツを貼り付けます。
別のスプライトやコスチュームに貼り付けることもできます。
削除
選択したパーツを削除します。
左右反転／上下反転
選択したパーツを左右または上下に反転します。
何も選択していない場合、コスチューム全体が反転します。
反対向きのスプライトを作りたい場合は、
左右反転を使いましょう。
グループ化／グループ化解除
グループ化すると、複数のパーツを１つにまとめてあつかうことができます。
グループ化したいパーツを選択して「グループ化」ボタンをクリックします。
「グループ化解除」ボタンでバラバラに戻すことができます。
パーツの重なりを調整
パーツは紙を何枚も重ねたような状態になっていて、
重なりの順番を変えることができます。
アニメのセル画のようなイメージです。
このように画像を重ねて使うことができる機能を、レイヤーと言います。
手前に出す／奥に下げる
選択したパーツを1つ手前に出したり、
1つ奥に下げたりできます。
最前面／下げる
選択したパーツを一番手前に出したり、
一番奥に下げたりできます。
形を変える
「点」単位で選択することができます。
パーツをクリックし、
出てきた点をクリックすると、操作することができます。
点をドラッグすると点が移動します。
線の上の点がないところをクリックすると新しい点ができます。
削除
点を選択してから削除ボタンをクリックすると、
点を削除できます。
滑らか／角ばった
点を「滑らか（なめらか）」または「角ばった」か選択できます。
滑らかにすると、角がなくなり曲線になります。
滑らかな点は、ベジェ曲線で編集します。
左右のハンドル（方向線）の先にある点（方向点）をドラッグして動かし、
その長さや向きによって線の曲がり具合を調整します。
コツをつかむまで少しむずかしいかもしれません。
練習して感覚をつかみましょう。
テキスト
文字を入力できます。
色（塗りつぶし）とフォント（文字のデザイン）を選んで
キャンバス上をクリック。
大きさは、選択ツールで変えられます。
PR全国からオンラインで受講！小学生向けプログラミング教室「プログラミングキッズ」コスチュームを追加する
コスチュームをふやしたい場合は、
コスチュームタブ（画面の左下）にある
「ネコ」のマークをクリックします。
他のコスチュームのパーツをコピーして、
新しいコスチュームのキャンバスに貼り付けることもできますよ。
まとめ
今回は、ペイントエディターのベクター形式のツールを紹介しました。
レイヤーやベジェ曲線は、
プロも使うIllustratorなどの画像編集ソフトでも使われている機能です。
絵を描く仕事に興味のある子はチャレンジしてみてはどうでしょうか。
何より、自分で描いた絵を自由に動かせたらとても楽しいですよ。
下の記事で、ビットマップ形式のツールの使い方も書いています。
