インタラクティブなボタン

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

このチュートリアルでは、メニュー、インターフェースアクションなどのオンスクリーンボタンを作成する方法を示しています。

ボタンの種類

UI デザインで使用できる 2種類のボタンオブジェクトがあります:

テキストボタン

画像ボタン

Class.TextButton は、TextLabel と似ていますが、プレイヤーがクリック/タップでアクティブにできることが多く、同じビジュアルプロパティを共有します - フォント、背景色、ストローク色など。

Class.ImageButton は、ImageLabel オブジェクトのインタラクティブバージョンです。また、ボタンなしの同じプロパティの大部分を共有します。

ボタンの作成

次のステップでは、画面に ImageButton を追加する方法と、プレイヤーのインタラクションに応じて画面を 3つにフリップする方法を示しています。

  1. In the Explorer window, hover over the StarterGui object, click the + button, and insert a ScreenGui 。

  2. 新しい ScreenGUI オブジェクトを選択し、同様の方法で ImageButton を挿入します。

    これにより、ゲームビューの隅に空の画像ボタンが追加されます。

  3. ベストプラクティスとして、新しいボタンの目的に応じて名前を変更します。たとえば マップボタン です。

サイズ

ボタンを動的にサイズ変更するためのさまざまなデバイスとスクリーンの場合、 スケール プロパティを使用することが最善です。

  1. In the プロパティ window, locate the サイズ property and click the arrow to expand its tree.

  2. 次のサイズプロパティを設定します:

  3. ボタンを サイズ制限 に設定して、 ボタン を ボタン の上に制限する。

スケーリング

現在のサイズは電話でうまく機能する必要がありますが、X/Y スケールの 0.15 (15%) は、コンピューターの画面では大きすぎる可能性があります。これを修正するには、UISizeConstraint を追加できます。

  1. マップボタンのオブジェクトにカーソルを置き、UISizeConstraint を挿入します。

  2. 新しいサイズ制限オブジェクトを選択し、 MaxSize プロパティを 90, 90 に設定します。

ポジション

ボタンは通常、モバイルデバイスの親指範囲内に移動する必要があります。たとえば、プレイヤー面の下部右隅のエリアです。

  1. ボタンの アンカーポイント プロパティを 0.5、1 に変更して、位置がその下部の中心点の周りに基づくようになります。

  2. ボタンの ポジション ツリーを拡張し、次のプロパティ値を設定します。これにより、ボタンが電話/タブレットに表示されるデフォルトのジャンプボタンの近くに移動します。

イメージ

このボタンには 3つのカスタム画像が必要です — 画面上の通常の見た目、ホバーオーバーの見た目、およびプレイヤーがそれを押すときの最終画外見。

ノーマル

ホバー

押した

これらの外観を設定するには、 画像 、 ホバー画像 、および プレステッド画像 プロパティを通じて行うことができます。

  1. ボタンの 画像 プロパティを見つけ、rbxassetid://6025368017 または 自分のアセットを使用 を挿入します。

  2. For the HoverImage property, paste in rbxassetid://6025452347 .

  3. For the PressedImage property, paste in rbxassetid://6025454897 .

スタイリング

ボタンの画面上の表示を完了するために、次の調整を行います：

  1. 背景の透明度を 1 に設定して、背景を透明にする。

  2. ボタンを少し回転させるには、 回転 を -5 に設定します。

ボタン機能性

最後のタスクは、基本的なボタン機能を接続しています。

  1. エクスプローラ ウィンドウで、マップボタンオブジェクトの上にマウスポインタを置き、ローカルスクリプトを挿入します。

  2. スクリプトで、これらの新しい行にコピーして貼り付けます:

    local button = script.Parent

    

    local function onButtonActivated()

    	print("Button activated!")

    	-- ここで期待され操作ボタンアクションを実行

    end

    

    button.Activated:Connect(onButtonActivated)

この単純なボタンスクリプトは、次のように機能します：

  • 最初の行は、スクリプトにどの特定のオブジェクトにリンクされているかをスクリプトに伝える変数ボタンを設定します。この場合、それはスクリプトの親である ImageButton にリンクされています。
  • ボタンのアクティブ化を処理する onButtonActivated 関数は、ゲームのメインメニューを開くなど、指定されたアクションを実行します。
  • 最後の行 ボタンを onButtonActivated 機能に接続します。これにより、ボタンをゲーム中にプレイヤーがボタンをアクティブにするたびに機能が実行されます。

トラブルシューティング

ボタンが期待通りに機能しない場合は、フォロー中の項目を確認してください：

  • クライアント側の LocalScript を使用していることを確認してください、サーバー側の Script を使用していません。
  • Class.LocalScript はボタンオブジェクトの 直接子 であることを確認してください (ScreenGui コンテナの子ではありません)。
  • ボタンの 画像 、 ホバー画像 、および 押した画像 プロパティが適切な画像アセットに設定されていることを確認します。