HTML5 MSX GRAPHICS Viewer

ブラウザ版 MSX画像ビューア

グラサウルス画像対応の、SCREEN0~SCREEN12の画像を表示・変換保存可能なツールです。

ローカル実行用ファイル一式をダウンロード・展開して使用することをお勧めします。


概要

プレビュー

メインターゲットはスクリーン5~12のMSX画像です。

HTML5+javascript ES6の勉強+遊びの為に作成しているので、いつの間にか遊び機能が増えていくかもしれません。

プレビュー

使い方

ファイルをウィンドウにドロップするか
ファイルボタンを使用してファイルを開いてください。

インターレースモード用画像かどうかは拡張子で判定されます。
拡張子一覧

メイン画像ファイルと判定されると、読み込み済みファイルリストと画面をクリアしてから読み込みます。

その為、複数ファイルで構成された画像の場合は順番に開く必要があります。

順番は

  1. メイン画像ファイル
  2. インターレースモードなら2枚目のページの画像ファイル
  3. パレットファイル

です。

この順番でドロップするか、まとめてドロップしてください。

まとめてドロップした場合は自動的に読み込む順番を整えて読み込みます。
この時、1~3の分類それぞれにつき、各1個だけ読み込みます。

また、ファイルボタンから開くことも可能です。
(その場合も複数ファイル指定可能です)


MSX実機でのロード(グラフサウルス圧縮形式)

ローダーのサンプルがあります。

https://github.com/uniskie/MSX_MISC_TOOLS/tree/main/LOADSRD

ビューアー・ローダーともに、 ソースコードの再利用はご自由にどうぞ。

画像ファイルの再利用はご遠慮ください。


MSX画像の圧縮・展開 保存機能

読み込み済みファイルがあれば保存・圧縮保存が可能です。

また、表示されている画像を右クリックすると、ブラウザの機能を使ってPNGなどの画像として保存できます。

全体保存 / PLT保存 / ページ保存

プレビュー

プレビュー

ボタン名 説明 補足
PLT保存 カラーパレットデータを保存します グラフサウルスと違い、スロット1本分の32バイトのファイルです。
BSAVE (VRAMパレット書込) VRAMのカラーパレットテーブルを含む範囲でBSAVEベタ形式保存 VRAMパレットテーブルに現在のパレットを書き込みます。
保存サイズがVRAMパレットテーブルより小さければ、テーブルを含む領域まで保存します。
BSAVE (画素のみ) カラーパレットを含まない BSAVEベタ形式保存 VRAMパレットテーブルにパレットを書き込みません。
VRAMパレットテーブルを考慮せず、ピクセルデータの範囲までを保存します。
GS圧縮 (画素のみ) カラーパレットを含まない グラフサウルス圧縮形式保存 VRAMパレットテーブルにパレットを書き込みません。
VRAMパレットテーブルを考慮せず、ピクセルデータの範囲までを保存します。
PLT保存 カラーパレットデータを保存します グラフサウルスと違い、スロット1本分の32バイトのファイルです。

設定保存・読み込み

プレビュー

各種設定を保存、読み込み出来ます。

保存時には gsrle_html_config.json というJSONファイルが保存されます。
任意の名前.jsonに変更して保管しておくと、必要なときに素早く設定を変更できます。

読み込み時はJSONファイルを開くかドロップしてください。

保存・読み込みされる設定内容:

注:BSAVE保存時のファイルヘッダについて

BLOADで読み込むときに、サイズ&hFFFFを越えるファイルは読みだしたデータが化けます。

例)
START=0, END=FFFF を越えるファイル
ファイル全体では&h10007バイト以上

そのため、BSAVEファイルヘッダのENDエントリはサイズが&hFFFFを越えない値を書き出します。 ファイル自体は最後まで書き込まれまます。

例)

この対策によりデータは化けなくなりますが
BLOADでは&h0000~&hFFFEまでしか読み込めません。

全体を読みだしたいときは独自のローダーを使用し、
ファイルサイズを見て読みだすようにすれば、
データの最後まで読み込むことが出来ます。

