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

2016年11月

2016年11月26日 (土)

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

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

Pbsoft_alt

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

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

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

まず、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月 »