代表的な2D画像フォーマットの特徴

ゲームでよく出てくる画像フォーマットのざっくりした解説です。

画像の大まかな種類

画像は以下の2つの種別に大別されます。

  • ビットマップ(ラスター)
  • ベクター

ビットマップ

これは.bmpファイルのことではありません。

ビットマップというのはピクセル毎に色情報を残すような画像形式の総称です。

4ピクセル四方の画像であれば16個の色とその位置情報の組み合わせが何らかの形で残されています。

ゲームでは基本的にこの形式の画像が使われます。

 

ピクセル毎に残すという特徴上、拡大縮小されるとピクセルを補う、もしくは間引く必要が出るため劣化が発生します。

例えば4ピクセル四方の画像を8ピクセル四方の画面に表示する場合は64-16=48ピクセルをビューアーが補って表示する必要が出てきます。

同様に2ピクセル四方の画面であれば16-4=12ピクセルを間引く必要があり、どちらも元の画像とは別物になってしまっています。

ベクター

こちらはピクセル毎の情報は保持せず、式で画像の情報を保持しています。

例えば座標(0,0)-(20,40)に太さ5の赤い線分といった情報です。画像のビューアーがこの式をもとに都度画面を更新します。

これは画面の状態で式を計算し直すため、拡大縮小されても画像に劣化が発生しません。

例えば上記式を2倍に拡大すれば(0,0)-(40,80)に太さ10の赤い線分として描画しなおすことで劣化なしで画面に表示できます。

可逆圧縮と非可逆圧縮

色情報というのは割と容量が大きいです。その為各画像フォーマットではこれを抑えるように圧縮が施されることが多いです。

この圧縮にも大きく2通りのアプローチがあり画像フォーマット選択の際に重要です。

可逆圧縮

圧縮した後伸長しても完全に元の色情報を復元できます。

あくまで色情報の話であり、画像編集ツールのレイヤー等の付加情報は保存されるとは限りません。

非可逆圧縮

圧縮する際に一部データを削除する為完全に元の色情報に戻せません。保存するたび劣化することになります。

可逆圧縮に比べて容量は小さい傾向が強いです。

Windows Bitmap

普段ビットマップと言えばこれの事を指していると思います。

種別 ビットマップ
圧縮 可逆圧縮
拡張子 .bmp
MIME Type image/x-ms-bmp

私は見たことはありませんが、実は圧縮に対応しています。

概要

内部構造は画像の大きさなどを格納したヘッダ部分が固定であり、その後に色情報が格納されています。

色のビット数は1,4,8,16,24,32が使えます。

32ビットが使えはしますがこの内の8ビットは将来への予約として使われていません。その為半透明を表現することはできません

CLUT(Color Look Up Table=パレット)が利用できます。8ビットBMPの場合は十中八九CLUTです。CLUT利用時はヘッダ部分にパレット情報が格納され、色情報の部分はテーブルの何番目の色かという情報が入ります。

Windows BMPはデータ構造がとても単純で解析ツールがお手軽に作れるのがメリットではありますが、単純ゆえに拡張性は乏しく、更に基本的に非圧縮で使われる為容量も大きくなりがちです。

tga

Truevision Graphics Adapterの略です。TARGAと呼ばれることもあるようです。

種別 ビットマップ
圧縮 可逆圧縮
拡張子 .tga
MIME Type image/tga
application/tga

Truevisionというビデオカードを作っていた会社が策定した画像フォーマットでかなり古いです。

概要

Windows Bitmapと似たような構造で、頭に画像の大きさ等の情報があり、その後に色情報が続いています。

色のビット数は24,32の2種類のみのようです。

Windows Bitmapとの大きな違いはこちらは32ビットで半透明が利用できます

Windows Bitmap同様フォーマットが単純なので特徴も似たようなものです。どちらも古くからあるので対応しているものも多いのではと思います。

jpeg

かなりおなじみの画像形式です。あまりデジタルになじみのない人はこれしか知らない人もいるのではというレベルです。

種別 ビットマップ
圧縮 非可逆圧縮
拡張子 .jpg

.jpeg

MIME Type image/jpeg

非可逆圧縮代表という感じです。

jpegはJFIF(もしくはその拡張のEXIF)という形式で表現されています。もはやJFIF=jpegぐらいの認識で良いです。

概要

jpegはセグメントと呼ばれる情報の固まりの組み合わせでできていて、セグメントはマークセグメントの大きさセグメントの内容で構成されています。

jpegでは色の情報を削って圧縮効率を向上します。削ってしまう為一度jpegにすると劣化が発生してしまい元の画像には戻せません。

どの程度情報を削るかを指定することで、画質と容量のトレードオフを比較的細かく調整できます。

また、jpegでは半透明を表現できません

画質を犠牲にすればかなりの低容量を実現できるため、容量が限られる環境では有用です。

