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
9 thoughts on “第25回 ~GUIの基礎、クライアントとサーバー~”
コメントを残す コメントをキャンセル
コメントを投稿するにはログインしてください。
「閉じる」をクリックすると閉じてしまいますが、「本当に閉じますか?」等の文字の内容を変更するGUIはどのようにすればよいのでしょうか?
簡単な方法としましては、
(1)「本当に閉じますか?」と表示するGUIを作成しておき非表示にします。
(2)「閉じる」がクリックされたら、(1)のGUIを表示します。
(3)「はい」がクリックされたら、元のGUIと(1)のGUIを閉じます。
(4)「いいえ」がクリックされたら、(1)のGUIを閉じます。
こんな感じでいかがでしょうか?
PC(Windows10)版のRoblox StudioでUIを作成していたのですが、
相対座標の場合スタジオ側とゲーム側の位置が恐らく画面サイズの違いでずれてしまうんですが、
対処法ございますか?
スタジオのメニュー「TEST」に「Device」というボタンがあります。それをクリックすると様々なプラットフォームが選択でき、実機の画面の様子が確認できます。それを使用してチェックするのがいいと思います。
私の場合ですがAutoscale Liteというプラグインを使います。とても使いやすくて便利です!
リンク
Devforum
https://devforum.roblox.com/t/plugin-autoscale-lite-for-guis-scale-your-ui/217704
Plugin
https://www.roblox.com/library/1496745047/AutoScale-Lite
そうですね。私も使っています。
GUIの位置を開いているサイトの大きさによって変えるにはどうすればよいですか?
X,Y座標によってどの大きさの時もGUIの大きさが変わらないのではなく、1つの場所を中心としてGUIの大きさ、位置が画面の大きさによって変わる感じです。
まさしく本動画で行っているように相対指定で行えば画面に中央にすることができます。
もし中央にすることができない場合、現在のFrameのSizeとPositionの値をお知らせください。
追記:デバイス機能でパソコンの場合は正常な大きさで表示されるのですが、スマホの場合は位置がずれてしまう子との対処法です。