ゲーム製作にも必須の画像についての基本

プログラミング班1年のさじです。
今日はプログラミングについて…書きません。
基本的な画像形式と、ゲーム作成で知っておくと便利かなーという最低限のイラスト作成方法をサラッと紹介します。
画像編集ソフトとしてAzpainter2を使った説明を行います。
後述する透過PNGやアルファ付きPNGなどの画像の取り扱いに対応しており、且つ操作がとても簡潔な、とても便利なペイントソフトですのでこの機会にみなさんも是非使ってみてください（ステマ）

1.基本的な画像保存形式

• BMP（.bmp）…基本的に無圧縮。画像の劣化はないがファイルサイズが大きい。
• PNG（.png）…画像の劣化はない。色数が多いとファイルサイズが大きい。
• GIF（.gif）…256色しか色数をもてないため、それ以上の色数を持つ画像は色数が減らされ劣化する。
• JPEG（.jpg or .jpeg）…写真などに適した画像形式。色数が多い画像もファイルサイズを小さくできるが、画像は劣化する。

重要なのはこのあたりかと。
用途としては
PNG…CGイラスト（色数がさほど多くない・劣化を避けたい）
GIF…ドット絵（色数がかなり限定的・劣化の影響がとても大きい）
JPEG…写真（色数が膨大・劣化がさほど目立たない）

（左からPNG、GIF、JPEG）

2.GIFを劣化なく保存するには？

先ほどの中央のドット絵をMSペイントで保存してみます。
（MSペイントはWindows付属のスタートメニュー→「アクセサリ」フォルダ内の「ペイント」）
すると…

画像が劣化してしまいました。
しかしAzpainter2で保存した先ほどのGIF画像には劣化がありません。
Azpainter2に限らず、一般的な編集ソフトではきちんと画像に使われている256色でGIFを作成してくれますが
MSペイントは画像に関係ない256色でGIFを作成してしまうためこのようになるようです。
MSペイントでGIFを保存するのは避けましょう。

3.透過GIF、透過PNG画像を作成するには？

このドット絵をゲームに使いたいと思いますが白い■部分が邪魔ですね
このようなときは透過GIFや透過PNGを作成します。
ここでいう「透過」が紛らわしいのですが「アルファ付き」とは違います。
「透過」では半透明を表現することはできません。あくまである1色が消えた（透明になった）ような画像が作れるだけです。
1
さて先ほどの白い■部分を透明にするには、まず黄緑など絶対作品中に使われてなさそうな色で白い部分を塗ります。

次にAzpainter2で開いて、GIFで保存するときにその透過する色を指定。

コレを表示させると

白い■部分が消えました。
ようするに、保存するときに透過する1色を指定する、この作業だけです。
透過PNGも同様です。8BIT/24BITカラーを選択した上で透過色を指定、保存してください。

4.アルファ付きPNG画像を作成するには？

今度は半透明の部分を持った画像の作り方です。
うすい影のついたカーソルを作ります。

この画面の市松模様は背景であり、背景に半透明の影が落ちていることがわかります。
この半透明の影を保ったまま保存するには、アルファ付きPNGで保存します。
Azpainter2でPNGで保存するときに、アルファ付き32BITカラーを選択します。

この保存したPNG画像をゲーム中に表示させると…

このようにしっかり影を落としています。
Azpainter2上で半透明部分を作るように画像が作成できたら、あとは32BITアルファ付きPNGで保存するだけ、ということです。

内容的には基本の基本でした…
みなさんAzpainter2使いましょう(*ﾟーﾟ)