magloader.js

JavaScriptでMAGローダーを作ってみました。（参考サイト） 「.MAG」形式は、PC98が全盛期...というと数十年も前の話ですが、その頃のものです。

見る

手元のファイルをとりあえず見たい、という場合は以下をお使いください。 ファイルを選択するか、点線枠内にドラッグ＆ドロップすると表示されます。 参考サイト以外でもデータを見かけたので「.MKI」も読めるようにしておきました。

使い方

magloader.jsを読み込んでおいて、Javascriptで

      MagLoader.dataLoad(targetElement, fileURL);
      

と呼び出して使います。 targetElementの子要素としてimgタグが作られ、そこにfileURLのMAGファイルやMKIファイルを表示するしくみです。 具体的には

      <span class="mag" src="img/sample1.mag"></span>
      <span class="mag" src="img/sample2.mag"></span>
      <span class="mag" src="img/sample3.mki"></span>
      <script defer id="magjs" src="scripts/magloader.js"></script>
      <script>
      (() => {
      document.querySelector('#magjs').onload = () => {
        document.querySelectorAll('.mag').forEach(elm => {
          MagLoader.dataLoad(elm, elm.getAttribute('src'));
        });
      };
      })();
      </script>
      

という感じで使います。

サンプル

16色	256色
nntk_16.mag	nntk256.mag

※画像は「キャラクターなんとか機」で作ったものを、減色加工しています。

履歴

20240728 せっかく img にしたので、画像保存したときにパレット含めて保存できるように src 内容を BMP 化 20240722 canvas から img に変えた 20240619 mag/mki両対応ですが内部的には分かれていたので、せっかくだし中間情報を使って共通処理を増やした 20240614 「見る」の処理で、200ラインのときは高さを倍にして表示するように調整（ローダー自体はそのまま） 20240613 コメントも属性に追加（"data-comment"）　SJISデコード/HTMLの都合上、「"」は「'」に変換 20240612 200ラインも属性に追加（"data-200line" が "1" なら200ライン） 20240609 「.MKI」も読めるようにしました 20220527 パレット情報をCANVASの属性として追加（"data-palette"） 20220319 ここで見るしくみを追加 20140609 初版