ただ、同じような非可逆圧縮ではビデオカードが対応しているETCやPVRに分があります。

仕組み

ある程度かいつまんで圧縮の仕組みを書きます。jpegは風景写真等を想定した圧縮方式がとられています。

風景写真では近くの色の差が少ないことが多いです。その為jpegではまず画像を8ピクセル四方に細切れに分割し、そのブロック毎に色の偏りを計算します。

このときに利用されるのが離散コサイン変換という計算方法です。色の偏りが数値として明らかになります。

その後不要な部分(=偏りが少なく人間から見て、無くても違いが分かりにくい部分)を削ることで色の削減を行います。

ノイズ

jpegでは2種類のノイズが頻繁に見られます。

ブロックノイズ

上述のとおり8ピクセル四方のブロックに分割しそれぞれ計算する為、ブロック毎に色の削減の仕方が違います。そうするとブロックの境目にその違いが線として浮かび上がることがあります。

極端な例ですが、あるブロックでは赤は#ff0000として計算されたが、それ以外のブロックでは赤は#dd0000として計算されたとすると。一面赤な画像の場合はそのブロックだけ少し明るいです。そうすると全体としてみたとき、そこだけ少し明るい四角が描かれているように見えてしまいます。

モスキートノイズ

色の偏りを計算してあまり使わないのを削る為、隣接する色差が激しい(=あまり色に偏りがない)場合に必要な色が削られてしまいます。それを補うものとしてモスキートノイズが浮かびます。

jpeg2000

種別 ビットマップ
圧縮 可逆圧縮

非可逆圧縮

拡張子 .jp2
MIME Type image/jp2

概要

jpegの後継として開発されたフォーマットです。

基本的な考え方はjpegと一緒ですが、計算に利用する式の変更等改善が見られます。

ただ、これがゲームで使われることはめったにないのではないでしょうか。

jpegとの大きな違い

  • 偏りの計算方法変更
    • モスキートノイズが出にくくなります。
    • 可逆圧縮できるようになります。
    • 計算時間は増えました。
  • ブロックの大きさの変更
    • 8ピクセル四方だったブロックの大きさを比較的自由に変更できるようになりました。これによりブロックノイズを抑えることが出来ます。
  • あまり広く使われていない

といった点があげれます。

ちなみに可逆圧縮時は非可逆に比べて圧縮率は落ちます。

Webやゲームでのjpegの代替としてはjpeg2000はなかなか厳しいのが現状な感じです。

gif

Graphics Interchange Formatの略です。jpegに次いで有名な感じがします。

種別 ビットマップ
圧縮 可逆圧縮
拡張子 .gif
MIME Type image/gif

概要

主にWebページの画像として使われてきた画像フォーマットです。

トゥルーカラーではありますが、1つの画像ではその内256色しか利用できません。その為256色以内であれば可逆圧縮ですが、それより多い場合は256色以内に削減しなければいけません。

半透明は表現できませんが、完全透明は表現できます

また、パラパラ漫画(=アニメーションgif)に対応しています。

読み方は公式がgif is not gifと言っているらしく「ジフ」です。

拡張性がない上に256色しか使えませんが、その分余計なデータも無く容量はかなり小さいです。

キャンバスサイズが小さい画像の場合はgifが、大きい場合はpngの方が容量が小さくなる傾向があります。

圧縮の仕組み

そもそもgifでは使用できる色の数を最大256色に制限する事で容量削減を行っています。

ヘッダーに256色のCLUTの指定があり、画像の色情報はそのテーブルの何番目かの指定です。256は8ビットで表現できるので、1色当たり8ビットで済みます。

また、使用可能色数を16色に限定することで、1色当たり4ビットに抑えて容量を大幅削減する事も出来ます。

色情報自体(テーブルの番号指定)はLZWという方法で圧縮されています。ZIPに比べると圧縮率に劣りますが、処理速度が速いです。

アニメーション

パラパラ漫画によるアニメーションに対応しています。

構造は単純で、色情報の集まりがフレームの数だけ並んでいます。フレームにはそれぞれ待機時間と合成方法(重ね書きか、上書きか)が一緒に保存されています。

また、対応しているツールがあるかは知りませんが、各フレーム毎に別々のCLUTを持つことが出来ます。

これを利用して256色より多い色数を表現する事もできなくはないようです。(※それぞれ別のCLUTを持った待機時間0の重ね書き設定のアニメーションgifとする)

png

Portable Network Graphicsの略です。

種別 ビットマップ
圧縮 可逆圧縮
拡張子 .png
MIME Type image/png

昔騒動があり、その際にgifの代替として考案されたフォーマットです。

概要

PNGはチャンクと呼ばれるデータの集合で出来ています。チャンクはチャンクの大きさチャンク名チャンクの内容誤り検出値で構成されています。jpegのセクションと同じようなものです。

