BGAの作り方 超初心者篇

ここでは、BGA云々以前に、そもそも「BGAってどんな意味?」とか、bmpとjpegとpngの違いなど、画像について最低限知っておいて欲しいことをまとめています。

いわゆるプレビュー画面を自分で作ることができる方でしたら、ここは特に読まなくてもいいかも知れませんが、一度読んでおいても損はない内容だと思います。


  • BGAって何ですか??
  • 「ドット」や「ピクセル」って何ですか??
  • bmpとjpegとpngの違いって何ですか? 画像にはどれを使えばいいんですか??
  • クリップなどの1枚絵を表示するには、どうすればいいですか。?

 ? BGAって何ですか?

一般的には、BGAといえば Ball Grid Array (下図) なんですが、DTXMania的には Back Ground Animation (背景アニメーション) を指します。ドラムの譜面の右で動いているアレです。

以下、BGAといえばBack Ground Animation ということで。

BGA関連のQ&Aでは、 DTXデータのBGAの作り方について色々と説明していますが、 このページではまず、 BGAの話をする前に最低限必要な画像関係の説明をしています。

Ball Grid Array。 剣山タイプでないフラットな端子が格子状に並んでいるタイプのICパッケージ。 ハンダのボールがグリッド上に並んでいるでしょ? 世間一般でBGAといえば、普通はコレ。

Back Ground Animation. DTXManiaでBGAといえばコレ。


 ? 「ドット」や「ピクセル」って何ですか?

パソコンのモニターに表示されている絵は、 複数の画素 (単色のタイルのようなもの) を並べて整列させて表示しています。

この1個1個の画素のことを、ピクセル(pixel)と呼びます。 ピクセルは、 画像を構成する最小単位で、それ以上細かく分解することはできません。

この画素は、正方形をしています。 (昔は長方形のものも存在しましたが・・)

DTXManiaのBGAでは、 横に278ピクセル、 縦に355ピクセルという寸法の、 縦長の長方形の形をした領域(278x355)を使用します。 このように、 パソコンの画像では普通「横のサイズ×縦のサイズ」という表現で、 画像の大きさ(広さ)を表します。 パソコン以外のところで一般的な「縦×横」とは逆になりますのでご注意ください。

XPの「マイ コンピュータ」のアイコンを8倍に拡大した図。 拡大図をよく見ると、「正方形の形をした単色タイルのようなもの」がたくさん敷き詰められて、 1つのアイコンを形作っていることが分かります。
この「単色タイル」1つ1つのことを 「ピクセル(pixel)」と呼びます。 ピクセルは、それ以上細かい単位に分解することはできません。

DTXManiaのBGA領域の大きさ。 白枠込みでの実寸(278x355)そのまま。

次に、このピクセルの並べ方(座標の表し方)についてです。

数学の授業では、左下が原点(0,0)で、右に行くほどxが、 また上に行くほどyが大きくなると教わりますが、 パソコンの画像においては、左上が原点(0,0)で、 下に行くほどyが大きくなります。

- -

左が一般的な数学でのXY軸の定義で、 中央がパソコン画像でのXY軸の定義です。 パソコンでは、左上が (0,0) で、 下に行くほどyが大きくなります。
従って、例えば、右図で赤枠で囲まれているピクセルの座標は、 (5,6) となります。

最後に、ドット(dot)についてです。 基本的に、ドットとピクセルは同じものと考えてもらってかまいません。 (実際、ここのQ&Aでは同じ意味として使っており、使い分けていません。)

厳密に表現を使い分けるならば、 画面に実際に表示される物理的な「点」をドットと表現し、 画面に表示する前の論理的な「画素」をピクセルと表現します。 通常、 1つの画素(ピクセル)を表示するときは1つの点(ドット)になりますから、 ピクセルとドットは同じものと考えて差し支えない、というわけです。

ただし、ドットとピクセルが異なるケースもあります。 例えばプリンター。

写真を印刷するとき、プリンターは、 7色インク搭載モデルの場合でも、 1ドットあたりせいぜい7色しか使えません。 一方で、今どきは1ピクセルあたり約1600万色が使用可能ですから、 普通に1ピクセル=1ドットで印刷しても、 全然色が足りない・・ということになります。

これを回避するため、プリンターでは、 1ピクセルを表現するために複数のドットを使っています。 (最近のプリンタでは、1ピクセルあたり256ドット使っている・・・ といった話を聞いたことがあります) このように、非常に小さな複数のドットをうまく組み合わせることで、 よりたくさんの色を表現しています。

おまけ:ちなみに、DirectX的なドットとピクセルの違いとなると、 座標の概念が違うとか0.5ドットずらしてとか色々あるんですが、 ここで扱う話ではない (プログラマーのみが気にするべきこと) と思いますので省略します。