( https://github.com/uniskie/MSX_MISC_TOOLS/tree/main/LOADSRD など)


openMSX vram2bmp出力ファイルの表示

openMSXではvram2bmpでVRAM全体のRAWファイルに相当するBMPファイルを出力できます。

  1. openMSXでF10キーを押してコンソールを表示
  2. コンソールで vram2bmp ファイル名.bmp 0 256 1024でVRAM全体保存 openMSX console

Note: 保存先について

カレントフォルダは 基本的にOpenMSXを起動した実行ファイルと同じ場所になっています。

  1. OpenMSX Catapultから実行した場合は OpenMSX\Catapult\bin
  2. openmsx.exeを直接実行した場合は OpenMSX\ cd(チェンジディレクトリ)コマンドでカレントディレクトリを変えておくとファイルが整理しやすくて良いかもしれません。

Note: 保存先の変更例

  1. マイドキュメント\openMSX\bmp フォルダを作成
  2. コンソールから cd $env(OPENMSX_USER_DATA)/bmp

→ マイドキュメント\openMSX\bmp\ に保存されるようになる

openMSX起動時に自動的に実行されるスクリプトに
cd $env(OPENMSX_USER_DATA) を書いておけば良いかもしれません。
(自分はユーザーフォルダに自動実行スクリプトを配置する方法が分からないのでやっていません)

vram2bmpで保存されるのはRAWイメージなので普通のBMPとして表示すると実際の画面に表示されている映像とは異なる見た目になります。

当ビューアではそのVRAM RAWイメージを読み込んで、MSX上での見え方で表示することが可能です。
(画面モードや、ベースアドレスは自分で指定してください)

自分向け遊び機能ですが、内容確認などの使い道はあるかもしれません。

表示例

display RAW BMP

display RAW BMP

HYDLIDE3 (C) T&E SOFT / D4 Enterprise


スプライト・キャラジェネの表示ベースアドレス指定

各ベースアドレス

VDPで設定可能な値がドロップダウンリストに登録されていますので、そこから選択可能です。

※ SPRCOL (スプライトカラーテーブル) はSPRATR (スプライトアトリビュートテーブル) - 512にVDPが自動決定します。


設定:読み込み後自動保存

画像の読み込みが終わった後に指定の形式で自動保存するオプション

プレビュー

形式 内容 パレットデータ
BSAVE(VRAMパレット書込) BSAVE形式(VRAMカラーパレットテーブルを含む)画像ファイル BSAVEファイルに含む
BSAVE+PLT分離 BSAVE形式(VRAMカラーパレットテーブルを含まない)画像ファイルと、PLTファイルのセット PLTファイル
GS圧縮+PLT分離 グラフサウルス圧縮形式画像ファイルと、PLTファイルのセット PLTファイル

おまけ:縦スクロール/横スクロール

VDPシミュレートの検証で付けている処理です。

スクロール機能

  1. ▲▼VScroll
    縦スクロールスイッチ

    スプライトごと移動する

  2. ◀▶HScroll
    横スクロールスイッチ

    スプライトは影響をうけない

  3. HScroll Mask
    画面左に8ドット幅の周辺色マスクを表示する スプライトもマスクされる

  4. 2Page HScroll
    VDP R#25 bit0:2画面横スクロール
    表示ページは奇数を指定する

    1ページのVRAMサイズ

補足:インターレース&フリップモード

インターレースモードで2ページをフリップさせて疑似的に424ライン表示する機能

interlace button

Interlaceにチェックを付けるとインターレース&フリップモードになります。
市販ソフトではDPSSGがSCREEN7で使用して、VGAに近い解像度を実現していました。

※ SCREEN0~4では使用できません

2Page HScrollと同様に強制的に表示ページを奇数ページに変更します。


対応拡張子

拡張子で判定して、インターレースモードでの読込先ページを決定します。

  1. パレットの有無、画面サイズ、圧縮などはデータの内容を見て判定します。
  2. SC1はSSCREEN12のインターレース画像として扱います。
  3. SCREEN1画像の場合、SC1の代わりにSR1を使用してみてください。
  4. SCREEN 9は未テストです。
  5. 保存時は現在表示している縦サイズで保存します。

ノンインターレース ビットマップ画像

拡張子 SCREEN番号 インターレースモード BSAVE拡張子 GS拡張子 補足
.SC5 SCREEN 5 non-interlace .SC5 .SR5 BSAVE
.SC6 SCREEN 6 non-interlace .SC6 .SR6 BSAVE
.SC7 SCREEN 7 non-interlace .SC7 .SR7 BSAVE
.SC8 SCREEN 8 non-interlace .SC8 .SR8 BSAVE
.S10 SCREEN 10 non-interlace .S10 .SRA BSAVE
.S12 SCREEN 12 non-interlace .S12 .SRC BSAVE
.SR5 SCREEN 5 non-interlace .SC5 .SR5 GRAPH SAURUS
.SR6 SCREEN 6 non-interlace .SC6 .SR6 GRAPH SAURUS
.SR7 SCREEN 7 non-interlace .SC7 .SR7 GRAPH SAURUS
.SR8 SCREEN 8 non-interlace .SC8 .SR8 GRAPH SAURUS
.SRA SCREEN 10 non-interlace .S10 .SRA GRAPH SAURUS
.SRC SCREEN 12 non-interlace .S12 .SRC GRAPH SAURUS
.SRS SCREEN 12 non-interlace .S12 .SRS GRAPH SAURUS

インターレース(2枚組) ビットマップ画像

拡張子 SCREEN番号 インターレースモード BSAVE拡張子 GS拡張子 補足
.S50 SCREEN 5 interlace page:0 .S50 .R50 BSAVE interlace
.S51 SCREEN 5 interlace page:1 .S51 .R51 BSAVE interlace
.S60 SCREEN 6 interlace page:0 .S60 .R60 BSAVE interlace
.S61 SCREEN 6 interlace page:1 .S61 .R61 BSAVE interlace
.S70 SCREEN 7 interlace page:0 .S70 .R70 BSAVE interlace
.S71 SCREEN 7 interlace page:1 .S71 .R71 BSAVE interlace
.S80 SCREEN 8 interlace page:0 .S80 .R80 BSAVE interlace
.S81 SCREEN 8 interlace page:1 .S81 .R81 BSAVE interlace
.SA0 SCREEN 10 interlace page:0 .SA0 .RA0 BSAVE interlace
.SA1 SCREEN 10 interlace page:1 .SA1 .RA1 BSAVE interlace
.SC0 SCREEN 12 interlace page:0 .SC0 .RC0 BSAVE interlace
.SC1 SCREEN 12 interlace page:1 .SC1 .RC1 BSAVE interlace
.R50 SCREEN 5 interlace page:0 .S50 .R50 GRAPH SAURUS interlace
.R51 SCREEN 5 interlace page:1 .S51 .R51 GRAPH SAURUS interlace
.R60 SCREEN 6 interlace page:0 .S60 .R60 GRAPH SAURUS interlace
.R61 SCREEN 6 interlace page:1 .S61 .R61 GRAPH SAURUS interlace
.R70 SCREEN 7 interlace page:0 .S70 .R70 GRAPH SAURUS interlace
.R71 SCREEN 7 interlace page:1 .S71 .R71 GRAPH SAURUS interlace
.R80 SCREEN 8 interlace page:0 .S80 .R80 GRAPH SAURUS interlace
.R81 SCREEN 8 interlace page:1 .S81 .R81 GRAPH SAURUS interlace
.RA0 SCREEN 10 interlace page:0 .SA0 .RA0 GRAPH SAURUS interlace
.RA1 SCREEN 10 interlace page:1 .SA1 .RA1 GRAPH SAURUS interlace
.RC0 SCREEN 12 interlace page:0 .SC0 .RC0 GRAPH SAURUS interlace
.RC1 SCREEN 12 interlace page:1 .SC1 .RC1 GRAPH SAURUS interlace

キャラクタージェネレータ系(SCREEN 0~4)

拡張子 SCREEN番号 インターレースモード BSAVE拡張子 GS拡張子 補足
.TX1 SCREEN 0 WIDTH 40 non-interlace .TX1 .TX1 BSAVE / GS
.TX2 SCREEN 0 WIDTH 80 non-interlace .TX2 .TX2 BSAVE / GS
.GR1 SCREEN 1 non-interlace .GR1 .GR1 BSAVE / GS
.SR0 SCREEN 0 WIDTH 40 non-interlace .SR0 .SR0 BSAVE / GS
.SR1 SCREEN 1 non-interlace .SR1 .SR1 BSAVE / GS
.SC2 SCREEN 2 non-interlace .SC2 .SR2 BSAVE
.SC3 SCREEN 3 non-interlace .SC3 .SR4 BSAVE
.SC4 SCREEN 4 non-interlace .SC4 .SR3 BSAVE
.SR2 SCREEN 2 non-interlace .SC2 .SR2 GRAPH SAURUS
.SR4 SCREEN 3 non-interlace .SC3 .SR4 GRAPH SAURUS
.SR3 SCREEN 4 non-interlace .SC4 .SR3 GRAPH SAURUS

特殊 バイナリファイル(BSAVE/BLOAD)

拡張子 SCREEN番号 & インターレースモード BSAVE拡張子 GS拡張子 補足
.BIN 現在の画面モード .BIN .BIN 汎用
.VRM 現在の画面モード .VRM .GSR BSAVE RAWイメージ - 新10倍で読み込み変換したもの等
.SPR 現在の画面モード .SPR .SPR スプライト
.SPC 現在の画面モード .SPC .SPC スプライトカラー
.NAM 現在の画面モード .NAM .NAM SC2 パターンネーム
.COL 現在の画面モード .COL .COL SC2 パターンカラー
.GEN 現在の画面モード .GEN .GEN SC2 パターンジェネレータ
.PAT 現在の画面モード .PAT .PAT SC2 パターンジェネレータ
.NM 現在の画面モード .NM' .NM' SC2 パターンネーム
.CL 現在の画面モード .CL' .CL' SC2 パターンカラー
.GN 現在の画面モード .GN' .GN' SC2 パターンジェネレータ
.CL0 現在の画面モード .CL0 .CL0 SC2 パターンカラー
.CL1 現在の画面モード .CL1 .CL1 SC2 パターンカラー
.CL2 現在の画面モード .CL2 .CL2 SC2 パターンカラー
.GN0 現在の画面モード .GN0 .GN0 SC2 パターンジェネレータ
.GN1 現在の画面モード .GN1 .GN1 SC2 パターンジェネレータ
.GN2 現在の画面モード .GN2 .GN2 SC2 パターンジェネレータ

特殊 RAWイメージ

拡張子 SCREEN番号 & インターレースモード BSAVE拡張子 GS拡張子 補足
.BMP 現在の画面モード .SCR .GSR BMPヘッダ+RAWイメージ - OpenMSX vram2bmp の非圧縮BMP
.SCR 現在の画面モード .SCR .GSR RAWイメージ
.GSR 現在の画面モード .SCR .GSR RAWイメージ

特殊 範囲保存イメージ

拡張子 SCREEN番号 & インターレースモード BSAVE拡張子 GS拡張子 補足
.CPY 現在の画面モード .VRM .GSR 範囲画像(BASIC COPY文)
.CP5 SCREEN 5 .VRM .GSR 範囲画像(BASIC COPY文)
.CP6 SCREEN 6 .VRM .GSR 範囲画像(BASIC COPY文)
.CP7 SCREEN 7 .VRM .GSR 範囲画像(BASIC COPY文)
.CP8 SCREEN 8 .VRM .GSR 範囲画像(BASIC COPY文)
.CPA SCREEN 10 .VRM .GSR 範囲画像(BASIC COPY文)
.CPC SCREEN 12 .VRM .GSR 範囲画像(BASIC COPY文)
.GL5 SCREEN 5 .VRM .CPR 範囲画像(BASIC COPY文/グラフサウルス拡張子)
.GL6 SCREEN 6 .VRM .CPR 範囲画像(BASIC COPY文/グラフサウルス拡張子風)
.GL7 SCREEN 7 .VRM .CPR 範囲画像(BASIC COPY文/グラフサウルス拡張子)
.GL8 SCREEN 8 .VRM .CPR 範囲画像(BASIC COPY文/グラフサウルス拡張子)
.GLA SCREEN 10 .VRM .CPR 範囲画像(BASIC COPY文/グラフサウルス拡張子風)
.GLC SCREEN 12 .VRM .CPR 範囲画像(BASIC COPY文/グラフサウルス拡張子風)
.GLS SCREEN 12 .VRM .CPR 範囲画像(BASIC COPY文/グラフサウルス拡張子)

PNGやBMPからMSX用画像への変換について

本ツールにはMSX画像形式からの圧縮や展開のみをサポートしています。
PNGなどからの変換機能が欲しい場合は他のツールを使用してください。

(※vram2bmpで保存したbmpはVRAMのRAWイメージなので特別にそのまま表示可能です。)


使用許諾

禁止事項

音楽データや画像ファイルの再利用はご遠慮ください。(全体的に)

再利用可能なもの

画像ファイル以外のHTML、CSS、JSファイルはご自由に利用してください。 改変なども可能です。

引責事項

転載や改変についてサポートは致しかねます。
また、このツールの使用による問題が起きた場合に、当方は責任を負わないものとします。


更新履歴