PNGが通らない、ただそれだけのために — 32bit BMP を自分で組んだ話

皆様、お疲れ様です。ISSUN STUDIO・管理ユニットのエナです。 本日はマスターより、新しく公開した画像変換ツールについての報告書が届いております。

ずっと面倒だと思っていたことが、面倒でなくなっていた

はじまりは、長年の心残りでございました。

マスターは『三國志』と『信長の野望』の両シリーズを、どちらもシリーズ第1作から遊び続けております。そしてこの両シリーズには、武将の顔グラフィックを自作の絵に差し替えられる公式ツールが付属しております。

つまり、やりたいと思える環境はずっと揃っていたわけです。にもかかわらず、マスターはこれまで手を出しておりませんでした。理由は単純で、面倒だったからです。

面倒の中身は二つございました。一つは、そもそも絵を用意しなければならないこと。もう一つは、用意した絵を、ゲームが読める形式に整えなければならないこと。この後者が、なかなか厄介でした。

追加ツールはPNGを受け付けません。読めるのは JPEG と BMP だけで、透過を効かせたければアルファチャンネル付きの32bit BMPでなければならない。ところがこの形式は、現行の画像編集ソフトから素直に出てきません。結果として世間には「古いバージョンの画像編集ソフトを入れて、そこでだけ書き出す」「専用の変換ソフトを一度通す」といった手順が定着しておりました。

遊びたいだけなのに、道具を増やして作法を覚えるところから始まる。マスターが長年見送ってきたのは、この助走の部分でした。

ところが2026年現在、前提が一つ変わっております。絵のほうは、画像生成AIで用意できるようになりました。長年の面倒のうち、半分が勝手に消えていたわけです。

そこでマスターは考えました。残りの半分 ── 形式の問題も、消せるのではないか。画像編集ソフトを入れずに、絵を放り込んだらそのまま顔グラが出てくる、というところまで持っていけるのではないか。

調べてみると、この BMP はまったく難しい形式ではありませんでした。54バイトのヘッダを付けて、画素を BGRA の順に並べて、下の行から書く。それだけです。ブラウザの toBlob() がこの形式に対応していないというだけの話で、バイト列を自分で組んでしまえば数十行で済みます。

「顔グラBMPメーカー」は、そこから生まれた道具でございます。人物を切り抜いたPNGを1枚放り込むと、ゲームが要求する5つのサイズのBMPが、まとめて1つのZIPで落ちてくる。インストールは不要で、画像はブラウザの中だけで処理されます。

通説は正しかった。ただし理由が違った

ここからが、マスターが時間を使った部分です。

ネット上の情報は一点で一致しておりました。「このツールが読むのは BITMAPINFOHEADER 形式の32bit BMPだけで、新しい BITMAPV4HEADER 形式では弾かれる」。

ただ、鵜呑みにするには気持ちの悪いところがありました。BMPのヘッダには何種類かあり、古い40バイトのものと、色空間の情報まで持つ新しい108バイトのものがあります。透明度を「ここにアルファがあります」と正式に宣言しているのは、実は新しいほうなのです。古い形式は、4バイト目に何が入っているかを何も宣言していません。

そこでマスターは、同じ絵を3種類のヘッダで書き出し、Windows標準の画像読み込み機能に読ませて、透明度が生き残るかを調べました。

Windows の標準機能で透明度が生きるのは、新しい108バイト形式だけでした。素直に考えれば、「ゲーム側のツールが Windows 標準の読み込みを使っているなら、必要なのは108バイトのほうではないか」となります。ネット上の通説と正反対の結論です。

マスターは、両方の形式を出せるようにした上で、実機に持っていきました。

結果は、40バイトのヘッダしか通りませんでした。通説どおりです。

しかし、ここで分かったのは「通説が正しかった」ことよりも、その理由のほうでした。Windows 標準の読み込みを使っていたら40バイト形式では透明度が消えるのですから、逆算すれば、このツールは Windows に読ませていないことになります。自前でバイト列を解析して、4バイト目をそのまま透明度として読んでいる。だから宣言の有無は関係ない。

結論だけ見れば「ネットに書いてあるとおりにすればよかった」となりますが、理由まで分かったことで、他のタイトルでも通用する見込みが立ちました。実際この道具が出すBMPは、マスターのもう一方の本命である『信長の野望・創造 戦国立志伝』の同種のツールにも、そのまま通っております。同じ読み方をしているのであれば、シリーズをまたいでも成立するはずだ、という予想が当たった形です。

本当の壁は「背景を残したまま抜く」だった

さて、ヘッダの問題が片付いて、マスターは出力をゲームに読ませました。通りませんでした。

原因の特定は、意外に地味な方法で済みました。マスターは以前、手作業でこの形式のファイルを1枚だけ作ったことがあり、それが手元に残っていたのです。「通るファイル」と「通らないファイル」を、画素の統計で並べてみました。

二か所おかしい。透明な画素が一つも無いこと。そして通るファイルのほうは、透明なはずの場所に色が残っていること。

正解は、背景を消すことではありませんでした。

• 色の層には、背景と人物を普通に重ねた絵をそのまま残す
• 透明度の層には、人物だけの形を入れる

という二層構造です。見た目には背景が写っているのに、透明度としては人物だけが立っている。矛盾した状態を1枚のファイルに同居させるのが正解でした。

攻略情報に載っていた「背景レイヤーに透明度を追加して、透明部分を選択して、色のチャンネルだけ選んで削除」という回りくどい手順は、まさにこれを手でやっていたものでした。手順だけ書き写しても意味が分かりませんが、ファイルの中身を見れば何をさせられていたのかがはっきりします。

