これなに?というと、
選手とボールを配置し、動かすことができ、最終的にアニメーションgifを作成するツールです
例えばこんな感じに
見た目がしょぼいのはご容赦を pic.twitter.com/ICGlsayn95
— とかいなフットボール@Jリーグネタ用アカ (@tokainakurasi) July 4, 2020
選手やボールを配置し、ゴールシーンのアニメーションGIFを作成するツール「TTG(Trail To Goal)」を公開しました。
ここでは基本的な使い方を説明します。
ツール「TTG」はこちら
「TTG」とは?
- サッカー用のツールです。
- 選手やボールを配置し、アニメーションしたり、それをアニメーションGIFファイルとしてダウンロードしたりできます。
- ゴールシーンのアニメーション作成や、フォーメーションおよび選手の動きの確認などに使ってください。
- パソコンのWebブラウザから使用できます。JavaScriptを有効にするだけで使用できます。ソフトのインストール不要です。
- スマホやタブレットでも使用できます(ただし操作や画面表示がパソコンより不便かもしれません)。
使い方は?
- 選手はドラッグで移動でき、ボールはクリックで設定できます。
- 選手やボールの配置は2か所まで保存できます。
- タイトル、チーム名、選手名、背番号、色は自由に設定できます。
- 途中で選手やボールの配置を変更可能です。
- 「PosReset」ボタンで選手やボールを配置のみリセットできます。同じチームや選手で新しいアニメーションGIFを作成したい場合に使用してください。
- 「AllReset」で全情報をリセットできます。一から作成したい場合に使用してください。
広告
チーム名や選手名を手入力するのがめんどくさい!(PC中級者向け)
- 以下のルールでCSVファイルを作成し、「ファイルを選択」ボタンをクリックしてCSVファイルを指定すると、一括入力可能です。
川崎フロンターレ,
1,チョン ソンリョン,
4,ジェジエウ,
5,谷口 彰悟,
7,車屋 紳太郎,
13,山根 視来,
6,守田 英正,
8,脇坂 泰斗,
22,下田 北斗,
9,レアンドロ ダミアン,
16,長谷川 竜也,
41,家長 昭博,
24,安藤 駿介,
2,登里 享平,
10,大島 僚太,
19,齋藤 学,
25,田中 碧,
20,宮代 大聖,
30,旗手 怜央,
柏レイソル,
17,キム スンギュ,
2,鎌田 次郎,
4,古賀 太陽,
13,北爪 健吾,
15,染谷 悠太,
8,ヒシャルジソン,
18,瀬川 祐輔,
28,戸嶋 祥郎,
10,江坂 任,
14,オルンガ,
39,神谷 優太,
23,中村 航輔,
3,高橋 祐治,
20,三丸 拡,
7,大谷 秀和,
22,マテウス サヴィオ,
19,呉屋 大翔,
33,仲間 隼斗,
ここにサンプルCSVファイルを置きましたので、流用して使ってください。
注意事項
- 上記のようにブラウザの画面を狭くしてピッチ全体が表示されない状態で「Play」ボタンをクリックしないでください。アニメーションGIFの画像が乱れたり、作成に失敗することがあります。
- 作成した情報は、実行した端末のみでしか使用できません。
- ツイッターボタンはあくまでツイッターアプリを呼び出すだけです。ツイッターに自動挿入しているURLをクリックしても、作成した情報は他の人には見えません。情報を共有するにはアニメーションGIFを添付してツイートしてください。
- 動作がおかしくなった場合は、ブラウザの画面をリロードしてください(現在の情報は全てリセットされますので、Saveしてから実行してください)。
- 初めてJavaScriptを使い、初めてツールを公開しましたので、色々と温かい目で見てもらえれば幸いです。。
- 予告なしに機能追加やバグ修正をすることがあります。ご了承ください。修正後、「@tokainafb」で告知します。
- バグが見つかった場合は、@tokainafb、またはお問い合わせからお知らせください。ただしすぐには対応できない場合がありますのでご了承ください。
ツール作成について(開発者向け)
以下にまとめました。
[サッカーツール][開発者向け]初心者がJavaScriptでアニメーションGif作成ツールをこのように作成してみた
広告
( ・∀・)つ最後にブログ村とSNSのボタンをクリックしていただけると、ちゃさん感激!


にほんブログ村 にほんブログ村