スクラッチ・画像などパーツ作り
2018年3月18日
さいたネット研究会のテーマは、引き続き「Scratch」、今回は4回目になります。
スクラッチによるゲーム造りでは画面造りが、重要になります。
今月のテーマは、画面作りに必要な画像の作成・編集などとしました。
1、画像の必要性
スプライトや背景を作成するのに必要です。
2、画像の準備
Scratchでは画像を準備する方法として、次の4つの方法があります。
(1)ライブラリーから入手
(2)自ら描く
(3)既存の画像を利用
(4)カメラで撮影
3、画像の種類
(1)画像の表現方式には、ビットマップ画像とベクター画像の2つがあります。
①ビットマップ画像
画像を格子状に細かい点(ピクセル:画素)に分割し、それぞれの点に色や輝度情報を与えて表現する方法。容量がとても大きくなるのでメール添付や配布用としても適さないが、その場合はJPEGなどの圧縮フォーマットを利用できます。
②ベクター画像
真円の真っ黒な画像の場合、ビットマップではこの画像を細かく分割して表現するが、ベクター画像では「半径○㎝の真円があり、中の色は黒である」といった感じで画像を図形としてすべて計算式によって表現します。
線の拡大図、黒がビットマップ、赤がベクターです。
ビットマップ画像を拡大するとジャギが発生するが、ベクター画像ならばジャギが発生せず、拡大縮小などの変形に強いのがベクター画像のメリットです。
ベクター画像は計算式によって画像を表現しているため、複雑な画像の描写には完全に不向きです。
現在は写真のような画像にはビットマップ画像で編集・保存し、ロゴなどの
単純な図形の作成にはベクター画像で保存するなどと使い分けているようです。
「BMP/GIF/JPEG/PNG」はすべて「ビットマップ画像」の画像フォーマットです。
4、画像フォーマットの比較
内容 \ 形式 |
BMP |
GIF |
JPG |
PNG |
色数 |
モノクロ2階調 |
モノクロ2階調 |
24bitフルカラー |
24bitフルカラー |
色空間 |
RGB |
RGB |
RGB,CMYK |
RGB |
透過 |
× |
○ |
× |
○ |
アニメーション |
× |
○ |
× |
▲ |
画質劣化 |
なし |
色数が同じなら |
あり |
なし |
データサイズ |
非常に大きい |
非常に小さい |
非常に小さい |
そこそこ小さい |
用途 |
編集中など高画質 |
アイコン、ロゴ |
写真やCGなど多彩な |
透過を生かした |
不向き |
データの転送、印刷 |
写真など |
ロゴ、イラスト |
データ転送、印刷 |
上表は http://michisugara.jp/archives/2012/img_format.html を参照しました。
(1)BMP(Microsoft Windows Bitmap Image)
MS-DOS時代から扱うことができるWindows標準の画像ファイルフォーマットで、
無圧縮のため、画像の劣化がほとんどありません。
・無圧縮のため、データ容量が大きくなりがち。
・透過処理は不可。
・解像度とビット深度が同じならばデータ容量が同じ。
(2)GIF(日本では「ジフまたはギフ」)
アメリカの大手パソコン通信会社「CompuServe」がインターネット上で負荷を少なくしながら画像データを転送するために開発・提唱された画像フォーマットです。
(3)JPG
BMP/GIFと登場して次に規格されたのがこのJPEG形式です。
BMPでは容量が大きすぎ、GIFでは色数が少なすぎ、ということで「写真」や
「CG」など色を多用する画像でも鮮明に記録することができ、かつ容量も
落とすJPEGが開発されました。今一番普及している画像フォーマットです。
5、スクラッチにおける画像の作成方法 (スプライトもステージもほぼ同じ)
(1)ライブラリーから入手
(2)自ら描く (ステージ画像の作成手順は次の通り)
①「新しい背景を描く」を選択し、背景タブを表クリックする
②既存の背景を選択して背景タブをクリックすると既存の背景を編集できる
(a)筆、直線、四角形、楕円、テキスト、塗りつぶす、消す、選択、背景を
削除、選択して複製
(b)色を選ぶ
(c)太さを選ぶ
(d)取り消し、やり直し
(e)消す、追加、読み込み
(f)トリミング、左右反転、上下反転
(g)画面表示拡大縮小
(h)ビットマップモード、ベクターに変換
6、画像の加工
スクラッチに必要な加工は、①透明化、②切り抜き、③傾き調整、などがあります。
いずれも必要度の高い加工フリーソフトの「Jtrim」を利用して、透明化を
体験しました。
(1)透過にしたい個所を「特定の色」で塗りつぶします。手順は次の通りです。
上図は透明化前の画像です。
①残したい画像に使われてないような色を決めます。(ここでは黄色)
②メニューアイコンから「塗りつぶし」を選択、ダイアログボックスで色を
指定し、指定した色の許容範囲を調整します。
③根気塗りつぶしを進めます。
④「虫眼鏡のアイコン」で画像を大きめに拡大してからやるのがコツです。
⑤失敗したら、「戻るボタン」で戻れます。
透明化したいか所が黄色になりました。
(2)透過処理をする
①塗りつぶししたところに、透過色設定をします。
②スポイトのようなアイコンを利用して透過する色を指定します。この例では
黄色を指定すると、その部分が透明であることを示すタイル模様に
変わります。
上図は透明化完了の状態です。「つ」と「た」が透明化です。
(3)保存する
①「名前を付けて保存」して完了です。
②その際、「gif」または「png」形式で保存します。
会場 : 中央区・新川区民館
リーダー : 永岡 勝男 さん
世話人 : 古川 勝彦さん
時間 : 13:30~16:30
感想:
・画像処理の透明化は勉強になった。
今後の希望テーマ
・エクセル関数の見直しなど
1827