UnityAdventCalendar2018はじめにこんにちは。ソーシャルゲーム事業部の中山です。この記事はカヤックUnityアドベントカレンダー2018の6日目の記事です。今回はUnityで枠を描くときに使える話です。画面の中に枠を描きたいというとき、枠ごとに専用の素材を用意してしまうと、ゲームの容量が無駄に大きくなったり、描画の負荷が高くなったり、無駄にメモリを消費したりします。長方形の枠を描くだけであればUnity標準の機能でなんとかできる*1のですが、形が歪んだ枠を何個も描きたい場合はどうすれば良いでしょうか、というのが今回の話です。実例これは東京プリズンというゲームのスクリーンショットです。この枠は画像を使って描かれていて、UnityのSceneウィンドウで表示をOverdrawに切り替えると以下のようになっていました。これだけ見ても何がいけないのかわからないかと思いますが、今回紹介する方法で枠を描くようにすると以下のようになります。全体的に少し暗くなっているのがわかるかと思います。Overdrawは描画の負荷が高いところほど表示が明るくなるというものなので、全体的に少し負荷が下がったということになります。枠の素材は大部分が透明なのですが、uGUIのImageコンポーネントはそんなこと関係なしに素材の全体を描画しようとするので、単純に素材を置いて枠を描いてしまうと大きな無駄が発生することになります*2。枠の画像のサイズは597×676なので、素材をロードするとそれだけでメモリを約1.5MB消費することになります*3。今回紹介する方法を使えば素材をロードしなくて済むので、この分のメモリの消費を抑えられるということになります。このゲームのバトル画面は描画しないといけないものが多いので、できるだけ低スペックなマシンでも快適にプレイできるようにするには、このようなパフォーマンスチューニングが重要になってきます。適当な例ここではこのような枠を描くことを考えます。描くメッシュを動的に生成することで、専用の素材なしで枠を描くことができます。以下のようなコンポーネントを作り、キャンバスの下の適当なGameObjectに追加すれば良いです。}}このコンポーネントを適当なGameObjectに追加し、以下のようにフィールドに適当な値を設定すると、先ほどの画像と同じような枠を描くことができます。Sceneウィンドウの表示をWireframeに切り替えると以下のようになります。三角形を組み合わせることで、専用の素材を使わずに枠を描いていることがわかるかと思います。簡易的にアンチエイリアスをかけるこれで一応枠が描けるようになるのですが、Gameウィンドウで見ると境界のジャギーが目立ってあまり綺麗ではありません。アンチエイリアスをかけた方が良さそうです。ここでは、枠の外側と内側に薄くグラデーションをかけ、そのグラデーションの幅を狭くすることでアンチエイリアスの代わりにします。Sceneウィンドウで見るとこういう感じにグラデーションがかかることになります。上のようにグラデーションをかけたものをGameウィンドウで見ると下の画像のようになり、アンチエイリアスがかかっているように見えることが確認できるかと思います。ここではグラデーションの幅は1pxにしてあります。この機能を入れたコンポーネントのソースコードです。グラデーションをかけるための計算をしています。ここでは説明しやすい方法を使っていますが、他にもやり方はいろいろあります。ここでは凸な図形のみ考慮しています。