3つのサンプルで学ぶ ui.enchant.js の使い方

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

Pocket

こんばんは, phi です.

今回は ui.enchant.js の使い方について紹介しようと思います.

っというのも先日書いた『 enchant.js 怒涛の 100 tips』 で ui.enchant.js の使い方についての質問が多数来まして.

私の方でも調べたところ意外とちゃんと解説したページが見つからなかったので, サンプルを作ってみた次第です.

ui.enchant.js の機能は 3 つ.

  • ボタン
  • 方向キーパッド
  • アナログパッド

です. それぞれサンプルを作りましたので良かったら参考にしてください.

ボタン(Button)クラスを使おう!

ui.enchant.js を使うと簡単に良い感じのボタンを表示することができます.

※jsdo.it の 9leap/ui.enchant.js はバージョンが古いのでボタンクラスは定義されていません. Button クラスを使いたい場合は公式サイトからダウンロードした enchant.js の plugins フォルダに入っている ui.enchant.js を使って下さい.

Demo

enchant.js – ボタンを配置してみよう – jsdo.it – share JavaScript, HTML5 and CSS

Code

enchant.js – ボタンを配置してみよう – jsdo.it – share JavaScript, HTML5 and CSS

Usage

サンプルコードの 214 ~ 227 あたりで Button クラスを使っています.

生成して, 位置を指定し, 押した時のイベントリスナを登録してシーンに追加するだけで使えます.

方向キーパッド(Pad)クラスを使おう!

方向キーパッドは 9leap でもお馴染みですね. 超簡単に使えて PC と スマホの操作感を近づけることができるのでゲームバランスの調整も楽になるのでオススメです.

Demo

enchant.js – バーチャルパッドを使って Sprite を移動させてみよう – jsdo.it – share JavaScript, HTML5 and CSS

Code

enchant.js – バーチャルパッドを使って Sprite を移動させてみよう – jsdo.it – share JavaScript, HTML5 and CSS

Usage

方向キーは Pad クラスとして定義されています. 生成して位置を指定し, シーンに追加するだけで画面上に表示, 操作することがでるようになります.

アナログパッド(APad)クラスを使おう!

倒した強さや角度も簡単にとれるアナログパッドを設置することができます.

倒した強さや角度も簡単にとれるので便利なのに意外と使われていない. あまり知られていないのだろうか?

Demo

enchant.js – アナログパッドを使って Sprite を移動させてみよう – jsdo.it – share JavaScript, HTML5 and CSS

Code

enchant.js – アナログパッドを使って Sprite を移動させてみよう – jsdo.it – share JavaScript, HTML5 and CSS

Usage

アナログパッドは APad クラスとして定義されています. Pad クラス同様生成して位置を指定し, シーンに追加するだけで画面上に表示, 操作することがでるようになります.

注意点としては, 画像の位置です. ui.enchant.js は Pad, APad クラス用に pad.png, apad.png という画像を読み込んでいます. この場所は ui.enchant.js を読み込んでいる html ファイルと同じディレクトリに置くようにしてください.

間違い等ありましたら phi の方までご連絡下さい.

以上, ui.enchant.js の紹介でしたぁ~

TRACK BACK URL

POST COMMENT

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

COMMENT