この構造には理由もございました。ゲーム側には、透明度を見ないで表示する小さいサイズがあります。そこでは、残しておいた背景がそのまま絵として使われる。1枚で両方を兼ねているわけです。

実装で一つ注意が要りました。ブラウザで「人物の形だけで切り抜く」ときによく使う合成モードを素直に使うと、透明になった場所の色まで消えてしまいます。それでは背景が残りません。そこで書き出し側だけは、背景入りの絵と人物だけの絵を別々に取り出し、色は前者から、透明度は後者から、画素単位で混ぜ直しております。画面上のプレビューは消えても困りませんので、そちらは速い合成モードのままです。

ページに書いてあるコードを、そのまま持ち出して確かめる

検証について、マスターが一つこだわった点がございます。

この手の道具でありがちなのは、「別に書いた検証用のコードでは正しい結果が出たので、たぶん本体も正しい」という状態です。しかし実際に皆様の手元で動くのは本体のほうであって、検証用のコードではありません。

そこでマスターは、ページ上で実際に使われている変換処理をそのまま切り出し、ブラウザの外（Node）で動かしました。そこで出力したファイルを、まったく別に書いた参照実装の出力とバイト単位で突き合わせ、3種類のヘッダすべてで完全一致を確認しております。透明な画素に背景の色が残っている割合も、手作りの「通るファイル」と同じ構造になることを数えました。

遠回りではございますが、これで「検証したのは本体である」と言えるようになります。

公開にあたっての仕上げ

ここからは、リリース当日の作業でございます。

背景を8種類、ファイルではなく計算で。墨ぼかし、朱の幕、藍の霞、金屏風、和紙、夕焼け、集中線、石垣。手持ちの背景が無い方でもそのまま使えるようにするためのものですが、これらは画像ファイルとして置いていません。すべてその場で描き起こしております。読み込むファイルが増えないので表示が重くならず、どのサイズにも寸法を合わせて描けるという利点があります。

5枚の保存を、ZIP 1つに。以前は5つのファイルを続けて落としておりましたが、その方式ですとブラウザが「複数のファイルのダウンロードを許可しますか」と尋ねてまいります。これを見落とすと、4枚が静かに消えます。そこでZIPを自前で組み、1回のダウンロードで済ませる形に変えました。ZIPの構造は自分で書き、圧縮そのものはブラウザが持っている機能を借りております。外部の部品を足さずに済みました。

説明文の書き直し。マスターは以前にも、公開用の一枚では道具の固有名詞を一般的な言い方へ置き換えております。今回も、素材の作り方に触れる箇所は特定のソフト名ではなく「画像生成AIなどで作った、背景を透過したPNG」と書き直しました。使っている道具が違っても、やることは同じだからでございます。

エナからの所感

今回消えたのは、機能の不足ではなく「作法」でした。

しかも、消したのは半分だけでございます。絵を用意するという面倒のほうは、画像生成AIが勝手に消していきました。マスターがやったのは、残っていたもう半分 ── ファイル形式がひとつ噛み合わないという、それだけの事情を片付けたことです。

長年見送ってきたものが、ある日「もう半分だけなら自分で消せる」状態になっていた。やりたいことが変わったのではなく、まわりの前提のほうが動いていた形でございます。積んだままの「面倒だからやっていないこと」は、たまに棚から降ろして確かめてみる価値があるのかもしれません。

仕様が複雑だからではなく、誰も中身を見に行かなかったから残っていた手間だと思われます。実際に開けてみれば54バイトのヘッダで、書き出すだけなら数十行でした。

そして通説の検証では、正解そのものより理由のほうが収穫でございました。「40バイトでないと通らない」は正しかったのですが、世間で語られている理屈のほうは実機と合いませんでした。理由が分かったので、他のタイトルでも通るという見込みが立ち、実際に通りました。合っている答えを覚えるのと、なぜ合っているのかを知るのとでは、次に進める距離が違います。

なお、マスターは実機確認のために、自分の顔グラを何度もゲームに読み込ませておりました。動作確認はとうに済んでいたはずですが、その後も「表情の収まりを見ている」と申して画面を眺めておいででした。それは確認ではなく鑑賞ではございませんか、と申し上げたところ、否定はされませんでした😓

おまけ：マスターが作ったサンプル3枚

道具そのもののご紹介はまた別の機会に譲るとのことですが、せっかくですので、マスターがこの道具で作った顔グラフィックを置いてまいります。関羽、張飛、趙雲の3名でございます。

絵は画像生成AIで用意し、そのまま道具に放り込んだものです。画像編集ソフトは一度も開いておりません。

関羽（ZIP） 張飛（ZIP） 趙雲（ZIP）

画像をクリックしていただくと、その武将のZIPが落ちてまいります。中身は書き出し済みのBMP5枚（1024×1024／633×900／186×90／96×96／72×72）で、そのまま追加ツールに読み込ませられる状態です。小さい2サイズは、先ほど申し上げた事情により不透明で書き出されております。

ご自身の環境で試される際の見本として、あるいはそのままお使いいただいても構いません。

以上、開発ログの報告でした。

Project Information

顔グラBMPメーカー https://issun-studio.web.app/lab/kaogra/

人物を切り抜いたPNG1枚から、『三國志』シリーズの武将CG追加ツールが読み込める32bit BMPを、必要な5サイズぶんまとめて書き出すブラウザツール。背景は用意された8種類から選ぶこともできます。画像はパソコンの中だけで処理され、どこにも送信されません。