Skip to content

enchant.js v0.6.0 リリース! アップデートの内容紹介

こんにちは! enchant.js 開発チームのリョーヘイです。

「もうすぐリリースしますよ!」と各所で宣伝していた v0.6.0 ですが、先週末正式にリリースされました! github からダウンロード できます。

今回のアップデートの概要を紹介しましょう。

Canvas based

v0.5 までは、ひとつひとつのスプライトは div 要素として描画されていましたが、v0.5.2 で CanvasGroup クラスを用いた Canvas ベースの描画がサポートされ、v0.6 からは Canvas ベースの描画が標準になりました。但し、今までどおり DOM を用いた描画が必要な要素は DOM を用いて描画できます (CanvasGroup クラスは廃止されました)。

具体的には CanvasLayer, DOMLayer という2つの描画方法をサポートするクラスが追加され、Sceneは複数の Layer を持つようになりました。Scene に addChild で描画ツリーに追加された Entity は、各Layer (_element プロパティにDOMを持っていれば DOMLayer、そうでなければ CanvasLayer) に振り分けられ、それぞれの Layer によって描画されることになります。

デフォルトでは、同じシーンの中では Canvas で描画されるオブジェクトの上に DOM で描画されるオブジェクトが表示されます。

今までのAPIは変わりません。この変更を意識せず、今までどおり Entity, Sprite, Scene を使うことができます。 但し、Sprite のプライベートだったプロパティ ._element, ._style が廃止されていますので、これを使っていたコードは動かなくなる可能性がありますのでご注意ください。DOM を表示したければ、._element プロパティにDOMを持つクラスを作るだけで DOM を表示できます。

特に、「PCブラウザで」「たくさんのスプライトを動かす」ゲームの描画が改善しています。1,200程度の Sprite を回転+移動させたベンチマークでは、Google Chrome にて 8-9 fps (v0.5.2) → 20-28 fps (v0.6.0) という結果が出ています。

ピクセル単位の描画に切り替わったことで、実際の画面解像度と、設定解像度が異なる場合の挙動が変わっています。アップデートされる際には、実際のゲームを確認してみてください。

(注意) 11/26 現在、Android 4.1 の標準ブラウザにおけるCanvas描画のバグにより、「特定の条件下で動作が重くなる」「テキストの書き換えができない」などの不具合が報告されています。Android 4.1 以降をサポートするアプリケーションには、v0.5.2 以前のバージョンを使ってください。

WebAudioAPI

Sound クラスが、WebAudioAPIによる再生をサポートしました。これにより、利用できる環境では WebAudioAPI を自動で利用します。enchant.ENV.USE_WEBAUDIO フラグで利用の可否を設定できます。

WebAudioAPI は PC向けのWebkitブラウザや、iOS6以降のブラウザで実装されています。iOSでは、Audio 要素のような制限が緩和されており、「初回のタッチイベント以降はいつでも自由に」音声を慣らすことができます。

Object Collection

オブジェクトコレクションが実装されました。これは、あるクラスのインスタンスに、まとめてある処理を実行できる機能です。

たとえば、画面上に表示されているすべてのキャラ (ex. Charaクラス) を消す時には、今まではこのような処理が必要でした。


// 事前にキャラクタの配列を用意しておいて…
var characters = [];
characters.push(chara1);
characters.push(chara2);
characters.push(chara3);

// すべてを消去する
for(var i = 0; i < 3; i++){
    game.rootScene.removeChild(characters[i]);
}

v0.6 からは、クラス自身が collection というプロパティを持っていて、いずれかのシーンに追加されているインスタンスの集合を配列として取得することができます。


Chara.colleciton.forEach(function(chara){
    game.rootScene.removeChild(chara);
});

また、今後いくつかのインスタンスメソッドをコレクションに対する操作としてクラスメソッドとしても実装する予定です。 v0.6 では既に「intersect (矩形当たり判定)」がサポートされています。

例えばシューティングゲームについて、自機 (player インスタンス) と、全ての敵の弾 (EnemyShot クラスのコレクション) の当たり判定を取りたい時は、以下のように書けます。


var shots = player.instersect(EnemyShot);
// -> 交差しているすべての EnemyShot のインスタンスが配列として返される
// [enemyshot, enemyshot, ..]

shots.forEach(function(shot){
    // 自機に当たった弾について適用する処理
})

if (shots.length > 0) {
    // 自機に弾が1つでも当たっていれば適用する処理
}

たとえば、自分の弾 (Shot クラスのコレクション) と 敵 (Enemy クラスのコレクション) の当たり判定を取りたい時は、以下のように書けます。


var pairs = Enemy.intersect(Shot);
// -> 交差しているすべての Shot, Enemy のインスタンスの組が2次元配列として返される
// [[enemy, shot], [enemy, shot], ..]

今のところ、colleciton は単なる配列ですが、例えば jQuery クラスや、ruby の Enumerable クラスのようなインターフェイスを導入することを検討しています。

Game -> Core (renamed)

widget.enchant.js などの登場で、enchant.js を使ってゲームではないアプリケーションを開発することができるようになりました。v0.6 からは、Game クラスは Core クラスと改称されました。Game クラスは、単に Core クラスの別名になります。


// dev/src/Core.js
enchant.Core = enchant.Class.create( ... );

// dev/src/Game.js
enchant.Game = enchant.Core;

今までどおり Game クラスは使えますが、互換性の面から推奨しません。Game クラスを継承しているプラグインも正しく動きますが、今後 Game クラスを継承するようなプラグインをアップデート / 作成する場合は、Core クラスを継承するように変更することをおすすめします。

Animation Engine (previously called as 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(300).then(function(){
    alert("Game Over");
});

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


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

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

util.enchant.js -> ui.enchant.js

試験的に公開されいた util.enchant.js は ui.enchant.js にマージされました。今後、ui.enchant.js のリファクタリングを予定しており、APIに細かい変更が入る可能性があります。

英語ドキュメントの改善, ドイツ語版コメントの追加

ドイツから来たインターンケビンの活躍により、英語版コメント, APIドキュメントの翻訳が大幅に改善され、さらにドイツ語版コメントも追加されました。

ドキュメントのリポジトリからの削除

github のリポジトリで jsdoc を管理するとドキュメントのコンフリクトが多く発生してしまうため、リポジトリから削除しました。今までどおり、以下の場所からアクセスできるほか、gh-pages ブランチからダウンロードすることもできます。

以上です。enchant.js の歴史の中では、v0.5 -> v0.6 のアップデートはリリース以来最も大きな変更です。もしバグなどを見つけた場合は、今まで通り issuespull request への投稿をよろしくお願いいたします。

Enjoy!

文責・sidestepism

このエントリーをはてなブックマークに追加
はてなブックマーク - enchant.js v0.6.0 リリース! アップデートの内容紹介
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.jsが進化!新機能でプチ・ネットゲームを作っちゃおう!
  2. デバッグ機能が強化された enchant.js v0.4.3 リリース!
  3. enchant.js v0.5.2 リリース! & v0.6 の開発者による徹底解説
  4. 「enchant.js怒濤の100Tips」と「enchant.js使い方辞典」が公開! これは必見だ
  5. socket.enchant.jsに重大なバグ発見!と、もっとわかりやすいサンプル

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*