- 20
- 81 200
nattuhan
Приєднався 22 жов 2015
UIもシェーダーで動かそう！ [Unity ShaderGraph]
*概要
- 新しいUnity6で、UIもShaderGraphでアニメーションさせるチュートリアルです。マスクを組み合わせてテキストをおしゃれに見せる簡単な方法についても紹介しています
- This is a tutorial on how to animate UI with ShaderGraph in the new Unity6. It also shows an easy way to combine masks to make text look stylish!
*注意
- 動画内でも触れていますが、こちらの内容は2022,2021などの現行LTSでは機能しませんので、以下のダウンロードリンクから.shaderファイルを利用ください（最低限の実装のみしています）
- As mentioned in the video, the content here will not work with current LTS such as 2022, 2021, etc. Please use the .shader file from the download link below (only minimal implementation).
*ダウンロード（Google Drive）
drive.google.com/drive/folders/194ybn86HlCbPN1x2Y7wDFD33LJ17Zqb2?usp=drive_link
*動画内での作業環境
Uniry ver 6000.0.16f1 - Universal Render Pipeline
*ご質問ご指摘はコメント欄にお気軽にお書きください
*ご連絡はこちらまで
nattuhan
*BGM
滞空 / tanutanuRecords
ua-cam.com/video/Ewv3ZHBOQhw/v-deo.html
*タイムスタンプ
00:00 intro
00:21 動作環境についての注意
01:29 シーン上での準備
04:15 シェーダー制作開始
18:38 outro
- 新しいUnity6で、UIもShaderGraphでアニメーションさせるチュートリアルです。マスクを組み合わせてテキストをおしゃれに見せる簡単な方法についても紹介しています
- This is a tutorial on how to animate UI with ShaderGraph in the new Unity6. It also shows an easy way to combine masks to make text look stylish!
*注意
- 動画内でも触れていますが、こちらの内容は2022,2021などの現行LTSでは機能しませんので、以下のダウンロードリンクから.shaderファイルを利用ください（最低限の実装のみしています）
- As mentioned in the video, the content here will not work with current LTS such as 2022, 2021, etc. Please use the .shader file from the download link below (only minimal implementation).
*ダウンロード（Google Drive）
drive.google.com/drive/folders/194ybn86HlCbPN1x2Y7wDFD33LJ17Zqb2?usp=drive_link
*動画内での作業環境
Uniry ver 6000.0.16f1 - Universal Render Pipeline
*ご質問ご指摘はコメント欄にお気軽にお書きください
*ご連絡はこちらまで
nattuhan
*BGM
滞空 / tanutanuRecords
ua-cam.com/video/Ewv3ZHBOQhw/v-deo.html
*タイムスタンプ
00:00 intro
00:21 動作環境についての注意
01:29 シーン上での準備
04:15 シェーダー制作開始
18:38 outro
Переглядів: 614
Відео
![ブラックホール風シェーダーをつくる [Unity ShaderGraph]](http://i.ytimg.com/vi/nlAiGHE3-WI/mqdefault.jpg)
![ブラックホール風シェーダーをつくる [Unity ShaderGraph]](/img/tr.png)
ブラックホール風シェーダーをつくる [Unity ShaderGraph]
Переглядів 2,1 тис.Рік тому
*概要 ・ブラックホール風シェーダー（重力レンズ効果）をシェーダーグラフでつくります ・Create a black hole like shader (gravitational lens effect) with ShaderGraph *動画内での作業環境 Uniry ver 2022.3.5f1 - Universal Render Pipeline *↓こちらの動画も似たようなことをやっています 軌跡が歪む斬撃エフェクトをつくる [Unity VFX ShaderGraph] ua-cam.com/video/HVp9Qjdi79k/v-deo.html *ご質問ご指摘はコメント欄にお気軽にお書きください *ご連絡はこちらまで nattuhan *タイムスタンプ 00:00 intro 00:56 シーン構成 01:41 ShaderGraph 作成...
![軌跡が歪む斬撃エフェクトをつくる [Unity VFX ShaderGraph]](http://i.ytimg.com/vi/HVp9Qjdi79k/mqdefault.jpg)
軌跡が歪む斬撃エフェクトをつくる [Unity VFX ShaderGraph]
Переглядів 17 тис.Рік тому
*概要 ・軌跡が歪む斬撃エフェクトをUnityでつくります ・Creating a slash effect with distorted trajectory in Unity *動画内での作業環境 Uniry ver 2022.2.19f1 - Universal Render Pipeline *Photoshopでタイリングノイズテクスチャを作る動画 ua-cam.com/video/WnkwDW34TYg/v-deo.html *使用した背景アセット assetstore.unity.com/packages/3d/environments/fantasy/fantasy-adventure-environment-70354?locale=ja-JP *ご質問ご指摘はコメント欄にお気軽にお書きください *ご連絡はこちらまで nattuhan *タイ...
![[#Blender #Qubicle] ボクセルの作り方と動かし方 [渓の夏のつくりかた #3]](http://i.ytimg.com/vi/6clGgs6TO-A/mqdefault.jpg)
[#Blender #Qubicle] ボクセルの作り方と動かし方 [渓の夏のつくりかた #3]
Переглядів 1,1 тис.2 роки тому
*ゲームはこちらで遊べます！ unityroom.com/games/kei_no_natsu *概要 BlenderとQubicleを用いた、ボクセルでのモデリングやアニメーションのフローを紹介します。 This movie will show the flow of modeling and animation in voxels using Blender and Qubicle. *他の動画 #1 Sceneがどう組まれているか紹介 ua-cam.com/video/VghwZtxOfRM/v-deo.html #2 テイストに合わせた川の水面シェーダ ua-cam.com/video/MPDHRFR0Yaw/v-deo.html *ご質問ご指摘はコメント欄にお気軽にお書きください *ご連絡はこちらまで nattuhan *BGM：“Cooking T...
![[#Unity] テイストに合わせた川の水面シェーダ [渓の夏のつくりかた #2]](http://i.ytimg.com/vi/MPDHRFR0Yaw/mqdefault.jpg)
[#Unity] テイストに合わせた川の水面シェーダ [渓の夏のつくりかた #2]
Переглядів 3,5 тис.2 роки тому
*ゲームはこちらで遊べます！ unityroom.com/games/kei_no_natsu *概要 川の水面のシェーダーについて、ShaderGraphでどう実装しているかを解説します。 This movie will explain how the shader for the river's surface are implemented in ShaderGraph. *他の動画 #1 Sceneがどう組まれているか紹介 ua-cam.com/video/VghwZtxOfRM/v-deo.html #3 ボクセルの作り方と動かし方 ua-cam.com/video/6clGgs6TO-A/v-deo.html *ご質問ご指摘はコメント欄にお気軽にお書きください *ご連絡はこちらまで nattuhan *BGM：“Cooking Time” by N...
![[#Unity] Sceneがどう組まれているか紹介 [渓の夏のつくりかた #1]](http://i.ytimg.com/vi/VghwZtxOfRM/mqdefault.jpg)
[#Unity] Sceneがどう組まれているか紹介 [渓の夏のつくりかた #1]
Переглядів 1,2 тис.2 роки тому
*ゲームはこちらで遊べます！ unityroom.com/games/kei_no_natsu *概要 ゲームジャム作品を通して、ゲーム制作に慣れていない方向けに、 自分がどのようにUnityのシーンを構築しているのかをご紹介します。 For those who are new to game production, through game jam productions, I will I will show you how I build my Unity scenes. *他の動画 #2 テイストに合わせた川の水面シェーダ ua-cam.com/video/MPDHRFR0Yaw/v-deo.html #3 ボクセルの作り方と動かし方 ua-cam.com/video/6clGgs6TO-A/v-deo.html ポストプロセス解説動画(URP) ua-cam.com/vid...
![渓の夏 [Unity 1week Game Jam Trailer]](http://i.ytimg.com/vi/QrG_Rm9X3xc/mqdefault.jpg)
渓の夏 [Unity 1week Game Jam Trailer]
Переглядів 4322 роки тому
ぜひ遊んでみてください！ Play and enjoy! unityroom.com/games/kei_no_natsu
Fxxxin Fashion Club - PV【unity1week「そろえる」投稿作品】
Переглядів 2312 роки тому
Fxxxin Fashion Clubというオンラインパーティゲームをunity1week「そろえる」にリリースしました！ 笑えるオンラインゲームになっているのでぜひお誘いあわせの上遊んでみてください！ unityroom.com/games/ffc ●メンバー nattuhan : ディレクション hidev : プログラミング kugi : プログラミング ジュン : 3Dモデリング NaTsu : 音楽 （GWを丸々つかったにもかかわらず遅刻して10日間の製作期間となってしまいましたが…）
![[Unity - URP] ステンシルでだまし絵っぽい表現を作る](/img/n.gif)
[Unity - URP] ステンシルでだまし絵っぽい表現を作る
Переглядів 1,7 тис.2 роки тому
*概要 ・なんか錯視的な一風変わった表現をしてみたいけどやりかたがまったくわからない ・窓の向こうだけ描画する…みたいなの描画の工夫をしたい ・ステンシルってよくわからないけどとにかく試してみたい といった方向けの動画になっております。 簡単なステンシルを書きこむシェーダーを組みつつ RendererFeatureと組み合わせて錯視的な見え方をする実装をしていきます。 *動画内での作業環境 Uniry ver 2020.3.32f1 - Universal Render Pipeline *URPってなに？ビルトインって？となった方はUnity公式の動画をどうぞ Unityの次の標準レンダリングパイプライン "Universal Render Pipeline" は何がどう変わるのか ua-cam.com/video/o05ob3Ywrzs/v-deo.html 今回省略したUnli...
[Unity] ShaderGraphを初心者にわかりやすく解説する
Переглядів 19 тис.2 роки тому
*概要 ・ShaderGraphという新しい機能があるらしいが、なにが便利かわからないので触っていない ・漠然と”シェーダー”を勉強したいが、何から勉強すればいいのかわからない ・ゲームグラフィックスにおいて、キャラクターモデルや、エフェクトなど…の表現力を上げたい …といった方向けの動画になっております。 シェーダーの概要と、ShaderGraphの触り方について学びつつ、 実際にUnity上でひとつシェーダーを組んでいきます。 *動画内での作業環境 Uniry ver 2020.3.25f1 - Universal Render Pipeline *URPってなに？ビルトインって？となった方はUnity公式の動画をどうぞ Unityの次の標準レンダリングパイプライン "Universal Render Pipeline" は何がどう変わるのか ua-cam.com/video/o...
【Unity 2020.3 URP】すべてのPostProcessVolumeをざっくりと解説します
Переглядів 2,1 тис.3 роки тому
PostProcessVolumeと名前が変わったポストプロセスエフェクトについて、全部の効果をざっくりと解説していきます。 この動画の対象となる人 ・ポストプロセスってなに？という人 ・URPに代わってから使い方がわからないという人 ・機能をまとめてなんとなく知っておきたいなという人 動画内では触れていませんが、各エフェクトについてもっと詳しい解説が見たいという方は、2017 Uniteでの高橋啓治郎さんによる講演をご覧ください（現時点では実装されていない機能や、Volumeから別の場所に行ったエフェクトもあるのでご注意ください） ua-cam.com/video/r5mNmH68KPQ/v-deo.html Unity ver : 2020.3.17f1（撮影時最新LTS） Universal Render Pipeline TimeStamp 00:00 はじめに 01:38 ...
Time to GOLF - Release Trailer on Steam
Переглядів 5203 роки тому
Time to GOLF is the best golf game that the author, who has never played golf before, can think of. store.steampowered.com/app/1528880/Time_to_GOLF/?beta=0 Contact : nattuhan
Unity1weekの自作激ムズ登山ゲーの解説動画【Time to GOLF】
Переглядів 7483 роки тому
ゲームのページはこちら unityroom.com/games/time_to_golf Unity1weekで登山ゲーを作った…！！がしかし、他の作品が比較的カジュアルに遊べるゲームであるにもかかわらず難易度が高めのゲームを作ってしまいました。 クリアしてくれている方々はそれでも多くいるのですが、どうしてもクリアしたいのにできないという方向けに、どのように進めていけば攻略できるかを解説した動画を制作しました。 とはいえ最初に動画を見るのではなく、まずはプレイしていただいて、つまづいたところの部分だけを見て、もう一度プレイしていく、という遊び方を作者としては推奨いたします。 またこの作品を制作した経緯もnoteにまとめていますのでよろしければご覧ください。 note.com/nattuhan/n/nbc4ca33b9549 タイムスタンプ 00:00 前置き 01:18 簡単な操作・...
[Unity VFX] Shurikenで地面で消えていく火花を作るTutorial [Shuriken]
Переглядів 4,2 тис.4 роки тому
[Unity VFX] Shurikenで地面で消えていく火花を作るTutorial [Shuriken]
[Unity VFX] Shurikenで雷がバチバチッと走っていくTutorial [Shuriken Particle System]
Переглядів 7 тис.4 роки тому
[Unity VFX] Shurikenで雷がバチバチッと走っていくTutorial [Shuriken Particle System]
[Blender] Blenderでサクッと長袖シャツを作って、ウェイトを素体から転送してみよう [データ転送モディファイア]
Переглядів 13 тис.4 роки тому
[Blender] Blenderでサクッと長袖シャツを作って、ウェイトを素体から転送してみよう [データ転送モディファイア]
[Unity VFX] ShaderGraphを使って雷っぽいバリアエフェクトを作るTutorial [ShaderGraph,Shuriken]
Переглядів 7 тис.4 роки тому
[Unity VFX] ShaderGraphを使って雷っぽいバリアエフェクトを作るTutorial [ShaderGraph,Shuriken]
めっちゃ学びたいのに音質が悪すぎて何言ってるか分からない
@@ussako-t4g すみません！なるべく改善していきます
sankyou somuch! my friendo!
UIでシェーダーの勉強したかったのですごく助かります！！ 嬉しすぎて泣きそうです🥹
マザー2の戦闘背景っぽいものを作りたくてたどり着きました！素晴らしいです！ありがとうございます！ShaderGraphがどういうものなのかすぐに理解することが出来ました！
投稿主さんみたくSceneビューでテクスチャがスクロールしないのですが、どこか設定が抜けているのでしょうか？（Timeノードの数値設定はしています。）
ShaderGraph上でスクロールしており、Gameビュー上（カメラに映した状態）でもスクロールしているなら、Sceneビューの設定が異なっているかもしれません。「Always refresh unity」などで検索してみてください
@@nattuhan 解決しました！ありがとうございます！！
I do not understand Japanese but great video! I understood your workflow. Thankyou very much 🙌
UIもグラフィックもめちゃくちゃ可愛い。。。 こんなの作れるんだ、すごいな〜！憧れます！
@@coco-ii4gu ありがとうございます！Unityと blender、楽しいですよ🥰
とても有益な解説動画をありがとうございます。各ノードの解説や、ノードを繋いだ時の変化を丁寧に確認しながら学習することができました。わかりやすかったです。
お役に立って何よりです！
8:02 Normal from Texture に素材を読み込ませたらテクスチャとテクスチャの間に細い縦線が入ってしまいます…繋ぎ目を無くすにはどうすれば良いのでしょうか…？
似たような症状を解消した覚えがあります。試した覚えがあるのは ・Textureのimport設定からMipmapをオフにする（Generate Mipmaps） ・Textureのimport設定からインポート品質（Compression）を変えてみる あたりを確かめてみてください。それでもだめでしたらもしかしたらTexture自体のタイリングがうまくいっていないかもしれません🙇
I dont know if you can understand me, but, how did you achieve those graphics? I want to make some similar
By them, do you mean the background assets? This is one that I purchased from the Asset Store, but it is in the so-called “Stylized” style, and if you search on UA-cam, you will find tutorials using tools like Blender
Great video! Thank you for the explanations!!
When the video is so good you made me think I understand Japanese <3 , I like the distortion in the slash
Aunque no se japones, entendí perfecto jajaja. thanks! 😁
大感謝です！ 自分用 2:24:32 ボーン入れ 2:43:20 アニメーションの作り方
thanks man
Great!
現在マジカボクセルを使用しているのですがblenderとの互換性が微妙だと思っていたので 今回の動画を拝見させて頂いてキュービックの購入を検討しているのですが マジカボクセルで作成したモデルをキュービックにインポートする事は可能でしょうか？
マジカボクセルとqubicleはお互いにお互いの作業ファイルをインポートすることが可能です！
nice explanation I can understand by doing follow you, even I can't understand japanese 😂
thx!
mmm .... i need to learn japanese man
ピッタリ僕の必要の事でした、感謝します。ありがとう。
とんでもない素敵なチャンネルを見つかりました！！！！
感謝してもしきれないありがたい動画です!!
エフェクト関連の資料は少ないので勉強になりました。 参考にさせていただきます！
まだシェーダーグラフを触ったことがないのですが、とても分かりやすい解説をなされていて大変勉強になりました。
Thanks for the tutorial
unity初心者です。丁寧な解説ありがとうございます。早速動画のように進めていこうとしましたが [書類“ma-buru.shader”を開くデフォルトのアプリケーションが設定されていません。] と表示されshader graph を作成できません。shader graphには必要なアプリケーションがあるのでしょうか？
推察するに、“ma-buru.shader”が拡張子が".shader"になっているので、間違えてShaderGraphではなくコードで書く方のシェーダーを作成しており、コードの場合IDE（VisualStudioやRiderなど）で開こうとしますので、そのソフトがないよ〜と言われているのだと思います。改めて動画を 10:55 確認いただき、"ShaderGraph"を作成いただければと思います！（~~ Graphと書いてあります。ここの作成メニューはバージョンによって表記が頻繁に変わるので、"~~~Graph"と書かれたメニューを探してみてください。該当のメニューがない場合はUnityにURPがインストールされていない可能性がありますので、URPでUnityプロジェクトを作り直すことをおすすめいたします）
うーん...何が行われているのかw とりあえず今後使うであろうから再生リスト入り すごく分かりやすそうな感じでとてもいい教材です!
別にShaderGraphをもうすこし平易に解説した動画もございますのでよろしければそちらも合わせてご覧ください！
めっちゃわかりやすいのでばんばん動画欲しいです。
ボクセルって見た目軽そうですけど、 ボックスモデルの集まりなので実際は普通のモデルより重くなったりするのですね…
はい！ですが動画内で紹介しておりますQubicleというソフトは最適化しつつ書き出してくれるオプションもございますので、ボーンアニメーションでぐにゃぐにゃ動かさなければ一般的なモデルと比較しても軽くなる傾向はあると思います。あとテクスチャは総じて軽くなりやすいですね。
服のウエイトで悩んでいたので参考になりました！
すごいです！2dでも下が揺らめいた感じは作れるのでしょうか？可能でしたら作成動画お願いいたします。
原理としては同じなため、同じような実装で可能です。2DでいえばURPのサンプルとして制作された”Lost Crypt”というデモがあり、こちらの遺跡の中の水面はもうすこし面白いことをしております（遺跡の中に入ったら水面反射用のカメラが起動し、それをシェーダーで水面のように揺らめかせています）。Asset Storeで無料で入手できるため、こちらを見ていただくと2D Lightなどの使い方含めて勉強になるかなと思います。
@@nattuhan ご丁寧なご返答ありがとうございます‼︎ 勉強したいと思います。 あと、動画での説明される声のトーンがものすごく心地よいです😊
@@kizucrazy2867 ありがとうございます！！ そういえば公式のチュートリアルがあったなと思いだしたので貼っておきますね ua-cam.com/video/eD7LmXShYcs/v-deo.html
ここまで来ると作るの楽しそう どうやってUnityを勉強したか気になる
自分がUnityを触りだしたのは2020年の4月ごろで、その時は業務で触ることになってました。自分はその時点ではUnityはちょっと触ったことはありましたが素人同然でした。 その後3か月ほどのちにunity1weekに初めて参加して、個人製作を並行しはじめたあたりから単純にUnityに触る時間が爆増したのと、Unity Technologies Japanさんが大量に動画や配信をあげてくださっていたのでそれをひたすら見て勉強しました。 一番モチベーションを保てるのはやっぱりゲームジャムで、自分は短期間でガッと成長できたのでいろんなところでおすすめしております。
@@nattuhan 二年半でもこのくらいいけるようになるんですね！ 自分も受験が終わったら本格的にUnityを触ろうと思います。 アドバイスをくれてありがとうございました！
最近シェーダーグラフの勉強を始めた者です、 可能であればご回答お願いいたします。 Graphics の Render pipeline Asset に Universel Render pipeline Asset がないので 9:46の create → Rendering と進みたいのですが私のバージョンですと Rendering の項目がありません。 バージョンは Unity 2020.3.31f1 Personal になります。 やはり解説通りの同じバージョンで始めるのが解決方法になりますしょうか？ 他なにか原因あればご教授お願い致します。
こんにちは。URPパッケージがプロジェクトに入っていないことによるものかと思われます。 「Unity URP 導入」と検索していただき、PackageManagerからURPをインストールする記事を参照いただいてそれを実施していただいたのち、動画と同様の手順を踏んでみていただけますでしょうか？
@@nattuhan ご連絡頂きありがとうございます！ 丁寧なご説明に深い感謝です、上記ためしてみます。
@@ナカムラニシキ はい、バックグラウンドをお話ししますと、ShaderGraphという機能は（少なくとも2020.3では）SRPという描画の仕組みの上で提供されており、SRPにはURPとHDRPという二種類がございます（こちらの動画ではURPを利用しております）。ですので、URPパッケージを入れないと、URPの設定ファイルは出てきませんし、URPパッケージに内包されているShaderGraphも使えない…ということになります。
@@nattuhan 再度のご連絡と解説ありがとうございます。 おかげさまで問題は解決しまして、ようやくシェーダーグラフのノードを操作する画面まで来れました、嬉しいです。 Unityが常にアップデートするが故の問題というか面倒さなのでしょうか。 お盆の中のご飯はそのまま、おかずを入れ替えしているような気分になりました、変な例えですみません。 とにかく今まで面倒で触れなかったものがとうとう目の前に現れました。 不安もありますが、まずは nattuhanさんの動画を参考に進めてみようと思います。 エフェクトを進めるうえでnattuhanさんは恩人の一人です、本当にありがとうございます。
@@ナカムラニシキ とんでもございません〜 同じバージョンだけど描画の仕組みが違う、というのは今のUnityのわかりづらい点ですね。ゆくゆくはURPを皆使ってね、という話にはなっています。 どうか素敵なエフェクトを作ってください〜応援しております😎
面白かった！ためになります<m(__)m>
神？
丁寧に解説してくださり大変勉強になりました。ありがとうございます！
マジで助かります。
この人間の素材はどこで手に入れたのですか？
こちらは自作のモデルになります。
@@nattuhan 差し支えなければ、どのように人間のモデルを作ったのですか？
コリジョンにチェックを入れても地面との当たり判定が反応してくれませんでした、、どうすればいいんでしょうか？？
Collisionモジュールのトグルをオンにするだけでなく、Collisionモジュール内の"Type”を”World”に変更しております。
@@nattuhan ありがとうございます！出来ました！！
りんごむずすぎて諦めたわ
あきらめない気持ち!!!
ウエイトコピー大変参考になりました。 ありがとうこざいました。
参考になったようで良かったです！
Shaderを作る際、ノードの説明と計算の解説があり、とても分かりやすかったです。 他のチュートリアルは細かい解説まではしていないものが多いので本当にありがたいです。。。 次の動画も楽しみにしております！！
視聴いただきありがとうございます！ 自分の話し方が遅いというのもありますが、機能とかをいちいち説明していたらかなり長い動画になってしまって反省したのですが、そういっていただけるととてもありがたいです😭😭 丁寧な説明を心がけながらもっとみやすい動画をつくろうと思ってますのでよろしければ次の動画もみていただけると！嬉しいです！