カテゴリー「ビリヤードの配置図ソフト」の57件の記事

FlatTable 作成記事

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年4月 6日 (土)

FlatTable の縦長表示

FlatTable の作成が終了してから、 MathJax の動作を調べようとしたのですが、難しくて途中放棄の状態が続いています。私には FlatTable で遊んでいるレベルが合っているのでしょう。

ところで FlatTable は横長の表示にしか対応していません。フットスポットの位置を左右変更できるように台を 180°回転させる機能は付いているのですが、縦長に表示できるような 90°の回転機能は有りません。

時には縦長に表示したいという状況も有るかも知れませんが、その場合は、CSS で画像を回転させて対応することになります。右の配置図は、そのようにして表示したものです。球の番号が寝ていますが、それは許して下さい。そもそも、実際の配置では、球は色々な方向を向いている訳ですから。


CSS と HTML は次のようになっています。

- CSS -


.sl_tate {
    position: relative;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
基本的な部分は transform: rotate(90deg) なのですが、この機能はベンダープレフィックスが必要で、 -webkit- などの付いているプロパティがそれに該当します。上記には4通りのベンダープレフィックスが記述されていますが、省略可能なものも有るかも知れません。

- HTML -

<div style="width:300px;height:500px;float:right">
<iframe width="500" height="300" class="sl_tate" style="top:100px;left:-100px" src="配置コード" ></iframe>
</div>
・・・(文章など)
<br style="clear:both" />
"配置コード" には必要な配置コードを入れます。上記配置図例の場合、配置コード は次のようになっています。

http://spacelike.in.coocan.jp/flat/FlatTable_P.svg?
ILC=21P31FCKTKVVHATAtKBUi36AHKhVe36ADLOVV36ABLDUtQ310000kdvAjtud36BKkQvV36AUlOvh36AGlJuw.

2012年12月 1日 (土)

SVG ファイルへのアクセスを受け付けるようになった

ビリヤード配置図ソフト FlatTable は @nifty のレンタル・サーバーに置いているのですが、SVG ファイルを提供するためには .htaccess に MIME タイプを記述しておく必要が有ります。記述内容をインターネットで調べてその通りやったのですが、サーバーが SVG ファイルを処理してくれません。 .htaccess で SVG 関連の箇所は次の1行です。

AddType image/svg+xml .svg
この記述に間違いは有りません。しかし、ブラウザで SVG ファイルにアクセスしようとしても表示しないのです。しかたなく FlatTable の公開は HTML ファイルとして行っていました。

数か月その状態が続いていたのですが、やっと解決することが出来ました。今まで .htaccess の文字のエンコードは UTF-8 にしていたのですが、これだと BOM が悪さをするかも知れないということが某サイトに載っていました。そこでエンコードを EUC に変更したところ、めでたくサーバーが SVG ファイルへのアクセスを受け付けるようになりました。

そこで、早速 FlatTable を書き換えて SVG ファイルに変更しました(サフィックスは .svg )。書き換えた箇所は次の通りです。

変更前(ファイルの先頭箇所)
<!DOCTYPE html>
<html>

<head>
    <lmeta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="ビリヤード, 配置図, pool, billiard, diagram, layout, FlatTable" />
    <title>FlatTable_P</title>
    <link rel="shortcut icon" href="../favicon.ico" />
</head>>

<body style="margin:0">

<svg
変更後(ファイルの先頭箇所)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    ・・・ />

   <title>FlatTable_P</title>
<title>head 領域から svg 領域に移動しています。 SVG ファイルでのアイコンの設定方法が分らない(出来ないのかも?)ので、その部分は削除しています。
変更前(ファイルの末尾)
</svg>

<script>

(function (){                // (1)
    var win = navigator.userAgent.indexOf("MSIE");
    if (0<= win){
        var ft = document.getElementById("flattable");
        ft.setAttribute("height", document.body.clientHeight*3.5);
    }
})();

・・・

</script>
<script src="js/FToperate.js"></script>
<script src="js/FTpeep.js"></script>
<script src="js/FTencode.js"></script>
<script src="js/FTinit.js"></script>
<script src="js/FTanimation.js"></script>

</body>
</html>
変更後(ファイルの末尾)
<script>
<![CDATA[

・・・

]]>
</script>
<script xlink:href="js/FToperate.js" />
<script xlink:href="js/FTpeep.js" />
<script xlink:href="js/FTencode.js" />
<script xlink:href="js/FTinit.js" />
<script xlink:href="js/FTanimation.js" />

</svg>

変更前のコードで (1) の関数はIE対応のためのコードでした。 FlatTable が HTML5(or XHTML) の時IEでは小さく表示されるので、画像を拡大するためにこのコードが必要でした。 SVG になったら、このコードが無くても正常な大きさで表示されるので削除しました。

これで、当初の計画通り、 FlatTable を SVG ファイルとして公開することが出来るようになりました。 FlatTable は、本ブログのサイドバー「Link」の FlatTable からアクセス出来ます。

2012年8月21日 (火)

XHTML ⇒ HTML5

SVG+JS 版 FlatTable は今まで XHTML でしたが、これを HTML5 に変更しました。サフィックスは .html です。主な修正個所は以下の通りです。

変更前
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 

<head>

変更後
<!DOCTYPE html>
<html> 

<head>

ファイルの先頭部分を上記のように変更するだけで良いかと思ったのですが、JavaScript に関する部分も変更する必要が有りました。

変更前
<script>
<![CDATA[
・・・
]]>
</script>
<script xlink:href="js/FToperate.js" />
<script xlink:href="js/FTpeep.js" />
<script xlink:href="js/FTencode.js" />
<script xlink:href="js/FTinit.js" />
<script xlink:href="js/FTanimation.js" />

</svg>
変更後
</svg>

<script>
・・・
</script>
<script src="js/FToperate.js"></script>
<script src="js/FTpeep.js"></script>
<script src="js/FTencode.js"></script>
<script src="js/FTinit.js"></script>
<script src="js/FTanimation.js"></script>
変更前は SVG 領域に JavaScript を記述していたのですが、 HTML5 では SVG 領域の外に記述しなければならないようです。また、 JavaScript ファイルの指定も xlink:href から src に変更する必要が有りました。

変更前のファイルで JavaScript が SVG 領域に有った理由は次の通りです。当初 SVG+JS 版 FlatTable は SVG ファイルとして作る積りでいました。SVG ファイルの場合は JavaScript は SVG 領域に記述することになります。しかし、サーバーの設定がうまく行かず SVG ファイルを扱えなかったため、しかたなく XHTML(or HTML5) で対応することになりました。そして JavaScript の位置は初めのまま残っていたというわけです。

2012年8月 9日 (木)

キャロム用 FlatTable 公開

キャロム用 FlatTable が完成したので公開します。
FlatTable キャロム用( SVG+JavaScript 版)

サンプルを載せます。



画像の [ Anim ][ Sequential ] でアニメーションします。

これで FlatTable の SVG+JavaScript 対応は一応終了です。これ以後は、基本的にバグ修正のみとなります。

さて、次は何をやるか? タブレットでの MathJax の動作に気に入らないところが有るので、その辺を調べてみようかと思っています。かなり難しそうです。

2012年8月 2日 (木)

Stop and Go

先の記事「減速倍率」で、減速倍率が0というのは特別な意味を表すが、それについては後で述べるということになっていました。ここでその説明をします。

その記事にも有るように、減速倍率とはラシャの抵抗による球の減速を部分的に変更する機能です。ラシャの抵抗による減速の既定値を accel, 減速倍率を decel と置くと、経路中で減速倍率の設定された区間の減速量 eAccel

    eAccel = accel * decel
となります。

したがって、減速倍率が0ならば、 eAccel も0となるべきなのですが、それは意味が有りません。そこで FlatTable では、減速倍率0に対して特別な意味を持たせることにしました。その特別な意味とは、「減速倍率が0の時は、その位置で球の運動を一時停止させる」というものです。これによって、下図のようなアニメーションを実行することが可能となります。

1ページ目が、手球のゴーストの1つ(基礎球より少し上にズレた位置に有るゴースト)に減速倍率0を設定したものです。[ Anim ]⇒[ Single ]でアニメーションさせてみて下さい。手球は3番に当たった後、少し戻って停止します。この位置が、減速倍率0を設定したゴーストの位置です。その停止した手球に、バンクで戻って来た3番が当たって、手球は再び動き出します。

減速倍率0を設定していないのが2ページ目(画像左上の▲をクリック)です。これをアニメーションさせると、手球は途中停止せずに最後まで動き続け、バンクから戻って来た3番も手球にキスせずに進路だけ変更して行きます。

この機能のお蔭で、アニメーションの表現力が豊かになりました。因みに、近い内に公開予定のキャロム用 FlatTable では、ボークライン(カードル)をアニメーションさせる時、必須の機能となるでしょう。

2012年7月22日 (日)

アニメーションのスキップと運動パラメータ

FlatTable のアニメーションにスキップと運動パラメータの設定機能を実装しました。スキップとは、複数のページを連続アニメーションする際に、そのページをアニメーションしないように設定する機能です(連続アニメーションはアニメーションしたい最初のページを表示してから [ Anim ][ Sequential ]で実行します)。また、運動パラメータとは

  • ラシャ抵抗
  • 球・球反発係数
  • 球・クッション反発係数
を言い、この値によって球の速度および速度の変化が影響を受けます。

アニメーションのスキップ

下図は3ページから成っていますが、2ページ目はスキップするように設定されていて、アニメーションは1・3ページのみが実行されます。



スキップを設定するには、スキップしたいページを表示してから [ Anim ][ Skip on/off ]をクリックします。スキップの解除も同様に行います。

運動パラメータ

[ Anim ][ Action Param. ]で運動パラメータが表示されます。その表示のパラメータ部分をクリックするとダイアログが表示され、パラメータを変更することが出来ます。

因みに、運動パラメータのデフォルト値は、幾つかの配置をアニメーションさせて自然な動きだと感じるような値を選びました。基本の配置は下図の2つのページに示したような、台の端から端までの移動とバンキングです。その他の配置は忘れました。



--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

2012年7月21日 (土)

減速倍率

FlatTable のアニメーションには、必要な機能のうち実装されていないものが幾つか有ります。その内の1つ「減速倍率」を実装しました。

まず、下図を使って、減速倍率を設定した場合とそうでない場合を比べてみましょう。

1ページ目は減速倍率の指定なしです。[ Anim ][ Single ]でアニメーションさせてみて下さい。手球は、1番に当たるまでは遅くて、当たった後突然速くなっています。また、1番はゆっくりとポケットに向かって進んで行っています。これでは球の動きが不自然です。

では、2ページ目(画像左上の▲をクリック)をアニメーションさせてみて下さい。こちらは、手球が1番に当たる前も、そして手球の当たった1番も自然な速さで走っています。このカラクリが減速倍率です。減速倍率とはラシャによる減速の量を既定値の何倍にするかを指定するものです。

球は運動中、ラシャの抵抗を受けて減速して行き、最終的に停止します。 FlatTable は、次式に基づいて、停止から逆算して球の速度を計算していることは既に説明しました。
\[ v_{0} = \sqrt{v_{c}^{2} + 2\alpha \ell} \tag{1} \] \(v_0\) は減速前の速度、 \(v_c\) は減速後の速度です(停止は \(v_c = 0\))。

1ページ目の球1番は、ラシャの抵抗 \(\alpha\) を受けて(ゆっくり)減速しながらポケットに向かって行き、丁度ポケットに入った所で停止するように初速度が決定されています。そのため、走りが遅いのです。

それに対して2ページ目は、ポケットに入った球に「減速倍率」を設定しているので、速く走ることが出来るのです。減速倍率を球に設定すると、その球と1つ前の球で作られた区間は、ラシャ抵抗による減速が「減速倍率」の分大きくなります。即ち、式(1)で \(\alpha\) が大きくなるので \(v_0\) が大きくなるのです。

減速倍率の設定は次のようにします。まず、減速倍率を設定したい球をクリックします。次に [ Anim ]をクリックしてメニューから [ Decelerate ]を選択するとダイアログボックスが出るので、それに数字を入力します。これで設定完了。正の数字は減速を意味し、負の数字は加速を意味します(普通の加速度とは逆になっているので注意)。なお、0は特別な意味を持ちますが、それについては別の機会に説明します(Stop and Go)。

因みに、負の減速倍率を設定することで、クッションでの捻りによる加速を表現することが出来ます(参照: FlatTable 土曜日の実験室)。また、押し・引きの加速を表現する時も負の減速倍率を利用できます。

--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

2012年7月20日 (金)

アニメーションを管理する4つの変数

FlatTable のアニメーションには、それを管理するために4つの変数が使われています。

  • ballList
  • knotAry[][]
  • runList
  • clusterMem (これは局所変数)
この4つの変数について説明します。

ballList

ballList は次のように、何か処理したい対象を設定する時の基礎として使われます。球の番号に対応した桁のビットが、その球のフラッグになっています。

    var propose = ballList & ~mask;

ballList は次のルーチンで値が設定されます。

// ballList の設定
function makeBallList(){
    ・・・
    ballList = 0;
    for (var i = 0; i < nBall; i++){
        ball = animPage.childNodes[(nBall - 1 - i)*2 + 3];      // (1)
        srcBall = curPage.childNodes[(nBall - 1 - i)*2 + 3];    // (2)
        if (srcBall.fLive){        // (3)
            ball.x = srcBall.x;
            ball.y = srcBall.y;
            ballMove(ball, tableAngle);
            ball.src = srcBall;
            ballList |= (1 << i);
            knotAry[0][i] = srcBall;
            knotAry[1][i] = srcBall;
            ball.setAttribute(display, inline);
        } else {
            ball.src = null;
            ballList &= ~(1 << i);
            ball.setAttribute(display, none);
        }
    }
}
(1),(2)の childNodes[(nBall - 1 - i)*2 + 3]i 番の球を表しています。(3)の fLive は、その球が台上に配置されていることのフラッグです。台上に配置されている場合に ballList に組み込まれます。

knotAry[][]

次に knotAry[][] について説明します。配置図には経路の始点から終点まで全ての節点が表現されています。しかし、経路ごとに見た場合、アニメーションの対象として、それらの節点が同時に複数個使用されることは有りません。例えば次の図において、



1番の球は、今 a から b に向かっているのか、 b から c に向かっているのか・・・ということは一意でなければなりません(複数はダメ)。その対象を保持しているのが knotAry[0][i] です( i は球の番号)。因みに、 knotAry[1][i] は、その次の局面で対象となる球が保持されており、適切なタイミングで

    knotAry[0][i] = knotAry[1][i];
が実行されます。 knotAry[1][i] が決定されるタイミングとアニメーションの局面が変わるタイミングが異なるために、バッファとして knotAry[1][i] が使用されています。アニメーションの局面が変わるとは、例えば1番が a から b に向かっていたのが b から c に向かうようになることを言います。

runList

runList は現在動いている球の配列です。次のようなルーチンで設定されます。

    ball = animPage.childNodes[(nBall - 1 - i)*2 + 3];
    target = knotAry[0][i];
    if (nextBall = target.next){
        ・・・・
        runList.push(ball);
    }
ここに target は配置図に載っている球で、 ball はアニメーション用ページにおいて target = knotAry[0][i] に相当するものです。runList に入っている球は、停止したら runList から除外されます。

clusterMem

下図のようなコンビショットをアニメーションする時に必要になるのが clusterMem です。先の3つの変数は大域変数ですが、この clusterMem は局所変数です。この変数は clusterCheck() で作成され、塊りを構成している球のリストをビットのオン・オフで保持しています。ビットの桁が球の番号に対応します。下図の場合、手球が1番に当たった後で動き始める球は、 clusterMem を構成している1番・2番の2個となっています。



--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

より以前の記事一覧