グランツーリスモ7 (GT7) のデカール作成をもっと手軽に！自作ツールGT7_svg_splitterの導入方法

Guliver

前記事では、グランツーリスモ7のデカール作成に立ちはだかる容量問題と、それを解決するための自作ツール「GT7_svg_splitter」について紹介しました。
今回の記事では、このツールを実際に皆さんの環境で動かすための導入方法を詳しく解説します。「コマンド操作は難しそう……」と感じるかもしれませんが、手順通りに進めれば短時間で完了します。ステップ・バイ・ステップで進めていきましょう！

1. 準備するもの

  • PC (Windows / Mac / Linux)

    • 筆者はMac環境で開発しているため、他OSでは細かな挙動が異なる可能性があります。もし不具合があればお気軽にご連絡ください。

  • 変換したいSVGファイル

    • ツールにはサンプルSVGが付属していますので、動作確認にはこちらを利用することもできます。

    • SVGの作成方法は趣旨が異なりますが、いくつか留意する点もあるので、別記事にて解説予定です。

2. 大まかな導入手順

「GT7_svg_splitter」は、プログラミング言語であるPython (パイソン) で動くスクリプトです。導入の流れは大きく以下の3ステップに分かれます。

  1. uv, Node.jsのダウンロード

  2. ツール本体のダウンロード

  3. 必要なライブラリのインストール

なお、本記事ではわかりやすさを重視し、各操作の詳細な意味などについては最低限の説明にとどめたいと思います。気になる方は各自調べてみて下さい。

なお、導入手順は最初の1回のみ行えばOKです。導入後に使用する場合は、ツールの実行まで読み飛ばして下さい。

3.導入手順

実行環境のインストール

まずは、ツールを動かすための「土台」となる2つのソフトをインストールします。

uvのダウンロード

uvは、Pythonのパッケージ管理・プロジェクト管理ツールであり、GT7_svg_splitterでは、Python環境を確実に構築するために利用しています。
ダウンロードは以下の手順にて行います。

Windowsの場合は、スタートメニューからWindows Powershellを起動し、以下のコマンドを入力します。

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

Mac / Linuxの場合は、ターミナルを起動し、以下のコマンドを入力します。

curl -LsSf https://astral.sh/uv/install.sh | sh

Node.jsのダウンロード

Node.jsは、本来ブラウザ上で動くプログラミング言語であるJavaScriptを、パソコン（サーバーやデスクトップ環境）上で動かせるようにするための実行環境です。
今回のツール「GT7_svg_splitter」では、内部でSVGO (SVGを最適化し容量を軽くするライブラリ) を動かすためにNode.jsが必要となります。

公式サイトに移動し、使用しているOSに合ったものを選択してダウンロードします。以下の画像を参考にして下さい。注意点としては、

  • バージョンはLTSと記載されているものを選ぶこと。

  • npmをダウンロードすること。

あたりでしょうか。

選択したら、画面右下の「クリップボードにコピー」を選択し、Powershellまたはターミナルに貼り付けて実行します。これで、Node.jsのダウンロードが行われます。

ツールのダウンロード

ツール本体は、GitHubにて配布しています。以下の手順でダウンロードします。

  1. https://github.com/Guliver-GT7/GT7_svg_splitterにアクセスします。

  2. 画面右上の緑色の「Code」ボタンをクリックし、「Download ZIP」を選択します。

  3. ダウンロードしたZIPファイルを、作業しやすい場所に解凍（展開）します。

必要なライブラリのインストール

ツールを動かすために必要なライブラリをダウンロードします。
以下の操作は、WindowsはPowershell、Mac / Linuxはターミナルで行いますが、コマンドは共通です。

まず以下のコマンドで、カレントディレクトリをツールが入っているフォルダに変えます。

cd (ツールが入っているフォルダのパス)

フォルダパスは、Windowsであればエクスプローラ、MacはFinderのパスバーをターミナルにドラッグ&ドロップすることで、自動で貼り付けることができます。
続いて以下のコマンドを実行し、必要なPythonライブラリをダウンロードします。

uv sync

続いて以下のコマンドで、Node.jsのライブラリをダウンロードします。

npm install

これにて準備は完了です。

4.ツールの実行

2回目以降の実行の際は、Powershell / ターミナルで忘れずにカレントディレクトリをツールがある場所に切り替えておいて下さい。

ツールがある場所に分割したいSVGを移動させたら、以下のコマンドでツールを実行します。

uv run split_svg.py sample.svg

sample.svgのところは、分割したいSVGのファイル名を入力して下さい。うまくいくと、ターミナルに以下のようなメッセージが表示され、分割がスタートします。

Total Elements: 657
✅ decal_001.svg - 13.36 KB (37 elements)
...
Done.

Done.と表示されたら分割完了。ツールがおいてあるフォルダ内にoutputフォルダが作られ、その中に分割後のSVGが格納されています。ファイルには全て「decal_001.svg」から連番で名前がつけられる仕組みとなっています。
これらのデカールは、SVGOMGで行うのと同等の最適化がかけられており、そのままGT7にアップロード可能です。

5.デカールアップローダーでのアップロード

GT7公式サイトからマイページに移動し、デカールアップローダーを通じて先ほど分割したSVGをアップロードします。これで、ゲーム内でデカールが使用できる状態になります。

6.リバリーエディタでの利用

あとはゲーム内で、先ほどアップしたデカールを利用するだけ。ですが、手順にちょっとしたコツがあります。
まず、分割前のデカールを一色で塗りつぶしたガイドデカールを活用して、全体の位置を確定させます。

続いて、ガイドSVGを置いたレイヤーの上で▲ボタンを押し、「レイヤーの複製」を選択、複製されたレイヤーで再度▲ボタンを押し、「デカールの差し替え」を選択して、分割されてできたSVGの1番を選択します。すると・・・

位置が合うように1番のSVGが挿入される

分割されたSVGは、位置情報を保持しています。ですのでこの方法で挿入すると、元の位置を保って設置されるんですね。
この調子で、レイヤーの複製とデカールの差し替えを繰り返し、全てのSVGを配置していきます。

全てのSVGを配置し終わったところ

分割数が多くなるとそれなりに手間ですが、手動でSVGを制作することを考えれば微々たる時間です。最初にガイド用のSVGを入れておくことで、狙った位置にデカールを配置しやすくなりますよ。

終わりに

ツールの導入から活用方法までの解説は以上です。
分割数が多いと配置の手間はかかりますが、今まで諦めていた複雑なデザインがGT7の世界で再現できるはずです。このツールが、皆さんのクリエイティブなデカール制作の一助となれば幸いです！

いいなと思ったら応援しよう！