Posted by & filed under リリースノート.

v0.5.2 は、v0.5 系統最後のリリースです。新しい機能の追加は少なく、プラグインの修正とバグ修正が中心のリリースです。今後の新しい機能追加は、v0.6 系統のバージョンで行われます。

  • features
    • add enchant.ENV.KEY_BIND_TABLE and PREVENT_DEFAULT_KEY_CODES (#74, #88)
  • bugfix
    • Handle mouse event even if touch event is exists (#102)
    • Sprite.opacity in CanvasGroup (#99)
    • Sprite.visible in CanvasGroup (#96)
    • Group.scale in CanvasGroup (#98)
    • drawing in CanvasGroup (#94)
    • and many other bug fixes
  • plugins
    • tl.enchant.js
      • added time based animation
      • added lazy event listener initialization for performance gain
      • added enchant.Easing.SWING
      • bugfix about Timeline#pause, resume (#87)
    • mmd.gl.enchant.js
      • performance improved
    • avatar.enchant.js
      • bugfix about namespace (issue #90)

enchant.js v0.6 徹底解説

現在、enchant.js の開発チームでは、バージョン 0.6 のリリースに向けて努力を続けています。現在すでに v0.6-pre というタグでプレリリースがされており、開発状況は github の develop ブランチ で確認できます。最新のリリースをダウンロードして試してみることもできます。今回はこの記事で、v0.6 について解説しようと思います。

0.5, 0.6 の違いは描画エンジン

ひとことで言えば、「描画エンジンが新しくなり、描画が安定し、ブラウザ依存のバグが減る」ということです。

0.5 では、Entity (Sprite) はひとつひとつの DOM にマップされていました。具体的には、Sprite は全て div タグの形で描画されていました。クリックイベントの取得などは、DOMのイベントリスナに任されていました。このDOMを、css プロパティを書き換えることによって、移動・拡大縮小などを行なっていました。DOM, CSS は高レベルなAPIを持つ描画エンジンで、そのおかげでenchant.js のソースコードはシンプルに抑えられていました。

しかし、ブラウザのバージョンアップを通じてGPUによるサポートなどが入った結果、(特にWebkitにおいて) 描画のバグが生じることが増えてきました。

(バグの例1: Google Chrome で、ゲームを大きく拡大しながら遊ぶと、移動したスプライトの周りに白い矩形の線が描画されるバグ。他にも「スプライトの移動と回転を組み合わせると、回転が画面に反映されない」というバグもあります)

これは描画エンジンのバグで、いくつかのバグでは、ユーザ側で配慮することでこれを回避するようなコードを書くことも可能でしたが、個別の修正を加えていくうちにソースコードが複雑になり、また開発者側も不具合の解消のため enchant.js のバージョンアップを追う必要が出てきます。

enchant.js の開発チームでは、これを機に canvas ベースの描画エンジンに転換することに決めました。

0.6 では、canvas ベースの描画がサポートされます。canvas API を用いた描画では、DOM に比べて低レベルな API を直接扱うことになるため、ブラウザのバージョンアップごとに生じるバグを考慮する必要がなくなります。

「canvas の低レベルAPIをサポートした結果、enchant.js のソースコードが複雑になるのではないか?」という疑問を持たれる方もいるかもしれません。v0.5 と v0.6-pre のソースコードを比べてみましょう。

  • v0.5.2: 3,704 行, 125KB, 47KB (minified)
  • v0.6-pre: 3,361行, 110KB, 40KB (minified)
  • v0.6: ?

DOMの制約の回避のための複雑な処理を省いた結果、同じ機能を持つ v0.5.2 より v0.6-pre の方がソースコードが短くなりました。但し、v0.6 正式リリースでは、DOM互換の機能などが付け加わるため, pre リリースよりもソースコードは長くなる予定です。

既存の API の変更はほとんどありません

v0.5 -> v0.6 のバージョンアップでは、ユーザが扱う API は変わりません。つまり、今までと同じようにプログラムを書くと、今までと同じような動作をします。

但し、いくつかの private だった API は廃止されています。特に影響が大きいのは、DOM オブジェクトそのものを指す Entity._element や、 Entity._id, Entity._class などのAPIです。また、描画順を制御するハックとして使われていた Entity._style[‘z-index’] も使うことができなくなりました。これらは以前からも公式にはサポートされていはいませんでしたが、アクセス可能な状態でしたので、これらの API を使っている場合、バージョンアップするとプログラムが動かなくなる可能性があります。

v0.6では、スプライトを以前のように DOM で描画する機能もありますが、この機能の API はまだ検討中です (気になる方は feature/DOMCompatible のブランチを覗いてみてください)。

他にもし意図しない挙動の違いがあれば、issues で報告をお願いします。

tl.enchant.js がバンドルされます

アニメーションを扱うプラグイン「tl.enchant.js」がバンドルされるようになりました。Timeline, Action, Tween などのクラスが使えます。

Timeline ってどう使うの? って方はこちらのスライドを見てみてください。

サウンド機能について

enchant.js では、モバイル向けのサウンドサポートについて指摘されることが多くあります。

Webブラウザでは依然としてサウンドのサポートは限定的で、不安定になることが多々あります。例えば現在は、iOS においては、 enchant.ENV.ENABLE_SOUND_ON_MOBILE_SAFARI のフラグをオンにした時のみ、サウンドがサポートされます。 これは、iOS Mobile Safari Sound API では、「モバイル帯域上の制約から」という理由で、「ユーザのタッチイベントに紐付いたタイミングでしかサウンドを再生できない」という制限があるからです。

この制限が実際にどういう機構で行われているかは Mobile Safari のバージョンによって異なりますが、原則は、タッチイベントのイベントリスナ、およびそこから同期的に呼び出される関数の中でのみ、音声を再生することができます。このため、iOS でデフォルトの音声再生をオンにすると、「音声が再生されたり再生されなかったりする」という状況が起こります。

今後、enchant.js では Web Audio API をサポートします。iOS 6以降のMobile Safariでは、ロードの時のみタッチイベントに紐付けが必要ですが、それ以降は自由なタイミングで再生できるようです。Web Audio API をサポートしているPCブラウザでも、音を多重再生したときの安定性が向上することが期待されます。但し、Android では Web Audio API はまだサポートされていません。こちらも対応状況を確認し、できるだけ多くのプラットフォームで音が鳴るように努力を続けていきます。

おわりに

enchant.js の開発には、開発者の方々からのアドバイスやフィードバック、協力が必要不可欠です! もしバグや機能の要望があれば、issues やpull requests のページからお気軽にお送りください。

ではでは、今週末も素敵なプログラミングライフをお送りください。Enjoy!

Comments are closed.