この記事を三行にまとめると
「UI → Button」で作成します今回は色の設定についてのみ
だいぶ短いです（錯覚）
今日はボタンオブジェクトを使ってみましょう。ボタンオブジェクトを使わないとボタンが実装できないかと言われるとそんなことはなくて、画像オブジェクトにクリックイベントをつけてもボタンとして扱うことはできますが、使い方を知っておいて損することはないので、さささっと見ていきましょう。
動画はこちらです。
ボタンを作成すると子オブジェクトにテキストがくっついてきます。不要なら削除できます。画像をボタンの中に入れたければ、テキストオブジェクトを削除して代わりに画像オブジェクトを作成すればオッケーです。
ボタン自身には画像オブエジェクトと同じようにImageコンポーネントがついているので、画像を設定したり色を調整できます。
ちなみに画像オブジェクトの時は特に説明しませんでしたが、Imageコンポーネントで使用できる画像には自分で用意した画像の他にもいくつかデフォルトで用意されているものがあります。その中にはボタンに使える画像もあるので、自分で用意するのがめんどいって人はデフォルトの画像を使うと良いでしょう。本作も「InputFieldBackground」という画像を使っています。
一番上の「Interactable」ってのはこのボタンが有効かどうかの設定です。チェックがついてると有効ではずれると無効になります。無効の場合はクリックもできないし、カーソルが上に乗っても反応しなくなります。
「Transition」はボタンの状態変化のモードに関する設定です。「Color Tint」はマウスオーバーやクリック時に色が変化する設定です。「Sprite Swap」にするとマウスオーバーやクリック時に画像を変更する設定に変わります。「Animation」だとアニメーションを設定できます。凝ったモーションを実装したい場合はAnimationを使うと良いかもしれないのですが、僕はまだ使ったことがないので詳細な説明はできません。すんまそん。今回は色の設定についてのみお話します。
「Target Graphic」は色を変化させたいボタンオブジェクトをセットします。あまりやらない気もしますが、マウスオーバーやクリックで別のボタンの色を変化させたい時はここに違うボタンオブジェクトをドラッグ&ドロップすればオーケーです。まあ基本は自分自身（デフォルトのまま）で良いでしょう。
「Normal Color」は通常時の色です。「Highlighted Color」はカーソルが上に乗った時に変化する色で「Pressed Color」はボタンを押している間の色になります。「Disabled Color」はボタンが無効の時、Interactableのチェックがはずれている時の色です。
その下の「Color Multiplier」ってのは色の明るさに関する設定らしいのですが、正直あまりよく分からねっす。白みたいな明るい色だと設定してもほぼ意味ないとかいう噂なのでここは無視でいきます。
「Fade Duration」は色が変化するまでの時間です。単位は秒。デフォルトだと0.1となっていると思いますが、これはカーソルが乗った時やボタンを押した時に0.1秒でHighlighted ColorやPressed Colorに変化するという意味になります。
あとボタンオブジェクトは最初からクリックイベントがくっついています。自分でEvent Triggerのコンポーネントを追加しなくてもいい。イベントの設定方法もEvent TriggerのPointer Clickと同じです。
実際にボタンの色がどのように変化するかは動画を見てもらえればと思います。3:47あたりからです。
やっぱり今日はあまり話すことがなかったですね。だいぶ短いです（錯覚）
動画ではボタンをどのようにパスワード画面に配置しているかも紹介してますが、ボタンオブジェクトの使い方に関する内容ではないので記事の方では改めて説明はしません。
それからこれも動画で言っていますが、同じパーツをたくさん生成するなら「Prefab」という機能が便利らしいです。ただ僕自身がまだ上手く使いこなせていないせいもあって、実際の使い方についての詳細な説明はできません。申し訳ねえっす。まあPrefabを使わなくても脱出ゲームは作れるから大丈夫ということで、ここは一つお許しくだせえ。
次回からは各種パスワードを作っていきます。パスワードはかなりいろんなパターンがあると思うので、それら全ての実装方法を紹介することはできませんが、一般的によく使われていて本作でも使っているものをいくつか紹介していきますので、何かの足しにしてもらえればと思います。
それでは次回もよろしくお願いしゅゔぁるつしると。
本シリーズの記事の一覧はこちら
Unityで簡単な2D脱出ゲームを作ってウェブサイトで公開してみよう 〜エピローグ〜
動画はこちらです。
オブジェクトの作成
ボタンオブジェクトも画像やテキストと同じくUI関連のオブジェクトなので「UI → Button」で作成します。ボタンを作成すると子オブジェクトにテキストがくっついてきます。不要なら削除できます。画像をボタンの中に入れたければ、テキストオブジェクトを削除して代わりに画像オブジェクトを作成すればオッケーです。
ボタン自身には画像オブエジェクトと同じようにImageコンポーネントがついているので、画像を設定したり色を調整できます。
ちなみに画像オブジェクトの時は特に説明しませんでしたが、Imageコンポーネントで使用できる画像には自分で用意した画像の他にもいくつかデフォルトで用意されているものがあります。その中にはボタンに使える画像もあるので、自分で用意するのがめんどいって人はデフォルトの画像を使うと良いでしょう。本作も「InputFieldBackground」という画像を使っています。
ボタンの設定
ボタンの設定に関するコンポーネントはこんな感じです。一番上の「Interactable」ってのはこのボタンが有効かどうかの設定です。チェックがついてると有効ではずれると無効になります。無効の場合はクリックもできないし、カーソルが上に乗っても反応しなくなります。
「Transition」はボタンの状態変化のモードに関する設定です。「Color Tint」はマウスオーバーやクリック時に色が変化する設定です。「Sprite Swap」にするとマウスオーバーやクリック時に画像を変更する設定に変わります。「Animation」だとアニメーションを設定できます。凝ったモーションを実装したい場合はAnimationを使うと良いかもしれないのですが、僕はまだ使ったことがないので詳細な説明はできません。すんまそん。今回は色の設定についてのみお話します。
「Target Graphic」は色を変化させたいボタンオブジェクトをセットします。あまりやらない気もしますが、マウスオーバーやクリックで別のボタンの色を変化させたい時はここに違うボタンオブジェクトをドラッグ&ドロップすればオーケーです。まあ基本は自分自身（デフォルトのまま）で良いでしょう。
「Normal Color」は通常時の色です。「Highlighted Color」はカーソルが上に乗った時に変化する色で「Pressed Color」はボタンを押している間の色になります。「Disabled Color」はボタンが無効の時、Interactableのチェックがはずれている時の色です。
その下の「Color Multiplier」ってのは色の明るさに関する設定らしいのですが、正直あまりよく分からねっす。白みたいな明るい色だと設定してもほぼ意味ないとかいう噂なのでここは無視でいきます。
「Fade Duration」は色が変化するまでの時間です。単位は秒。デフォルトだと0.1となっていると思いますが、これはカーソルが乗った時やボタンを押した時に0.1秒でHighlighted ColorやPressed Colorに変化するという意味になります。
あとボタンオブジェクトは最初からクリックイベントがくっついています。自分でEvent Triggerのコンポーネントを追加しなくてもいい。イベントの設定方法もEvent TriggerのPointer Clickと同じです。
実際にボタンの色がどのように変化するかは動画を見てもらえればと思います。3:47あたりからです。
やっぱり今日はあまり話すことがなかったですね。だいぶ短いです（錯覚）
動画ではボタンをどのようにパスワード画面に配置しているかも紹介してますが、ボタンオブジェクトの使い方に関する内容ではないので記事の方では改めて説明はしません。
それからこれも動画で言っていますが、同じパーツをたくさん生成するなら「Prefab」という機能が便利らしいです。ただ僕自身がまだ上手く使いこなせていないせいもあって、実際の使い方についての詳細な説明はできません。申し訳ねえっす。まあPrefabを使わなくても脱出ゲームは作れるから大丈夫ということで、ここは一つお許しくだせえ。
次回からは各種パスワードを作っていきます。パスワードはかなりいろんなパターンがあると思うので、それら全ての実装方法を紹介することはできませんが、一般的によく使われていて本作でも使っているものをいくつか紹介していきますので、何かの足しにしてもらえればと思います。
それでは次回もよろしくお願いしゅゔぁるつしると。
本シリーズの記事の一覧はこちら
Unityで簡単な2D脱出ゲームを作ってウェブサイトで公開してみよう 〜エピローグ〜
