Tech

※前半の記事はこちら

前半は、偉大なる先達の五番煎じくらい（しかも劣化版）みたいな記事になってしまって悔しいので、突っ込んで何かしてみよう。

修正方法・対策について

取り急ぎの対策としては、先達の記事やtwitterにある通り、同一色のグラデーションを避ければ、xlink:hrefでグラデの設定を共通化されることがなくなるので、GTSport内でも正しく表示可能なSVGが出来上がる。

たださぁ……なんでそんな訳分からん制約に制作側が引っ張られなきゃいかんの？……そうだ、xlink:hrefを使わない形に書き換えてしまえば良いんじゃね？

ということでSVG修正プログラムを作ってみた。

https://gtswiki.gt-beginners.net/decal/fix-gradation.php

手抜きも手抜き。ベータ版どころかアルファ版くらい。すみません、複雑なデカールの場合、正しく動くかわからんので、上書き保存せずに別名保存してください。変な動きをしたときに動作報告してくれると助かります。

とりあえずやったこと。SVGファイルを開くと「defs」要素があって、ここにグラデーションの設定とかが記載されている。ここでxlink:hrefを使うとグラデーションに反映されなくなる。なので、xlink:href属性が使われている要素をみつけ、hrefで指定されている要素の子要素をコピーしてきてからxlink:href属性を削除してやれば良いはず。

円形グラデーション

xlink:hrefだけだと面白くないなぁということで、円形グラデーションの補正にも挑戦。

色々見てみると、GTSportではgradientTransformが使えない模様。だから楕円形のグラデーションは使えないし、回転も出来ない。真円のグラデーションの場合はgradientTransformを使わずに表現できるために、GTSportでも使用できる。真円のグラデはこんな感じで記述される。

<radialGradient id="radialGradient1499" cx="105.08" cy="126.24" r="55.185" gradientUnits="userSpaceOnUse">

gradientTransformが使われていないことが分かる。

ただ、一度作成した真円のグラデーションの位置を変えただけでも使えなくなる。これはInkscapeの仕様なのかも知れないが、位置を変えると、

<radialGradient id="radialGradient1499" cx="105.08" cy="126.24" r="55.185" gradientTransform="translate(-27.214 -27.97)" gradientUnits="userSpaceOnUse">

みたいな感じで、gradientTransformのtranslateを使って補正しようとするので、GTSportでは使用できなくなってしまう。いやいや、cx/cyの値を補正して欲しいんですが……

ということで、gradientTransform内でtranslateを使っている要素を見つけ、cx/cyへ適用する機能を付けました。

なお、拡大縮小をすると、matrixで調整し出すので修正できなくなります。Inkscape、matrix好きすぎじゃない？

やる気のある方へ

今回はお手軽に構築しましたけど、多分望ましいのは、SVGOMGの1機能としてくっつけてしまうか、InkscapeのExtensionとして実装することが最善なような気がします。自分はExtensionなんて書けんので見送りましたけど、なんでもPythonにも対応しているらしいので、やる気と技術のある方がやってください（乞食）

補足

修正するプログラム作っている途中に気付いたんだけど、GTSportのSVGレンダリングエンジンは、xlink:hrefを処理できないというか、正しくはxlink:hrefがそもそも読めていないっぽい。名前空間違うと読めないのかな？
まぁ細かい話ですけど。

補足2

線形グラデーションにしても円形グラデーションにしても、このプログラムが有効となるケースなんてほとんどない気がします。グラデが真っ黒になった！円形グラデずらしちゃった！みたいなレアケースにぶち当たったときに、ダメ元で使うくらいかなぁ。

愚痴

今回初めてSimpleXML使ったけど、使いにくくない？

正月休みの帰省先で暇にかまけて普段やらんことをやる。ということで、今回のネタはコレ。

GTSportではSVGファイルをデカールとして取り扱える機能があるものの、コイツがなかなかに曲者で、SVG仕様に完全に準拠しているわけではない。公式サイト（オンラインマニュアル）には「SVGのバージョンが1.0、ないしは1.1であること」とあるが、あれは嘘……というか、正しくない。

こんな感じで、特にグラデーション周りで問題が起こることが多く、デカール制作者の頭を悩ます種になっているらしい。何故こんなことが起こるのか不思議で、ちょっと自分でもやってみた。

再現したのがこんな感じのSVG。

なんの変哲も無い、同一のグラデーションのかかった2つの長方形があるだけであるが、これをGTSport側で表示すると……

このように、グラデーションが死んで、真っ黒になる。何故？？？

実は当初、上記のような状況が全く再現せず。頭を悩ませていた。その時のものがこちら。

さっきのと全く変わらない。（よく見るとフィルの設定が先ほどとは違うのだが、これが再現しなかった理由だった）

ただこれをGTSportで表示すると正しく表示される。これの違いは何だろうか？ということで中身を比較してみる。

見づらいが……言葉にすると、問題の無いSVGファイルは、長方形とグラデーションの設定が1対1であるのに対して、問題のある方は2対2対1になっている。

