Unity2Dでクリックしたスプライトの色を変更する、カラーフィルターをかける方法/SpriteRenderer.colorの使い方

color IT

スプライトをクリックすると色を変更する、あるいはスプライト以外をクリックすると色が元に戻る、といった操作を、ここではSpriteRendererコンポーネントのcolorプロパティを変更して実装しています。
元の色に対してカラーフィルターをかけるイメージです。

スポンサーリンク

成果物

クリックしたオブジェクトの色を変更します。

クリックしたスプライトの色を変更

スプライトの色を変更
SpriteRenderer.color = 色;
※色はColor.redなどの定形色か、new Color(RGBA)で色を指定
なんとなく脱出ゲーム風の画面を作ってみました。この「カギ」をクリックした時に、色を変更させてみたいと思います。
オブジェクトのSpriteRendererにある「色」を確認してみます。初期値ではRGBでそれぞれ255の「白」が割り当てられています。(Aは透明度
色味をいじってカラーフィルターをかけ、初期状態で選んでない感を出してみます。
スクリプトをカギにアタッチし、
カギのレイヤーの順序を上げて背景より前に設置し、コライダーを設置しておきます。
スクリプトを開き、OnMouseDown(クリック時に実行)でさっきのSpriteRendererの「色」を白に戻す命令を書いてみます。
コードで言うと、this.GetComponent<SpriteRenderer>().color = Color.white;となります。whiteは定形色で、このように文字色で指定するとRGBが255の「白」の意味になります。
この状態で実行すると、カギをクリックした時にカギの色が変更されます。

自分以外をクリックした時に色を元に戻す

アイテム増やしてみました。
「選択しているアイテム」感を出すべく、クリックしたオブジェクトはカラーフィルターを解除して、同時にもう片方のオブジェクトにフィルターをかけるスクリプトを組んでみたいと思います。
コード内でpublic GameObject other;を宣言し、
カギのインスペクタで、変数otherに追加したメモをセットします。
メモにも同じスクリプトをアタッチして、
こっちではotherにカギをセットします。
これでカギにとってはメモがother、メモにとってはカギがotherという状態になります。
さっきの「選択されてない時の色」を参照し、
thisの色を変更するスクリプトの下に、other.GetComponent<SpriteRenderer>().color = new Color(207, 255, 151, 255);を追加します。本来これでOKですが、
実はこのスクリプト、2019だとうまく動きません。なぜか二番目の数字(RGBのG)に0以外の数値を指定すると色変更されないというバグがあるようで、
その証拠にGだけ0にした同じコードを実行すれば、
ちゃんと動きます。
別に紫でもいいんですが、一応元の色にこだわりたいと思います。参照しているカギの色の表示をRGBの255から0~1fに変更し、
表示される数字をコピペして、
最後にfを付けて、new Color(0.8124341f, 1f, 0.5896226f, 1f);という表記にします。
色としては同じです。
これを実行すると、クリックしたオブジェクトはカラーフィルターが外れ、選択されていないオブジェクトはフィルターがかかることが確認できます。
(ただ別問題として、フィルターかかってるほうが選択してる感ある感じもしないでもないです)
//Unity C#
  public GameObject other;
   void OnMouseDown()
    {
    //アタッチしたオブジェクトはカラーフィルターを解除
        this.GetComponent<SpriteRenderer>().color = Color.white;
    //他のオブジェクトはカラーフィルターを設定
        other.GetComponent<SpriteRenderer>().color = new Color(0.8124341f, 1f, 0.5896226f, 1f);
    }

※ちなみに完成品では結局別の色にしてます。

やりたいことから逆引きするUNITYの使い方まとめ
Unityをやりたいことから学習していけるよう、機能・用途別にまとめたページです。C#の命令別の逆引きは現時点で作っていません。2019の時期に書き始めているので、それより前のバージョンについては言及しません。

コメント

モバイルバージョンを終了