第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回 ~モジュールスクリプト~ ]

6 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」というボタンがあります。それをクリックすると様々なプラットフォームが選択でき、実機の画面の様子が確認できます。それを使用してチェックするのがいいと思います。

コメントを残す