【Unity】「Shader Weaver」でリッチなカードを作る その１ - 枠内にキャラクターを表示

はじめに

この記事では、「Shader Weaver」でリッチなカードの作り方を紹介していきます

チュートリアルのまとめはこちら

前回のチュートリアル

このチュートリアルで作るモノ

ノードの準備

Mask ノードと Image ノードを追加して連結します

ROOT ノードに「card_man」テクスチャを、
image2 ノードに「xman」テクスチャを設定します

マスクの設定

mask1 ノードの「Edit」ボタンを押して「Wand」を選択します
そして、「Tolerance」を「17」に設定します

カードのデザインが入る箇所をクリックします
緑色に塗りつぶされたトコロがマスクとして設定されます

まだ綺麗にマスクが設定されていない（黒の斑点が混じっている）ので
「Brush」を選択して綺麗に緑色になるように塗ります

このように塗ることができれば大丈夫です

キャラクターの画像の設定

image2 ノードの「Edit」ボタンを押して
「Position:」の「X」に「-0.065」、「Y」に「0.2」、
「Scale:」の「Y」に「0.5」を入力します

シェーダの保存

「Save」を選択してシェーダを保存します
ファイル名は「tutorial_card.shader」にします

プレビューでカードが正常に表示されていることが確認できます

シーンに配置

Unity メニューの「GameObject>3D Object>Quad」を選択します

Hierarchy で作成した「Quad」オブジェクトを選択して Inspector のマテリアルの設定欄に
Project ビューの「tutorial_card」マテリアルをドラッグして設定します

そして、Scale の「X」に「8」、「Y」に「9.2」と入力します

Game ビューでカードが正常に表示されていることが確認できます

次のチュートリアル