enchant.js

enchant.jsでアクションゲームをつくってみる

投稿日:

 

enchantjs.com/ja/?s=ja

github.com/wise9/enchant.js

環境

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript

ひな形

まず、環境ごとダウンロード

examples/beginer/hellobearから

index.html

chara1.png

main.js

あと、enchant.jsを準備

index.htmlのロードを自分のディレクトリにあわせる

あとは適当に用意

おおまかな構成は

  1. enchant宣言
  2. window.onloadのなかで
  3. gameインスタンスをつくる
  4. 画像とかのpreload
  5. gameの中の部品となるインスタンスを準備
  6. gameに部品となるインスタンスを配置
  7. game.start()

スプライト表示

スプライトは8×8とかの一定の大きさをもったセル画のように自由に移動できる画像?

スプライトがないと、キャラを移動させるたびに移動後の場所に背景画像とかをいちいち描かなければならなくて面倒

ファミコンとかMSXとかをやってた人には懐かしい概念

最低限やることは

  1. スプライトインスタンスの準備
  2. 画像の割当て
  3. gameへの配置

spriteより大きな画像を割り当てれば、左上から順番にframe番号を与えられる(デフォルトは0)

キーボードで移動

キーボード入力はフレームごとにとる

インスタンスにaddEventListenerをくっつけてもいいし、onenterframeイベントでキー入力をとってもいい

キー入力はgame.input.up down right left a bなど

aボタンなどにはキーボードの好きなキーを割り当ててもいい

今回はstageというグループをつくってそこにクマを配置することにした(あとでマップをつけるため)

アニメーションさせる

このままでは移動はするけれど画像がクマがつっ立ってるだけなので、アニメーションさせることに

スプライトのフレームを次々に切り替えていけばいい

画像は右向きしかないけど、左向きにする場合には反転させればいい scaleX

ついでにループ移動(右端にいくと左端から出現)を設定した

 

ステージをつくる

マップの仕組みは

www.ideaxidea.com/archives/2011/04/enchant_rgb_undocumented.html

わりと古風な感じ ベーマガ世代の人々は雑誌のこんなデータをひたすら手入力していたという

enchant.jsにはマップをつくるのに便利なツールが用意されていた

github.com/wise9/enchantMapEditor

を利用しようとしてみたけど、2Dのやつはうまく動かなかった

forkして調べてみたら、「dc1c43d textareaの修正」というコミットまで戻せば使えることがわかった

イシューに登録だけして、うえのコミットまでgit resetしてつかう(firefoxやchromeではローカルで使えないのでhttpサーバが必要)

また、データがgifからpngに変わっていて微妙に数字も違ってるので注意が必要

ジャンプ

ジャンプの実装は意外と面倒くさい

本当は放物線を描くようにつくると気持ちいいのだけど、物理とかもうすっかり忘れてしまいましたよ

そうした移動値の増加・減少の計算だけでなく、マップとの衝突判定をして、止まるところでは止まるようにしないといけない

MapクラスにはcollisionDataというマップ衝突判定用のデータをいれることができて、これを用意すると、hitTestというメソッドが使えるようになる

そのほかにもジャンプボタンを押している時間によってジャンプの高さを変えたいとか、2段ジャンプはできないようにしたいとか

たまにめり込むのでここはいつか直したい

 

herokuにアップ

damp-chamber-7198.herokuapp.com/

キーボードの左右とスペースキーで操作

なんどかリロードしないとゲームが始まらないことがあります

ソースはjsdoitに なぜかこっちはキーボード操作が反応しない

jsdo.it/seventhsense/vBHV?lang=ja

参考にしたのはこちら

-enchant.js
-

執筆者:

関連記事

戦車をドリフトさせてみたかった~enchant.js

  デバッグしきれず ゲームは難しい サンプルをherokuにアップしました 操作方法は、左右のカーソルキーで回転、上下キーで前進後退、スペースキーで弾を撃ちます fathomless-ba …

enchant.jsの2D物理シミュレーションのチュートリアルをやってみる~box2d.enchant.js

  レファレンス kassy708.github.com/index.html 参考にしたページ 答えらしきものが見つからない 目次1 準備2 リンゴが落ちていく世界3 地面を追加する4 リ …