作ってみた最終的にこんな感じになります。Testはじめになぜ急にアウトラインかというときっかけは白猫プロジェクトでした。遊んでいて真っ先に気になったのがタイトルにもあるキャラクターのアウトライン表現でした。プレイ画面のキャプチャこの画像を見るとただのアウトラインではなく、非常に面白い表現になっていることがわかると思います。キャラクター単体のアウトラインは一番外側のみで顔の輪郭等には発生しない。別のキャラクターと重なった部分にアウトラインは発生しないステージの裏側に行くとアウトラインの色で塗りつぶされるよくある手法なのかもしれませんが、非常に見やすくきれいな見た目だったので、自分なりにUnityを用いて作ってみました。関係者ではないのでアプリではどのような実装がされているか分かりませんが、実際に作ってみると面白いものが出来上がったので個人的に記事を書こうと思います。ちなみに白猫は課金が鬼畜ですが、作り込まれていて非常に面白いです。現状の大きな不満点といえばやり込んでくるとタウンを開くときのロード時間が結構長くなることぐらいです。株式会社コロプラ【スマートフォンゲーム&位置ゲー】ステンシルこれを見てパッと思い浮かんだのはステンシルを使ったマスク化だったのでその方面で実装してみます。ステンシルでいろいろ試しているうちに実は、アウトライン描画のZTestをOffにして背景を先に描画するだけでもこのような表現になることに気づきました。意味分かんないサンプルですみません...しかし、ステンシルを使って出来ることを試すためにも今回は別の手法を試してみます。|こちらのサイトが非常にわかりやすく解説されています。WebGLですが、考え方は全く同じです簡単にまとめるとDepthBufferは奥行き情報で描画するかどうか判定StencilBufferは領域で描画するかどうか判定パスしたピクセルをFragmentShaderで描画こんなかんじです。OpenGLで利用できるStencil系の呼び出しはUnityのShaderLabでも「Stencil」で定義されています。調べてもあまりヒットしないので空気になっている気がしますが、Unity4.2からPro版のみアクセスできるようになっています。iOS,AndroidでもUnityが動作するOSであれば基本的に対応しているはずです。今のところ確認したすべての端末で動作します。Manualアウトラインステンシルの扱いがわかったところで本題のアウトラインを実装してみます。キャラクター以外のモデルを通常描画します。次にキャラクターモデルの法線を外側に伸ばしたメッシュをアウトラインとして描画、ステンシルの2番に書き込みます。アウトラインを最前面に持ってくるためZTestもOffにします。今回も例によってユニティちゃんを使用しているのですが、カリングをしてしまうと本来の見え方と変わってしまうのでステンシル側も指定する必要があります。Off一回り大きいモデルが描画されます。この画像はわかりやすいようにColorMaskを指定していません。キャラクターシェーダの2パス目で本体を描画します。コメントアウトしていますが、外すと隠れている部分もステンシルが書き込まれます。0を指定しているので見えていません。ここで現在書き込まれているステンシル番号をまとめてみます。分かりにくくなってしまいましたがステンシルバッファにはこのような値が書き込まれています。右側は実際には見えないので想定になります...これでもうアウトラインが描画できることがわかるかと思います。equal}しかも好きなテクスチャでアウトラインが書ける!比較部分と参照値を変えるといろいろできます。最後にきっかけは白猫でしたが、実際に細かく使ってみると思っていた挙動と違っていたりしてかなり勉強になりました。調べても実用的なものがあまり出てこないので手探りになってしまいましたが、興味をもった方もいろいろ試してみると面白いと思います。ステンシルに書き込んでおくことでアウトライン以外にも面白い表現を思いついたのでそちらは次の記事に書こうと思います。月別アーカイブ参加グループプログラミングはてなブログをはじめよう!taroworkさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。