GT7、デカールの作り方(5)～容量を削減する～

　ここまでの4回の話で必要最低限のInkscapeの使用法はなんとか説明できたつもりです。そうすると次に待っている壁が、完成したデカールの容量です。簡単なロゴなら画像を拾う→トレース→色付け、で1分もかからず終わりますし、ウォンさんぐらいのキャラクターなら根気さえあれば容量の苦労はありません。
　が、細かい内容のロゴや複雑なキャラクターともなると、最初は全然サイズが規定に収まらなくなってきます。潔く分割してしまうという方法もあるのですが、可能な限り容量を削減し1枚に抑えたいもの。というわけで、私なりに容量を削る方法をいくつかご紹介します。

　例題として、TOTAL SEAL PISTON RINGSというアメリカの企業のロゴを持ってきました。これ、私が最初の頃に作成しようとしたら、容量が足りなくて完全再現できなかったものです。後から少し技量が向上したので再製作したもののまだいくらか雑で、これを書くにあたって試しにもう一回作ってみたら簡単になっていました。いやあ、地味に進歩してますw

　容量の削減というのは、ひとえにノード数の削減です。できるだけ少ないノードだけで表現すればその分軽くなります。が、減らしすぎると当然画像は粗くなる方向へ進みます。必要な部分を残しつつ、いらないところを手早く削減する手立てを見つければ作成が早くなります。

・自動で簡略化する

　Inkscapeには標準で簡略化コマンドがあり、これを選択すると自動でノードをごっそり削ってくれます。パス＞簡略化と選択すると、勝手にノードを削除して、できるだけ元の形状を維持するよう努力しつつノード数を減らしてくれます。Ctrl+L のショートカットで操作できるので、覚えておくと便利です。たとえば、PISTON RINGS の部分で使ってみます。

　ノードの数が一気に6割も削減されました。試しにこれ単体で保存すると、最適化保存時で2.9KBほど、SVGOMGを通した後も1.5KBほど削減され、割合で言えばいずれも5割ほど容量が削減されています。繰り返しやるとさらに削減されていきます。こうかはばつぐんだ。(ただし限度を超えると逆に増えることもある)ただ、ご覧の通り文字がぐにゃぐにゃですね。ですから、このロゴを大きく使うとなるとちょっと完成度が、、、となります。

　一方で、今回の場合、大きなロゴの中でこの文字群が占める割合はそこまで多くありません。車両にそれほど大きく貼らないロゴの中でもそれほど大きくない文字が、さらにレースともなると解像度が下がります。では、今はこんなに大きく表示していますが、遠くから見たらどうでしょう。

※ランドルト環ではありません

　どうでしょう、そこまでぐにゃぐにゃは気にならないのではないでしょうか？作っている時やゲームにアップロードした時には大きい状態で見えるので気になるし格好悪い気がしますが、実用レベルではそこまで気にしなくて良い場合も多々あります。シェアするとなると、ついつい気になって世に出すのが恥ずかしい気がしてしまうかもしれませんが、そこまでこだわらなくても良いんだ、ということは覚えておくとかなり気楽になります。

　なお、簡略化の詳しい仕組みはズブの素人には分かりませんが、対象となるノード数が多いほどザックリと削減されます。例えば、同じ文字に対して簡略化を実行したとしても、オブジェクトを1文字P,I,S・・・と実行しても、各文字からは1ノードとか僅かずつしか削減されません。でもまとめてやるとこの簡略化っぷりです。たとえば5文字ぐらいでまとめて簡略化すると、潰れ過ぎず、残しすぎず簡略化できることもあります。

　まとまっているオブジェクトはまとまった単位でしか簡略化は使えませんが、バラバラになっているオブジェクトは複数選択することで任意のオブジェクト数で自動簡略化を実行できます。ですから、自動簡略化を使ってノード削減を行う方針なら、オブジェクトを結合する作業は最後の最後に残しておいた方が二度手間にならずに済みます。

・ガタガタを直す

　トレースした際に元の素材との兼ね合いで、よく見たら線がガタガタで異様に大量のノードが生成されていることがあります。これはガッツリ削るチャンスです、というか削らないと無理です。たとえばこの『O』の部分、一件普通に見えますが、一部ガタガタとしている箇所があり、ノードツールを選択して詳細を見てみると、大量のノードが作られています。

該当部分だけコピーして右に取り出しました

　見た目にもきれいではない上に容量を食って何も良いことが無いので削減します。これは左右対称の形状なので、極端な話曲線部分は2～3箇所のノードさえあればじゅうぶん綺麗な形になります。そこで、まずCtrl+L を押して自動簡略化を使用したり、範囲指定で大量のノードを一度に選択して削除します。ノードの削除はノードを選択した後にdelete、backspaseのどちらのキーでも可能です。

