Map Editor の説明

Version 3.5　　前田稔(Maeda Minoru)


Down Load

Mapedit.exe の Down Load

Win32 API で作成した MapChip を組み合わせて背景画像を作成するツールです。
2020/06 Windows10 で動作することを確認します。(文字コードは Shift_JIS)
  1. 使い方は到って簡単です。
  2. ダウンロードしたファイルを解凍して、MapEdit.exe を起動して下さい。
  3. 「ファイル／開く」から「Sample.map」を開いて下さい。
  4. Mapchip ウインドウ(Map.png)からセルを選択して、Map ウインドウに貼り付けてみて下さい。
    後は適当に操作すると、すぐ使い方が解かります。
  5. 右のリンク BG MAP をクリックしてみて下さい。
    JavaScript で BG(背景画像)を描画します。
    BG MAP から呼び出される "javas.html" のソースコード(プログラム)は非常に簡単です。
    <html>
<head>
<meta charset="shift_jis">
<link rel="stylesheet" href="javas.css" type="text/css">
<title>BG MAP</title>
</head>

<body>
<script src="javas.js"></script>
</body>
</html>
  6. Sample.map を使ってもっと大きな背景画像を描画してみましょう。
    1. 「ファイル／開く」から「Sample.map」を開いて下さい。
    2. 「ファイル／Java Data 作成」から「test.css」で保存して下さい。
    3. "javas.html" の JavaS.css と JavaS.js を test.css と test.js に置き換えます。
    4. Sample.map は Map.png をマップチップ画像として使っています。
    5. "javas.html" をブラウザーで起動して実行します。
    6. JavaScript を組み込んだ html はローカル環境でも動くので試してみて下さい。
  7. MapChip 画像は BMP, GIF, PNG, JPEG 形式が使えます。
    BMP 以外を使うときは、プラグイン (ifgif.spi, ifjpeg.spi, ifpng.spi)が必要です。
    但し、JPEG はその仕様上「透明色が真の黒(0,0,0) に戻らない」ことがあるので、MapChip 画像には適しません。

MapEdit は三枚のウインドウで操作します

Map ウインドウ
Map(背景画像)を作成するメインのウインドウで、Mapchip を貼り付けてゲームの背景画面を作成します。
  1. セルのサイズは「縦／横」独立して設定できるようになっています。
  2. ７＋１枚のレイヤを使って、黒を透明色に設定して画像を重ねて描画できます。
  3. メインウインドウ上で右クリック(ドラッグ)で貼り付ける画像を選択することができます。
    選択する画像はレイヤを重ねて現在見えている画像です。
  4. 選択されたセルを貼り付ける方法です。

Mapchip ウインドウ
Mapchip を表示するウインドウで、メインウインドウに貼り付けるセルを選択します。
  1. Mapchip のゼロ番目(左上)のセルには透明色(0,0,0)を設定して下さい。
    このプログラム(MapEdit)では、黒(0,0,0)を透明色として使っています。
    プログラムを起動すると、全てのレイヤはゼロ番のセルで初期化されます。
  2. 画像の黒い部分(0,0,0)は透明になり、下のレイヤが透けて見えます。
    黒色を使うときは 8,8,8 ぐらいに設定して下さい。
  3. Mapchip 画像は、一枚の背景画像に対して一個のファイルを設定します。
    セル画像が不足するときは、もっと大きな Mapchip 画像を用意して下さい。

レイヤウインドウ
レイヤ設定のウインドウで、メインウインドウに描画するレイヤを制御します。
  1. ７＋１枚のレイヤを重ねて画像を作成することが出来ます。
  2. 「可視」ボタンでレイヤを隠すことができます。
    レイヤ機能を利用して複数の背景画像を同時に作成することが出来ます。
    [TEXT ファイル作成] で出力されるデータは、現在見えているマップチップの並び情報です。
  3. [保存]されるレイヤは、保存ボタンが設定されているレイヤです。
  4. ８枚目のレイヤは選択されたセルイメージのワークとして使っています。
    ８枚目の可視ボタンをオンにすると選択されたイメージを確認することができます。

メニューの説明

  1. [保存]メニュー
    保存ボタンが ON のレイヤをファイル(.map)にセーブします。
    ファイルには Mapchip 画像のフルパスも記録します。
  2. [開く]メニュー
    [保存]でセーブしたファイルを開いて、保存した状態を再現します。
    Mapchip 画像の検索は、カレントフォルダを優先します。
  3. [Mapchip load]メニュー
    Mapchip 画像をロードして Mapchip Window に表示します。
    画像の形式は BMP, GIF, PNG, JPEG が使えます。
  4. [TEXT ファイル作成]メニュー
    マップチップの並び情報を TEXT(CSV) 形式で保存します。
    保存されるデータは「現在見えている」画像です。
    ファイルの先頭に Mapchip 画像の名前やサイズ情報を記録してゲームプログラムで扱いやすいようにしています。
    CSV 形式は Comma Separated Value の略で、項目をカンマで区切りレコードを改行で区切るフォーマットです。
    次の例では、Map.png の名前で 16*16 のセルが横に５個縦に４個並んでいます。
    セルの番号は先頭を０として、１行目が０～４、２行目が５～９と数えます。
    //Map  Ver 3.4  前田 稔
