enchant.js 怒涛の 100 tips

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

enchant.js 怒涛の 100 tips!!

ローカル整理してたら昔勉強がてら作った enchant.js のサンプルが大量に出てきたので, 整理するついでに公開しようと思います.

最終的に 100超えちゃったけどw(全部で102個あります) 逆引きてきな感じでまとめてます. 参考になれば幸いです.

全て jsdo.it に移植したので Web上で実行できます!! fork なりダウンロードなりして遊んでくださいな♪♪

Tips

Base(基本)

基礎です.

  1. enchant.js のテンプレートを用意しよう

Entity(エンティティ)

表示物系の基底クラスです. 内部で DOM を持っているので表示はもちろんのこと CSS との連携なんかもできちゃいます.

  1. Entity を生成してSceneに追加しよう
  2. Entity の幅を変えてみよう
  3. Entity の高さを変えてみよう
  4. Entity の背景色を変えてみよう(string)
  5. Entity の背景色を変えてみよう(hex)
  6. Entity の背景色を変えてみよう(rgb)
  7. Entity の背景色を変えてみよう(hsl)
  8. Entity を透明にしてみよう
  9. Entity の位置を変えてみよう(x, y)
  10. Entity の位置を変えてみよう(moveTo)(推奨)
  11. Entity の位置を変えてみよう(moveBy)(推奨)
  12. Entity をランダムな位置に表示してみよう
  13. Entity をたくさん表示してみよう
  14. カラフルな Entity をランダムな位置に表示してみよう
  15. Entity の className を使って CSS と連携してみよう
  16. Entity と CSS を連携して円を描画してみよう
  17. Entity と CSS を連携して Hover 演出させてみよう
  18. Entity と CSS を連携してアニメーションさせてみよう

EventTarget(イベントターゲット)

イベント関連の機能を持ったクラスです. 上で解説した Entity もこのクラスを継承しているのでひと通り機能を使うことができます.

  1. 更新イベントリスナを登録しよう(on~ version)
  2. 更新イベントリスナを登録しよう(addEventListener version)
  3. タッチイベントリスナを登録しよう(on~ version)
  4. タッチイベントリスナを登録しよう(addEventListener version)
  5. 独自イベントリスナを登録, 発行しよう
  6. 登録したイベントリスナを削除しよう
  7. 登録したすべてのイベントリスナを削除しよう
  8. イベントに登録した無名関数を削除しよう

Sprite(スプライト)

画像を表示する機能を持ったクラスです. 画像をグリッドで区切ってフレームアニメーションなんかも簡単にできる便利なクラスです.

  1. Sprite を表示しよう
  2. Sprite を移動させてみよう
  3. Sprite を回転させてみよう(rotation version)
  4. Sprite を回転させてみよう(rotate(deg) version)
  5. Sprite を拡縮させてみよう(scaleX, scaleY version)
  6. Sprite を拡縮させてみよう(scale(x, y) version)
  7. Sprite を透明にしてみよう
  8. Sprite をフレームアニメーションさせてみよう
  9. Sprite をフレームアニメーションさせながら移動させてみよう
  10. Sprite を画面外に出ないように制御しよう
  11. Sprite の進行方向に応じて表示する向きを変更しよう

Surface(サーフェス)

canvas 機能をラップしたクラスです. context を持っているのでそのまま Canvas 系の API が使えます. また, Sprite の image に代入すると画像のように使えるので非常に便利です.

  1. Surface を使ってCanvas描画してみよう
  2. Surface に円を描画しよう
  3. Surface に三角形を描画しよう
  4. Surface に画像を描画しょう
  5. Surface から1ピクセルを取得しよう
  6. Surface に1ピクセルを設定しよう
  7. Surface に描画した画像をモノクロにしてみよう
  8. Surface に描画した内容を画像として出力しよう

Label(ラベル)

ラベルクラスです. テキストなどを画面に表示する際に使用します.

  1. Label(文字)を表示しよう
  2. Labelの文字色を変えてみよう
  3. Labelのフォントを変えてみよう
  4. Labelを透明にしてみよう

キー入力/タッチ操作

