« 球の移動 -2- | トップページ | 経路の作図 -1- »

2012年2月26日 (日)

球の移動 -3-

Flash 版 FlatTable はPC用とガラケー用は有りますが、スマートフォンには対応していません。Flash に対応したスマートフォンなら、FlatTable を表示することは出来ますが、ユーザー・インターフェースの関係で、FlatTable を使うのは困難です。それに、Adobe はスマートフォンの Flash は提供しないことになったので、Flash 版でFlatTable をスマートフォンに対応させる意味も無くなりました。それで、 FlatTable を SVG+JavaScript へ移植することは、スマートフォンへの対応が目的の1つとなっています。

FlatTable をPCで使用する場合、マウスポインターを球に乗せてドラッグすることが出来ますが、スマートフォンでは、指でドラッグするため、球が指に隠れて見えないことになります。そこで、SVG+JavaScript 版では、その解決策として、球から離れた所に指を置いて操作できるようにしました。

具体的には次のようになります。

  1. 移動したい球をクリックすると台を覆うように仮想のマウスパッド exPad が現れ、移動モードに入ります。
  2. その exPad の上でマウスボタンを押したままマウスを動かすと、それに同調して球が移動します。
  3. 短クッションの木枠をクリックすると、exPad が消去され移動モードが終了します。

exPad の出現は、次のコードで行います。

exPad = document.createElementNS(svgns, "rect"); ~ 幾つかの属性の設定 flattable.appendChild(exPad);

また、exPad の消去は次のコードで行います。

flattable.removeChild(exPad); exPad = null;

つまり、exPad が必要になったら create し、使い終わったら remove しています。本当は、exPad は FlatTable 起動時に作成して、それを非表示にしておき、必要な時に最前面に表示するようにしたかったのですが、やり方が分からず(出来るのかどうかも分からず)断念しました。因みに、Flash だと簡単に実現できます。

さて、ここまでのコードは、TestTable に有ります。これをクリックすると、試作品 TestTable が別窓で開いて実行可能となります。ただし、SVG に対応したブラウザで JavaScript を有効にしておく必要が有ります。現時点で出来ることは球の移動だけです。コードは、ブラウザのコード表示を利用して見て下さい。このファイルは、適宜、コードの追加・修正を行って行きます。

この TestTable で球を移動するには、上にも書いたように、球をクリックしてから exPad 上でドラッグ動作をするのですが、台の範囲に有る球は exPad の背面に位置するので、それをクリックすることは出来ません。その場合、一旦 exPad を消去(短クッションをクリック)しても良いのですが、その手間を省くために、台の下に半透明のダミーの球を配置しました。このダミー球のクリックでも本来の球をクリックしたのと同じ効果が得られるので、exPad が表示されている時はダミー球をクリックしてください。

ところで、スマートフォンに対応させると言いましたが、実は私はスマートフォンを持っていません。従って、スマートフォンでの操作具合が分かりません。ただ、使用しているPCがタッチパネル装備なので、それをスマートフォン代わりに動作確認しています。

それによると、exPad に指を乗せた時、それを検知するのに1秒程度のタイムラグが有ります。これはPCのタッチパネルがそうなっているだけなのか、それともスマートフォンでもそうなのか、気になっています。スマートフォンで動作確認した方がいれば、情報をお願いします。

以上で球の移動に関しては終了です。次の段階は、球の経路の作図です。

« 球の移動 -2- | トップページ | 経路の作図 -1- »

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

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/54077833

この記事へのトラックバック一覧です: 球の移動 -3-:

« 球の移動 -2- | トップページ | 経路の作図 -1- »