【Unity】2D用のノードベースのシェーダ作成アセット「Shader Weaver」の公式チュートリアルを翻訳しました

![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174312.png)

# 備考

この投稿は自分のブログの記事の転載になります
http://baba-s.hatenablog.com/entry/2017/09/29/094508

# 概要

2017/3/29 に、2D 用のノードベースのシェーダ作成アセット
「Shader Weaver」がリリースされました

<iframe src="https://api.assetstore.unity3d.com/affiliate/embed/package/84761/widget-wide?aid=1100l37E9" style="width:600px; height:130px; border:0px;"></iframe>

「Shader Weaver」を導入すると、
ノードベースで Sprite や UI 用のシェーダを作成できるようになります

# 例（公式サイトから引用）

![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174535.gif) ![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927175040.gif) ![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174649.gif)

![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174657.gif)

![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174703.gif)

![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174709.gif) ![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174717.gif) ![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927175021.gif)

![](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927174726.gif)

# サイト一覧

- [公式サイト](http://www.shaderweaver.com/)
- [サンプル](http://www.shaderweaver.com/examples.html)
- [チュートリアル](http://www.shaderweaver.com/tutorials.html)
- [ノード一覧](http://www.shaderweaver.com/nodes.html)
- [FAQ](http://www.shaderweaver.com/faq.html)
- [フォーラム](https://shaderweaver.userecho.com/)

# 検証環境

- Unity 2017.1.1f1
- Shader Weaver 1.2.2b

# チュートリアル

今回は「Shader Weaver」の公式チュートリアルを翻訳しました
下記のリンクからチュートリアルを閲覧できます

<a href="http://baba-s.hatenablog.com/entry/2017/09/29/094107"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170927/20170927181402.png" /></a>

[チュートリアル１：基本操作の紹介](http://baba-s.hatenablog.com/entry/2017/09/29/094107)

<a href="http://baba-s.hatenablog.com/entry/2017/09/29/094113"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170928/20170928154716.png" /></a>

[チュートリアル２：画像を表示する](http://baba-s.hatenablog.com/entry/2017/09/29/094113)

<a href="http://baba-s.hatenablog.com/entry/2017/09/29/094120"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170928/20170928155541.gif" /></a>

<a href="http://baba-s.hatenablog.com/entry/2017/09/29/094120"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170928/20170928155417.gif" /></a>

[チュートリアル３：画像に動きをつける](http://baba-s.hatenablog.com/entry/2017/09/29/094120)

<a href="http://baba-s.hatenablog.com/entry/2017/09/29/094128"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170928/20170928163756.gif" /></a>

[チュートリアル４：文字を光らせる](http://baba-s.hatenablog.com/entry/2017/09/29/094128)

<a href="http://baba-s.hatenablog.com/entry/2017/09/29/094136"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170928/20170928175949.gif" /></a>

[チュートリアル５：炎のゆらめきを作る](http://baba-s.hatenablog.com/entry/2017/09/29/094136)

<a href="http://baba-s.hatenablog.com/entry/2017/09/29/094143"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170928/20170928183043.gif" /></a>

[チュートリアル６：少しずつ浮かび上がる文字を作る](http://baba-s.hatenablog.com/entry/2017/09/29/094143)

<a href="http://baba-s.hatenablog.com/entry/2017/09/30/203000_2"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170929/20170929110326.gif" /></a>

[チュートリアル７ - スプライトアニメーションに演出を付ける](http://baba-s.hatenablog.com/entry/2017/09/30/203000_2)

<a href="http://baba-s.hatenablog.com/entry/2017/09/30/203000"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170929/20170929113359.gif" /></a>

[チュートリアル８ - アニメーションシートを使う](http://baba-s.hatenablog.com/entry/2017/09/30/203000)

<a href="http://baba-s.hatenablog.com/entry/2017/09/30/203000_1"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170929/20170929122738.gif" /></a>

[チュートリアル９ - ブラーを使う](http://baba-s.hatenablog.com/entry/2017/09/30/203000_1)

<a href="http://baba-s.hatenablog.com/entry/2017/10/01/190000"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170929/20170929143511.gif" /></a>

[チュートリアル１０ - モザイクを使う](http://baba-s.hatenablog.com/entry/2017/10/01/190000)

<a href="http://baba-s.hatenablog.com/entry/2017/10/01/200000_1"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170929/20170929154231.gif" /></a>

[チュートリアル１１ - 水面に反射する風景を作る](http://baba-s.hatenablog.com/entry/2017/10/01/200000_1)

<a href="http://baba-s.hatenablog.com/entry/2017/10/01/200000"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170929/20170929164008.gif" /></a>

[チュートリアル１２ - 建物がゆらゆらする風景を作る](http://baba-s.hatenablog.com/entry/2017/10/01/200000)

<a href="http://baba-s.hatenablog.com/entry/2017/10/05/150000_3"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20170929/20170929181217.png" /></a>

[リッチなカードを作る　その１ - 枠内にキャラクターを表示](http://baba-s.hatenablog.com/entry/2017/10/05/150000_3)

<a href="http://baba-s.hatenablog.com/entry/2017/10/05/150000_2"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20171004/20171004104719.gif" /></a>

[リッチなカードを作る　その２ - 炎のマントを作る](http://baba-s.hatenablog.com/entry/2017/10/05/150000_2)

<a href="http://baba-s.hatenablog.com/entry/2017/10/05/150000_1"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20171004/20171004111621.gif" /></a>

[リッチなカードを作る　その３ - 煙の背景を作る](http://baba-s.hatenablog.com/entry/2017/10/05/150000_1)

<a href="http://baba-s.hatenablog.com/entry/2017/10/05/150000"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20171004/20171004114155.gif" /></a>

[リッチなカードを作る　その４ - カードの枠を光らせる](http://baba-s.hatenablog.com/entry/2017/10/05/150000)