enchant.js使い方辞典 (v0.6.2)

このページはenchant.jsの用例/サンプルを扱っています。ここではenchant.js ver 0.6.2を使用しています。v0.4.3のサンプルを流用していますのでv0.4.3からv0.6.2へ移行した場合の注意点やメモなどを読んでから実行してください。一部動作しなくなったものに関しては掲載していません。

*勉強用に作成したページなので間違いや勘違いがあるかもしれません。これはまずい/間違っているというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。

ちなみにHTML5 (Canvas)を使ったゲームのプログラムについて解説付きで読んでみたい人は拙著「10日でおぼえるHTML5入門教室」の10章およびダウンロードファイル内の補習講義にて以下のゲームプログラムの解説と実際のコードが入っていますので参考にしてみてください。

※収録されているもの
スカッシュ、ブロック崩し、侵略イカゲーム(インベーダーゲームのようなもの)、集金ゲーム(パックマンのようなドットイートタイプ)、レーダー表示タイプのゲーム(ラリーXやボスコニアンのようなゲーム)、背景画像付きシューティングゲーム(ゼビウスなど縦スクロールするタイプのゲーム)、横スクロールシューティングゲーム(グラディウスのようなゲーム)、迷路脱出ゲーム(ザナドゥのようなゲーム)


■更新情報
v0.4.3からv0.6.2へ移行した場合の注意点やメモなど
1/22 v0.6.2用のページをWebで公開しました。
Last update:2013/1/22 AM 10:25

ASCII.jp連載記事など(v0.4.3ベースなので注意)

ASCII.jp

  1. enchant.jsとジャイロセンサーで作るスマホゲーム【ブロック崩し(前編)】
  2. DeviceOrientation Eventでブロック崩し作ってみた【ブロック崩し(後編)】
  3. enchant.jsで懐かしのインベーダーゲームを作ろう

都合により掲載されなかった原稿(許可を得て掲載)

  1. enchant.js+CSS3フィルタでゲームを作る
  2. Safari 6の字幕機能を使ってゲームのオープニングムービーを

この処理はどうやってるのか

一般

  1. 自機のビームを連射できるようにする

スカッシュ/ブロック崩し

  1. スカッシュやブロック崩しのようにボールを移動させ端で反転するようにする
  2. スカッシュやブロック崩しのようにボールをパドルで跳ね返すようにするには
  3. パドルでボール跳ね返した時にスコアを加算し表示にするには

ブロック崩し

  1. ブロック崩しのブロックを描くには

ゼビウス (namco)

  1. ゼビウスのような地形をエンドレスでスクロールさせる
  2. ゼビウスやザビガのように自機の前に照準を表示する

B-WINGS (DATA EAST[DECO])

  1. B-WINGSのように自機を常に中央にし、地形を左右にスクロールさせる
  2. B-WINGSのように背景色をスムーズに変化させる

Galaxian (namco)

  1. ギャラクシアンのようにボタンを押したら単発でビームを発射する

Gaplus (namco)

  1. ギャプラスのサイドワインダーのように自機のX座標に合わせて弾も移動させる

DARIUS (TAITO)

  1. ダライアスのように手前と奥の背景を別速度でスクロールさせ奥行き感を出す

Fantasy Zone (SEGA)

  1. ファンタジーゾーンのように自機の移動方向にあわせて左右に二重スクロールさせる
  2. ファンタジーゾーンのように自機の位置にあわせて上下に二重スクロールさせる

TwinBee (Konami)

  1. ツインビーのように自機にオプションが追従するようにする

GRADIUS (Konami)

  1. グラディウスのように自機にオプションが追従するようにする

初期化/画面作成

  1. enchant.jsライブラリを読み込む
  2. 画面サイズを設定する
  3. フレームレート(画面の書き換え頻度)を設定する

キャラクタ/スプライト

  1. 画像をあらかじめ読み込ませる(画像のプレロード)
  2. スプライト(キャラクタ/画像)を表示する
  3. スプライト(キャラクタ/画像)の位置を指定する
  4. スプライト(キャラクタ/画像)のスケール(拡大縮小率)を指定する
  5. スプライト(キャラクタ/画像)の回転角度を指定する
  6. 2つの画像を切り換えてアニメーション表示する
  7. スプライトを永遠に右に移動させる
  8. スプライトを永遠に左に移動させる
  9. スプライトを永遠に下に移動させる
  10. スプライトを永遠に上に移動させる
  11. スプライトを右端まで移動させる
  12. スプライトを左端まで移動させる
  13. スプライトを下端まで移動させる
  14. スプライトを上端まで移動させる
  15. スプライトを永遠に回転させる
  16. スプライトが永遠に拡大縮小を繰り返すようにする

当たり判定/接触判定/ヒットチェック

  1. スプライト同士の当たり判定を行う
  2. スプライト同士の当たり判定を2点間の距離で行う

キー入力操作/タッチ操作

  1. スプライトを操作して左右に動かす
  2. 特定のキーをaボタンに割り当てる

ラベル(文字/テキスト)

  1. ラベル(文字/テキスト)を表示する
  2. ラベルの文字を変更する
  3. ラベルの文字を1秒ごと点滅させる
  4. ラベルの文字を0.5秒ごと点滅させる

マップ

  1. マップを表示する
  2. 固定されたマップ上でキャラを移動させる(マップとの接触判定なし/非スムーズ移動)

BGM/サウンド/効果音

  1. BGMを繰り返し演奏する

関連リンク

  1. enchant.js(本家)
  2. 「enchant.js」でゲームを作ろう! HTML5とJavaScriptによるアクションゲーム制作入門
  3. 「enchant.js」でゲームはどれくらい動くのか? HTML5でゲームベンチマークを取ってみよう
  4. enchant.jsでつくる“シロートが3時間でゲームをつくる”作り方
  5. ベーマガ時代よ、再び! :: enchant.js すっごいよ。
  6. enchant.jsで10分間でシューティングゲームを作る! (YouTube映像)
  7. enchant.js 怒涛の 100 tips