クロの制作日記

クロの制作日記

田舎の大学生がUnityとか機械学習関連の制作物をひたすらアップします。ブログで紹介したコード一覧https://github.com/kuroshum/blog_code

Unityで選択されているボタンのテキストを点滅 + 簡単なエフェクトを追加

前置き

前回の記事でテキストの点滅を実装しました。
kurora-shumpei.hatenablog.com
この記事では単純に、
 ゲームを再生したら画面が遷移するまで点滅し続ける
だけでした。

今回はこの記事の続きで、
 ① 選択されているボタンのテキストの点滅
 ② 簡単なエフェクトを追加

を実装していきます。

結果はこんな感じになります。
f:id:kurora-shumpei:20180901161629g:plain




準備

今回も必要な機能はTextMeshProだけです。

前回の記事でTextMeshProの使い方を軽く説明しましたので、今回は省略します。

データとして用意してほしいのはボタンの上下にあるエフェクト(と言って良いのかわからないですが...)です。


f:id:kurora-shumpei:20180901162133p:plain


ボタンが選択状態のときに表示するようにしているので、これ ↑ を使うか、自分で用意してください。

それと、親子関係の設定です。
以下の画像のように設定してください。
f:id:kurora-shumpei:20180901164512p:plain

設定の方法は
 ① UIからボタンを作成
 ② ボタンの子要素のテキストを消去し、TextMeshProテキストを追加
 ③ ボタンの子要素として、上下のボタンエフェクト(エフェクトの名前は固定)を追加
これをTOP・SELECT・RETRYのすべてに行います。

実装

実装方法は、
 ① 最初に選択状態にするボタンを設定。
  →FirstSelectButton.cs
 ② どのボタンが選択状態であるかを取得し、TextHilight.csを適用 + エフェクト追加
  →ButtonHilight.cs
 ③ ボタンを点滅させる
  →TextHilight.cs
という感じです。

以下がそれらのスクリプトです。

リポジトリにスター付けてくれたら笑顔になります。

FirstSelectButton.cs

github.com

このスクリプトCanvasに追加します。

ButtonHilight.cs

github.com

このスクリプトCanvasに追加してください。

前回も載せましたが、一応今回も載せておきます。
github.com

このスクリプトはボタンのTextMeshProテキストに追加します。

FirstSelectButton.csのインスペクターのFirstSelectにはTOPボタンを追加しておいてください。




最後に

レベルの高いUIとは言えないかもしれませんが、ただ単にボタンを配置するだけよりは良いものになったのではないかと思います。

恐らくシェーダーとかをいじればもっと良くなると思うのですが、勉強する時間もあまりなかったので、できるだけ簡単に実装できるようにしたんで、今後もちょこちょこ使ったり改良したりしようかな。