最終更新: 2006.7.2

 ? bmpとjpegとpngの違いって何ですか? 画像にはどれを使えばいいんですか?

bmp, jpeg, そしてpng。どれも画像保存用のフォーマット(形式)です。 これらフォーマットの最大の違いは、画像圧縮の方法です。

  • //**bmp(ビーエムピー, ビットマップ) (BitMaP):**// 画像を圧縮せず、そのまま保存します。 従って、画像ファイルの大きさが非常に大きくなります。
    (本当は圧縮できなくはないのですが、 今どき圧縮ありのbmpを使っている例はほとんど無いので略。 また、wavと同じく、 bmpの中に他のフォーマットを組み込むこともできますがここでは略)
  • //**png(ピング)**// (Portable Network Graphics / PNG's Not GIF): 画像を可逆圧縮します。 画像のファイルサイズは、そこそこ小さくなります。 ここに挙げたフォーマットの中で唯一、透明度(α値)を扱えます。
  • //**jpeg(ジェーペグ)**// (Joint Photographic Experts Group): 画像を非可逆圧縮します。 画像のファイルサイズは、非常に小さくなります。 ファイルの拡張子はjpegではなくjpgとなることが多いです。
    (本当は可逆圧縮もできなくはないのですが、 今どき可逆圧縮で使っている例はほとんど無いので略)

ここで、可逆圧縮・非可逆圧縮というキーワードが出てきました。

? 可逆圧縮とは、圧縮したものを展開したときに、 100%完全に元のデータに戻る圧縮方法のことです。 例えば、zipやlzhなどの圧縮は、可逆圧縮です。 実際、これらの圧縮方式でデータが化けちゃったら困りますよね。

これに対して、圧縮したものを展開しても、 完全には元に戻らない(「ほとんど同じデータ」にしか戻らない) 圧縮方法が、非可逆圧縮です。 不可逆圧縮と呼ばれることもあります。

非可逆圧縮では、人間が知覚しづらい部分をこっそり削ります。 「削る」のですから、後で展開しても元に戻りません。 ここだけ聞くとものすごく問題のある圧縮方法に見えますが、 たとえば写真の画像があったとして、 ある特定の座標の画素が1ピクセルほど横にずれていたとしても気にならないでしょうし、 またある画素がほんのちょっとだけ色が変わっていたとしてもまず分からないと思います。

このように、完全には元に戻らない非可逆圧縮ではありますが、 その欠点を補って余りあるメリットがあります。 同じサイズの画像を可逆圧縮と非可逆圧縮で圧縮し比べた場合、 非可逆圧縮の方が、劇的に小さなサイズに圧縮することができます。


上の元絵(本当は640x480の大きさ)を、 それぞれbmp,png,jpgで保存してみました。圧縮無しのbmp, 可逆圧縮のpng, 不可逆圧縮のjpgのファイルサイズを比較してみてください。

左が元絵、右がjpegで保存した画像の拡大図。 境界線やべた塗りのところにノイズが入っています。 つまり、jpegは非可逆圧縮であり、 元絵と比べて劣化が発生する、ということです。

ですから、bmp, jpg, pngの使い分けは、 用途に応じて行うことになります。 劣化が気にならないところなら、迷わずjpegに。 どうしてもきっちり同じ色同じピクセルでなければならないところにはpng。 bmpは圧縮がきかないので使う必要無しです。代わりにpngを使いましょう。

また、「境界がはっきりしている」「べた塗りを多用している」画像、 つまりいわゆる「アニメ絵」だと、jpegの劣化が非常に目立ちます。 こういう画像はpngを用いた方がよいでしょう。 反対に、いわゆる「自然画(写真)」の類は、 jpegを使ったときの劣化がほとんど分からないと思います。 こういうところには積極的にjpegを使えばよいでしょう。

最終更新: 2006.7.2

 ? クリップなどの1枚絵を表示するには、どうすればいいですか。

1枚絵を表示するのは、非常に簡単にできます。

例えば、「BGMを鳴らす」には、「BGMに使う曲のファイルをWAV欄に登録して、BGMのレーンにBGMのチップを置く」?ということをしますが、 「BGA画像を表示する」場合も同じで、 「BGAに使う画像ファイルをBGA欄(もしくはBMP欄)に登録して、 BGAのレーン(もしくはBG1のレーン)に画像のチップを置く」 とすればよいのです。

画像には jpg, png, bmp が使えます。gif は使えません。 画像の大きさは、278x355ピクセルとなります。

DTXCやGDAC2の具体的な操作手順は、別のページの説明をご覧ください。

  • DTXCを使う場合?
  • GDAC2を使う場合?
最終更新: 2006.8.20

DTXMania Q&A