一度に15ノードを選択、一気に消えると気持ち良い
(ただしあまりに多いとPCの性能によってはハングします)

　ノードが消えるとハンドルが再設定されて曲線の曲率が大なり小なり変わってしまいます。変わったぶんは自力でハンドルを動かして理想の形状に近づけましょう。特に曲線の頂点のノードを消すと半径が大きく変わりやすいですし、Sのように途中で方向の変わる曲線だと大暴れしやすかったりします。慣れないうちは自動簡略化を活用するのが良いでしょう。

・シャープノードを活用する

　曲線の場合なかなかハンドルの設定が難しいですが、直線はただのまっすぐなのでその必要はありません。アルファベット、漢字、カタカナでは、一部、または全部が直線で構成されていることがあります。ここは地味ですがコツコツと容量を削るチャンスです。例えば『T』。この書体では直線のみで構成されています。直線なので角にだけノードがあればじゅうぶんですが、最初はトレースの結果中間点にもノードが生成されています。これはどう考えても不要です。

8つの角にノードがあれば良い

　というわけで、とりあえず中間点にあるノードを全部削除します。なお、このTには一か所だけなぜか印の小さいノードがあるんですが、これはノードが2つ重なっています。調べても今一つこの意味が分からなかったのですが、小さくなっているものを見つけたら『1回消すと1つになり、2回消さないと完全に消えない』と思っておくと良いです。今回は消しちゃいけない位置なので1回だけ消します。

　全部消しました。これでTを構成する各頂点にだけノードがあります。重複ノードを含めて不要なものを9個消したことになり、残りは8個なので半減しました。で、さらにここからもう一押しします。今のノードはハンドルが出ていて曲線を自由に描ける『スムーズノード』です。しかし、今は直線しかいらないのですから、『シャープノード』で事足ります。というわけで、全てシャープに置き換えます。

　画面上部のメニューの中に『選択ノードの種類をシャープに』というのがあるので、全てのノードを選択してここをクリックします。これで、直線しか描けないシャープノードになりました。もしハンドルが横にズレていてTが折れ曲がっていたとしても、押した瞬間真っすぐになります。

　全てシャープノードになりました。このTで実験したところ、手を加える前と、削除してシャープノードに変更した後ではサイズに25～30%ほどの差が出ました。1つ1つの文字で得られるのは数百バイト程度ですが、数文字で1KBです。お手軽で手早くできます。

　このデカールの下の方の小さい文字・Total Seal,inc あたりになると、小さいせいでトレースしたものの角が不鮮明だったりするので、ノードを整理するついでに『I』や『T』は綺麗な形状に手直ししてあげると、ちょっと仕上がりも綺麗になります。曲線ほど技術がいらないのでおススメです。

・フィルとストロークでまとめる

　今回の素材は、普通にトレースするとTOTAL SEALの部分は土台の黒と上に乗る赤が別々になっています。ですが、オブジェクトを2つ使うよりも、この例で言えば赤い文字の部分だけを残して黒を消してしまい、赤い文字に黒のストロークを設定した方がサイズは節約できます。小さい文字ほどすぐに文字がストロークに侵食されて見えなくなってしまうので、大きい文字で主に役に立ちます。

・曲線を少ないノードで賄う

　ガタガタを直す延長上の話ではありますが、曲線をできるだけ少ないノードで描くことができればそれだけ容量を削減できます。理想は180°の半円を端と端の2点だけのノードとハンドルで作ることですが、曲率が変化するとなかなかそうもいきません。ハンドルが自由自在に動くがために何をどう動かしたらやりたい曲率になるのかなかなか難しいですが、やっているうちに慣れてきて、慣れた分だけデカール作成の限界値が上がります。

今の私では90°以上を一発でまとめられないので
中間点をいくつか作りつつ処理

・トレースの設定で削る

　トレースしてデカールを作る場合、そもそもトレース段階で簡略化する方法もあります。第1回で無視しましたが、オプションとして表示されている3つの項目で多少ノード数をコントロールすることができます。

　『スペックル』は『細かい点をどこまで拾うか』というような設定で、この数字より小さい大きさの物体は無視しますよ、という値です。初期設定は2なので、2以下の大きさのものを無視、これだとほぼ全部拾います。50や100にすると細かいものは出て来なくなります。

