« 2016年10月 | トップページ | 2016年12月 »

2016年11月

2016年11月26日 (土)

インターネットで見つけたプレイ図ソフト

アメリカンフットボールのプレイ図(プレイブック)ソフトを検索してみたところ、図のようなソフトを見つけました。アドレスは
http://footballtactics.net/playbook.html
です。

Pbsoft_alt

私のようなデザインのセンスの無い者の作った LongDriver よりも綺麗な絵になっています。

このソフトを扱っているメインページは
http://footballtactics.net/
で、サッカー用ソフトは完成しているようですが、アメリカンフットボール用は途中で止まっているのか、完成には至っていないようです。このサイトに掲載されている 「documentation」 はサッカー用なので注意が必要です。

さて、 LongDriver を、この footballtactics と比較すると次のような違いが有りました。 LongDriver とは次のようなソフトです。

当ブログのプレイブックソフト LongDriver の公開を参照してください。

まず、footballtactics はデータや画像をローカルファイルに保存できるのに対して LongDriver は出来ません。方法が分からないので、画像の取得は PrtScr キーを使うという姑息な手段を使っています。

次に、 footballtactics はフィールドの向きを変えられるのに、 LongDriver は出来ません。当初、 LongDriver も変えられるようにする積りでいたのですが、気が向いたらやるということにして、未だ実装していません。

3つ目は、 footballtactics はプレイルートに曲線が使えるのに対して、 LongDriver は出来ません。これも当初は予定していたのですが LongDriver では未実装です。モチベーションが上がったら実装するかも知れません(追記2:モチベーションが上がったので曲線も表示できるようにしました)。

4つ目の違いは初期状態に関してです。 footballtactics の初期状態は選手が居ませんが、 LongDriver はデフォルトで基本的な(と思われる)フォーメーションに配置されます。それは、ゼロの状態から22人を配置するのは骨が折れるので、前もって配置しておいた方が良いだろうと考えたからです。

5つ目は、 footballtactics は単一のプレイ図しか扱えないのに対して、 LongDriver は複数のプレイ図を扱えます。これはビリヤードの配置図ソフト FlatTable からの流れとして当然の仕様です。因みに、複数のプレイ図を扱えることが LongDriver という名前の由来です。

6つ目の違いはデータの共有方法についてです。 footballtactics ではこのサイトがサーバーとなってデータを保管し、それをダウンロードすることでデータの共有を行っています。この方法だと、ブログではただの画像を表示するに止まるため、ブログのみで footballtactics のデータを再利用(共有)することは出来ません。そのため footballtactics ではサーバーを使ってデータ共有をサポートしているのだと思われます。それに対して LongDriver では、ブログに貼り付けたデータを利用できるようになっています。

そして最後に footballtactics は Flash で出来ているのに対して LongDriver は SVG+JavaScript で出来ている点が違います。 Flash はいつまで大丈夫なのでしょうか?

追記1:
6番目の項目のデータの共有は footballtactics のサッカー版では可能ですが、アメリカンフットボール版は未実装ではないかと思われます。

2016年11月21日 (月)

SVG の変換行列(CTM)

LongDriver の動作確認をしていて、選手マークをドラッグする時、マークの移動量とマウスの移動量が異なることに気付きました。試しに下に表示している LongDriver でマークをドラッグして下さい。マウスに比べてマークの移動量の小さいことが分かります。

LongDriver では、マークの移動量 deltX, deltY は、次の式で決定しています。


    deltX = (evt.clientX - pad.prevX);	// 右辺はマウスの移動量
    deltY = (evt.clientY - pad.prevY);
    ・・・
    var x = Number(target.getAttribute("x")) + deltX;
    var y = Number(target.getAttribute("y")) + deltY;
    target.setAttribute("x", x);	// target は選手マークを指す
    target.setAttribute("y", y);

このように、マウスの移動量をそのままマークの移動量としているのに、何故両者は一致しないのでしょうか?この原因は LongDriver が縮小表示され、その座標系とブラウザの座標系のスケールが異なることにあります。マウスの位置を表す evt.clientX や、それから得られる deltX 等はブラウザの座標系での値です。しかし target.setAttribute("x", x) を実行する時は LongDriver の座標系に基づいた点が選ばれるのです。そして LongDriver の座標系は縮小されているためマウスの移動量とマークの移動量が異なるのです。

SVG では、表示の大きさが変更された場合、その情報が変換行列 CTM に保存されます。 CTM は3×3行列で、新・旧座標を次の関係で繋ぎます。 \[ \begin{pmatrix} x_{prev} \\ y_{prev} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{curr} \\ y_{curr} \\ 1 \end{pmatrix} \]

