【Unity】シェーダーを使ってスプライト画像の色を変更する方法

2018.05.31 自習室 0

ここでは下の動画のように、1枚のスプライト画像から色違いのキャラを作成する、という処理の実装方法を説明します。

なお、この記事は以下の記事で紹介されているものの実装方法を詳しく説明したものとなっています。
やり方が間違っていたのかも知れませんが、こちらの記事のままだとエラーが出てうまく出来なかったので別でまとめさせていただいています。(スクリプトをアタッチするとエラーが出る)

画像の色相を変更する

また、この記事で紹介している方法を使って敵を量産した《SHOGI SHOOTING》というゲームをiOS/Androidでリリースしてます。もしよかったらプレイしてみてください。

環境

  • Unity 2017.3.1f1

このページの構成

ポイント
スプライト画像の表示
シェーダーの作成
マテリアルの作成
色の変更

ポイント

手順としては以下のとおりです。
① 色を変えたいスプライト画像を表示する。
② 色を変えるためのシェーダーを作成する。
③ ②で作成したシェーダーを適用するマテリアルを作成する。
④ ③で作成したマテリアルをスプライト画像にアタッチする。
⑤ マテリアルの値を変更して色を変える。

スプライト画像の表示

始めに、色変更したいスプライト画像をシーンビューにドラッグ&ドロップして表示させておいてください。

シェーダーの作成

「Project」から「Create」-「Shader」-「Standard Surface Shader」を選択してシェーダーを作成します。名前はなんでも良いのですが、ここでは元の記事と合わせて”HsvUI”という名前にしています。

作成した”HsvUI”をダブルクリックして”HsvUI.shader”を開き、以下のスクリプトをペタッと全部貼り付けてください。

シェーダーの作成は以上で終了です。
記事の冒頭でも書きましたが、こちらのスクリプトは以下の記事のものをそのまま使用させていただいています。ありがとうございます。

画像の色相を変更する

マテリアルの作成

次にマテリアルを作成します。「Project」から「Create」-「Material」を選択してください。

これも名前はなんでも良いのですが、ここでは”M_ChangeColor”という名前にしています。

このマテリアルに先ほど作成したシェーダーを適用します。
作成したマテリアルを選択し、「inspector」から「Shader」-「Custom」-「HsvUI」を選択してください。(HsvUIのところはシェーダー作成時につけた名前が表示されるので、違う名称になっているかも知れません)

最後に、スプライトにこのマテリアルを適用します。
スプライトを選択し、「inspector」から「Sprite Renderer」-「Material」に先ほど作成したマテリアルをドラッグ&ドロップしてください。

以上で準備は完了です!

色の変更

スプライトの「inspector」から「M_ChangeColor」の「Hue」「Saturation」「Value」あたりの値を変えてみてください。スプライト画像の色が変更されると思います。(Hueは色相、Saturationは彩度、Valueは明度の値です)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です