　これは企業ロゴにはあまり向かないですが、模様を雰囲気だけ拾いたいとか、私みたいに人間を作成する際には数字を上げると役に立ちます。トレース元が写真だとどうしても細かい陰影が全部影響して、米粒みたいなノードが大量発生するので、これを30とか50とかにすると米粒ノードの発生を抑止できます。(上げすぎると目が無くなりますw)

　『角を平滑化』は『曲線をどのぐらい滑らかにするか』の設定で、数値が小さいほど直線的になっていきます。0にするかチェックを外すとオール直線になります。中途半端に減らしてもガタガタするだけでそんなに使い道は無いかなと思います。もしドット絵をトレースしたい、なんてことがあったらチェックを外しましょう。そうしないと、元の画像は直線なのに、なぜか曲線を沢山生成されてしまうことがありますw

　『最適化』は『トレースした際にどの程度ノードを作るか』みたいな話で、数値を上げると生成されるノード数が減りますが、精度はやや低下します。たとえば企業ロゴを作成する際に、メインの大きい文字は初期設定の0.20でトレースし、小さくて正直あんまり読めない文字は数値を上げて最初から大雑把にトレースする、というようなこともできます。これも人間を作る際にはかなり数字を上げてトレースしています。

・分割デカール

　どうしても容量に収まらないけどクオリティーは下げたくない！という場合に分割デカールの出番がやってきます。グランツーリスモ上で『デカールの差し替え』という機能があることを利用した方法です。

　差し替えデカールの作り方は簡単で、とりあえず作りたいものを仕上げ、ページサイズをオブジェクトに合わせるところまで作業を進めます。

ヘイ、オマチ！

　進めたら、15KB以下になるためにはどうしたら良いかを検討。分け方を考えたら、例えばキャラクターを顔と胴体に分けるなら、まず胴体を削除して顔だけにし、ページサイズはそのまま変えずに保存して出力します。

顔とレーシングスーツを1番とする

　出力したら戻るボタンを押して胴体を復活させ、今度は顔を削除して保存します。それぞれをグランツーリスモにアップロードしたら終わりです。使用したい順番にデカールに便宜上の番号を振ると良いです。

スーツのロゴ類を2番とする、
空間があるけどページサイズはそのままで

　ゲームで差し替えデカールを使用するなら、まず1番を貼ってそれを複製、複製するとレイヤーが上にコピーされるので、上になったものを2番、3番、と差し替えて行くことになります。ですので、1番は最も下に来るもの、2番から順に上へと重ねる前提で付番するのがセオリーです。

追記：ラーメン屋さんでは伝わりズラかったようなので、ものすごく単純なモデルですが追記してもう少し具体的に行きます。下図のような〇、△、□のものを作り、これを3分割したいとします。

　とりあえずこの状態でページサイズを描画範囲に合わせるところまで行ったら、複数選択で2と3を消します。

　1だけが宙に浮いていてページサイズが余っていますが、この状態で最適化保存を行います。保存したら、Ctrl+Z で作業を戻します。そうすると当然2と3が戻ってきます。

　今度は1と3を複数選択して消します。2が残ります。

　上下が余っていますが、もちろんページサイズには触らずこの状態で2を保存します。終わったらまた Ctrl+Z で作業を戻し、今度は1と2を削除。3番で同じく保存。

　こうすると、グランツーリスモ上で1番のデカールを貼り、デカールを2枚複製→複製されたものを2番と3番にそれぞれ差し替えると、このInkscape上で編集していたのと同じように2番が真ん中、3番が下になって分割デカールの組み立てが完成します。

　保存の際に気を付けたいのが、『名前を付けて保存』を選択したいのに誤って『保存』を誤爆してしまうことです。たとえば1番を保存するときに『おっさん 1』というファイル名で保存したのに、2番を保存するときにうっかり誤爆すると、さっきの『おっさん 1』が2番に上書きされてしまいます。これをやらかすともう1回『おっさん 1』を保存し直さないといけなくなるので、気を付けましょう。

・ガイドデカール

　ついでに、1つ。職人さんは時々、分割デカールとセットで『ガイドデカール』というものを作成されることがあります。分割デカールは、大抵の場合、頭部・胴体・脚部、といった構成になります。特に縦に長い全身デカールの場合、最初の1枚が顔だったとすると、顔を貼りました、複製して差し替えて完成させました、あれ、足が全然車に収まらずはみ出しました、ということが起こってしまいます。大きさの把握が難しくなるんですね。

　そこで、予め全身のサイズを把握するために用いるのがガイドデカールです。作り方は簡単で、全身の輪郭線を構成するパスだけを残してあとの細かいものを全て削除し保存します。さっきの例だとあまりに単純ですが、