Unity コルーチンとカラーでレインボーカラー

派手な演出で使えそうな小技でコルーチンを使い、Imageをレインボーにしてみたいと思います。
非常に簡単に虹色の発光ができますのでゲームで華やかな演出を加えたい時に使ってみて下さい。

ちなみにこの小技を使って作ったゲームはこちらになります。
ゲージが一定まで溜まった時や、クリア時の演出で使ってます。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう!

人気のUnity講座はこちら

Udemy講座

発光させたいImageを設置

では最初にHierarchyに発光させたいImageを設置しましょう。
RainbowImageとしました。
HierarchyにImage配置
InspectorからPosX,PosYを0,0にして中央に持ってきておきましょう。

発光処理のスクリプト作成

次に発光の処理をスクリプトに書いて行きます。
RainbowというC#スクリプトを作成し、RainbowImageにアタッチします。

スクリプトの中身も非常にシンプルです。
具体的にはこのようになります。

見ていただければわかるようにやっていることは非常にシンプルです。
コルーチンの中のColor.HSVToRGB(Time.time % 1, 1, 1);について少しだけ触れておきます。

Color.HSVToRGB

普段色を変える場合はnew Color(値,値,値)としていることが多いと思います。
これはRGBという色の表現法です。
R=赤、G=緑、B=青の3つの色を足したり引いたりして表現しています。

今回はそれとは異なりHSVという表現法を使っています。
H=色相(色を特徴づける色み)、S=彩度(色の鮮やかさ)、V=明度(色の明るさ)となっています。

RainbowImageのInspectorを見てみましょう。
普段Colorを選択するとRGB(A)になっています。
カラーピッカーのRGBA
これをHSVに変更してみます。するとこのようになります。
カラーピッカーのHSV
Hの部分に色んな色がありますね。
これを色相スケールと呼ぶそうです。
私は色相に関してはあまり詳しく無いのでリンクを貼っておきます。興味のある方は見てみて下さい。

この値を変化させれば虹色に発光します。
実際にやってみましょう。
HSVのパラメタ変更
RGBの値を使ってレインボーにする場合ですとR,G,Bそれぞれの値を変化させる必要がありますが、HSVですとHの値だけを変化させれば良いので簡単です。

HSVToRGB()関数の引数はH,S,Vと3つあり、それぞれfloatで0から1までの値となります。
Color.HSVToRGB(Time.time % 1, 1, 1)としておくことでHの値を開始からの時間を1で割ったあまりにすることで0から1未満のfloatの値を取得しHの値を変化させ、HSVの値からRGBの色を作成しRainbowImageの色にしています。

詳しくはUnityの公式リンクを載せておきます。

では実際にRainbowスクリプトをアタッチした状態で再生してみましょう。
レインボーカラー
無事にレインボーカラーになりました。
このまま光らせていてもいいのですが、せっかくならレインボーを止める機能も実装したいと思います。

Buttonを使って発光を止める

発光を止めるにはコルーチンを止めれば良いです。
今回はRainbowImageにButtonコンポーネントを付けてクリックで発光のオンオフを実装してみたいと思います。

Rainbowの中身をこのように変えてました。

コルーチンの止め方は今回はコルーチン型の変数に代入してそれをStopCoroutine()関数で止める方法を使ってみました。
またRainbowImageにはStart時にコードからButtonコンポーネントを追加してクリックに_toggleRainbow()という関数を登録してあります。

発光のオンオフ
このような感じでクリックによって発光のオンオフが切り替えれるようになりました。

なかなか使い所は限られるかもですが、画像を虹色に発光させる方法でした。

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい?」
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう!

Udemy

Udemy
特徴:教材動画買い切り型
レッスン方法:動画教材/Q&Aで質問
習得スキル:教材動画によって異なる
コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。 また頻繁にセールを開催していますのでゲーム開発講座が1500円~で購入することも可能です。
ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

テックアカデミー
特徴:現役エンジニア伴走型レッスン
レッスン方法:チャット(週2回)/テキストチャット/課題レビュー
習得スキル:オリジナルゲームアプリの作成
コース概要: 途中で挫折しないためにメンター(相談者)が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。
テックアカデミー 詳細

テックスタジアム

テックスタジアム
特徴:ゲーム開発の為のオンラインスクール
レッスン方法:動画教材,Slackでの質問(24時間)
習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等
コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
テックスタジアム 詳細

デジハリONLINE

デジハリONLINE
特徴:動画カリキュラム型レッスン
レッスン方法:動画講座/Slack/予約制Zoom相談
習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム
コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。
デジハリONLINE 詳細

関連記事

最後までご覧頂いてありがとうございました。

セール中!
ノンフィールドRPG

基礎からリリースまで!

オリジナルRPGを作ってストアに公開しよう!