« 2013年5月 | トップページ | 2014年6月 »

2014年4月

2014年4月20日 (日)

FlatTable のアニメーションに球の音を追加

FlatTabe のアニメーションには球を撞いた時や球同士が当たった時に音を出す機能が有りませんでしたが、今回、それが出来るようになりました。

音を出す方法を調べたところ、audio タグを使えば良いらしいと分かったのですが、それを FlatTable で使おうとしても上手く行きませんでした。audio タグについての解説は、どれも html ファイルを前提としており、SVG ファイルである FlatTable では audio タグを正しく認識してくれません。エラー画面には


    Uncaught TypeError: undefined is not a function 
が表示さていました。

ブラウザで音を出す方法を更に調べて行くと、Web Audio API が有ることが分かりました。これは JavaScript で使える API なので FlatTable でも使えるのではないかと期待しました。さっそく、解説に載っているサンプルプログラムを参考に簡単なコードを書いてローカルに置き、動作確認を試みました。しかし、コード中で使っている XMLHttpRequest がローカルの音源ファイルをロード出来ません(ブラウザは Chrome)。エラーメッセージとして


    Cross origin requests are only supported for HTTP.
が表示されていました。これは、ブラウザがセキュリティを考慮して、ローカルへのアクセスを制限しているのが原因です。試験用のファイルをサーバにアップロードして動作確認することは可能ですが、気が進みません。 FlatTable はローカルでも使えるものにしておきたいのです。

ほとんど諦めた気持ちになりながらも audio タグに名前空間を指定すればどうだろうかと考えて、その方法を調べることにしました。そして、やっと


    <audio xmlns="http://www.w3.org/1999/xhtml" id="id " preload="auto">
        <source src="音源ファイル " type="MIMEタイプ " />
    </audio>
に辿り着くことが出来ました。因みに、今回使用した音源ファイルの MIME タイプは audio/mp3 です。上記コードを FlatTable の SVG ファイルに挿入、そして、アニメーションを担当する JavaScript ファイルに

function soundShot(){
    document.getElementById("id ").play();
}
・・・
// 音の必要な箇所で soundShot() を実行
を挿入することで、音が出るようになりました。ただし、用意出来ている音源が MP3 だけ(追記2)なので、ブラウザによっては音が出ないかも知れません。なお、球を撞く強さや、球同士の当たる強さに応じて、音の大きさを変えるべきですが、現時点では、どれも同じ大きさです。いずれ修正したいと思っています(追記1)

追記1:修正しました。
追記2:Ogg を追加しました。

今回、使用した音源は効果音ラボさんで公開しているものを使わせてもらいました。

サンプルを載せておきます。画像の左上のボタン [ Anim ][ sequential ] でアニメーションが始まります。

2014年4月 6日 (日)

FlatTableの部分的表示

FlatTable を表示する際、配置コードの後ろに


#svgView(viewBox(x1 y1 x2 y2 ))
を付けると FlatTable の一部分だけを表示することが出来ます。上記において座標 (x1 y1 x2 y2 )FlatTable の表示領域を表します。以下に部分的表示の例を示します。ここに width, heightiframe の大きさです。

<iframe src="http://spacelike.in.coocan.jp/flat//FlatTable_C.svg?
  ILC=21PDBtSFSsfEMuGEDuP32EYsEDIsz32GXroFPraJvsqHauPGEtaQFIuPAveWJvrtjvmOJvgtRFItODIsl.#svgView(viewBox(0 0 400 260))" 
  width="500" height="300">
</iframe>


この画像は FlatTable なので FlatTable の操作が可能です。例えば、[ Anim ][ Single ] とクリックすればアニメーションを実行することが出来ます。

この SVG の部分的表示の方法は「ゲームミュージックと生存確認をかねた画期的な」さんの記事 svgビュー指定って知ってますか? が参考になりました。

« 2013年5月 | トップページ | 2014年6月 »