JavaScriptゲームエンジン『enchant.js』『mario.js』について調べてみました

前回の大阪てら子で少しだけ触れた『enchant.js』と、少し前に話題になってたらしい『mario.js』について紹介したいと思います。

『enchant.js』ってなんですか？

『enchant.js』というのは、ファミコンの初代マリオやドラクエのような2Dゲームを作るのに便利な機能を備えたJavaScriptベースのゲームエンジンです。

具体的には、以下の便利クラスなどが用意されています。
FlashのActionScriptベースな造りことがわかります。ざっと軽く見ていきましょう。

Gameクラス: ゲームの開始と終了を管理する他、ゲームに必要な要素である、ステージサイズ・fps・キー入力なども設定できたり、画像・音声素材の事前読み込みもできます。
Spriteクラス: 表示オブジェクトクラス。
x座標・y座標の位置値、拡大率/回転角度といった変形値、アニメーションフレームなどをプロパティとして持つ。マリオやクリボーなどのキャラクター実装にはこのSpriteクラスを拡張して作ります。
Labelクラス: テキスト表示用のクラス。スコアの表示などに使う。
Mapクラス: ドラクエの背景マップを作れるクラス。マップチップと呼ばれる正方形のドット絵を敷き詰めて構成する。
Sceneクラス: 「オープニング」「アクションパート」「ボスパート」「クリア」「ゲームオーバー」などのシーン管理に。
Soundクラス: wavやmp3を再生できる。ループ再生は現段階ではまだ実装されてないぽい。

その他、詳しくは以下の公式のドキュメントをチェックしてみてください。

Class Index | JsDoc Reference

enchant.jsを実際に使って作られたゲームは以下で遊ぶことが出来ます。ソースもzipで丸ごとダウンロード可。

9leap : トップページ – どこでも遊べる、投稿型ゲームサイト

こちらのページも作り方の参考になりそう。

4Gamer.net ― 「enchant.js」でゲームを作ろう！　HTML5とJavaScriptによるアクションゲーム制作入門（ミドルウェア/開発ツール）

そんでこれが、手慣れたActionScriptのような書き方で組めるというので、それじゃいっちょやってみっかと相成ったわけですね。クソゲーもすぐ作れそう。次回くだらねーやつを発表させて頂きますね＾＾

『mario.js』ってなんですか？

JavaScriptでアクションゲームの実装について調べていたところ、『mario.js』というソースコードに行き着きました。

Play Super Mario Bros in 14kB Javascript – Nihilogic

どうやら、わずか14KBのソースコードで、マリオの1-1が遊べる（敵はいませんけど）というものだそうです。
本家サイトの背景も実は方向キーで操作できるゥ！と当時話題になってましたそういや。

以下のサイト様にて、mario.jsのソースコードが細かく解説されておりました。

14KB JavaScriptマリオをコードリーディングしてみたよ – aikeの日記

すごい。
エンコードされたバイナリデータ（不可解な大量の文字列の塊）からマリオのドットグラフィックやサウンドを再現してるんですね。。ひゃー。
他にも、マリオのBダッシュスピード調整や「？ブロック」の点滅などの為にいろんなタイマーが用意されていることもわかりました。

中身が細かくどうなってるのかまで完全に理解するのは難しそうですが、アクションゲームとして必要な実装要素が掴めそうです、勉強になりますね。

もうひとつ別の『mario.js』

上記の mario.js とは別の mario.js もありました！こっちは日本製です！

GitHubにソースも公開されています。

使い方としては、マリオかルイージを「歩く」「ジャンプ」「しゃがむ」させたり出来ます。
上記サイトの上部にマリオがいるはずです。（IEなどのブラウザによっては機能しないかもしれません）

あと関係ないけど、mario関連でこんなのも見つけました。

Pure CSS animated 3D Super Mario Icon – An experiment by Andreas Jacob

マリオは世界中で愛されてますねー。

３つ目のユーティリティ系『mario.js』

さらにまた別の『mario.js』も発掘しました！
こっちはアクションゲーム向きというよりは、痒いところに手が届くユーティリティ系です！

mario.js:ゲーム開発用JSライブラリ

マリオを作る用途以外でも便利かもしれません。

おまけ：感銘を受けたエントリーの紹介

最初に紹介した『enchant.js』を創られた方のブログなんですが、めちゃめちゃかっこいいので紹介させて頂きます。
僕がenchant.jsに興味を持ったのもこのプレゼンを見てからです。

wise9 › グッバイIVS 日本最強プレゼンバトル体験記

「（FlashLiteの）クソゲー量産してなんか意味あるんスか？」

みんなが思ってたことを（Adobeさんや会場の空気を読まずに）さらっとディスる。
それも、裏側にはしっかりとした考えがある上でまっすぐにディスってる。
そのディスり方も、悪意を感じさせない方向に持っていくスマートさ。
もーめちゃめちゃカッコイイ。おれもこういうプレゼンできる人になりたいですー (^v^)

つってなー。テッテレー。