enchant.jsとは何か

今回からはenchant.jsを取り上げて行く。具体的には、enchant.jsの付属サンプルコードのアクションゲームをカスタマイズしていく。

enchant.jsって何?という人は公式サイトの解説を読んでそのままダウンロードを。簡単に言うと、enchant.jsとはHTML5 + JavaScriptでゲームを作るためのフレームワークのことです。

ブラウザがあれば動くので、ソースをPCのローカルディレクトリとかDropBox上にでも置いて、中に入っているindex.htmlをGoogle Chromeなどのブラウザにドラッグ&ドロップすればすぐにゲームが始まる。

enchant.jsの付属のアクションゲームについて

enchant.jsにはいくつか付属のサンプルコードがある。シューティングやRPGなどがそれだが、今回はそのうちの一つのマリオ風のアクションゲームをカスタマイズしていく。

Actionゲームのスクリーンショット

このサンプルコード、なかなかよく出来ており、マリオみたくジャンプしてブロックを飛び越え先に進む。

キーボード操作だが、ジャンプやミスすると音も鳴るしダッシュやジャンプなどの加速度も再現。敵キャラやボス戦は無く、キャラクターがファ○アボール出すなどのギミックは無いが、十分アクションゲームとして機能している。

今回はこれのコードを読んでいき、また、別のエントリで更にマリオみたいに敵キャラの辺り判定やボスキャラを入れたりしてみたい。

なお、基礎的なコードの解説はやらないつもりなのでご容赦を。なお、基礎はQiitaやドットインストールなどで解説されているのでそちらの参照をお願いしたい。

※enchant.jsのバージョンはv0.8.3を使用

アクションゲームのコードを読んでみよう

コードはzipを展開すると出てくる、examples→actionの中にあり、index.htmlをブラウザにドラッグ&ドロップするとすぐにゲームが始まる。

ゲームの動作的なものはgame.jsに書かれているので、atomなどのエディタでこれを開いてやる。以下、全部で213行目だが一気に書くと長いので、要所で区切って貼り付けたうえでコメント(//)を入れていく。

※一気ではなく、自分も勉強しながら色々追記していきます。

ここまでが基本の設定。チップセットは長すぎるので省略しています。

キャラの速度やジャンプ判定などを設定。
ボタンを押し続けると縦と横方向ともに速度が上昇し、ある程度のラインでストップする。

以上。

うーん、長い..だが画面で動くものを読んでみるのは楽しい。