いわぶろ（ろてん）

はじめに

その昔，スーパーマリオブラザーズのエリアマップを方眼紙とかに書いて遊んでいたことがあるのは私だけではないはずです．

そんな感じの遊びをHTML的な表記で実現できないかな，とふと思ったので，ちょっと形にしてみました．

• /lang/javascript/ML4M2M – CodeRepos::Share – Trac

「マリオ2っぽいマップのためのマークアップ言語」ということで ML4M2M – Markup Language for Mario2(-like) Maps とかいう名前を勝手に見つけてみました．

使い方

基本的な流れは，次のとおりです．

1. JavaScriptを読み込んで
2. 特定の記述をする

JavaScriptの読み込み

• share – Revision 30569: /lang/javascript/ML4M2M/tags/0.0.1/js

上記リンクにある ml4m2m.js がコアとなるライブラリです．現状では jQuery が必要となるので，事前に読み込んでおきます．次の例では ｊQuery 1.3.2 を読んでいますが，バージョンに依存するような新機能を使っているわけでもないので，1.2.6 くらいでもまず問題ないでしょう．

<script type="text/javascript" src="jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="ml4m2m.js" charset="utf-8"></script>

なお，マップの素材となる画像は，すべてBase64エンコードされた状態で ml4m2m.js 内に入っているため，この 1ファイルだけで完結します．

記述方法

まずは基本的な記述例から．

<div class="ml4m2m">
  <mario2map like="9-1" size="80x14">
    <background>
      <!-- ここに「背景要素」を記述する -->
    </background>
 
    <blockade>
      <!-- ここに「障害物要素」を記述する -->
    </blockade>
 
    <lift>
      <!-- ここに「リフト要素」を記述する -->
    </lift>
 
    <item>
      <!-- ここに「アイテム要素」を記述する -->
    </item>
  </mario2map>
</div>

ml4m2m なクラスの div 要素の中に mario2map タグを書くことで，マップ描画の準備となります．like 属性でどのエリア「風の」マップを描画したいかを，size 属性でマップサイズ（幅，高さの順）を，それぞれ指定できます．

mario2map タグの中に，background，blockade，lift，item という 4種類の「カテゴリ」を表すタグが入ります．これらはそれぞれ 「背景」「障害物」「リフト」「アイテム」を意味します．（「リフト」は「障害物」じゃね？というツッコミはこの際なしにしましょうｗ）

そして，それら「カテゴリ」タグの中に，マップの「要素」を表すタグを，次のような書式で記述していくことになります．

<hatena pos="10,3" size="5,1"></hatena>

この例では，マップの左下から右10ブロック，上3ブロックのところに，幅5ブロック分の「ハテナブロック」が設置されます．

要素の種類については，後述のドキュメントをご覧ください．

サンプル

以下にサンプルを載せておきます．ちょっとした省略記法なんかも使えます．

<div class="ml4m2m">
  <mario2map like="1-1" size="30x14">
    <blockade>
      <ground s="30,2"></ground>
      <pipe p="2,3" s=",2"></pipe>
      <hatena p="-2,+5" s="2"></hatena>
      <block p="+1,3" s="9"></block>
      <block p="-8,+1" s="8"></block>
      <block p="-7,+1" s="7"></block>
      <block p="-6,+1" s="6"></block>
      <block p="-5,+1" s="5"></block>
      <block p="-4,+1" s="4"></block>
      <block p="-3,+1" s="3"></block>
      <block p="-2,+1" s="2"></block>
      <pole p="+8,3"></pole>
    </blockade>
    <background>
      <castle p="25,3"></castle>
      <mount type="2" p="12"></mount>
      <cloud type="3" p="4,11"></cloud>
      <cloud p="24,9"></cloud>
    </background>
  </mario2map>
</div>

このマークアップの場合，次のようなマップが描画されます．

like 属性を 9-1 に変更すると，次のようになります．

とりあえずのドキュメント

詳しくは，次の詳しくないドキュメントをごらんください．間に合わせでスミマセン．今後充実させていきます．

• ML4M2M – Markup Language for Mario2(-like) Maps

今後の課題

とりあえず形にする，ということで，現状では ｊQueryに依存した形で実装されています．まずはこの部分を切り離せたらいいな，と考えてます．

そして，先で少し触れましたが，マップの描画を行うための画像がすべてBase64エンコードされた状態でライブラリのソースに入っています．この部分だけでも現在 170KB を超えてしまっているので，データ量を削減するための対策を考える必要もありますね．

また，Firefoxでの実行がもっさりしている感があるので，アルゴリズム等直せる部分は直していきたいところ．

あとは，色使いとか各マップ要素の正式名称（ってあるのかな？）にちなんだタグ名づけなどなど，でしょうか．

おわりに

以上，「スーパーマリオブラザーズ2」っぽいマップを，HTML的な記述で描画するためのライブラリを作ってみたよ，ということを紹介しました．

まだまだ仕様的な変更が多々あるかと思いますが，よろしければ使ってみてくださいませ．

こちらもあわせてどうぞ