//C:\BIN\Mapedit\Map.png
//  5,   4,   16,   16,  Map の幅と高さ, Mapchip の幅と高さ
3, 7, 5, 5, 6,
2, 8, 4, 4, 1,
3, 3, 2, 0, 6,
5, 5, 8, 7, 1,
  5. [JavaData 作成]メニュー
    Java Script でプログラムするために *.css と *.js のファイルを作成します。
  6. [分割保存(&B)]メニュー
    Mapchip 画像をセル単位に切り分けて名前を付けてBMPファイルに保存します。
    ファイル名が Map.png のとき、作成される名前は Map_0.bmp, Map_1.bmp, ・・・ ～ Map_n.bmp です。
    BMP から他の形式に変換するときは i_view などを使って下さい。(i_view では一括変換が出来ます。)
    "girl.gif" ファイルを例にして分割保存の方法を説明します。
    "girl.gif" は[幅:128, 高さ:216]のスプライトが横に７枚並んだ画像です。
    1. Mapedit.exe を起動して、[開く/Mapchip Load]から "girl.gif" ファイルを入力します。
    2. [設定/サイズ]から画像サイズを設定します。
      Mapchip の幅を 128 に、高さを 216 にします。
      MapSize は直接関係しないのですが、幅:7 高さ:1 ぐらいに設定して下さい。
    3. ファイル/分割保存を実行します。
      枚数が少ないのですぐ終わりますが "girl.gif" を入力したフォルダーに BMP ファイルが作成されています。
    これで分割保存は終わりですが、i_view を使って透過 GIF に変換してみましょう。
    i_view は私が愛用しているフリーのソフトです。
    1. i_view を起動します。
    2. [ファイル/一括変換 形式/名前]を選びます。
    3. ファイル名から girl_0.bmp を選んで[追加ボタン]をクリックします。
      girl_1.bmp ～ girl_6.bmp も同様です。
    4. [ファイル形式の一括変換][保存フォルダ]を確認して[実行]をクリックします。
    5. 透過GIFのときは、透明色をクリックして選択します。
    6. girl_0.gif ～ girl_6.gif が作成されます。
  7. [終了]メニュー
    アプリケーションを終了します。
  8. [サイズ]メニュー
    セルのサイズとマップのサイズを設定します。
    セルのサイズは「縦／横」独立して設定できるようになっていて、２～２５６の範囲で設定します。
    一般的にセルのサイズは「１６ または ３２」が使われます。
    マップのサイズは並べるセルの個数(２～５００)で設定します。
    従って 500*16= 8000*8000 または 500*32= 16000*16000 ドットの背景まで作成できます。
  9. [ゼロ番のセルでクリア]メニュー
    全レイヤをゼロ番のセルでクリアします。
    Mapchip のゼロ番目(左上)のセルには透明色(0,0,0)を設定して下さい。
  10. [先頭セルで塗りつぶす]メニュー
    現在作業中のレイヤを選択された左上のセルで塗りつぶします。
  11. [Mapchip]メニュー
    Mapchip Window を表示します。
  12. [レイヤの表示]メニュー
    レイヤの Window を表示します。
  13. [バージョン]メニュー
    バージョン情報を表示します。

格納されているファイル

    Mapchip 画像

  1. JavaS.gif
    Java Script テスト用の小さな画像です。
    gif ファイルを使うときは IFGIF.SPI が必要です。

  2. map32.png
    テスト用(32dot)の 256*64*8 の小さな画像です。

  3. MapS.png
    256*384*8 の Mapchip 画像です。
    MapSAtt.txt が属性を定義したファイルです。

  4. Map.png
    512*864*8 の Mapchip 画像です。
    MapAtt.txt が属性を定義したファイルです。

  5. Mapchip.png
    512*1024*8 の Mapchip 画像です。

  6. 宇宙.png
    256*192*8 の宇宙の Mapchip 画像です。

    Mapedit ファイル

  7. JavaS.map(JavaS.gif, JavaS.css, JavaS.js)
    JavaS.gif を使った JavaScript テスト用です。
  8. Sample.map(Map.png, sample.txt)
    Map.png を使った 40*30*16 の BG です。
    背景画像と透明色のパーツを組み合わせます。
    TEXT 形式を sample.txt で保存しています。
  9. BG32.map(Map.png, BG32D.txt BG32U.txt)
    二枚の GB を重ねる３２ドットのマップです。
  10. Change.map(MapS.png, Chenge)
    Map.png を使った 50*38*16 の BG です。
    プログラムで切り替える二枚の BG を作成します。
    TEXT 形式を Chenge1.txt, Chenge2.txt で保存しています。

    プラグイン

  11. IFGIF.SPI
    GIF 画像のプラグイン
  12. ifjpeg.spi
    jpeg 画像のプラグイン
  13. IFPNG.SPI
    PNG 画像のプラグイン