Unityアセット　ProTexで楽々テクスチャ作成！


#はじめに
この記事は[Unity アセット真夏のアドベントカレンダー 2018 Summer! ](http://assetstore.info/eventandcontest/adventcalendar/eventandcontestadventcalendarasset-adventcalendar2019summer/)の 24 日目の記事です。

昨日は[ ooee オーエー＠個人ゲーム開発者](https://twitter.com/ooee81)さんの「Odin – Inspector and Serializerでマスターデータを作ろう！」でした。


Unityでゲームを作る際に大変な事の一つと言えば、**テクスチャ作成**だと思います。
ネットでフリーのテクスチャを探しても**イメージに合ったものが見つからなかったり**、自分でテクスチャを作ろうにも、**それなりに技術はいるし、時間がかかる．．．**
そんな悩みを解決してくれるのが、この記事で紹介するProTexという無料アセットです。

[ProTex](https://assetstore.unity.com/packages/tools/utilities/protex-147852?utm_source=jppt&utm_medium=20190824)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/1e7c9b60-6147-7ecb-6967-8d64951d94dc.png)



#ProTexとは
ProTexは、UnityのWindow上で**ノードベース**でTextureを作るためのアセットです。
主な利点は二つあります。
・質の良いテクスチャをノードベースで、かなり簡単に作れる。
・Textureあらかじめ生成せずに、実行時に生成するので、**プロジェクトの軽量化**に繋がる。（NormalやEmitionのマップを保存する必要がない）

#1. アセットのインポート
まず、アセットをインポートします。
全てインポートしてください。
無料アセットです。
#2. ProTexアセットの作成
下の写真のように、右クリック→Create→ProTex→ProTexTextureをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/d42651fd-3db4-ac36-0f03-a91a2f466c2c.png)

作ったアセットを開くと下のようなWindowが出てくるはずです。
Inspectorの説明はもう一つの写真の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/c8788246-1be9-f24c-d7e3-82e03ba86ec0.png)
![20190819_145604271_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/7e3f0b6c-3666-be6c-e532-6cbb21ea6bb3.png)


#3. ノードの説明
新しく作った**Windowの中で右クリック**すると、ノードを選んで作ることが出来ます。
それぞれのノードが持つ効果は、**言葉の意味の通り**なのですが、分かりにくいノードの使い方は説明しておこうと思います。
また、ノードの効果はアセット付属のマニュアル（英語）の写真をみれば、だいたい分かると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/9767be1a-c1b0-fd7e-96d9-c055ec8a6928.png)
ノードにはそれぞれの**input**、**out**があり、それらをつないで、**Outputノードにつなげる**事でテクスチャを作っていきます。
また、それぞれノードは詳細が設定できます。
**しかし、そこで赤いApply Changesボタンを押さないと設定の変更が反映されないので、注意してください。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/8866bf86-bc37-9bbc-088e-af8bf6d9b377.png)


####Uniform Color　　　　Colorize　　
単色をoutします。　　　  　後ほど説明。
####Blur　　　　　　Grayscale
ぼかします。   　　　カラーを白黒にします。   
####ProTex Texture　
Examplesのテクスチャをoutします。　　
####interpolate　　
AとBの中間値をoutします。
####High pass　　　　Low  pass
明るい部分以外黒に  　暗い部分以外黒に　
####offset
X，Y座標を移動させます。
#4. 基本的なテクスチャの作り方
それでは、基本的なテクスチャの作り方を説明します。
流れとしては下のようになります。

###白で形を作る
＊Alphaを**Operation**にする事で透過テクスチャを作れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/af12a0e7-bf83-512a-a1bf-3b11a1874547.png)
###色を塗る
基本は**Colorizeノード**を使います。
Colorizeノードの使い方をは下の通りです。
![20190819_150224146_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/82c08e0c-b7db-c19d-8560-d8c352053796.png)


###背景などを整える
ここで**ProTex Textureノード**を使うと楽だと思います。
このアセットにはたくさんのデモテクスチャがあって、それらをこのノードで、使うことが出来ます。
最終的にノードを**outputノード**につなげることで、プレビューに反映されます。
適当に整えたのが下の写真です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/d590813d-6bf8-7fb7-eb53-4aeee6d4de67.png)



#5. 作ったテクスチャの使用方法
では、最後に作ったテクスチャの使用方法を説明していきます。
２つの使い方があります。

一つは**inspectorからボタンをおして、生成する**物です。

もう一つは、**Corponentで実行時に生成**して使います。
Materialをつけたオブジェクトに**Pro Tex Material Binder**を入れるだけで、Materialにテクスチャが入っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/bdb6ffdd-02c3-f9b0-2f44-ef4825baba34.png)

#最後に
長くなってすみませんでした。
ペイントソフトが使えなくても、簡単にテクスチャを作れるのは、本当に便利です。
少し慣れる必要があると思いますが、使いやすいので、ぜひ試してみてください。

明日は[さとやん](https://panzersoft.com/)さんの「Animancerで楽々アニメーションプログラミング」です。