メガドライブのゲームの作り方 その3 - 画像の取り扱い

メガドライブで画像や文字を表示するためには、扱える画像形式を理解する必要があります。SGDKにはResCompという画像ファイルや音楽ファイルを扱うための便利なツールが組み込まれていて、比較的簡単に画像を組み込めるようになっています。今回はそれらの使い方をまとめてみます。

<メガドライブの画像形式について>

　これは、メガドライブで表示可能な512色です。各チャンネルが3ビットのRGBカラー（赤・緑・青それぞれが8段階）です。

メガドライブは使える色が少ないイメージですが、実は使える色はこんなにたくさんあります。人間の目は隣り合わせの色の違いや色の組み合わせについては繊細に識別できますが、一つ一つの色の認識はかなりあいまいです。ということは工夫次第で、512色でもかなりの表現ができると思われます。

さらに、一つの絵に対して、この中から任意の15色（16色中1色は背景色になるので）を選ぶ必要があります。

　EDGEなどの画像編集ソフトは8ビットのRGBカラー（赤・緑・青それぞれが256段階）での編集が標準です。そこで、自分は各チャンネルの値を、0 36 73 109 146 182 219 255の8段階の値に限定して画像編集しています。

EDGEで、パックマン風のドット絵を書いてみました。（相変わらずセンスがないです。）

カラーパレットの最上列の16色のみ使用し、一番左の0番目の色は透明色（1番目のパレット:PAL0の場合は背景色）になります。

パレットの赤、緑、青の数値は、0 36 73 109 146 182 219 255のいずれかにすれば、SGDKに取り込んだ時に減色されずそのままでイメージ発色されるはずです。

16色で保存するのチェックを入れ、PNG形式で保存します。

このファイルはスプライトとして使用する予定です。

gr_char.png

同じようにマップの画像を作成し16色で保存

gr_map.png

SGDKではフォントも用意されていますが、ATARI FONTに変更しました。ASCIIコードの0x20-0x7F(32-127)までの文字です。

gr_font.png

<画像と文字を表示してみる>

実際にメガドライブで画像と文字を表示してみます。

画像を入れるresフォルダをプロジェクトファイルの中に新規作成します。先ほどの画像ファイル(gr_font.png, gr_map.png)を作成したresフォルダに保存します。更にResCompで画像を読み込むためのファイルgfx.resを新規作成し、以下の2行を書き込みます。gfx.hは自動で作成されるようです。

IMAGE     image_font            "gr_font.png"       -1

IMAGE     image_map             "gr_map.png"        -1

main.cは以下のように

#include <genesis.h>

#include "gfx.h"

#define TILE_MAP  TILE_USERINDEX  /* gr_map.pngのTileSetのVRAM上の位置 */

int main()
{

    /* フォントのデザインの設定 */
    VDP_loadFont(image_font.tileset, TRUE);

    /* タイルセットの読み込み */
    VDP_loadTileSet(image_map.tileset, TILE_MAP, FALSE);

    /* パレットデータの読み込み */
    VDP_setPalette(PAL0, image_map.palette->data);

    /* フォントのパレットの設定 */
    VDP_setTextPalette(PAL0);

    /* マップを表示 */
    VDP_setMap(PLAN_A, image_map.map, TILE_ATTR_FULL(PAL0, 0, 0, 0, TILE_MAP), 1, 0);

    /* 文字を表示 */
    VDP_drawTextBG (PLAN_A, "HIGH SCORE", 30,1);
    VDP_drawTextBG (PLAN_A, "   000000", 30,3);
    VDP_drawTextBG (PLAN_A, "1UP", 30,5);
    VDP_drawTextBG (PLAN_A, "   000000", 30,7);
    VDP_drawTextBG (PLAN_A, "CREDIT 00", 30,26);

    while(1)
    {
        // program
    }
    return (0);
}

実行するとこんな感じになります。

ソースファイル　CookieMan.zip

<ResCompで扱うImage構造体について>

SGDKでは画像を扱う構造体であるImageが用意されており、Palette・TileSet・Map構造体のポインタがメンバとして含まれます。ResCompでPNGファイルを読み込むと、Image構造体として読み込まれます。

typedef struct
{
    Palette *palette;
    TileSet *tileset;
    Map *map;
} Image;

このような構造体です。

Palette構造体は、512色中どの16色を使うかの色指定データがあります。

typedef struct
{
    u16 index;
    u16 length;
    u16 *data;
} Palette;

TileSetは画像に使われる、タイルデータ(パターン)が格納されています。

typedef struct
{
    u16 compression;
    u16 numTile;
    u32 *tiles;
} TileSet;

Mapは画像のサイズやタイルマップ(画像のどの場所でどのパターンが使用されているかのデータ)が格納されています。

typedef struct
{
    u16 compression;
    u16 w;
    u16 h;
    u16 *tilemap;
} Map;

＊SGDKについて公式サイトに詳しく説明されています。

＊間違った内容があるかもしれません。もしお気づきになられたらコメントでご指摘して頂いたらうれしい限りです。