と、ここでお詫びです。この事象を調べていたら、偉大なる先達が既に、しかも詳しく分析・解析されていることが分かりました。

GTSportのユーザーデカール機能でグラデーションが表示されない問題と対処法（追記あり）

なるほど、分かりやすーい！　睨んでいたとおり、「xlink:href」が問題だったんだね！

と、これで終わりだと何なので、後半に続く。正月休み明ける前に何とか公開したい……

先日冨林さんからお勧め頂いた「LITTL3CHAMP SUPER GT 2008 SERIES Round1 SUZUKA GT 150km RACE」の動画を見ました。そのクオリティだとか、参加メンバーとかにもビックリしたんですけど、ちょっとばかし気になったのが、実際の配信映像のようにコースを俯瞰したり、パンしたりする部分だったんですね。

スターティンググリッドはともかく、コースの俯瞰については見たことなかったので、最初別ゲームから引っ張ってきたのかー……と思ったんですが、動画見てる途中で、撮影モードを使ったんだと気付いたので、やってみた……という記事です。すみません、大したことないです。

こんな感じで、撮影モードで移動してきます。ホームストレートから移動してきたんですけど、距離あるとかったるいなと。後になって、リプレイ進めてこの近所まで来てから撮影モードにすれば良かったんだと気付きました。

静止画の場合、画面下部の操作パネルが映らないようにトリミングすればOKですね。 撮影しちゃっても良いでしょうけど。

動画も同じですね。撮影モードで移動している様子をHDMIキャプチャで撮影し、画面下部が見えないようにクロップすればいいわけです。

やってみたけど、品質はご覧の通り。実際の画面だとこんなカクカクしてないんですけどね。HDMIキャプチャの性能が足らないのか、もっとゆっくり撮影して再生速度を落とさなきゃいけないのか……ゆっくり撮影するの難しいわー。まぁ、動画作りたい！って方は色々試してみる必要がありますね。

ギブソンさん（@gibuson_50s）の配信を見ていて感銘を受け、技術的に興味を持ったのでやってみた。なお、配信する気は無い。

【前提】

HDMIキャプチャボード「GV-USB3/HD」は既に持っている（ゲーム画面録画用に購入済）。配信用ソフトには、とりあえず「OBS Studio」（オープンソースなので無償）をチョイス。
その他、画像や動画の作成に「Photoshop CC」や「AviUtl」を使用しているが、作れれば何でも良いので、他のツールでも問題ない。

【トライ①：ゲーム画面を映してみる】

映像キャプチャデバイスを追加。

音が出ない……ということでカスタム音声デバイスの設定を行う。

音も出た。完了。

【トライ②：画像を貼り付ける】

これは簡単。映像が 1920 x 1080 なので、それに合わせて画像を作る。

全画面の画像ではなく、ワンポイントでもこんな感じ。

完了。

【トライ③：クロマキーを使う】

透過画像（トライ④）を使えば済む話なんだけど、クロマキーを使うのも一般的な方法みたいなのでやってみる。クロマキー色が白だと上手くいかないっぽいんで、背景色を緑にした画像を用意する。

画像としてOBSに追加した後、フィルタでクロマキーの設定を追加。

完了。

【トライ④：透過する画像を貼り付ける】

クロマキーは動画を撮影して合成するようなときに使うもので、静止画だったら透過画像を使った方がスマート。ということで透過画像を作る。作るというか、YouTubeのロゴを使う。

ペタッとそのまま貼り付け。

これの良いところは、不透明度も反映できるところ。つまり、半透明に出来る。

完了。

【トライ⑤：動画を貼り付けてみる】

お次は静止画ではなく、動画を貼り付け。適当なリプレイを貼り付け。

【トライ⑥：透過する動画を貼り付けてみる】

トライ④と似てるけど、透過する動画を貼り付ける。これは準備する方が大変だなぁ。動画の制作環境がないので、とりあえず著名ツール「AviUtl」をダウンロードしてきて、適当に作ってみる。

そして貼り付け。

完了。どうでもいいけど、透過出来る動画（アルファチャネルを含んだ動画）が作れることを初めて知ったかも。

【トライ⑦：動的に情報を表示してみる】

トライ②～⑥は、事前に準備された画像なり動画なりを表示する方法だったけど、動的にコロコロ変わる情報を映したい場合はどうすれば良いんだろう？
「OBS Studio」で使用可能なソースを見てたところ、「ウィンドウキャプチャ」があった。ってことは、ウィンドウに動的に情報を描画してやれば色々出来そう。「Visual Studio Community 2017」を使い、ちょっとしたプログラムを作る。具体的には、入力したテキストを別ウィンドウにクロマキー付きで表示する、というもの。

【トライ⑧：クロマキーを使わずに動的に情報を表示してみる】

トライ⑦は結局、クロマキーを使わないと透過処理できないので、綺麗に合成するには色々と手間がかかるし（というか汚い）、半透過みたいなことが出来ない。じゃあどうすりゃ良いかと色々調べてみたけど、「OBS Studio」のプラグインを作るしかないのかなぁ。C/C++も使えないことはないので、また今度やってみよう。

－to be continued－