テキストと画像のボタン

*このコンテンツは、ベータ版のAI（人工知能）を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、こちらをクリックしてください。

ボタンは GuiObjects であり、ユーザーがアクションを実行することを可能にします。ボタンは、ボタンをクリックしたときに視覚的な外観を変更したり、スクリプトで音声フィードバックを提供したりするなど、コンテキストとフィードバックを提供するようにカスタマイズできます。

画面上または体験内に配置できるボタンには、2種類あります。

TextButton は、クリックまたはタップで Activated イベントをトリガーするテキスト付きの長方形です。
ImageButton は、クリックまたはタップで Activated イベントをトリガーする画像付きの長方形です。ユーザーがホバーまたは押した時に画像が切り替わる追加の状態も特長としています。

画面上にボタンを作成する

画面上のボタンは、ユーザーをさまざまなメニューやページに迅速に誘導するのに便利です。

画面にボタンを追加するには：

Explorer ウィンドウで、StarterGui を選択し、ScreenGui を追加します。
1. StarterGui の上にマウスをホバーし、⊕ ボタンをクリックします。コンテキストメニューが表示されます。
2. ScreenGui を挿入します。
新しい ScreenGui を選択し、ボタンを追加します。
1. ScreenGui の上にマウスをホバーし、⊕ ボタンをクリックします。コンテキストメニューが表示されます。
2. TextButton または ImageButton のいずれかを挿入します。

パートの面にボタンを作成する

パートの上にボタンを配置することで、ユーザーがパートと対話できるようにするのに便利です。たとえば、ユーザーがボタンの上に乗ることでアクションを完了させることができます。

パートの面にボタンを追加するには：

Explorer ウィンドウで、part を選択し、SurfaceGui を追加します。
1. part の上にマウスをホバーし、⊕ ボタンをクリックします。コンテキストメニューが表示されます。
2. SurfaceGui を挿入します。
新しい SurfaceGui を選択し、任意のボタンまたは入力を追加します。
1. SurfaceGui の上にマウスをホバーし、⊕ ボタンをクリックします。コンテキストメニューが表示されます。
2. TextButton または ImageButton のいずれかを挿入します。
ボタンが表示されない場合は、SurfaceGui の Face プロパティで別の面を選択してみてください。

ImageButton の外観を変更する

ユーザーが ImageButton に対して操作しているときにその見た目を変更することは、視覚的なフィードバックを提供します。たとえば、ユーザーが ImageButton にホバーしたときにその外観が変わると、ユーザーにそれが無効でないことを知らせ、クリックして ImageButton アクションを実行するオプションがあることを示します。

ImageButton には、見た目を変更するための3つのプロパティがあります：

Image - ユーザーが ImageButton と対話していないときに表示される画像。
HoverImage - ユーザーが ImageButton の上にカーソルを乗せているときに表示される画像。
PressedImage - ユーザーが ImageButton をクリックしているときに表示される画像。

ユーザーの入力で ImageButton の外観を変更するには：

画面またはサーフェスに ImageButton を追加します。
Explorer ウィンドウで、ImageButton オブジェクトをクリックします。
Properties ウィンドウで、Image、HoverImage、および PressedImage プロパティにそれぞれ異なるアセット ID を割り当てます。

ボタンをスクリプトする

ユーザーがボタンを押したときにアクションをスクリプトするには、ボタンを GuiButton.Activated イベントに接続します。たとえば、次の LocalScript をボタンに親付けすると、ユーザーがボタンクリックするたびにボタンの色がランダムに変わります。


local button = script.Parent
local RNG = Random.new()
local function onButtonActivated()
	-- ボタンの色をランダムにする
	button.BackgroundColor3 = Color3.fromHSV(RNG:NextNumber(), 1, 1)
end
button.Activated:Connect(onButtonActivated)

日本語