tmlib.jsを使ってスマホでもBGM、効果音を出す

hiyoco_big
皆さん、ブエノスアイレス(首都)! アンドレです。
非常に今さらですが、今年の年賀コンテンツはプレイしていただけましたでしょうか?
実際のところ、もっとブラッシュアップできれば良かったのですが…まぁその心残りは次に活かすとして、今回は年賀コンテンツで利用させてもらったライブラリをご紹介したいと思います。

ゲームライブラリ tmlib.js

この手のライブラリは、恐らくenchant.jsが最も有名かと思われるのですが、tmlib.jsはそれよりもパフォーマンスが良い!という記事を見つけました。どうせならそっちを使ってみようと思ったことが、使用したきっかけです。では、実際に使ってみて良かった点、悪かった点を挙げてみます。

良かった点

そこまでヘヴィな比較はしていませんが、確かにtmlib.jsのほうが概ね軽快に動作しました。またメソッドも便利なものが多く(しかもメソッドチェーンも使える!)、ネイティヴなJavaScriptをあまり知らなくても書きやすかったです。
中でもとりわけ便利だったのはfromJSON()です。その名の通りJSON形式のデータを渡してやることで、まとめてオブジェクトを追加することができます。
(コード例)

this.fromJSON({
                children: [
                    {
                        name: "TxtGameover",
                        type: "Sprite",
                        init: ["TxtGameover"],
                        x: SCREEN_CENTER_X,
                        y: SCREEN_CENTER_Y - 300,
                    },
                    {
                        name: "ImgCoffin",
                        type: "Sprite",
                        init: ["ImgCoffin"],
                        x: SCREEN_CENTER_X,
                        y: SCREEN_CENTER_Y - 20,
                    },
                    {
                        name: "BtnContinue",
                        type: "Sprite",
                        init: ["BtnContinue"],
                        x: SCREEN_CENTER_X,
                        y: SCREEN_CENTER_Y + 210,
                    },
                    {
                        name: "BtnRestart",
                        type: "Sprite",
                        init: ["BtnRestart"],
                        x: SCREEN_CENTER_X,
                        y: SCREEN_CENTER_Y + 370,
                    },
                ]
            });

nameがオブジェクトにつける名前、typeがオブジェクトタイプ(使用するオブジェクトクラス)、initの文字列はローディング時に読み込ませた画像に指定したキーです。これを使えば、1つ1つオブジェクトを生成してaddChild()するという手間が省けます。

悪かった点

tmlib.jsは作者の方が熱心に機能の追加、改善をしています。それ自体はとても有り難く素晴らしいことなのですが、古いバージョンと新しいバージョンではメソッドが割り当てられているクラスが変わっていたり、メソッドの挙動が変わっていたりします(とはいえ、基本的にはコンソールに警告が出される程度で、問題なく動作しますが)。そして本体が熱心に更新される割には、ドキュメントやチュートリアルの情報は古いままだったりするので、混乱しやすい…。

スマホでも音を出すTips

今回最も苦労したのは、スマホ端末で音を出すことです。というのも、WebAudioの仕様として、ユーザーアクションに基づくイベントからでないと、音を再生させることができません。また、(少なくとも使用したバージョン0.2では)ロード時にリソースを一括で読み込ませる際、mp3フォーマットのファイルを指定すると、WebAudioに対応していない環境ではロード時にエラーを吐いて処理が止まってしまいます(音系のリソース追加にWebAudioクラスを用いているため)。
それに対して施した処置は、

  1. まずtm.display.CanvasApp()で生成したキャンバス要素にtouchstart等ユーザーアクション系のイベントリスナーを追加する
  2. そのイベントでtm.sound.SoundManager.add()でmp3ファイルを追加しつつ、tm.sound.SoundManager.get()で取り出して使いたいところで使えるスコープの変数に格納
  3. 何か1つ(無音でもOK)とりあえず1回再生させておく

すると以後どこでも再生できるようになりました。

まとめ

曲がりなりにも年賀コンテンツが完成したのは、このライブラリがあったおかげです。無料のライブラリや無償のオープンソースプロジェクトに多大な労力を費やしてくださっているエンジニアの方々には本当に頭が下がる思いです。いずれは自分も何らかの形で、そういったものを通じて世の中に貢献できるようになりたいと思います。