スクラッチ(Scratch)のペイントエディターを使うと、
オリジナルのスプライトや背景をを作ることができます。
この記事では、ペイントエディターの中の
「ビットマップ形式」のツールの使い方と
画像データの読み込み方と書き出し方の方法を紹介します。
- 写真のデータを読み込んで、スプライトや背景にしたい。
- 自作したスプライトや背景のデータを友達にあげたい。
という方向けです。
下の記事で、ベクター形式のツールの使い方について書いています。
スプライトや背景を描く
画面の右下にあるネコと山の絵のアイコンから、スプライトや背景を追加できます。
- スプライトを追加する場合は、「ネコ」のアイコン
- 背景を追加する場合は、「山の絵」のアイコン
をクリックしましょう。
アイコンをクリックするとメニューが出てきます。
- スプライトをアップロード：画像データを読み込む
- サプライズ：用意されている画像からランダムに選ぶ
- 描く：自分で絵を描く
- スプライトを選ぶ：用意されている画像から選ぶ
「筆」のマークをクリックすると、ペイントエディターが表示されます。
ペイントエディター画面の見かた
最初はベクター形式で表示されていて、
「ビットマップに変換」ボタンで、ビットマップ形式に切りかえることができます。
ベクター形式とビットマップ形式のちがい
ビットマップ形式
ビットマップ形式の画像とは、
色のついた点（ドット）の集まりでできている画像。
色の変化を細かく表現することができるので、写真向きです。
点の集まりなので、拡大すると画像が荒くなってしまいます。
ベクター形式
ベクター形式の画像とは、
点の位置や線、色などを数値化した情報から
コンピュータが計算して描いている画像。
拡大・縮小しても画像が荒くならないので、図形やイラストに向いています。
しかし、写真のような複雑な色の表現は苦手です。
PR本格的なプログラミングが学べる！小学生向けオンラインプログラミングスクール「プログラミングキッズ」
ツールの使い方
筆（ブラシ）
曲線を自由に描くことができます。
ブラシの色（塗りつぶし）とサイズを選んで、キャンバス上をドラッグします。
色の選び方
色の３属性（色相・彩度・明度）を0～100の値で調整し、色を作ります。
〇を左右にドラッグします。
色（色相）
色相（しきそう）とは、「赤」「黄」「青」のような色の種類のことをいいます。
鮮やかさ（彩度）
彩度（さいど）とは、色の鮮やかさの度合いのことをいいます。
彩度が高くなると、はっきりとした色になり、
低くなると、無彩色（白・灰色・黒）に近づきます。
明るさ（明度）0 ～ 100
明度（めいど）とは、色の明るさの度合いのことをいいます。
低くなると、黒に近づきます。
スポイト
すでに使っている色と同じ色を使いたい時に使います。
スポイトを選択し、キャンバス上にある使いたい色の上でクリックします。
グラデーション
グラデーションの種類と色（2色）を選びます。
直線／円／四角形
図形（直線、丸、四角形）を描くことができます。
ぬりつぶしの色を選んでキャンバスの上をドラッグします。
円と四角形は、ぬりつぶされた図形または
太さを指定して輪郭（りんかく）を描くかを選べます。
円、四角形は対角線をなぞるようにドラッグします。
「Shift」キーをおしながらドラッグすると円や正方形になりますよ。
テキスト
文字を入力できます。
色（塗りつぶし）とフォント（文字のデザイン）を選んでキャンバス上をクリック。
文字を入力し、位置や大きさを調整します。
- 移動
ドラッグで移動します。 - 大きさを変える
ワクのはじにあるつまみ（〇）を外側または内側にドラッグすると、
大きさを変えられます。 - 回転
ワクの下にある矢じるしを弧を描くようにドラッグすると、回転できます。
「Shift」キーをおしながらドラッグすると45度ずつ回転します。
一度確定したら直すことができません。
塗りつぶし
ぬりつぶしの色を選んで、ぬりつぶしたい部分をクリックします。
消しゴム
消しゴムのサイズを選び、消したい部分をドラッグします。
形を変えたり、穴もあけられます。
選択
ドラッグすると、点線の四角い枠が出て
一部分を選択することができます。
- 移動
ドラッグで移動します。 - 大きさを変える
ワクのはじにあるつまみ（〇）を外側または内側にドラッグすると、
大きさを変えられます。 - 回転
ワクの下にある矢じるしを弧を描くようにドラッグすると、回転できます。
「Shift」キーをおしながらドラッグすると45度ずつ回転します。
コピー／貼り付け
選択した部分を「コピー」ボタンでコピーし、
「貼り付け」ボタンでコピーした部分をはり付けます。
別のスプライトやコスチュームにはり付けることもできます。
削除
選択した部分を消します。
左右反転／上下反転
選択した部分を左右または上下に反転します。
何も選択していない場合、コスチューム全体が反転します。
PRジュニア・プログラミング検定合格を目指そう！個別指導塾ラシク プログラミング講座
コスチュームを追加する
コスチュームをふやしたい場合は、
コスチュームタブ（画面の左下）にあるネコのマークをクリックします。
画像を読み込む（インポート・アップロード）する
パソコン上に保存してある画像データをスプライトや背景に使うことができます。
- スプライト
画面の右下にある「スプライトを選ぶ」を選択、
一番上の「スプライトをアップロード」を選択。
読み込むファイルを選んでアップロード。
- コスチューム
コスチュームタブを開く。
「コスチュームを選ぶ」から上から二番目の「コスチュームをアップロード」を選択。
読み込むファイルを選んでアップロード。
- 背景
画面の右下にある「背景を選ぶ」を選択、
一番上の「背景をアップロード」を選択。
読み込むファイルを選択してアップロード。
読み込むことのできるファイルの種類
下の拡張子の画像データを読み込むことができます。
- スプライト ： .sprite2、.sprite3
- ベクター形式の画像 : .svg
- ビットマップ形式の画像 : .png、.jpg、.jpeg、.gif、.bmp
ファイル名の最後にある「.」（ピリオド）に続く英数字の文字列で
パソコンやスマホで扱うファイルの種類を識別するためのものです。
パソコンの設定で見えないようになっている場合もあります。
著作権（ちょさくけん）に注意しよう
他の人のプロジェクトを見ていると、
時々アニメやゲームのキャラクターを使った作品があります。
しかし、これは著作権侵害（ちょさくけんしんがい）にあたります。
作品を作るとき、使用する画像などが著作権の侵害にならないか注意してください。
文化庁の「楽しく学ぼうみんなの著作権」で、
小学生向けの解説動画があるので参考にしてみてください。
画像を書き出す（エクスポート・ダウンロード）
自分で描いたスプライトや背景をパソコン上に保存することができます。
- スプライト
画面の右下にあるスプライトのアイコンを右クリック。
表示されたメニューの「書き出し」を選ぶ。
- コスチューム
コスチュームタブを開く。
保存したいコスチュームのアイコンを右クリック。
表示されたメニューの「書き出し」を選ぶ。
- 背景
右下にある「ステージ」をクリックして、背景タブを開く。
保存したい背景のアイコンを右クリック。
表示されたメニューの「書き出し」を選ぶ。
コスチュームや背景は、ベクター形式は.svg、ビットマップ形式は.pngとして保存されます。
まとめ
今回は、ペイントエディターのビットマップ形式のツールを紹介しました。
- 拡大・縮小するスプライトは「ベクター形式」
- 写真の画像を使う場合は「ビットマップ形式」
と使い分けるとよいと思います。
お絵かきが好きな子がキャラクターや背景を描いて、
プログラミングが好きな子がプログラムを組むなど
得意なことで協力し合ってひとつの作品を作るのもいいですね。
