コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】「Shader Weaver」チュートリアル7 - スプライトアニメーションに演出を付ける

はじめに

この記事では、「Shader Weaver」で
スプライトアニメーションに演出を付ける方法を紹介していきます

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

前回のチュートリアル

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

f:id:baba_s:20170929110326g:plain

動画

この記事は上記の動画の一部翻訳となります

ノードの準備

f:id:baba_s:20170929103645p:plain

「ShaderWeaver」ウィンドウの右下の「+」ボタンを押します

f:id:baba_s:20170929103735p:plain

「Shader Type:」を「Sprite」に変更します

f:id:baba_s:20170929103516p:plain

Project ビューで「ShaderWeaver/Standard Assets/2D/Sprites」フォルダを開いて
「RobotBoyRunSprite」テクスチャの「RobotBoyRun00」スプライトを ROOT ノードに設定します

f:id:baba_s:20170929103838p:plain

Image ノードを追加します

f:id:baba_s:20170929104053p:plain

Project ビューで「ShaderWeaver/Textures」フォルダを開いて
「wave」テクスチャを image1 ノードに設定します

f:id:baba_s:20170929104112p:plain

image1 ノードの「Edit」ボタンを押します

f:id:baba_s:20170929104326p:plain

「+」ボタンを押します

f:id:baba_s:20170929104342p:plain

「Blend Op」を「Add Inner」に変更します

f:id:baba_s:20170929104403p:plain

「Move」を選択します

f:id:baba_s:20170929104431p:plain

「Y」の入力欄に「-0.1」と入力します

f:id:baba_s:20170929104543p:plain

image1 ノードと ROOT ノードを連結します

以上でノードの準備が完了です

シェーダの保存

「ShaderWeaver」ウィンドウの「Save」を選択してシェーダを保存します
ファイル名は「tutorial7.shader」にします

f:id:baba_s:20170929104759p:plain

Project ビューにこれらのファイルが追加されていればシェーダの作成が完了です

f:id:baba_s:20170929104911g:plain

「ShaderWeaver」ウィンドウのプレビューで
ロボットがメラメラしていることが確認できます

作成したシェーダの使用

f:id:baba_s:20170929105152p:plain

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

f:id:baba_s:20170929105325p:plain

Hierarchy で作成した「New Sprite」オブジェクトを選択して
Inspector の「Add Component」から「Animator」を選択します

f:id:baba_s:20170929105621p:plain

Project ビューで「ShaderWeaver/Standard Assets/2D/Animator」フォルダを開いて
「2dCharacterAnimationRun」を「Controller」に設定します

f:id:baba_s:20170929105759p:plain

Project ビューの「tutorial7」マテリアルを「Material」にドラッグして設定します

f:id:baba_s:20170929105909p:plain

Inspector の「Add Component」から「Sprite Animation」を選択します

f:id:baba_s:20170929110507p:plain

「New Sprite」オブジェクトの大きさを適当に設定します ( x: 5、y: 5 など )

f:id:baba_s:20170929110326g:plain

Unity を実行すると、作成したシェーダが正常に動作することが確認できます

以上がスプライトアニメーションに演出を付ける方法になります

次のチュートリアル