一連の記事「GameDevをゼロから」
1.ハッカソンから彼自身のゲーム開発スタジオまで： パート1 、 パート2 。
2. Unity3Dおよびベクターグラフィックス 。
3. 言葉なしでプレーヤーと通信する方法 。
4. 混乱から抜け出し、働き始める方法 。
こんにちは、Habr！ 私はOVIVOゲームのソフトウェアに携わっており、Unityでベクターグラフィックスを実装した経験をコミュニティと共有したいと考えています。 以下では、SVGファイルの構造について簡単に説明し、試行錯誤について説明し、その結果を示します。
問題の声明
白で満たされた空きスペースがあります。 そこに黒いしみを追加します。 これらのしみは2Dゲームのインタラクティブな要素であるため、プラットフォームと呼びます。 プラットフォーム間を移動し、ある色から別の色にジャンプできる丸いキャラクターもあります。 プレイヤーが白い世界にいるとき、下向きの重力の影響を受けます。 彼が黒いプラットフォーム内にいることに気付いた場合、彼は引き上げられます。 プレイヤーは2つの世界を行き来しながら勢いを保ち、一定のジャンプ能力を必要とする障害を乗り越えることができます。 これは、ゲームの基本的な仕組みの簡単な説明です。
しかし、今日はメカニズムについてではなく、これらの黒いしみについてお話します。 プラットフォームは比較的単純な形状であり、1色だけでペイントされるため、ベクトルグラフィックエディタはプラットフォームを作成するための理想的なツールです。 チームに参加する前に、連中はUnity環境でかさばるスプライトをラスタライズして操作していました。 また、画像の高解像度が必要なため、面倒でした。したがって、スプライトの解像度を節約することは不可能でした。 約2か月間、ラスターを使用するという問題に苦しみました。 すべての方法を試しましたが、ビルドサイズが1ギガバイトを超えるか、モバイルシステムがそのようなリソース消費に耐えられませんでした。 そしてある日、ベクターグラフィックスとは何か、それらと一緒に何を食べているのかと思いました。 私たちの場合、すべてが非常にシンプルであることが判明しました。ベジェ曲線といくつかの幾何プリミティブのみが使用されています。 そして、私にとって最も注目すべき発見は、すべてのグラフィックスを問題なくエクスポートできるSVG形式でした。 これが単なるXMLドキュメントであることを知って非常にうれしかったです。
SVGを解析する前に、Unityでこれをすべて表示する方法を明確に決定する必要がありました。 最も明白な解決策：メッシュ（メッシュ）を使用します。 プラットフォームは閉じた形状であるため、その輪郭は直列に接続されたポイントとして表すことができ、三角形分割のおかげで、この形状の塗りつぶしとして機能する適切なポリゴンのセットを作成できます。
また、各プラットフォームをエッジコライダーでラップします（EdgeCollider2Dは、Unity3Dのコライダーの一種であり、破線です）。 これは、適切なタイミングで重力ベクトルを変更するために、プラットフォームの輪郭の特性の交差を決定するために必要です。 したがって、2羽の鳥を1石で殺す必要があります。グラフィックを描画し、同じデータに基づいて、プラットフォームを物理的特性で補完します。
解決方法の説明
SVGの構造とすべての機能については詳しく説明しませんが、その要素の1つであるpathに焦点を当てます 。 結局のところ、ここに、私たちにとって関心のあるほぼすべてのデータが保存されています。 属性dに注意する必要があります。属性dには、単一の図を形成するすべての直列接続線に関する情報が書き込まれます。
この例からわかるように、一連の数字を滑らかな数字に変えることができます。
<path d="M250.74,263.55C110.9,271.94,26.38,53.78,37.84,44.19,47.66,36,129.46,179.64,255.58,179.68
c92.05,0,152.25-76.47,161.29-66.13C427.82,126.07,356.16,257.22,250.74,263.55Z"/>
今後は、単一パスの 1つの属性dのみで、閉じたパスでも任意の線でも、無制限の数の図形を描画できますが、これについては後で詳しく説明します。 dからのデータは、各曲線の制御点を持つブロックに条件付きで分割できます。
各プラットフォームで作業する際に、輪郭構造の精度を確認できます。 たとえば、8という数字が設定されている場合、各曲線は8つのセグメントに分割されます。 その結果、曲線の種類を把握し、すべての制御点を所有しているため、破線を簡単に作成できます。これは、高精度で滑らかな曲線のように見えます。
Pathはいくつかのタイプのベジェ曲線と直線をサポートしているため、各タイプを解析できるようにツールを調整する必要がありました。 最も不快な瞬間は、 d属性のデータ記録形式で発生しました。 ゲームの開発を通して、特定のベクタースプライトが単純に構築されず、ツールがエラーをスローするという事実に常に直面していました。 判明したように、異なるグラフィックエディター（同じブランドの異なるバージョンを含む）は、多くの場合、異なる方法でSVGコードを生成しました。 たとえば、同じパスをさまざまな方法で書くことができます：大文字または小文字を使用する場所、スペース、または改行。 このようなスプライトをそれぞれ手動で選択し、アーティストのニーズに合わせて独自のパーサーを追加する必要がありました。 時には編集者が人間が読めるコードを生成し、時にはすべてが1行で作成されるという事実にもかかわらず。 1つのSVGファイルに記録された多くのプラットフォームを構築する必要があるという事実により、時間の経過とともに問題は複雑になりました。 その後、すべての形状を1つのパス要素に配置できることがわかりました。 実際、思い出せないその他の驚きがたくさんありました。 それから、もちろん、すべてが急いで書かれましたが、将来のために、私は自分自身のための教訓を学びました。 まず、仕様の詳細な研究、そしてコードです。
ほとんどの場合、精度は修正されましたが、最終的な状況は必ずしも期待どおりではありませんでした。 線の湾曲度が高いほど、滑らかな効果を作成するために分割する必要があるセグメントの数が多くなります。 テスト機能として、線の曲率に応じて精度を自動的に決定する機能を追加しましたが、その後、輪郭の精度を手動で調整しました。
グリッドの非常に小さな部分を修正する必要がある場合もありましたが、図全体の精度を完全に改善したくありませんでした。 シーン内のオブジェクトはプロジェクト内のどのアセットにも結び付けられていないため、各プラットフォームでは、念のために、グラフィックを解析できるXMLテキストを保存しました。 したがって、プラットフォームの任意の部分を曲線の形で引き上げることができるため、理論的には特定の間隔でのみグリッドとコライダーを編集できます。 ポイントを計算する際に自動化をわずかに破る必要がありましたが、最終的にはプラットフォーム上の個々の曲線の精度を設定できる小さなユーティリティがありました。
このようなツールの実用的な応用は、次の2つのタスクになります。
- 特に注意が必要な場所でグラフィックスの精度を向上させます。
- プラットフォームのプレイヤーが取得できないエリアのコライダーの精度を下げます。
サードパーティの開発者による代替ソリューション
約6か月前、さらに詳細で複雑なスプライトをレンダリングするという疑問が生じました。 安定性が必要でしたが、私のツールではこれを保証できませんでした。 その結果、彼らはAsset Storeからサードパーティのプラグインを購入することを検討し始めました。 選択肢は、 Simply SVGとSVG Importerの間でした。 その結果、2つの製品のビデオ資料、ドキュメント、およびレビューを検討した結果、2番目のオプションを決定しました。
ただし、ツールの使用を拒否しませんでした。 その重要な機能は、エッジコライダーを構築し、個々のカーブの精度を編集する機能です。 もちろん、これらはすべて購入したプラグインの上に書くこともできますが、リリースの準備を積極的にしているときは、すでにテストされてうまく機能しているものに触れずに、より急を要することに集中したいです。
エピローグ
開発の初期においても、既成のソリューションの研究に注意を払うことなく、すぐに独自の自転車を書き始めました。 長い間費やした時間を後悔し、「…ならどうなるか」と疑問に思うかもしれませんが、それでも、そのような経験をうれしく思います。 目に火花を灯してプログラミングしていたのはルーチンではありませんでした 。
個人的には、Unityチームはすぐにベクターグラフィックスのサポートをすぐに追加すると信じています。 記事に記載されている方法のおかげで、少なくともモバイルプラットフォームでのリソース消費の問題を忘れ、より重要なことに集中できます。 もちろん、2Dゲームのグラフィックスをすべての人がベクターで描画しているわけではありませんが、かさばるリソースで膨らんだ分布サイズが最初に来る場合は、それに切り替えることは正当であると確信しています。
ご清聴ありがとうございました。 個人的な質問やコメントはすべて、 squakoon_jrに送信してください 。