第25回 ~GUIの基礎、クライアントとサーバー~

GUIとは何か、クライアントとは、サーバーとは何かを理解しましょう。サーバーからクライアントに指示を出す際い使用する「 RemoteEvent」の使い方も覚えましょう。

登場する英単語

英単語読み方解説
GUIジーユーアイグラフィカル・ユーザー・インターフェースの略称
StarterGuiスターター・ジーユーアイ作成済みのGUIを保存しておける場所
ScreenGuiスクリーン・ ジーユーアイ プレーヤーの画面に表示される2Dスクリーンオブジェクト
PlayerGuiプレイヤー・ジーユーアイ実行すると StarterGuiに入れたものがここにコピーされる
Frameフレームベースになる枠
TextButtonテキストボタン文字が表示できるGUI専用ボタン
TextScaledテキストスケールドボタン枠いっぱいに文字を表示することができる
ImageButtonイメージボタン画像が表示できる GUI専用ボタン
Visibleビジブルfalseを代入すると画面に表示されなくなる
LocalScriptローカルスクリプトクライアントで動作するプログラム
RemoteEventリモートイベントサーバーとクライアント間の通信を行うためのオブジェクト
OnClientEventオンクライアントイベント RemoteEvent のイベント処理を接続するもの

チェックポイント

  • 一般的にGUIは「StarterGui」に作成する
  • 「StarterGui」の中に「ScreenGui」を入れ、その中に「Frame」を入れるのが基本
  • さらに「Frame」の中に、TextButtonなどを配置する
  • 位置や大きさの指定には、絶対座標と相対座標の2通りがある
  • PC、タブレット、スマホで画面サイズ(解像度)が異なるので、相対座標で指定するのがベスト
  • 相対座標の場合、0から1の範囲で指定する(画面一杯の大きさは1)
  • 位置は、画面左上の座標が(0,0)、右下が(1,1)となる
  • TextButton」は文字が表示できるボタンで、クリックやタップで反応する
  • ImageButton」は画像が表示できるボタンで、クリックやタップで反応する
  • 実行すると「StarterGui」の中身がすべてPlayerの「PlayerGui」にコピーされる
  • Frame」の「Visible」をfalseにするとフレームが消える
  • GUIの操作はクライアントのプログラム(LocalScript)で行わないといけない
  • クライアントとサーバー間の通信は、「RemoveEvent」を使う
  • サーバーからクライアントへの指示は「FireClient」を使う
  • クライアントからサーバーへの指示は「FireServer」を使う
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local openEvent = ReplicatedStorage.OpenEvent
local Players = game:GetService("Players")

local function onTouch(hit)
    local character = hit.Parent
    local humanoid = character:FindFirstChildWhichIsA("Humanoid")

    if humanoid then
        local player = Players:GetPlayerFromCharacter(character)
        openEvent:FireClient(player)
    end
end

script.Parent.Touched:Connect(onTouch)
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local openEvent = ReplicatedStorage.OpenEvent

local frame = script.Parent
local closeBttton = frame.CloseButton

closeBttton.MouseButton1Click:Connect(function()
    frame.Visible = false
end)

openEvent.OnClientEvent:Connect(function()
    frame.Visible = true
end)

ステップアップ

  • ScreenGui」の「Enabled」をfalseにするとその中のGUIを非表示にできる
  • サーバーから全クライアントへ指示したい場合は「FireAllClients 」を使う
  • LocalScriptで、Playerを取得するには場合はこのようにする
local player = game:GetService("Players").LocalPlayer

[ 第24回 ~モジュールスクリプト~ ]

9 thoughts on “第25回 ~GUIの基礎、クライアントとサーバー~”
  1. 「閉じる」をクリックすると閉じてしまいますが、「本当に閉じますか?」等の文字の内容を変更するGUIはどのようにすればよいのでしょうか?

    1. 簡単な方法としましては、
      (1)「本当に閉じますか?」と表示するGUIを作成しておき非表示にします。
      (2)「閉じる」がクリックされたら、(1)のGUIを表示します。
      (3)「はい」がクリックされたら、元のGUIと(1)のGUIを閉じます。
      (4)「いいえ」がクリックされたら、(1)のGUIを閉じます。
      こんな感じでいかがでしょうか?

  2. PC(Windows10)版のRoblox StudioでUIを作成していたのですが、

    相対座標の場合スタジオ側とゲーム側の位置が恐らく画面サイズの違いでずれてしまうんですが、
    対処法ございますか?

    1. スタジオのメニュー「TEST」に「Device」というボタンがあります。それをクリックすると様々なプラットフォームが選択でき、実機の画面の様子が確認できます。それを使用してチェックするのがいいと思います。

  3. GUIの位置を開いているサイトの大きさによって変えるにはどうすればよいですか?
    X,Y座標によってどの大きさの時もGUIの大きさが変わらないのではなく、1つの場所を中心としてGUIの大きさ、位置が画面の大きさによって変わる感じです。

  4. 追記:デバイス機能でパソコンの場合は正常な大きさで表示されるのですが、スマホの場合は位置がずれてしまう子との対処法です。

コメントを残す