Plugins

enchant.js には様々な機能を拡張するモジュール (プラグイン) が添付されています。

利用方法

<script src="js/enchant.js" />
<script src="js/nineleap.enchant.js" />
<script src="js/twitter.enchant.js" />

すべてのプラグインは、enchant.js の後に読み込む必要があります。また、依存関係のあるライブラリは、依存するライブラリの後に読み込む必要があります。特に gl.enchant.js や、9leap 関係のライブラリは読み込み順に気をつけてください。

プラグインの読み込みに失敗した場合、superclass is not defined. というエラーが出ます (v0.6.0)。

ドキュメント

すべてのプラグインのクラスドキュメントは、下記のURLからアクセスできます。

プラグインの名前空間

プラグインは、enchant オブジェクト以下に名前空間を持っています。例えば gl.enchant.js に含まれるクラスは全て enchant.gl.Shader enchant.gl.Sprite3D などという場所に定義されます。

プラグインの名前空間に、assets というプロパティが含まれていた場合、その画像素材をプリロードします。例えば、nineleap.enchant.js では以下のように定義されているので、start.png とend.png をプリロードします。v0.6.0 現在では、これらのアセットが存在しない場合はエラーで読み込みが停止しますので、注意してください。

enchant.nineleap = { assets: ['start.png', 'end.png'] };

ゲームの記述の最初に実行する関数 enchant(); では、これらの名前空間に定義されたクラスをグローバルにエクスポートする処理を行っています。書き下すと以下のような処理です:

var Core = enchant.Core;
var Sprite = enchant.Sprite;
var Entity = enchant.Entity;
... (標準クラスのエクスポート)

var Core = enchant.gl.Core; // 新しく定義された Core クラスで上書き
var Shader = enchant.gl.Shader;
var Sprite3D = enchant.gl.Sprite3D;
... (プラグインのエクスポート)

このようにして、プラグインで定義されたクラスがグローバルの名前空間で利用できるようになります (ex. var game = new Core(320, 320);)。プラグインを改造したり、新しく作成したりする場合の参考にしてください。

プラグインのリスト

wise9/enchant.js リポジトリには以下のブラグインが含まれています。それぞれ、リストの階層は依存関係にもとづいています。

  • avatar
  • nineleap
    • twitter
    • memory
    • socket
  • ui
  • widget
  • box2d
  • gl
    • bone.gl
    • collada.gl
    • mmd.gl
    • physics.gl
    • primitive.gl
  • extendMap

また、wise9/enchant.js-contrib ではプラグインの投稿を受け付けており、ここにも有用なプラグインが集まっています。

以下の節では、それぞれのプラグインの概要のみ説明します。プラグインのソースコードの中身や、ドキュメントにも詳しい説明やサンプルが含まれています。

avatar.enchant.js

UEIの画像素材を用いたキャラクターアニメーションライブラリです。以下のようなクラスが用意されています。

  • キャラクタ画像クラス
  • 敵キャラクタ画像クラス
  • 背景画像クラス

avatar.enchant.js を用いた画像素材は、enchant.js を用いた無償のゲームに限り、許諾や表示を必要とせず自由に利用できます。ただし、予告なくサーバAPI提供の範囲などを制限する場合もありますのでご了承ください。

nineleap.enchant.js

ゲーム投稿サイト 9leap でのゲーム公開の際に、9leap API との通信を担当するプラグインです。依存しているプラグイン (twitter, memory) で必要なほか、以下のような機能をサポートしています:

  • 9leap スコアランキングAPIとの通信
  • ゲームスタート, ゲームオーバーのスプラッシュ画像表示

start.png, end.png の2つの画像を、htmlファイルと同じディレクトリ階層に置く必要があります。それぞれ、 images/ ディレクトリにサンプルの画像が含まれていますので、お使いください。

twitter.enchant.js

nineleap.enchant.js に依存します。 9leap でTwitterアカウントを使ってログインしているユーザについて、Twitter のユーザ情報を取得するプラグインです。以下のような情報が取得できます:

  • ログイン中のユーザの情報
  • ログイン中のユーザの最近のつぶやき
  • ログイン中のユーザがフォローしている人の情報

例えば、Twitter 上の知人が登場するRPGゲームなどを簡単に作ることができます。

memory.enchant.js

nineleap.enchant.js に依存します。 9leap でTwitterアカウントを使ってログインしているユーザについて、セーブデータを保存する機能を提供します。以下のような情報が取得できます:

  • ユーザ個別のデータ
  • すべてのユーザで共有するデータ

データの保存機能は cookie や localStorage でも実現できますが、「Twitter アカウントに紐付いている」「ゲーム個別の領域に保存できる」「他のユーザの情報や共有領域を参照できる」というメリットがあります。

ui.encant.js

ゲームの中で使われる UI部品のクラスを定義したプラグインです。以下のようなクラスが含まれています:

  • 十字キーパッド (Pad)
  • アナログキーパッド (APad)
  • ボタン (Button)
  • 画像フォント (MutableText)
  • スコアラベル (ScoreLabel)
  • タイムラベル (TimeLabel)
  • ライフラベル (LifeLabel)
  • バー (Bar)

pad.png, apad.png, icon0.png, font0.png の4つの画像素材を、htmlファイルと同じディレクトリ階層に置く必要があります。それぞれ、 images/ ディレクトリにサンプルの画像が含まれていますので、お使いください。

gl.enchant.js

WebGLを用いた描画を実現するプラグインです。シェーダ、クオータニオン、光源、カメラなどの概念をラップし、より直感的なAPIを提供します。同様の機能を持つライブラリに three.js などがあります。例えば次のようなクラスがあります:

  • Sprite3D … Sprite にあたるクラス
  • Scene3D … Scene にあたるクラス
  • Camera3D … カメラクラス
  • Light3D … ライティングクラス

サブモジュール形式で様々な機能の拡張が提供されていますが、gl.enchant.js を直接使うこともできます。

bone.gl.enchant.js

スキニングアニメーションをするためのクラスを定義したプラグインです。

collada.gl.enchant.js

collada形式のモデルデータを読み込むためのプラグインです。

mmd.gl.enchant.js

日本で開発されたアニメーションツール MMD (Miku Miku Dance) のアニメーションデータ形式 pmd, vmd に対応したプラグインです。

widget.enchant.js

様々なUI部品をを利用できるプラグインです。

tl.enchant.js

tl.enchant.js の機能は、enchant.js にマージされました。以下のようなクラスが含まれます:

  • タイムラインクラス
  • アクションクラス
  • イージングクラス

例えば、主人公キャラクタ (player, Sprite クラスのインスタンス) を30フレームかけて (160, 160) に移動させるには、

player.tl.moveBy(160, 160, 30); // -> 30 frames かけて (160, 160) に移動

また、300フレーム後に「Game Over」のアラートを表示するには、

game.rootScene.tl.delay(30).then(function(){ alert("Game Over"); });

さらに、フレームベースではなく、時間ベースのアニメーション指定もできるようになりました。画面描画が遅延しても、コマを飛ばして移動させることができます。

player.tl.setTimeBased();
player.tl.moveBy(160, 160, 1000); // -> 1000ms かけて (160, 160) に移動

アニメーションエンジンについての解説は、以下のコンテンツを参考にしてください。

This post is also available in: 英語