TextBox
*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。
A テキストボックス では、プレイヤーがテキスト入力を提供できます。クリック、タップ、またはゲームパッドの選択で単一のテキストボックスを焦点に置くことができるのを除き、TextButton と同様に動作します。フォーカス中、プレイヤーはキーボードを使用して Text プロパティを変更できます。
- テキストがない場合、PlaceholderText が表示されます。これは、プレイヤーに入力するデータの種類やフォーマットを促すのに便利です。
- デフォルトでは、ClearTextOnFocus プロパティが有効になっており、テキストボックスが焦点合致すると既存のテキストがないことを保証します。プレイヤーが編集できるテキストには、これは望ましくないかもしれません。
- MultiLine プロパティでは、プレイヤーが新しい行のテキストを新しい行キャラクターで複数入力できます (\n )。
The ContextActionService はテキストボックスのキーバインドを栄誉し、キープレスイベントが ContextActionService:BindAction() にバインドされたアクションに自動的に伝わらないようにします。UserInputService.InputBegan および関連イベントは、テキストボックスが焦点にある状態でも引き続き発動します。
焦点状態
テキストボックスの焦点状態を検出して変更することは可能です:
- 対話が表示されるときに CaptureFocus を使用して、プレイヤーが利用可能になったときにテキストボックスをクリックする必要がなくなります; ContextActionService:BindAction() を使用して、この関数を使用してテキストボックスを焦点合致させる特定のキーをバインドできます。テキストボックスが焦点になると、Focused イベントが発動します。
- IsFocused を使用して、特定のテキストボックスが焦点にあるかどうかを検出できます。代わりに、UserInputService:GetFocusedTextBox() を使用して、テキストボックスのどれかが焦点にあるかどうかをチェックできます。
- プレイヤーがテキスト入力を終えると、FocusLostイベントが発動し、ユーザーがEnterを押してテキストを送信したかどうかを示します。これにより、フォーカスが失われた InputObject と一緒にテキストを送信しました。モバイルとコンソールでスクリーンキーボードを使用すると、ReturnPressedFromOnScreenKeyboard も発射する可能性があります。
- ゲームプレイ中にもっと重要な問題が発生した場合は、TextBox の ReleaseFocus を削除して、プレイヤーのキーボード入力がゲームに戻ります。
テキスト編集
テキストボックスは、CursorPosition および SelectionStart プロパティを通じてテキストの選択をサポートします。GetPropertyChangedSignal を使用すると、選択が変更されたときを検出できます。さらに、プレイヤーがテキストボックス内にテキストをコピーして貼り付けることもでき、基本的なクリップボードサポートを有効にします。
テキストフィルタリング通知 プレイヤー同士のコミュニケーションを可能にするテキスト、例えばカスタムチャットやネームタグなど、は、TextService:FilterStringAsync() または Chat:FilterStringAsync() を使用して、そのテキストを適切にフィルタリングする必要があります。これが適切に行われないと、ゲームはモデレーションアクションを受ける可能性がありま操作。
コードサンプル
This code sample creates a password-like interface for a TextBox, giving visual feedback on the player's input.
-- Place this code in a LocalScript inside a TextBox
local textBox = script.Parent
local secretWord = "roblox"
local colorNormal = Color3.new(1, 1, 1) -- white
local colorWrong = Color3.new(1, 0, 0) -- red
local colorCorrect = Color3.new(0, 1, 0) -- green
-- Initialize the state of the textBox
textBox.ClearTextOnFocus = true
textBox.Text = ""
textBox.Font = Enum.Font.Code
textBox.PlaceholderText = "What is the secret word?"
textBox.BackgroundColor3 = colorNormal
local function onFocused()
textBox.BackgroundColor3 = colorNormal
end
local function onFocusLost(enterPressed, _inputObject)
if enterPressed then
local guess = textBox.Text
if guess == secretWord then
textBox.Text = "ACCESS GRANTED"
textBox.BackgroundColor3 = colorCorrect
else
textBox.Text = "ACCESS DENIED"
textBox.BackgroundColor3 = colorWrong
end
else
-- The player stopped editing without pressing Enter
textBox.Text = ""
textBox.BackgroundColor3 = colorNormal
end
end
textBox.FocusLost:Connect(onFocusLost)
textBox.Focused:Connect(onFocused)
概要
プロパティ
テキストボックスをクリックすると、その TextBox.Text プロパティがクリアされるかどうかを決定します。
テキストカーソルのバイトオフセットを決定します、または -1 カーソルがない場合。
テキストをレンダリングするフォントを決定します。
テキストをレンダリングするフォントを決定します。
TextBox のテキストラインの間のスペースをスケールします。
TextBox が表示できるグラフェムの最大数。
真に設定すると、テキストボックス内のテキストは複数の行に移動できます。これにより、プレイヤーが入力キーを使用して新しい行に移動できるようになります。
テキストボックスにまだテキストが入力されていないときに使用されるテキストの色を設定します。
テキストボックスにまだテキストが入力されていないときに表示されるテキストを設定します。
テキストボックスが TextBox.Text リッチテキスト形式で文字列をレンダリングするかどうかを決定します。
テキストの選択の開始位置を決定するか、テキストが選択されていない場合は -1 。
真に設定された場合、プラットフォームにネイティブ入力が使用され、Roblox の内蔵キーボードは使用されません。
UI 要素によってレンダリングされた文字列を決定します。
オフセットで UI 要素のテキストのサイズ。
レンダーされたテキストの色を決定します。
ユーザーが Text を変更できるかどうかを決定します。
テキストが TextBox の制限内に収まっているかどうか。
テキストが表示される GUI オブジェクトに合うようにサイズを変更します。
オフセットでのテキストの行高を決定します。
テキストストロークの色 (アウトライン) を決定します。
テキストストローク (アウトライン) の透明度を決定します。
レンダリングされたテキストの透明度を決定します。
このテキストボックスに表示されるテキストのトリミングを制御します。
GuiObject 要素スペース内の複数の行にテキストをラップするかどうかを決定し、余分なテキストをトリミングします。
レンダリングされたテキストの横向き配置を決定します。
レンダリングされたテキストの垂直配置を決定します。
このUI 要素が入力を受け取るかどうかを決定します。
絶対サイズに対して、GuiObject の起源ポイントを決定します。
子コンテンツに基づいてサイズ変更が発生するかどうかを決定します。
背景色を GuiObject 決定します。
GuiObject 背景とボーダーの透明度を決定します。
GuiObject ボーダーの色を決定します。
GuiObject ボーダーがどのように配置されるかを決定し、そのサイズに対して。
GuiObject ボーダーのピクセル幅を決定します。
親の GUI 要素の境界内で描画するかどうか、子孫 GuiObjects が決定します。
プレイヤーのマウスが GuiObject にアクティブに押されているかどうかを決定します。
GuiButton が相互作用できるかどうか、または GuiState の GuiObject が変更されているかどうかを決定します。
GuiObject を使用すると、ソート順序が制御されます。UIGridStyleLayout と一緒に使用すると、ソート順序が制御されます。
ゲームパッドセレクターが下向きに移動されると、選択される GuiObject を設定します。
ゲームパッドセレクターが左に移動されると選択される GuiObject を設定します。
ゲームパッドセレクターが右に移動されると選択される GuiObject を設定します。
ゲームパッドセレクターが上に移動したときに選択される GuiObject を設定します。
GuiObject のピクセルとスカラー位置を決定します。
GuiObject が回転する度数の数を決定します。
ゲームパッドで GuiObject が選択できるかどうかを決定します。
ゲームパッド用のデフォルトの選択装飾をオーバーライドします。
ゲームパッド UI の選択によって選択された GuiObjects の順序。
GuiObject のピクセルとスカラーサイズを決定します。
BackgroundTransparency と TextTransparency の混合プロパティ。
GuiObject とその子孫がレンダリングされるかどうかを決定します。
GuiObject が他のものに対してレンダリングされる順序を決定します。
ピクセルで、GuiBase2d 要素の実際の画面位置を説明します。
GuiBase2d 要素の実際のスクリーン回転を度数で説明します。
ピクセルで、GuiBase2d 要素の実際の画面サイズを説明します。
true に設定すると、ローカライゼーションがこの GuiBase2d とその子孫に適用されます。
この LocalizationTable とその子孫に自動翻訳を適用するために使用する GuiBase2d の参照。
下方向のゲームパッド選択動作をカスタマイズします。
左方向でゲームパッドの選択動作をカスタマイズします。
右向きにゲームパッドの選択動作をカスタマイズします。
上向きのゲームパッド選択動作をカスタマイズします。
ゲームパッドの選択動作をカスタマイズできます。
方法
クライアントに TextBox に焦点を合わせるように強制します。
テキストボックスが焦点合致している場合は true、そうでない場合は false を返します。
クライアントに TextBox をフォーカス解除するように強制します。
- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
スムーズにGUIを新しい UDim2 に移動します。
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
GUIを新しいサイズと位置にスムーズに移動します。
イベント
GuiObject から継承した イベントユーザーが人間-コンピューターインターフェイス装置 (マウスボタンダウン、タッチ開始、キーボードボタンダウンなど) を介して交流を開始するときに発射されます。
ユーザーが人間-コンピューターインターフェイスデバイス (マウスボタンダウン、タッチ開始、キーボードボタンダウンなど) を介して対話する方法を変更したときに発射されます。
ユーザーが人間-コンピューターインターフェイス装置 (マウスボタンダウン、タッチ開始、キーボードボタンダウンなど) を介して交流を停止すると発射されます。
ユーザーがマウスをGUI 要素に移動させると発火します。
ユーザーがGUI 要素からマウスを移動すると発火します。
GUI 要素内にいる間、ユーザーがマウスを移動するたびに発火します。
ユーザーがマウスホイールを戻すときに、マウスがGUI 要素の上にあるときに発火します。
ユーザーがマウスホイールを前方にスクロールすると、マウスがGUI 要素の上にあるときに発火します。
ゲームパッドセレクターで GuiObject が焦点合致されているときに発火します。
ゲームパッドセレクターが GuiObject に焦点を合わせるのをやめたときに発火します。
プレイヤーが開始し、続行し、UI 要素を長押しし続けると、発火します。
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
プレイヤーがUI 要素に指を動かすと発火します。
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
UI 要素の 2 本の指を使用してピンチや引っ張りジェスチャーを実行すると、発火します。
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
UI 要素の 2 本の指を使用して回転ジェスチャーを実行すると、プレイヤーが炎上します。
プレイヤーがUI 要素にスワイプジェスチャーを実行すると発火します。
プレイヤーがUI 要素にタップジェスチャーを実行すると発火します。
- SelectionChanged(amISelected : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
ゲームパッドの選択が移動し、離れ、または接続された またはその子孫の中で変更されると、炎が発生します。
プロパティ
ContentText
CursorPosition
このプロパティは、テキストカーソルのバイトオフセットを決定します、または -1 が現在編集されていない場合は TextBox 。値 1 は、Text プロパティの最初のバイトの前の位置を表します。SelectionStart プロパティと一緒に使用すると、TextBox 内で選択したテキストを両方取得して設定することができます。
このプロパティのユニットは バイト であり、絵文字などのユニコード文字は 1バイトより長いことに注意してください。たとえば、プレイヤーが「Hello👋」(「Hello」にすぐに手を振るサインが付いている)を入力した場合、カーソルの位置は 10 であり、7 ではありません、なぜなら emoji は 4バイトを使用するからです。
コードサンプル
このコードサンプルは、TextBox と CursorPosition() および SelectionStart() を使用して、現在の選択を読み込む方法を示します。
local textBox = script.Parent
local function showSelection()
if textBox.CursorPosition == -1 or textBox.SelectionStart == -1 then
print("No selection")
else
local selectedText = string.sub(
textBox.Text,
math.min(textBox.CursorPosition, textBox.SelectionStart),
math.max(textBox.CursorPosition, textBox.SelectionStart)
)
print('The selection is:"', selectedText, '"')
end
end
textBox:GetPropertyChangedSignal("CursorPosition"):Connect(showSelection)
textBox:GetPropertyChangedSignal("SelectionStart"):Connect(showSelection)
Font
フォントプロパティは、UI 要素がテキストをレンダリングするための複数の事前定義済み fonts のうちの 1つを選択します。いくつかのフォントには、ボールド、イタリック、および/またはライトの変形があります (フォントの重量またはフォントのスタイルプロパティがないため)。
「レガシー」フォントを除き、各フォントは、TextBox.TextSize プロパティと同じ線高さでテキストをレンダリングします。「コード」フォントは唯一のモノスペースフォントです。それぞれのキャラクターが同じ幅と高さ比率 1:2 を持っているユニークなプロパティがあります。各キャラクターの幅は約 TextBox.TextSize プロパティの半分です。
このプロパティは、TextBox.FontFace プロパティと同期されて保持されます。フォントを設定すると、フォントフェイスは Font.fromEnum(value) に設定されます。
コードサンプル
This code sample sets a parent TextLabel's Font and Text properties to all the different fonts available.
local textLabel = script.Parent
while true do
-- Iterate over all the different fonts
for _, font in pairs(Enum.Font:GetEnumItems()) do
textLabel.Font = font
textLabel.Text = font.Name
task.wait(1)
end
end
このコードサンプルは、利用可能なすべてのフォントのリストをレンダリングします。
local frame = script.Parent
-- 各フォントを表示するテキストラベルを作成
for _, font in pairs(Enum.Font:GetEnumItems()) do
local textLabel = Instance.new("TextLabel")
textLabel.Name = font.Name
-- テキストプロパティを設定する
textLabel.Text = font.Name
textLabel.Font = font
-- 一部のレンダリングプロパティ
textLabel.TextSize = 24
textLabel.TextXAlignment = Enum.TextXAlignment.Left
-- フレームのサイズをテキストの高さと同じにする
textLabel.Size = UDim2.new(1, 0, 0, textLabel.TextSize)
-- 親フレームに追加する
textLabel.Parent = frame
end
-- フレームをリストに配置する(もし、まだでない場合)
if not frame:FindFirstChildOfClass("UIListLayout") then
local uiListLayout = Instance.new("UIListLayout")
uiListLayout.Parent = frame
end
FontFace
FontFace プロパティは、Font プロパティと似ていますが、Font enum に存在しないフォントを設定できます。
このプロパティは、TextBox.Font プロパティと同期されています。フォントを設定すると、フォントは対応する枚数値に設定されます、または Enum.Font.Unknown にない場合は、マッチがありません。
LineHeight
線の高さを制御し、フォントの em スクエアサイズの倍数として、TextBox でテキストラインのスペースを拡大し、フォントの高さを制御します。有効な値は 1.0 から 3.0 までで、デフォルトは 1.0 です。
MaxVisibleGraphemes
このプロパティは、 または を表示しているかどうかにかかわらず、グラフェム (またはテキストの単位)の最大数を制御します。
プロパティを変更すると、表示可能なグラフェムの位置やサイズが変更されることはありません - レイアウトは、すべてのグラフェムが表示されているように計算されます。
プロパティを -1 に設定すると、制限が無効になり、TextBox.Text 全体が表示されます。
OpenTypeFeatures
OpenTypeFeaturesError
RichText
このプロパティは、TextBox がリッチテキスト形式で TextBox.Text 文字列をレンダリングするかどうかを決定します。リッチテキストは、単純なマークアップタグを使用して、文字列のセクションをボールド、イタリック、特定の色などで装飾します。
リッチテキストを使用するには、TextBox.Text 文字列にフォーマットタグを含めるだけでよい。
Note that when the TextBox にこのプロパティが有効になっており、ボックスが焦点を獲得すると、ユーザーはすべてのフォーマットタグを含む完全な XML 文字列を編集し、交流できるようになります。フォーカスが失われると、テキストは自動的にタグをリッチテキストとして解析し、レンダリングします。
SelectionStart
テキスト選択の開始位置を決定するか、TextBox に選択テキストの範囲がない場合は -1 。値が -1 または CursorPosition に相当する場合、テキストの範囲は選択されません。このプロパティは、CursorPosition と同じ配置ロジックを使用します。選択開始は、カーソルが選択の始まりにある場合は CursorPosition より大きく、カーソルが最終了にある場合は CursorPosition より小さくなります。
コードサンプル
このコードサンプルは、TextBox と CursorPosition() および SelectionStart() を使用して、現在の選択を読み込む方法を示します。
local textBox = script.Parent
local function showSelection()
if textBox.CursorPosition == -1 or textBox.SelectionStart == -1 then
print("No selection")
else
local selectedText = string.sub(
textBox.Text,
math.min(textBox.CursorPosition, textBox.SelectionStart),
math.max(textBox.CursorPosition, textBox.SelectionStart)
)
print('The selection is:"', selectedText, '"')
end
end
textBox:GetPropertyChangedSignal("CursorPosition"):Connect(showSelection)
textBox:GetPropertyChangedSignal("SelectionStart"):Connect(showSelection)
Text
テキストプロパティは、UI 要素によってレンダリングされるコンテンツを決定します。画面にレンダリングされた文字列のビジュアルプロパティは、TextBox.TextColor3、TextBox.TextTransparency、TextBox.TextSize、TextBox.Font、TextBox.TextScaled、TextBox.TextWrapped、TextBox.TextXAlignment、およびTextBox.TextYAlignmentによって決まります。
絵文字 (例: 😃) や他のシンボルをレンダリングできます。これらの特殊符号は、TextBox.TextColor3 プロパティに影響を受けません。これらは Script および LocalScript オブジェクト、およびプロパティウィンドウ内のフィールドに貼り付けることができます。
このプロパティには新しい行の文字が含まれる可能性がありますが、プロパティウィンドウ内で新しい行の文字を入力することはできません。同様に、このプロパティにはタブキャラクターが含まれる可能性がありますが、代わりにスペースとしてレンダリングされます。
コードサンプル
This code sample creates a fading banner for a TextLabel. It fades text out, chooses a random string (avoiding repetition), and fades back in.
local TweenService = game:GetService("TweenService")
local textLabel = script.Parent
local content = {
"Welcome to my game!",
"Be sure to have fun!",
"Please give suggestions!",
"Be nice to other players!",
"Don't grief other players!",
"Check out the shop!",
"Tip: Don't die!",
}
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut)
local RNG = Random.new()
local fadeIn = TweenService:Create(textLabel, tweenInfo, {
TextTransparency = 0,
})
local fadeOut = TweenService:Create(textLabel, tweenInfo, {
TextTransparency = 1,
})
local lastIndex
while true do
-- Step 0: Fade out before doing anything
fadeOut:Play()
task.wait(tweenInfo.Time)
-- Step 1: pick content that wasn't the last displayed
local index
repeat
index = RNG:NextInteger(1, #content)
until lastIndex ~= index
-- Make sure we don't show the same thing next time
lastIndex = index
-- Step 2: show the content
textLabel.Text = content[index]
fadeIn:Play()
task.wait(tweenInfo.Time + 1)
end
This code sample repeatedly tweens a TextLabel's TextSize from 5 to 100 and fades out the text as it grows in size.
local textLabel = script.Parent
textLabel.Text = "Kaboom!"
while true do
for size = 5, 100, 5 do
textLabel.TextSize = size
textLabel.TextTransparency = size / 100
task.wait()
end
task.wait(1)
end
このコードサンプルは、利用可能なすべてのフォントのリストをレンダリングします。
local frame = script.Parent
-- 各フォントを表示するテキストラベルを作成
for _, font in pairs(Enum.Font:GetEnumItems()) do
local textLabel = Instance.new("TextLabel")
textLabel.Name = font.Name
-- テキストプロパティを設定する
textLabel.Text = font.Name
textLabel.Font = font
-- 一部のレンダリングプロパティ
textLabel.TextSize = 24
textLabel.TextXAlignment = Enum.TextXAlignment.Left
-- フレームのサイズをテキストの高さと同じにする
textLabel.Size = UDim2.new(1, 0, 0, textLabel.TextSize)
-- 親フレームに追加する
textLabel.Parent = frame
end
-- フレームをリストに配置する(もし、まだでない場合)
if not frame:FindFirstChildOfClass("UIListLayout") then
local uiListLayout = Instance.new("UIListLayout")
uiListLayout.Parent = frame
end
This code sample demonstrates TextWrap by spelling out a long chunk of text progressively. If the text doesn't fit, it turns a different color.
local textLabel = script.Parent
-- This text wrapping demo is best shown on a 200x50 px rectangle
textLabel.Size = UDim2.new(0, 200, 0, 50)
-- Some content to spell out
local content = "Here's a long string of words that will "
.. "eventually exceed the UI element's width "
.. "and form line breaks. Useful for paragraphs "
.. "that are really long."
-- A function that will spell text out two characters at a time
local function spellTheText()
-- Iterate from 1 to the length of our content
for i = 1, content:len() do
-- Get a substring of our content: 1 to i
textLabel.Text = content:sub(1, i)
-- Color the text if it doesn't fit in our box
if textLabel.TextFits then
textLabel.TextColor3 = Color3.new(0, 0, 0) -- Black
else
textLabel.TextColor3 = Color3.new(1, 0, 0) -- Red
end
-- Wait a brief moment on even lengths
if i % 2 == 0 then
task.wait()
end
end
end
while true do
-- Spell the text with scale/wrap off
textLabel.TextWrapped = false
textLabel.TextScaled = false
spellTheText()
task.wait(1)
-- Spell the text with wrap on
textLabel.TextWrapped = true
textLabel.TextScaled = false
spellTheText()
task.wait(1)
-- Spell the text with text scaling on
-- Note: Text turns red (TextFits = false) once text has to be
-- scaled down in order to fit within the UI element.
textLabel.TextScaled = true
-- Note: TextWrapped is enabled implicitly when TextScaled = true
--textLabel.TextWrapped = true
spellTheText()
task.wait(1)
end
This code sample demonstrates emoji rendering using the Text property.
local textLabel = script.Parent
local moods = {
["happy"] = "😃",
["sad"] = "😢",
["neutral"] = "😐",
["tired"] = "😫",
}
while true do
for mood, face in pairs(moods) do
textLabel.Text = "I am feeling " .. mood .. "! " .. face
task.wait(1)
end
end
TextBounds
読み込み専用プロパティ TextBounds は、オフセットでレンダリングされたテキストの絶対サイズを反映します。言い換えれば、テキストを長方形に配置しようとした場合、このプロパティは、テキストを配置するために必要な長方形の最小寸法を反映します。
TextService:GetTextSize() を使用すると、テキストラベルにストリン文字列を指定し、TextBox.Font 、TextBox.TextSize 、フレームサイズを指定すると、TextBounds がどうなるかを予測できます。
コードサンプル
This code sample dynamically resizes a TextLabel, TextButton or TextBox to match the size of its TextBounds. Try changing the minimum width/height and pasting into a LocalScript in a TextBox.
local textBox = script.Parent
-- The smallest the TextBox will go
local minWidth, minHeight = 10, 10
-- Set alignment so our text doesn't wobble a bit while we type
textBox.TextXAlignment = Enum.TextXAlignment.Left
textBox.TextYAlignment = Enum.TextYAlignment.Top
local function updateSize()
textBox.Size = UDim2.new(0, math.max(minWidth, textBox.TextBounds.X), 0, math.max(minHeight, textBox.TextBounds.Y))
end
textBox:GetPropertyChangedSignal("TextBounds"):Connect(updateSize)
TextColor3
このプロパティは、GuiObject 要素によってレンダリングされたすべてのテキストの色を決定します。このプロパティと TextBox.Font 、 TextBox.TextSize 、 TextBox.TextTransparency は、テキストのビジュアルプロパティを決定します。テキストは、テキストストロークの後にレンダリングされます(TextBox.TextStrokeColor3)。
プレイヤーが簡単にテキストを読むことができることが重要です! 白、グレー、または黒のような飽和度の少ない色を選択してください。テキストの色が UI 要素の TextBox.BackgroundColor3 によって対比されていることを確認してください。要素に透明な背景がある場合、黒い TextBox.TextStrokeColor3 を適用して、その後ろの 3D 世界とテキストのコントラストを向上させてみてください。
コードサンプル
This code sample, when placed within a TextBox, will turn the text color red if the typed string contains no vowels (A, E, I, O or U).
local textBox = script.Parent
local function hasVowels(str)
return str:lower():find("[aeiou]")
end
local function onTextChanged()
local text = textBox.Text
-- Check for vowels
if hasVowels(text) then
textBox.TextColor3 = Color3.new(0, 0, 0) -- Black
else
textBox.TextColor3 = Color3.new(1, 0, 0) -- Red
end
end
textBox:GetPropertyChangedSignal("Text"):Connect(onTextChanged)
This code sample creates a password-like interface for a TextBox, giving visual feedback on the player's input.
-- Place this code in a LocalScript inside a TextBox
local textBox = script.Parent
local secretWord = "roblox"
local colorNormal = Color3.new(1, 1, 1) -- white
local colorWrong = Color3.new(1, 0, 0) -- red
local colorCorrect = Color3.new(0, 1, 0) -- green
-- Initialize the state of the textBox
textBox.ClearTextOnFocus = true
textBox.Text = ""
textBox.Font = Enum.Font.Code
textBox.PlaceholderText = "What is the secret word?"
textBox.BackgroundColor3 = colorNormal
local function onFocused()
textBox.BackgroundColor3 = colorNormal
end
local function onFocusLost(enterPressed, _inputObject)
if enterPressed then
local guess = textBox.Text
if guess == secretWord then
textBox.Text = "ACCESS GRANTED"
textBox.BackgroundColor3 = colorCorrect
else
textBox.Text = "ACCESS DENIED"
textBox.BackgroundColor3 = colorWrong
end
else
-- The player stopped editing without pressing Enter
textBox.Text = ""
textBox.BackgroundColor3 = colorNormal
end
end
textBox.FocusLost:Connect(onFocusLost)
textBox.Focused:Connect(onFocused)
This code sample makes a TextLabel or TextButton count backwards from 10, setting the text color as it does so.
-- Place this code in a LocalScript within a TextLabel/TextButton
local textLabel = script.Parent
-- Some colors we'll use with TextColor3
local colorNormal = Color3.new(0, 0, 0) -- black
local colorSoon = Color3.new(1, 0.5, 0.5) -- red
local colorDone = Color3.new(0.5, 1, 0.5) -- green
-- Loop infinitely
while true do
-- Count backwards from 10 to 1
for i = 10, 1, -1 do
-- Set the text
textLabel.Text = "Time: " .. i
-- Set the color based on how much time is left
if i > 3 then
textLabel.TextColor3 = colorNormal
else
textLabel.TextColor3 = colorSoon
end
task.wait(1)
end
textLabel.Text = "GO!"
textLabel.TextColor3 = colorDone
task.wait(2)
end
This code sample mirrors the contents of a StringValue into a TextLabel, updating and setting the color of the text as it changes.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
-- Place a StringValue called "GameState" in the ReplicatedStorage
local vGameState = ReplicatedStorage:WaitForChild("GameState")
-- Place this code in a TextLabel
local textLabel = script.Parent
-- Some colors we'll use with TextColor3
local colorNormal = Color3.new(0, 0, 0) -- black
local colorCountdown = Color3.new(1, 0.5, 0) -- orange
local colorRound = Color3.new(0.25, 0.25, 1) -- blue
-- We'll run this function to update the TextLabel as the state of the
-- game changes.
local function update()
-- Update the text
textLabel.Text = "State: " .. vGameState.Value
-- Set the color of the text based on the current game state
if vGameState.Value == "Countdown" then
textLabel.TextColor3 = colorCountdown
elseif vGameState.Value == "Round" then
textLabel.TextColor3 = colorRound
else
textLabel.TextColor3 = colorNormal
end
end
-- Pattern: update once when we start and also when vGameState changes
-- We should always see the most updated GameState.
update()
vGameState.Changed:Connect(update)
TextDirection
TextEditable
テキスト編集可能 は、ユーザーが入力で Text を変更できるかどうかを決定します。このプロパティが無効になっているときは、ClearTextOnFocus を無効にすることをお勧めします。そうしないと、テキストがフォーカス時にクリアされる可能性があります。このプロパティは、ゲーム内でコンテンツをコピーできる読み取り専用のテキストボックスを作成するのに便利です。
TextScaled
TextScaled を使用するのではなく、最も視覚的な結果を得る可能性のある新しい方法である AutomaticSize を検討することをお勧めします。
TextScaled プロパティは、テキストが全体の UI 要素のスペースを埋めるようにスケールするかどうかを決定します。これが有効になっていると、TextBox.TextSize は無視され、TextBox.TextWrapped が自動的に有効になります。このプロパティは、BillboardGuis内のテキストレンダリング UI 要素に便利です。
このプロパティがスクリーンスペース UI で使用されると、可能なテキストサイズの範囲を制限するために UITextSizeConstraint を使用することが望ましいかもしれません。
テキストスケールと自動サイズ
開発者は TextScaled の使用を避け、代わりに自動サイズプロパティを利用するよう調整することをお勧めします。以下は、2つのプロパティの主な違いです:
- テキストスケーリングは、UI に合わせてコンテンツ (テキスト) を拡大します。注意深く検討しないと、小さすぎると読み取りにくくなる可能性があります。
- 自動サイズ調整 は、UIを再サイズしてコンテンツを収容します。
自動サイズでは、統一したフォントサイズを維持しながら、コンテンツ (テキスト) を容納するために UI を調整できます。自動サイズ変更の方法について詳しくは、UI 自動サイズの記事を参照してください。
両方のプロパティを同じ UI オブジェクトに適用することはお勧めしません:両方のプロパティを適用する場合:
- 自動サイズは、GuiObject が使用できる最大スペース量 (この場合、テキスト) を決定します
- TextScaled は、AutomaticSize によって決定された利用可能なスペースを使用して、フォントサイズを利用可能なスペースに合わせて拡大し、サイズ制限がない場合は最大フォントサイズ (100) まで拡大します
- 最終結果は次のとおりです:テキストが 100 フォントサイズになり、UI オブジェクトがそのテキストに合うように拡大します
両方の自動サイズとテキストスケールを同時に使用すると、AutomaticSize がオフのときよりも大きなスケーリング差が生じる可能性があります。
コードサンプル
This code sample demonstrates TextWrap by spelling out a long chunk of text progressively. If the text doesn't fit, it turns a different color.
local textLabel = script.Parent
-- This text wrapping demo is best shown on a 200x50 px rectangle
textLabel.Size = UDim2.new(0, 200, 0, 50)
-- Some content to spell out
local content = "Here's a long string of words that will "
.. "eventually exceed the UI element's width "
.. "and form line breaks. Useful for paragraphs "
.. "that are really long."
-- A function that will spell text out two characters at a time
local function spellTheText()
-- Iterate from 1 to the length of our content
for i = 1, content:len() do
-- Get a substring of our content: 1 to i
textLabel.Text = content:sub(1, i)
-- Color the text if it doesn't fit in our box
if textLabel.TextFits then
textLabel.TextColor3 = Color3.new(0, 0, 0) -- Black
else
textLabel.TextColor3 = Color3.new(1, 0, 0) -- Red
end
-- Wait a brief moment on even lengths
if i % 2 == 0 then
task.wait()
end
end
end
while true do
-- Spell the text with scale/wrap off
textLabel.TextWrapped = false
textLabel.TextScaled = false
spellTheText()
task.wait(1)
-- Spell the text with wrap on
textLabel.TextWrapped = true
textLabel.TextScaled = false
spellTheText()
task.wait(1)
-- Spell the text with text scaling on
-- Note: Text turns red (TextFits = false) once text has to be
-- scaled down in order to fit within the UI element.
textLabel.TextScaled = true
-- Note: TextWrapped is enabled implicitly when TextScaled = true
--textLabel.TextWrapped = true
spellTheText()
task.wait(1)
end
TextSize
TextSize プロパティは、レンダリングされたテキストの 1行のオフセットの高さを決定します。ユニットはオフセットであり、ポイントではありません (ほとんどのドキュメント編集プログラムで使用されるもの)。「レガシー」フォントはこのプロパティを持っていません。
コードサンプル
This code sample repeatedly tweens a TextLabel's TextSize from 5 to 100 and fades out the text as it grows in size.
local textLabel = script.Parent
textLabel.Text = "Kaboom!"
while true do
for size = 5, 100, 5 do
textLabel.TextSize = size
textLabel.TextTransparency = size / 100
task.wait()
end
task.wait(1)
end
TextStrokeColor3
TextStrokeColor3 プロパティは、レンダリングされたテキストのストロークまたはアウトラインの色を設定します。このプロパティと TextBox.TextStrokeTransparency は、テキストストロークの視覚的プロパティを決定します。
テキストストロークは、通常のテキストよりも前にレンダリングされ、各方向で +/- 1ピクセルオフセットで同じテキストの 4 レンダリングが行われます。テキストストロークレンダリングは、TextBox.TextColor3 および TextBox.TextTransparency と同様に独立して作動します。
コードサンプル
This code sample oscillates a TextLabel's TextStrokeTransparency so that it blinks the highlight of a text.
local textLabel = script.Parent
-- How fast the highlight ought to blink
local freq = 2
-- Set to yellow highlight color
textLabel.TextStrokeColor3 = Color3.new(1, 1, 0)
while true do
-- math.sin oscillates from -1 to 1, so we change the range to 0 to 1:
local transparency = math.sin(workspace.DistributedGameTime * math.pi * freq) * 0.5 + 0.5
textLabel.TextStrokeTransparency = transparency
task.wait()
end
TextStrokeTransparency
TextStrokeTransparency プロパティは、レンダリングされたテキストのストロークまたはアウトラインの透明度を設定します。このプロパティと TextBox.TextStrokeColor3 は、テキストストロークの視覚的プロパティを決定します。
テキストストロークは、通常のテキストよりも前にレンダリングされ、各方向で +/- 1ピクセルオフセットで同じテキストの 4 レンダリングが行われます。テキストストロークレンダリングは、TextBox.TextColor3 および TextBox.TextTransparency と同様に独立して作動します。テキストストロークは単に同じ透明度の複数のレンダリングであるため、このプロパティは本質的に4倍に増加します (例えばテキストストロークの透明度 0.5 は、0.0625 または 0.5^4 のテキスト透明度とほぼ同じに見えます。そのため、テキストストロークの透明度を 0.75 から 1 の範囲に設定すると、より淡い効果が得られます。
コードサンプル
This code sample oscillates a TextLabel's TextStrokeTransparency so that it blinks the highlight of a text.
local textLabel = script.Parent
-- How fast the highlight ought to blink
local freq = 2
-- Set to yellow highlight color
textLabel.TextStrokeColor3 = Color3.new(1, 1, 0)
while true do
-- math.sin oscillates from -1 to 1, so we change the range to 0 to 1:
local transparency = math.sin(workspace.DistributedGameTime * math.pi * freq) * 0.5 + 0.5
textLabel.TextStrokeTransparency = transparency
task.wait()
end
TextTransparency
TextColor3 プロパティは、UI 要素によってレンダリングされたすべてのテキストの透明度を決定します。このプロパティと TextBox.Font 、 TextBox.TextSize および TextBox.TextColor3 は、テキストのビジュアルプロパティを決定します。テキストは、テキストストロークの後にレンダリングされます(TextBox.TextStrokeTransparency)。
数字の forループを使用してテキストを消去することは、画面に表示されるテキストにプレイヤーの注意を引く素晴らしい方法です。
-- Count backwards from 1 to 0, decrementing by 0.1for i = 1, 0, -0.1 dotextLabel.TextTransparency = itask.wait(0.1)end
コードサンプル
This code sample creates a fading banner for a TextLabel. It fades text out, chooses a random string (avoiding repetition), and fades back in.
local TweenService = game:GetService("TweenService")
local textLabel = script.Parent
local content = {
"Welcome to my game!",
"Be sure to have fun!",
"Please give suggestions!",
"Be nice to other players!",
"Don't grief other players!",
"Check out the shop!",
"Tip: Don't die!",
}
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut)
local RNG = Random.new()
local fadeIn = TweenService:Create(textLabel, tweenInfo, {
TextTransparency = 0,
})
local fadeOut = TweenService:Create(textLabel, tweenInfo, {
TextTransparency = 1,
})
local lastIndex
while true do
-- Step 0: Fade out before doing anything
fadeOut:Play()
task.wait(tweenInfo.Time)
-- Step 1: pick content that wasn't the last displayed
local index
repeat
index = RNG:NextInteger(1, #content)
until lastIndex ~= index
-- Make sure we don't show the same thing next time
lastIndex = index
-- Step 2: show the content
textLabel.Text = content[index]
fadeIn:Play()
task.wait(tweenInfo.Time + 1)
end
This code sample repeatedly tweens a TextLabel's TextSize from 5 to 100 and fades out the text as it grows in size.
local textLabel = script.Parent
textLabel.Text = "Kaboom!"
while true do
for size = 5, 100, 5 do
textLabel.TextSize = size
textLabel.TextTransparency = size / 100
task.wait()
end
task.wait(1)
end
TextWrapped
有効にすると、このプロパティは TextBox 要素のスペース内で複数の行にテキストをレンダリングし、TextBox.TextBounds が GUI 要素の GuiBase2d.AbsoluteSize を超えることはありません。
これは、長いテキストのラインを複数のラインに分割することで実現します。行のブレークが白いスペースを好む; 長い未分割の単語が要素の幅を超えた場合、その単語は複数の行に分割されます。
さらに行が分割されると、テキストの縦高(TextBox.TextBounds の Y コンポーネント)が要素の縦高(GuiBase2d.AbsoluteSize の Y コンポーネント)を超えると、その行はすべてくレンダリングされない。
コードサンプル
This code sample demonstrates TextWrap by spelling out a long chunk of text progressively. If the text doesn't fit, it turns a different color.
local textLabel = script.Parent
-- This text wrapping demo is best shown on a 200x50 px rectangle
textLabel.Size = UDim2.new(0, 200, 0, 50)
-- Some content to spell out
local content = "Here's a long string of words that will "
.. "eventually exceed the UI element's width "
.. "and form line breaks. Useful for paragraphs "
.. "that are really long."
-- A function that will spell text out two characters at a time
local function spellTheText()
-- Iterate from 1 to the length of our content
for i = 1, content:len() do
-- Get a substring of our content: 1 to i
textLabel.Text = content:sub(1, i)
-- Color the text if it doesn't fit in our box
if textLabel.TextFits then
textLabel.TextColor3 = Color3.new(0, 0, 0) -- Black
else
textLabel.TextColor3 = Color3.new(1, 0, 0) -- Red
end
-- Wait a brief moment on even lengths
if i % 2 == 0 then
task.wait()
end
end
end
while true do
-- Spell the text with scale/wrap off
textLabel.TextWrapped = false
textLabel.TextScaled = false
spellTheText()
task.wait(1)
-- Spell the text with wrap on
textLabel.TextWrapped = true
textLabel.TextScaled = false
spellTheText()
task.wait(1)
-- Spell the text with text scaling on
-- Note: Text turns red (TextFits = false) once text has to be
-- scaled down in order to fit within the UI element.
textLabel.TextScaled = true
-- Note: TextWrapped is enabled implicitly when TextScaled = true
--textLabel.TextWrapped = true
spellTheText()
task.wait(1)
end
TextXAlignment
TextXAlignment は、UI 要素のスペース内でレンダリングされたテキストの横向きアラインメント (X軸) を決定します。左、右、中央の値で CSS テキスト配置プロパティと同様に機能します(正当化オプションはありません)。左と右の場合、テキストはレンダリングされ、左/右のテキスト境界が UI 要素の長方形の端に僅かに触れるようになります。センターの場合、テキストの各行は、UI 要素の長方形の中央に集中します。
このプロパティは、TextBox.TextYAlignment と一緒に使用して、両軸のテキスト配置を完全に決定します。このプロパティは、読み込み専用プロパティ TextBox.TextBounds および TextBox.TextFits に影響しません。
コードサンプル
This code sample shows all the different text alignment combinations by iterating over each enum item. It is meant to be placed within a TextLabel, TextButton or TextBox.
-- Paste this in a LocalScript within a TextLabel/TextButton/TextBox
local textLabel = script.Parent
local function setAlignment(xAlign, yAlign)
textLabel.TextXAlignment = xAlign
textLabel.TextYAlignment = yAlign
textLabel.Text = xAlign.Name .. " + " .. yAlign.Name
end
while true do
-- Iterate over both TextXAlignment and TextYAlignment enum items
for _, yAlign in pairs(Enum.TextYAlignment:GetEnumItems()) do
for _, xAlign in pairs(Enum.TextXAlignment:GetEnumItems()) do
setAlignment(xAlign, yAlign)
task.wait(1)
end
end
end
TextYAlignment
TextYAlignment は、UI 要素のスペース内でレンダリングされたテキストの垂直配置 (Y 軸) を決定します。上と下の場合、テキストはレンダリングされ、上/下のテキスト境界が UI 要素の長方形の端に僅かに触れるようになります。センターの場合、テキストはレンダリングされ、テキストの上限から要素の上、下限までの平等なスペースが生成され、テキストの下限から要素の下限まで生成されます。
このプロパティは、TextBox.TextXAlignment と一緒に使用して、両軸のテキスト配置を完全に決定します。このプロパティは、読み込み専用プロパティ TextBox.TextBounds および TextBox.TextFits に影響しません。
コードサンプル
This code sample shows all the different text alignment combinations by iterating over each enum item. It is meant to be placed within a TextLabel, TextButton or TextBox.
-- Paste this in a LocalScript within a TextLabel/TextButton/TextBox
local textLabel = script.Parent
local function setAlignment(xAlign, yAlign)
textLabel.TextXAlignment = xAlign
textLabel.TextYAlignment = yAlign
textLabel.Text = xAlign.Name .. " + " .. yAlign.Name
end
while true do
-- Iterate over both TextXAlignment and TextYAlignment enum items
for _, yAlign in pairs(Enum.TextYAlignment:GetEnumItems()) do
for _, xAlign in pairs(Enum.TextXAlignment:GetEnumItems()) do
setAlignment(xAlign, yAlign)
task.wait(1)
end
end
end
方法
CaptureFocus
クライアントに TextBox に焦点を合わせるように強制します。
戻り値
コードサンプル
This code sample causes the client to focus on the parent TextBox when the Q key is pressed by the player.
local ContextActionService = game:GetService("ContextActionService")
local ACTION_NAME = "FocusTheTextBox"
local textBox = script.Parent
local function handleAction(actionName, inputState, _inputObject)
if actionName == ACTION_NAME and inputState == Enum.UserInputState.End then
textBox:CaptureFocus()
end
end
ContextActionService:BindAction(ACTION_NAME, handleAction, false, Enum.KeyCode.Q)
ReleaseFocus
クライアントに TextBox の焦点を外すように強制します。submitted パラメータでは、enterPressed パラメータを TextBox.FocusLost イベントでオーバーライドできます。
このアイテムは、オンラインモードで期待通りに機能するために、LocalScript を使用する必要があります。
以下に示すコードは、クライアントに 'TextBox' を選択後 5秒間焦点を合わせないように強制します:
local TextBox = script.Parent
TextBox.Focused:Connect(function()
wait(5)
TextBox:ReleaseFocus()
end)
上記の例では、TextBox の子としてローカルスクリプトにあると仮定しています。
パラメータ
戻り値
コードサンプル
The code shown below will force the client to unfocus the 'TextBox' 5 seconds after it's selected:
local textBox = script.Parent
local function onFocused()
task.wait(5)
textBox:ReleaseFocus()
end
textBox.Focused:Connect(onFocused)
イベント
FocusLost
クライアントが TextBox からフォーカスを離れるときに発火します - 通常、クライアントが TextBox の外をクリック/タップするときです。これはまた、テキストボックスがユーザーに焦点を合わせると発動します。
TextBox が焦点を獲得したり失ったりするタイミングを追跡するのに、TextBox.Focused と一緒に使用できます。
ユーザーインプットサービス サービスに依存する同様の機能については、UserInputService.TextBoxFocused および UserInputService.TextBoxFocusReleased を参照してください。
このイベントは、LocalScript で使用されるときにのみ発動します。
パラメータ
クライアントが Enter を押して焦点を失ったかどうかを示すブールン ( true ) またはそうでない ( false ) を示すボリューム。
TextBox が焦点を失った原因の入力タイプを示す InputObject インスタンス。
コードサンプル
The example shown below will print "Focus was lost because enter was pressed!" whenever the TextBox loses focus as a result of the enter key being pressed.
local gui = script.Parent
local textBox = gui.TextBox
local function focusLost(enterPressed)
if enterPressed then
print("Focus was lost because enter was pressed!")
else
print("Focus was lost without enter being pressed")
end
end
textBox.FocusLost:Connect(focusLost)
この例は、TextBox の子である LocalScript に配置すると機能します。TextBox が焦点を失うと、例は次のいずれかを印刷します:
- 「プレイヤーが Enter キーを押した」 - プレイヤーが Enter キーを押したため、テキストボックスが焦点を失った場合。 *または *
- 「プレイヤーが入力オブジェクトを押しました。キーコード " - どこで" キーコード "が、テキストボックスが焦点を失った原因の入力の InputObject キーコードプロパティです。たとえば、TextBox の焦点を終了するためにエスケープ (esc) キーを押すと、キーコード 'InputObject.Escape' の InputObject インスタンスが返されます。
local textBox = script.Parent
local function onFocusLost(enterPressed, inputThatCausedFocusLost)
if enterPressed then
print("Player pressed Enter")
else
print("Player pressed", inputThatCausedFocusLost.KeyCode)
end
end
textBox.FocusLost:Connect(onFocusLost)
Focused
TextBox が焦点を獲得するときに発火します - 通常、クライアントがテキストボックスをクリック/タップしてテキスト入力を開始するときこれはまた、テキストボックスがユーザーに焦点を合わせると発動します。
TextBox が焦点を獲得したり失ったりするタイミングを追跡するのに、TextBox.FocusLost と一緒に使用できます。
ユーザーインプットサービス サービスに依存する同様の機能については、UserInputService.TextBoxFocused および UserInputService.TextBoxFocusReleased を参照してください。
このイベントは、LocalScript で使用されるときにのみ発動します。
コードサンプル
This example works when placed in a LocalScript that is the child of a TextBox. When the TextBox gains focus, the example prints "Focus".
local textBox = script.Parent
local function onFocused()
print("Focused")
end
textBox.Focused:Connect(onFocused)