読者です 読者をやめる 読者になる 読者になる

進捗どうですか?

Unityで2D格闘ゲームを作っています。

【Unity】頂点カラーで輪郭線の太さを制御する

Unity

最近、3Dでアニメ的な表現をするのが流行っているような気がしてなりません。

3Dでアニメ的な表現というと、どうしても3D臭さというか違和感がつきものだと思います。

しかし、ハードや技術の進歩に伴い、徐々にアニメらしく見せることができるものができてきていると感じています。

 

ここで、最近よく名前が挙がるタイトルがGUILTY GEAR Xrdというゲームです。

1年ほど前初めて公開された動画は、なかなかインパクトのあるものだったと思います。

(3DCGに触れたことのある人なら尚更だと思います)

CGWORLDや、4Gamerのサイトでグラフィックスの特集が組まれたりもしました。

西川善司の「試験に出るゲームグラフィックス」(1)「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密,前編 - 4Gamer.net

西川善司の「試験に出るゲームグラフィックス」(2)「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密,後編 - 4Gamer.net

予想はしていましたが、あまりの力の入りように戦慄したものです(笑)。

 

前置きが長くなりましたが、このゲームで導入されている技法のひとつに、

キャラクターの輪郭線の太さを変化させる表現があります。

輪郭線を同じ太さではなく、ペンを走らせたように太さに強弱をつけることで、

より手描きらしく表現するというものです。

ギルティギアXrdUnreal Engine 3で開発されていますが、

この表現をUnityで実現できないか、実験してみることにしました。

 

ギルティギアXrdでは、頂点カラーを用いてさまざまな制御を行っています。

4Gamer記事にも載せられていますが、頂点カラーのアルファ値を輪郭線の太さの係数としています。

そこで、UnityのToony-BasicOutline.shaderをもとに、同様の処理を実装しました。

 

まず、頂点カラーの設定されたモデルを作成し、Unityにインポートします。

f:id:yrkhnshk:20140806235515j:plain

Blenderで、テクスチャを頂点カラーとして焼き込むのが手っ取り早いです。

次に、Toony-BasicOutline.shaderを改造します。

以下は一部を抜き出したもので、赤文字の部分が追加、変更箇所です。

  struct appdata {
    float4 vertex : POSITION;
    float3 normal : NORMAL;

    float4 color : COLOR;//頂点カラーを扱えるようにするため追加。
  };

 

  v2f vert(appdata v) {
    v2f o;
    o.pos = mul(UNITY_MATRIX_MVP, v.vertex);

    float3 norm = mul ((float3x3)UNITY_MATRIX_IT_MV, v.normal);
    float2 offset = TransformViewToProjection(norm.xy);

 

    //輪郭線の太さを設定している箇所。ここで頂点カラーのR値で太さを制御する。

    //v.color.rが頂点カラーのR値。

    //このままこれを掛けた場合、R値が0の際に輪郭線がなくなるため、

    //ここでは補正として0.5をプラスしている。

    o.pos.xy += offset * (v.color.r + 0.5) * _Outline;

 

    o.color = _OutlineColor;

    return o;
  }

これにより、以下のような表現ができました。

f:id:yrkhnshk:20140806235537j:plain

頂点カラーを可視化したものは、以下のようになります。

f:id:yrkhnshk:20140806235614j:plain

赤い部分ほど太く、黒い部分ほど細くなっていることがわかります。

 

頂点カラーの活用により、表現の幅が広がったのではないかと考えています。

 

・参考文献

中の虫などいない Unityシェーダ講座⑥(輪郭線の話)

デフォルトアウトラインの太さ 凛(kagring)のUnity(とQt)勉強中ブログ

Unity のシェーダの基礎を勉強してみたのでやる気出してまとめてみた - 凹みTips

Shader Code - Unify Community Wiki