テキストと画像ボタン

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

ボタン は、ユーザーがアクションを実操作できるようにするGuiObjectsです。ボタンをカスタマイズして、コンテキストとフィードバックを提供できます。例えば、ユーザーがボタンをクリックすると、ビジュアル外観を変更したり、スクリプト で聞こえるフィードバックを変更したりします。

スクリーン上に配置できるボタンの種類は 2つ、エクスペリエンス内に配置できるボタンの種類は 5つあります：

  • A TextButton は、クリック/タップで Activated イベントをトリガーするテキストのある長方形です。

  • ImageButton は、クリック/タップで Activated イベントをトリガーする画像を持つ長方形です。ユーザーがホバーしたり、押すしたりすると画像を交換する追加の状態を備えています。

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

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

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

  1. エクスプローラ ウィンドウで StarterGui を選択し、ScreenGui を追加します。

    1. StarterGui にマウスポインタを置き、⊕ ボタンをクリックします。コンテキストメニューが表示されます。

    2. 挿入する ScreenGui 。

  2. 新しい ScreenGui を選択してボタンを追加します。

    1. スクリーンGUI にマウスポインタを置き、⊕ ボタンをクリックします。コンテキストメニューが表示されます。

    2. テキストボタン または 画像ボタン を挿入します。

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

パーツ上のボタンは、ユーザーがパーツと対話できるようにするのに便利です。たとえば、ボタンを踏ませてアクショ操作を完了させることができます。

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

  1. エクスプローラー ウィンドウで、 部分 を選択し、 SurfaceGui を追加します。

    1. パーツ の上をホバーし、⊕ ボタンをクリックします。コンテキストメニューが表示されます。

    2. サーフェスGUI を挿入します。

  2. 新しい SurfaceGui を選択し、任意のボタンや入力を追加します。

    1. サーフェスGUI にマウスポインタを置き、⊕ ボタンをクリックします。コンテキストメニューが表示されます

    2. テキストボタン または 画像ボタン を挿入します。

画像ボタンの外観を変更する

ユーザーがそれと対話しているときに ImageButton の外観を変更すると、有用な視覚フィードバックが得られます。たとえば、ユーザーがそれをホバーすると、ビジュアル外観が変更されるときに ImageButton 、ユーザーはそれが無効になっていないことと、その ImageButton アクションを実行したい場合にクリック操作きるオプションがあることを知らせます。

ImageButton には視覚的な外外見を変更する 3つのプロパティがあります：

普通
ホバリング
押した

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

  1. 画像ボタンを 画面 または 表面 に追加します。

  2. エクスプローラー ウィンドウで、 画像ボタン オブジェクトをクリック。

  3. プロパティ ウィンドウで、 画像 、 ホバー画像 、 押された画像 プロパティに対して、3つの異なる関連アセット 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)