Scratch（スクラッチ）でオリジナルのスプライトを作りたい：ペイントエディタの使い方

【1】新しいスプライトを追加しよう

まず、新しいプロジェクトを開いて名前をつけましょう。ステージにネコ（スクラッチキャット）のスプライトが置いてありますが、今回はネコは削除して進めます。

「スプライトをアップロード」

他のソフトウェアで作成したデータや写真を取り込むことができます。（※）

※読み込むことのできるファイル形式はベクターデータの場合はSVG、ビットマップデータの場合はjpg、pngなど

「サプライズ」

何でもよい時、迷ってしまう時に使います。一覧からランダムに何かを選んでくれます。

「描く」

今回はオリジナルのスプライトを作りますので、この「描く」ボタンをクリックします。

「一覧から選ぶ」

Scratchが用意している多数のスプライトから選ぶことができます。

【２】「ペイントエディター」の機能を見てみよう

「描く」ボタンをクリックすると、コスチュームタブが選択され、コスチュームを描いたり編集するためのツール「ペイントエディター」が表示されます。

エディターの形式には「ベクター」と「ビットマップ」の２種類があります。ベクターが最初に表示されていて「ビットマップに変換」ボタンで切り替えることができます。大きさを変えたり色を変えたりと、ベクターの方が加工修正がしやすいため、スプライトはベクターで作ることをおすすめします。（以下、ベクターモードで制作を進めます）

メモ：「ベクター画像」「ビットマップ画像」の違いって？

「ベクター」

「線」と「塗り」のデータで構成される図形の集まり。要素を個別に動かすことができ、拡大縮小してもそれぞれの要素の境界線が滑らかなままなので加工がしやすいです。

「ビットマップ」

写真のように小さな点（ドット）の集まりで表現される画像。塗り重ねて描くことができますが、書き足したものが一枚の画像としてまとまってしまうため、要素ごとに分解して編集することはできません。拡大するとギザギザ、もしくはぼんやりと荒れた画像になります。

【３】：描いてみよう、その１：図形を使おう

ベクターで何かを描いてみましょう。まずは図形を描くツールを使います。

図形を描くツールは「直線」「円」「四角形」の３つです。「直線」を選ぶと枠線の太さと色が選べるようになります。

「直線」

ドラッグに合わせて直線が描かれます。クリックすると端点が描かれ線が止まりますが、再度同じ点をクリックすることで続いた直線を描くことができます。直線で描かれた図形の内側は「選択」ツールで選択すると塗りつぶすことができます。

「円」「四角形」

ドラッグに合わせて円、四角が描かれます。線の色と太さ、塗りの色を選べます。

メモ：ベクター図形は「枠線」でできている

ベクターの図形は全て「枠線」で描かれます。枠線だけに見える線も、後から線の内側を塗りつぶすことができます。枠線がないように見える図形は、枠線の太さがゼロなので線としては見えないのですが、枠線は存在しています。（画像の一番右は線も塗りもなし）

【４】描いてみよう、その２：筆を使おう

今度は「筆」を使ってみましょう

筆を選択すると「枠線」はグレーになって編集できません。「塗りつぶし」の色選択パネルと筆の太さを選択するプルダウンが表示されます。

筆によって描かれた線は線のように見えますが「塗り」画像です。
「選択」ツールで選択すると、細い枠線（太さ０）で囲われた図形であることがわかります。後から枠線に太さをつけることもできます。

【５】形を調整しよう

ベクターで描かれた枠線は後から動かしたり、端点（尖った点）を消したりできます。「形を変える」ツールを選んで図形をクリックすると端点とアンカーポイントが表示されます。

曲線状にあるアンカーポイントをクリックすると曲がり方を調整するハンドルが出てきます。このハンドルを動かすとカーブしている部分を調整できます。

端点やアンカーポイントはクリックして「削除ボタン（ゴミ箱）」を押す、もしくはDeleteキーを押すことで削除できます。

【６】消しゴムを使おう

「消しゴム」ツールを選択すると、消しゴムの太さが選べるようになります。
描いた図形の上をドラッグすると、その軌跡に合わせて図形が変形されます。

【７】身近なものをスプライトにしてみよう

ツールの使い方をひと通り把握したところで、いよいよスプライトを作ってみましょう。
ひとまずはあまり複雑でない形・・・ということで果物（みかん）をキャラクターに仕上げてみます。

１：ちょっと平たい丸を描く

２：四角形を描いて端点を一つ減らし、三角形にする

３：三角形を沢山作って角度を変えてグループ化する

４：丸ツールで目を描く

５：筆ツールで口を描く

６：筆ツールで手足を描く

７：手足の重なり順を変える（体の後ろ、再背面に）

メモ：ベクターのポイントを調整するとキレイにみえるよ

自由に描ける「筆」ツールですが、マウスを使って描くと線がガタガタになりがちです。端点を思い切って減らし、アンカーポイントのハンドルを調整するとスムーズな線になります。

逆に図形で描いた丸や四角はちょっと人工的すぎる・・・そんな時は、「形を変える」ツールを選択した状態で枠線上をクリックし、アンカーポイントを足して歪みや丸み、不規則性を加えることで手作り感が出てきます。

イラスト風に作った例。楕円にアンカーポイントを追加して少しゆがめています。ヘタも筆で描いています。

【８】今日のまとめ

Scratchのペイントエディタはかなり高機能で使いやすく、自由に様々なものを描くことができます。お気に入りのイラストやキャラクターを動かすのは楽しいですし、描けるものが増えることで作品の幅も広がってきます。コスチュームを増やして色々な動きをさせるなど、アレンジして楽しんでみてはいかがでしょうか。

作ったスプライトをどうやって動かすのかが知りたいときは、こちらの記事「Scratch（スクラッチ）はじめの一歩 「ネコを歩かせてみよう」〜これだけで基本の使い方がよくわかる！」をご覧ください。