Main Content

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

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を再生できる。ループ再生は現段階ではまだ実装されてないぽい。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「(FlashLiteの)クソゲー量産してなんか意味あるんスか?」

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

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

Comments

  1. Commented on
    Comment by materialize.jp

    ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備

    enchant.js / Ubiquitous Entertainment Inc.  「enchant.js」を使ってゲームを作りたい。  そんな方々も増えたのではないだろうか。「enchant.js」は確実に日曜ゲーム開発の敷居を下げたと思う。「encha…

  2. Commented on

    […] JavaScriptゲームエンジン『enchant.js』『mario.js』について調べてみました – sakotsu inspire […]

Compose Comment