誤り検出値はチャンクの内容から計算される整数で、ビューアーやエディターで同じ計算を行い比較することでデータが壊れていないかを検出することができます。

色のビット数は1,2,4,8,16,24,32,48,64が利用可能です。

256色までのCLUTも可能で、gifと違い半透明もCLUTで利用出来ます。

一応フォーマット上は倍精度整数HDRができる・・・はず。

非対応のチャンクは無視されるため、pngでは独自のチャンクを定義して拡張するケースが少なからず有ります。

仕組み

pngの圧縮にはDeflateと呼ばれるZIPの親戚が使われています。

pngでは圧縮効率を上げるためにフィルターと呼ばれるデータが存在します。同じ数値が続くと圧縮効率が上がるDeflateの特性を活かすため、フィルターの指定によって色を直接使うか、色の差分を利用するかを選択できます。

差分の取り方にもいくらか種類がありますが例えば隣の色との差分を残す場合は、同じような色が横に続くと差分に0が多く出るので圧縮効率が上がります。

ただし、色情報以外は圧縮されないため、付加情報が多くなれば容量がその分ダイレクトに増えます。小さいサイズの場合はこれがネックになりgifより容量がかさみます。大きい場合は圧縮率が良いpngが勝ります。

Fireworks png

種別 ※ビットマップ
圧縮 可逆圧縮
拡張子 .fw.png

.png

MIME Type image/png

AdobeのFireworksを保存する際に利用されています。

概要

前述の通りpngは独自のチャンクを定義できます。

Fireworksではこれを利用してpngに独自のチャンクを定義し、レイヤー情報などなどを保存できるようにしています。

本来のpngの画像部分にはレイヤーを結合した結果を入れることで、通常のビューアーでも問題無く見ることができます。(もちろん編集や非表示な部分を見ることなんかはできませんが)

かなり容量が大きいためこれをそのままゲーム内に取り込まないようにする注意が必要です。

Unityであれば基本的にゲーム内に取り込まれる前に設定にそって変換されるのですが、StreamingAssetsの中だけは変換されずにそのまま取り込まれてしまいます。

tiff

Tagged Image File Formatの略です。

種別 ビットマップ
圧縮 可逆圧縮

非可逆圧縮

拡張子 .tiff

.tif

MIME Type image/tiff

概要

pngによく似た形式を持っています。(pngがこれをベースにして出来たのではという話も)

タグと呼ばれるデータの組合せ構成されています。タグはタグ名タグの大きさタグの内容です。

tiffはかなり自由度の高いフォーマットで圧縮に使う方法もZIPやJpeg等様々選択可能です。

また、それなりの頻度でフォーマットが改定されており対応状況が環境によってまちまちです。

tiffでは色の精度も幅が広く浮動小数HDRも可能です。

さらに、マルチページと呼ばれる仕組みで1つのファイルで複数の画像を保存することが出来ます。これによってPhotoshopのレイヤーを保存することも可能です。

psd

PhotoShop dataの略だと思われます。

種別 ※ビットマップ
圧縮 可逆圧縮
拡張子 .psd
MIME Type image/vnd.adobe.photoshop

application/x-photoshop

概要

ご存知フォトレタッチツール「Photshop」での保存形式です。かなり容量がある上、解析に時間がかかるためゲーム内に直接取り込むことはありません。

ちなみにUnityはpsdを読み込んで変換するためResources等に入れても問題ありません。

ETC/DXTC/PVRTC

それぞれEricsson Texture Compression、DirectX Texture Compression、PowerVR Texture Compressionの略です。

これらは画像を保存するファイルフォーマットとは少し毛色が違いますが、ゲームではちょくちょく出てきます。

本来テクスチャは非圧縮ビットマップでメモリ上に配置され利用されますが、これらはビデオカード側が対応しているため圧縮したままメモリ上に配置できます。

圧縮したままメモリに配置できるメリットとしては、

  • 容量が少ないのでより多くのテクスチャ等が利用出来るようになる
  • 容量が少ないのでコピーにかかる時間が少なくて済む為高速化が見込める

という2点が大きいです。

この3つは非可逆圧縮であるため劣化します。また、半透明も使えないか使えたとしても汚いです。半透明がいらない3Dモデルのテクスチャとは相性が良いと言えます。

仕組み

細かい違いはありますが、3つとも方向性は一緒です。

まず画像を4ピクセル四方に細かく分割します。

分割された各ブロックには16色含まれているわけですが、これをよく使われている2色とその補間色の2色の合計4色に間引きます。結果、情報量が約4/16になるという仕組みです。

結構がっつり色がなくなるため元画像によってはかなり劣化します。

jpeg同様狭い範囲では色数が少ないことが多い自然画なんかではそこまで劣化しない傾向があります。

使用可能であればパフォーマンス向上がみこめるので積極的に使いたいですが、画質はあまり良くないので特に2Dでの使用には注意が必要です。

タイトルとURLをコピーしました