Unity AssetStoreまとめ

アセットストア日替わりタイムセールの記事を書いていきます。

【Shader Weaver】スプライトエフェクトツールを触ってみた(サンプルデモ&チュートリアルVol.1 編)

スポンサーリンク

f:id:assetsale:20170927231430j:plain

f:id:assetsale:20170927031508j:plain

Shader Weaver

エディタ拡張/ビジュアルスクリプティング

Jackie Lo

$64.80 => $32.40    50%OFF    【開催期間】2017年9月26日〜10月12日 不明(期間限定)

 

ただいまパブリッシャーセール真っ最中の、 大注目アセット!

 

Shader Weaverは、スプライト、UIのボタン、アイコンに、カッコイイ特殊効果を与えたい時に活躍する、ノードベースのシェーダー作成(エフェクト作り)ツールです。

 

 

この記事について

前々から予告してた通り、「Shadero Sprite」との比較記事、第一弾です。

一度では全て伝えられない程のボリュームですので、セールが終わるまで何度に分けてお知らせしたいと思います。

 完全な比較はもう少し先の話になると思いますが、双方の魅力を存分にお伝えします!

 

基本情報

初見さんはコチラの記事をチェック!(Shader Weaverについての話)

 

サンプルシーンを紹介

Shader Weaver(今回のセール)』

サンプルシーンは全部で8つ。

メインデモは「Cards」で、その他は機能別の内容です。

f:id:assetsale:20170929173542j:plain

 

サンプルシーン「Cards 」

f:id:assetsale:20170929174325g:plain

f:id:assetsale:20170929174401g:plain

全てのエフェクトを凝縮したようなメインのサンプルシーン

かっちょいいエフェクトが作れるよ!

回転しても大丈夫。見栄えが悪くなることは無かった。

 

Sprite_Cape

f:id:assetsale:20170929174512g:plain

「マントの揺れ」を表現するシェーダー

f:id:assetsale:20170929175546j:plain

 

Sprite_Sword

f:id:assetsale:20170929174751g:plain

f:id:assetsale:20170929175515j:plain

 

Sprite_Vanish

f:id:assetsale:20170929174951g:plain

ロボットの出現&消滅エフェクト

f:id:assetsale:20170929175436j:plain

 

Sprite_View

f:id:assetsale:20170929175306g:plain

小さな滝と、湖の流れ。太陽も動いてる様に見えた。

f:id:assetsale:20170929175333j:plain

 

UI_Button

f:id:assetsale:20170929175821g:plain

 ボタンの輪郭(アウトライン)をアニメーションして、

このボタン押せますよ的な強調表示。

f:id:assetsale:20170929181458j:plain

 

UI_Image

f:id:assetsale:20170929181639g:plain

UIイメージタイプにエフェクトをかける

Shader Weaver ShadersはUIイメージのすべてのイメージタイプをサポートしています。
1つのエフェクトはスライスタイプの任意のサイズで再利用できます。
すべての塗りつぶし方法をサポートする

f:id:assetsale:20170929181711j:plain

 

UI_Text

f:id:assetsale:20170929181844g:plain

UI_Textタイプにもシェーダーが付けられます。文字を豪華なエフェクトに!

 

日本語で試してみた

f:id:assetsale:20170929185018g:plain

「アセットストアまとめ by汗人柱」(テクスチャが暗いのでわかりにくいですが)

f:id:assetsale:20170929181913j:plain

 


 

エディタの起動

Window -> 「Shader Weaver」から起動します。

ここまでは「Shadero Sprite」と同じです。

f:id:assetsale:20170929172930j:plain

 

デフォルト画面

f:id:assetsale:20170929185258j:plain

 

チュートリアルを参考にして触ってみる

開発環境はMacOS(Unity2017.1.1f1)を使います。

 

公式チュートリアルサイト

チュートリアルは全部で16パートまでありました。

一番知りたいのはMaskですが、まだ我慢しよう。

 

Shader Weaver Tutorial 1 - Introduction - YouTube(1:18)

まず手始めに一番簡単なチュートリアルからスタート。

 

1.Tutoriarlsフォルダの、ButtonBlueスプライトを複製してRootに配置しました。

f:id:assetsale:20170929190121j:plain

(tutorial1で完成した「シェーダ」と「マテリアル」が既に生成されているので)

f:id:assetsale:20170929190000j:plain

 

2.これからエフェクトを付ける「スプライト」をROOTにドロップ

f:id:assetsale:20170929190357j:plain

 

3.Saveを実行

f:id:assetsale:20170929192010j:plain

Saveで保存しますと画面右側にプレビューが表示され、

f:id:assetsale:20170929190533j:plain

Projectビューに、シェーダとマテリアルが生成されます。

これで基本的なセットアップは完了。なんという手軽さ。

f:id:assetsale:20170929190541j:plain

 

 

4.保存したシェーダの読み込み方法

 

Openをクリックして

f:id:assetsale:20170929191552j:plain

先ほど保存した「effect1.shader」がそのまま開けます。

f:id:assetsale:20170929191709j:plain

なるほど、このエディタは生成したシェーダを直接読み込むタイプなんですね。

 

 

一見、当たり前のように見えますが、

Shadero Sprite」の場合はプロジェクトデータとして管理して保存&読み込みをするので、その辺りから微妙な違いに気付きました。

 

 以上がチュートリアルVol1の内容です。

 

動画が短くまとめられており、気軽に進められるようになっています。

公式チュートリアルサイト

 

次回はチュートリアル2〜いける所まで進めたいと思います。

マスクまでちゃんとした手順で進めます!

 

32.40ドルの計算結果 (1ドル 112.4720 円)
32.40ドル は、3,644円

定価64.80ドルなら、7,288円