Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【アセット紹介】Color Studioでカラーパレットを作成しよう【Unity】

今回はアセットの紹介をしていきます。
紹介するのはColor Studio。
カラーパレットを作成できるエディタ拡張アセットです。

有料アセットですが、現在無料で入手できる特別キャンペーンが開催中!
終了しました

購入画面でクーポンコード「KRONNECT2021」を入力すると100%OFFです!

 

 

お得なセール情報!

現在アセットストアではパブリッシャー丸ごとセールが開催中!終了しました
Beautifyで有名なアセットパブリッシャーKronnectの全アセットが50%OFF!
詳細とアセットの一覧はこちらのバナーからどうぞ

f:id:Raspberly:20210329120820p:plain

どんなアセット?

カラーパレットを作成できるエディタ拡張アセットです。
ピクセルアートを作成できるツールと、オブジェクトやスプライトの色を変更できるコンポーネントも付属しています。

f:id:Raspberly:20210329195827p:plain

COLOR STUDIOは、素晴らしいカラーパレットを作成し、オブジェクト、スプライト、シーンを再着色することができるエディタ拡張機能です。
エディタやランタイムで簡単に作成できます。すべてのレンダリングパイプラインに対応しています。
インタラクティブなカラーホイールエディタと、カラーパレットをLUTとしてエクスポートするためのツール一式が付属しています。
また、カラーパレットをLUTとしてエクスポートしたり、既存のテクスチャやオブジェクトマテリアルの特定の色を変換することもできます。

パレットツールPalette Studioと、ピクセル描画ツールPixel Painterの2つが入っています。

 

Palette StudioはUnity標準のカラーパレットよりも高機能なパレットツールです。

f:id:Raspberly:20210329121605p:plain

 

 

Pixel PainterはTextureやSpriteをすぐに作成・編集できるツールです。

f:id:Raspberly:20210329191314p:plain

なにこれ

 

 

 

開発環境

Unity2020.3.0f1

 

 

 

クイックスタートと機能紹介

Color StudioはWindow/Color Studioから2つのツールを起動できます。

f:id:Raspberly:20210329115934p:plain

 

Palette Studio

カラーパレットを作成するツールです。タブごとに機能が分かれています。

f:id:Raspberly:20210329181457p:plain

Color Wheel

あらかじめ用意された配色パターンを使って簡単にパレットを作成できます。
ホイール上でCtr+左クリックでドットが押されパレットに色が追加されます。ドットをダブルクリックすると削除。

f:id:Raspberly:20210329121605p:plain

ホイールの下側には現在のパレットが表示されます。

Palette

現在のパレットが表示されます。色相数、濃淡、明るさ、色温度ケルビン)など細かい調整が行えます。
ここからパレットの保存、読み込み、エクスポートなどができます。
パレットの保存先はAssets/Color Studio/Palettesです。

f:id:Raspberly:20210329191746p:plain

Tools

オブジェクトやテクスチャにパレットの色を適応します。
オブジェクトの場合、対象のRendererにRecolorコンポーネントをアタッチする必要があります。
詳細は後述。

f:id:Raspberly:20210329191808p:plain

Compact View

パレットを小さく表示します。
他のタブと一緒にパレットを表示したい時用。

f:id:Raspberly:20210329191825p:plain

Project Palettes

プロジェクトに含まれているパレットを表示、管理します。
パレットの検索、複製、削除ができます。

f:id:Raspberly:20210329192638p:plain

パレットの名前を押すと即座にそのパレットが反映されます。

 

 

 

Pixel Painter

ピクセルアートを作成したり、既存のテクスチャやスプライトを編集できるツールです。

f:id:Raspberly:20210329191314p:plain

ピクセルの作成

新規作成する場合は最初にピクセルアートのグリッドサイズを選びます。4~64までの5種類です。

f:id:Raspberly:20210329193019p:plain
既存のものを編集する場合はSelectから選択します。

f:id:Raspberly:20210329193054p:plain

ブラシのカラー、大きさ、形状の選択

Brush Colorの左側を押すとPalette Studioが自動的に立ち上がるため、ここで色を選択。
Brush WidthとShapeではブラシの大きさと形状が選べます。

f:id:Raspberly:20210329193157p:plain

 

ツールボックス

画面左側のBrushesはペンや消しゴム、塗りつぶしなどの各種ツール一覧になっています。

f:id:Raspberly:20210329193234p:plain

Canvas

Canvasは描いたピクセルアート全体の削除や移動ができます

f:id:Raspberly:20210329193254p:plain

Mirror

左右や上下対称に描けるようになります

f:id:Raspberly:20210329193330p:plain

ピクセルアートの保存

フロッピーディスクのボタンを押すと保存されます。
保存先はAssets/Color Studio/Textureです。

f:id:Raspberly:20210329193419p:plain

 

 

 

 

 

実際に試してみる

Palette Studioでカラーパレットを作成し、オブジェクトに適応する所までやってみます。
今回はユニティちゃんのカチューシャにカラーパレットを適応し色を変えてみます。

f:id:Raspberly:20210329231850p:plain

 

まずはカラーパレットを作成します。
Window/Color Studio/Palette ManagerからPalette Studioを開きます。

f:id:Raspberly:20210329115934p:plain

 

カラーパターンをGradientにし、ベースの色を青にします。
これだけで青を基準としたグラデュエーションのカラーパレットが簡単に作成できます。

f:id:Raspberly:20210329231309p:plain


作成したカラーパレットを保存します。
paletteタブに移動し、新規保存したいのでSave As Newボタンを押します。

f:id:Raspberly:20210329231711p:plain

保存されたカラーパレットはAssets/Color Studio/Palettesフォルダに格納されます。

f:id:Raspberly:20210329231944p:plain



作成したカラーパレットをカチューシャに適応します。
unitychan/mesh_root/hairbandを選びます。

f:id:Raspberly:20210329232057p:plain

 

Recolorコンポーネントをアタッチします。
このコンポーネントは何らかのRendererがアタッチされているオブジェクトでないと動作しません。

f:id:Raspberly:20210329233318p:plain

ここにPaletteに先ほど作成したカラーパレットを紐づけます。

f:id:Raspberly:20210329233636p:plain



これで終わりです。
外部ツールを使わずUnityだけでオブジェクトの色を調整できました。それも数回クリックするだけです。

f:id:Raspberly:20210329233904p:plain

Palette Studioからカラーパレットを編集することで簡単に調整できます。
(そのたびにカラーパレットの保存をする必要があります)

 

 

まとめ

・Palette Studioを使うと簡単にカラーパレットを作成できる
・Pixel Painterを使うとピクセルアートをテクスチャやスプライト用に作成できる
・Recolorコンポーネントを使うと、オブジェクトやスプライトの色をランタイムに変更できる

冒頭の通り、今なら無料で購入できるので使う予定がない方も今すぐに購入処理をしておきましょう。

 

 

 

参考資料

公式ビデオです

www.youtube.com

 

www.youtube.com

 

 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。