バッテラが如く

プログラミングしましょ!

【Unity】ShaderGraphで市松模様のシェーダーを作る (第2弾)

第2弾は市松模様を表示するシェーダーを作ります。

市松模様というのはこういうのです。

模様であればテクスチャなくてもシェーダーだけでできたりします。

ShaderGraphについては以下記事で解説していますので良かったら参考にしてね!

www.m2game.net

■開発環境

  • MacOS Monterey (12.1) Unity (2021.3.2f1)
  • ゴール

    そういえば鬼滅の刃でおなじみの竈門炭治郎の服も市松模様ですね。

    なのでこのように色を変えればそれっぽくなります

    ShaderGraphを新規作成

    ゼロから作ると大変なのでビルトインのUnlit Shader Graphで作り始めます。

    Checkerboardノードを追加

    市松模様を簡単に作るにはCheckerboardというノードを使うと簡単に作れます。

    右クリック → Create Node → Procedural → Checkerboardで作ります。

    このようなノードができます。

    Checkerboardの結果をシェーダーに反映させるためにFragmentBaseColorに紐づけます。

    この状態でオブジェクトに反映させると松模様になっています。

    分割数を変えられるようにする

    デフォルトだと4分割になっていますが、自在に分割数を変えられるようにしたいと思います。

    分割数はFrequency(Vector2)で行っています。 Xは横方向、Yは縦方向の分割数です。

    BlackboardにVector2のプロパティを追加します。

    このプロパティとFrequencyを紐付けましょう。

    これでマテリアルで分割数を変えることができました。

    色を任意で変えられるようにする

    次は模様の色を変更する方法です。

    色はCheckerboardのColorAとColorBの2つで構成されています。

    こちらもBlackboardにプロパティを追加して紐づけましょう。

    ColorAとColorBのデフォルトが真っ黒だとプレビューが分かりづらいので、GraphInspectorでデフォルト値を変更し白黒になるようにしましょう。

    これでマテリアル上で色を変えることができました。

    あとがき

    Checkerboardを使うと市松模様が簡単にできましたね♪

    なんで市松模様を作ろうと思ったかというと、ブログなどに貼るサンプル用として映えそうだったというのがきっかけです笑