操作系の tips です.

  1. キーボードに応じて Sprite を移動させてみよう
  2. 移動する Sprite を画面外に出ないよう制御してみよう
  3. ボタンにキーを割り当ててみよう
  4. タッチした位置に Sprite を移動させてみよう
  5. タッチした位置が Sprite の中心になるよう移動させてみよう
  6. タッチしている位置に Sprite を移動させてみよう
  7. タッチしている位置に徐々に Sprite を移動させてみよう
  8. タッチした Sprite を消してみよう
  9. バーチャルパッドを使って Sprite を移動させてみよう

Group(グループ)

複数の Node を子に持つことができるクラス. たくさんの Entity をグループとして管理するときなどに使用します.

  1. Group を使って親子関係を付けてみよう
  2. Group を使ってスプライトをまとめて動かしてみよう

Sound(サウンド)

音を再生することができるクラスです. 内部で audio 要素をラップしています.

  1. 音を再生しよう
  2. 音の再生を停止してみよう
  3. 音の再生を中断してみよう
  4. 音のボリュームを変更しよう(保留)

Class(クラス)

クラスを作成するメソッドオブジェクトです.

  1. クラスを生成しよう
  2. Sprite クラスを継承して独自のクラスを生成しよう

Entity 中級

  1. Entity 同士で衝突判定をしよう(矩形判定)
  2. Entity 同士で衝突判定をしよう(円判定)

その他

  1. ゲーム画面の背景色を変えてみよう
  2. ゲームの fps を変えてみよう
  3. ゲームの経過フレーム数を取得しよう
  4. ゲームの経過秒数を取得しよう
  5. ゲームを停止, 再開させてみよう(保留)
  6. ゲームの開始, 終了画面を追加しよう
  7. ゲーム画面を拡縮させないようにしてみよう

避けゲー(KUMAvoid)

プレイヤー(クマ)が自動で床を走ります. タッチすると進行方向が反転します. 敵がピョンピョン跳ねながら襲ってくるので避けつづけて下さい.

どれだけ長時間避け続けられるかを競うシンプルなゲームです.

  1. 背景を表示しよう
  2. プレイヤーを生成, 表示しよう
  3. プレイヤーが自動で走るようにしよう
  4. プレイヤーが画面からはみ出ないよう制御しよう
  5. 画面をタッチするとプレイヤーの進行方向が反転するようにしよう
  6. 敵を生成, 表示しよう
  7. 敵を移動, ジャンプさせよう
  8. 敵が画面からはみ出ないよう制御しよう
  9. プレイヤーと敵の衝突判定をしよう
  10. プレイ経過時間を表示しよう
  11. BGM, SE を追加しよう
  12. ゲームの開始画面と終了画面を追加しよう

タッチゲー(クマタッチ)

ランダムに動きまわるクマをタッチしてスコアを稼ごう. 制限時間内にどれだけ多くのスコアを獲得したかを競うゲームです.

  1. クマクラスを生成しよう
  2. クマがランダムな方向に動くようにしよう
  3. クマが画面外に出ないようにしよう
  4. クマをフレームアニメーションさせよう
  5. クマをタッチで消せるようにしよう
  6. クマを特定時間経つと消えるようにしよう
  7. クマをタッチした際にスコアを表示するようにしよう
  8. スコア, 時間を表示しよう
  9. タッチすると減点になるクマ子クラスを生成しよう
  10. スケボーに乗って猛スピードで動きまわるクマ也クラスを生成しよう
  11. 変わった動きをするクマイケルクラスを生成しよう
  12. 最後にタッチした位置に点を表示しよう
  13. BGM, SE を追加しよう
  14. ゲームの開始画面と終了画面を追加しよう

Links

随時追加, 更新すると思うのでたまに覗きにきてくれると嬉しいです. 更新したらTwitterでもつぶやくと思います.

何かこんなん作ってとかアイディアや要望, アドバイスなどありましたら気軽にTweetもしくは Mail下さい. 出来る限り応えます.

今後, 他のライブラリの tips 集なんかも作ろうかなぁ~なんて考えています. 現在の進行状況としては gl.enchant.js の tips は 70個ほど, arctic.js は 50個ほど作ってます.

100 個超えたあたりで公開しようかなと考えています.

自作 JavaScript ライブラリの tmlib.js にいたっては 200個以上あるので, この辺整理したいところ. jsdo.it さんのエディタの Add Library で追加できるライブラリに tmlib.js を追加してくれると嬉しいんだけどなぁ~.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

COMMENT