この式で左辺は旧座標系での値、右辺が新座標系での値だということに気を付けて下さい。今の場合、旧座標系とは LongDriver の初期座標系(すなわち、縮小前の座標系)のことです。この初期座標系はブラウザの座標系に一致しています。画面に表示されるのは初期座標系に換算されたものです。

上に表示している LongDriver を例に取ると CTM は \[ \rm{CTM} = \begin{pmatrix} 0.602 & 0 & 0 \\ 0 & 0.602 & 7.229 \\ 0 & 0 & 1 \end{pmatrix} \] になっています。ここで、マウスの移動量を新座標系の LongDriver に代入すると約 0.602 倍され初期座標系での移動量に換算して表示されます。逆の言い方をすると、マウスとマークの移動を一致させるには、マウスの移動量を 0.602 で割った値を選手マークの移動量とすると良いことになります。

さて、ここからは余談ですが、 CTM の成分の名前が \[ \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \] の並びになっているのは、なんとも気持ち悪いものです。何故、 \[ \begin{pmatrix} a & b & c \\ d & e & f \\ 0 & 0 & 1 \end{pmatrix} \] にしなかったのでしょうかね。

2016年11月 5日 (土)

選手のマークの番号を変更可能にした

LongDriver は一段落させた積りだったのですが、気になることが出て来て、それを改良しました。プレイ図を使っているブログを検索して見て回っていたら、実際のプレイを図示したものが有り、それには実際の選手の番号が記入されていました。LongDriver は、選手のマークの番号は固定されているので、そのような時に違和感が生じます。そこで、選手のマークの番号を変更できるようにしました。

番号の変更は次のようにやります。まず、変更したい選手を選択してからメニューの EachRenumber をクリックするとメッセージボックスが出ます。そこで、そのメッセージボックスに2ケタもしくは1ケタの文字列を入力します。すると、選択した選手のマークに付いている番号が新しいものに変わります。数字に限らずアルファベットも可能です。ちなみに、漢字を入力した場合の動作は保証しません。

サンプルを示します。今までの記事に載せたサンプルと番号が違うのが分かります。

2016年11月 4日 (金)

LongDriver のプレイブックコード

LongDriver のメニューボタン [Total][Gen. Full Code] をクリックするとプレイブック全体のコードが生成されるわけですが、そのプレイブックコードについて説明します。

アメリカンフットボールのプレイ図を表示する目的で LongDriver にアクセスする場合、表示したいプレイブックのコードを URL のクエリとして付加してアクセスます。上記手順で生成されるコードはクエリ部分を含む URL 全体です。なお、ここではクエリ部分に相当するものをプレイブックコードと呼ぶことにします。

プレイブックコードは次のような構成になっています。

プレイブックコード:
PB={12xxxx}{1プレイのコード.}・・・{1プレイのコード.}
1プレイのコード:
{21}{各選手のルート}・・・{各選手のルート}
各選手のルート:
y{座標}・・・{座標}
座標:
{36}{xxxx}

  • {12xxxx} は初期表示におけるフィールドのオフセットで、これが無い場合、初期表示はセンタースポットが画像の中心になります。 xxxx はオフセット値です。オフセット値は下に示している座標値と同じ仕様です。
  • 1プレイのコードの直後には「.」を付けます。
  • {21} は初期表示のプレイ図です。プレイブックが複数のプレイ図から成っている場合に、{21} の付いているプレイコードに対応するプレイ図が最初に表示されます。
  • y は選手とボールを表します。オフェンスは M~W、 ディフェンスは m~w です。ボールは X です。
  • 座標値は x-座標、y-座標とも2ケタのアルファベットで表され、x-座標、y-座標の順で並びます。例外的に 0 に対応する座標は 00 で表されます。
  • 矢印を表示する場合 {36} が座標値の前に付きます。

2016年11月 3日 (木)

プレイブックソフト LongDriver の公開

LongDriver の操作説明書を作成しました。メニューボタン [Total][Help] をクリックすると操作説明のページが別タブで開きます。

これで LongDriver の作成は一区切り付けたいと思います。当初に予定していた機能として、フィールドの上下の入れ替えやフィールドの拡大・縮小が有りますが、それらは気が向いたら追々やって行くということにします。

LongDriver は次の URL で公開しています。
http://spacelike.in.coocan.jp/football/LongDriver.svg

この LongDriver で作成したプレイブックを利用するには Alt+PrtScr でウィンドウを画像としてクリップボードにコピーして、それを使うか、あるいは LongDriver で生成した URL 付きのプレイブックコードを次のようにすると良いでしょう。(エンコード・デコードルーチンの実装(2) 参照)


<iframe src="プレイブックコード " width=" " height="高さ "></iframe>

ここに、高さ はブログ上の表示したい幅と高さです。

« 2016年10月 | トップページ | 2016年12月 »