はじめに
ゲームの見栄えをイラスト風に変えられるおすすめアセットを紹介します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_683/https://umistudioblog.com/wp-content/uploads/2023/02/e0ff0d9c-ba6a-48c8-bd9d-d8432124db86-1024x683.webp)
Flat Kit: Toon Shading and Waterは、Unityアセットストアで入手可能なアセットパッケージの1つで、カートゥーン調のグラフィックを作成するために設計されています。このアセットには、フラットな照明と影の効果を追加するための独自のシェーディングシステムが含まれており、アニメーションやゲーム開発に適しています。
様々な材質、テクスチャ、背景などのアセットが含まれており、カートゥーン調の2Dおよび3Dアート作品の制作に役立ちます。また、水の表現に関しても高品質であり、水の表面の波紋、反射、透過などを自然に表現することができます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_576/https://umistudioblog.com/wp-content/uploads/2023/02/82ffcd14-e435-4393-8357-ae981777c6ce-1024x576.webp)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/http://umistudioblog.com/wp-content/uploads/2023/01/cropped-アイコン候補.png)
水は波の動きをつけることもできるよ!
Flat Kit: Toon Shading and Waterは、ビジュアルノベル、アドベンチャーゲーム、シミュレーションゲーム、アクションゲーム、パズルゲームなど、様々なゲームジャンルに適しています。さらに、このアセットは、シェーディングシステムをカスタマイズして独自のスタイルを作成することができ、非常に柔軟性が高いため、開発者にとって非常に便利なツールです。
準備
例として、こちらのアセットの見た目を変えてみます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_576/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-13.21.27-1024x576.jpg)
導入方法
アセットストアからアセットを購入します。
アセットのインポート
Window > Package Managerを開き、Packages: My Assetsを選択して、Flat Kitをインポートします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_767/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-16-23.18.11-1024x767.jpg)
現在のレンダーパイプライン設定(ビルトイン、またはURP)に合わせて選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_408,h_433/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-16-23.21.27.png)
Projectビューから、Assets > FlatKitを選択し、インポートしたレンダーパイプラインをダブルクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_563,h_114/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-17-0.23.40.png)
ウィンドウが出てきたらインポートをクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_404,h_429/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-12.30.26.jpg)
シェーダーの設定(URPの場合のみ)
URPの場合は、シェーダー設定が必要です。Edit > Project Settingsを開きます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_216,h_579/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-12.33.13-382x1024.jpg)
GraphicsのScriptable Render Pipeline Settingsに、インポートしたファイルを設定します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_737,h_264/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-12.40.30-1024x367.png)
Quality > Renderingのところも同様に設定します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_559/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-12.42.32-1024x559.jpg)
使い方
変更したいマテリアルを選択し、インスペクターのShaderからFlatKitを選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_440,h_388/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-12.55.04.png)
FlatKitの中身は色々ありますが、今回はアウトライン(輪郭)を表示できるように、Stylized Surface With Outlineを選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_463,h_231/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-13.04.10.png)
これで見た目が変わりました。変更前と変更後の様子です。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_623/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-13.06.35-1024x623.jpg)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_623/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-13.06.46-1024x623.jpg)
かなり印象が変わりました!
また、アウトラインを表示することができます。インスペクターのOutline Widthを大きくし、Outline Colorで輪郭の色を設定できます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_335,h_483/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-13.17.49-710x1024.png)
設定してみるとこんな感じになりました。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_623/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-18-13.15.25-1024x623.jpg)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/http://umistudioblog.com/wp-content/uploads/2023/01/cropped-アイコン候補.png)
イラストっぽい見た目になったね!
おわりに
トゥーンシェーダーアセットの紹介でした!
かなり雰囲気が変わるので、ぜひ使ってみてください。
私の場合は、作ったゲームがいかにも3Dモデルな見た目をしていて、どうにかしたいときに役立ちました。