ImageButton

非推奨を表示

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

ImageButton は、ImageLabel と同様に、GuiButton の追加の動作に関連してレンダリングを行う場合にも同様の画像レンダリングプロパティを定義します。ImageLabel は、2>Class.GuiButton2> の動作と同じレンダリングプロパティを定義します。

Class.ImageButton.ImageTransparency を 1 に設定すると、画像のレンダリングを無効にできます。これにより、ボタンとして使用できるプレーンな正方形が残ります。しかし、これには空の TextButton を使用することがより良いです。

コードサンプル

This code sample gives custom colors to an ImageButton of a backpack while it is hovered and pressed.

ImageButton Press Color

-- Place this code in a LocalScript in an ImageButton
local imageButton = script.Parent
local colorNormal = Color3.new(1, 1, 1) -- white
local colorHover = Color3.new(0, 1, 0) -- green
local colorPress = Color3.new(1, 0, 0) -- red
-- This is a 32x32 image of a backpack
imageButton.Image = "rbxassetid://787458668"
imageButton.BackgroundTransparency = 1
local function onActivated()
print("open the inventory")
end
local function onPressed()
imageButton.ImageColor3 = colorPress
end
local function onReleased()
imageButton.ImageColor3 = colorHover
end
local function onEntered()
imageButton.ImageColor3 = colorHover
end
local function onLeft()
imageButton.ImageColor3 = colorNormal
end
imageButton.MouseEnter:Connect(onEntered)
imageButton.MouseLeave:Connect(onLeft)
imageButton.MouseButton1Down:Connect(onPressed)
imageButton.MouseButton1Up:Connect(onReleased)
imageButton.Activated:Connect(onActivated)
-- Start with the default, non-hovered state
onLeft()

概要

プロパティ

  • HoverImage:ContentId
    並列読み取り

    Class.ImageButton がホバーされるときに使用されるテクスチャ ID。

  • Image:ContentId
    並列読み取り

    UI 要素に表示される画像コンテンツ。

  • 並列読み取り

    レンダリングされた画像の色を決める。

  • 非表示
    並列読み取り
  • 並列読み取り

    画像のサブエリアのピクセルオフセット。

  • 並列読み取り

    画像のサブエリアのピクセルサイズを決定します。

  • 並列読み取り

    レンダリングされた画像の透明度を決める。

  • 読み取り専用
    複製されていません
    並列読み取り

    Roblox ウェブサイトからのイメージの読み込みが完了したかどうかを示します。

  • PressedImage:ContentId
    並列読み取り

    Class.ImageButton が押されるときに使用されるテクスチャ ID。

  • ボタンのイメージ再構築モードを選択します。

  • 並列読み取り

    サイズがソース画像と異なる UI 要素の中の画像を拡大する方法を決定します。

  • 並列読み取り

    9 スライスの画像のスライスボードを設定します。

  • 並列読み取り

    指定された比率で 9 スライスの端をスケールします。

  • 並列読み取り

    イメージボタンのタイルスケールを設定します。

GuiButton から継承した プロパティ
  • 並列読み取り

    マウスがその上に停止するか、クリックするとボタンの色が自動的に変更されるかどうかを決定します。

  • 並列読み取り

    GUI 要素が表示されている場合、マウスは右マウスボタンが下にあるまでロックされません。

  • 並列読み取り

    オブジェクトが選択されているかどうかを示すBooleanプロパティ。

  • 並列読み取り

    プリデターミンスタイルのリストに基づいてGUIボタンのスタイルを設定します。

GuiObject から継承した プロパティ
  • 並列読み取り

    この UI 要素が入力を沈めるかどうかを決定します。

  • 並列読み取り

    Class.GuiObject のオリジンポイントを決定し、相対的なサイズに対して Class.GuiObject のオリジンポイントを決定します。

  • 子コンテンツに基づいてサイズ変更が発生するかどうかを決定します。

  • 並列読み取り

    Class.GuiObject の背景色を決定します。

  • 並列読み取り

    Class.GuiObject の背景と境界を透明化する。

  • 並列読み取り

    Class.GuiObject ボーダーの色を決定します。

  • 並列読み取り

    Class.GuiObject ボーダーの位置相対を決定します。

  • 並列読み取り

    Class.GuiObject ボーダーのピクセル幅を決定します。

  • 並列読み取り

    親 GUI 要素の外にある子 GUI 要素がレンダリングするべきかどうかを決定します。

  • 読み取り専用
    複製されていません
    並列読み取り

    プレイヤーのマウスが GuiObject 上で積極的に押されているかどうかを決定します。

  • 並列読み取り

    Class.GuiButton がインタラクト可能かどうかを決定します。GuiStateGuiObject が変更されているかどうか。

  • 並列読み取り

    Class.UIGridStyleLayout と一緒に使用されると、UIGridStyleLayout のソートオーダーを制御します。

  • 並列読み取り

    ゲームパッドのセレクターが下に移動すると、GuiObject が選択されます。

  • 並列読み取り

    ゲームパッドのセレクターが左に移動したときに選択される GuiObject を設定します。

  • 並列読み取り

    ゲームパッドのセレクターが右に移動したときに選択される GuiObject を設定します。

  • 並列読み取り

    ゲームパッドセレクターが上に移動すると、GuiObject が選択されます。

  • 並列読み取り

    Class.GuiObject のピクセルとスカラーポジションを決定します。

  • 並列読み取り

    Class.GuiObject が回転する度数を決定します。

  • 並列読み取り

    ゲームパッドで GUI を選択できるかどうかを決定します。

  • ゲームパッドのデフォルトの装飾をオーバーライドします。

  • 並列読み取り

    ゲームパッド UI の選択によって選択された GuiObjects のオーダー。

  • 並列読み取り

    Class.GuiObject のピクセルとスケーラーサイズを決定します。

  • 親のサイズに対応する SizeGuiObject 軸を設定します。

  • 非表示
    複製されていません
    並列読み取り
    非推奨

    Class.GuiObject.BackgroundTransparency|BackgroundTransparency と TextTransparency のミックスプロパティ。

  • 並列読み取り

    Class.GuiObject とその子孫がレンダリングされるかどうかを決定します。

  • 並列読み取り

    他の Class.GuiObject との相対位置で GuiObject がレンダリングされる順序を決定します。

GuiBase2d から継承した プロパティ

方法

GuiObject から継承した 方法

イベント

GuiButton から継承した イベントGuiObject から継承した イベントGuiBase2d から継承した イベント
  • SelectionChanged(amISelected : bool,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal

    ゲームパッドの選択が移動すると、退出します。または、接続された GuiBase2d または任意の子 GuiObjects 内で変更されます。

プロパティ

HoverImage

ContentId
並列読み取り

Class.ImageButton がホバーされるときに使用されるテクスチャ ID。

Image

ContentId
並列読み取り

画像プロパティは、Roblox ウェブサイトのデカールまたは画像のアセット IDを保持するコンテンツタイププロパティです。それは、Decal.Texture に関連して、画像を Roblox ウェブサイトから

コードサンプル

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock

local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()

ImageColor3

並列読み取り

画像の色を3つ設定することで、画像の色を設定できます。白に設定すると、色化は発生しません。このプロパティは、イメージアセットを再使用するのに非常に便利です: ソース画像が完全に透明であると、このプロパティを使用して画像の色を完全に設定できます。

コードサンプル

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock

local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()

This code sample loops an ImageLabel or ImageButton's ImageColor3 through the entire rainbow using RunService's RenderStepped.

Rainbow Image

local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
imageLabel.ImageColor3 = Color3.fromHSV(workspace.DistributedGameTime / 8 % 1, 1, 1)
end
RunService.RenderStepped:Connect(onRenderStep)

ImageContent

非表示
並列読み取り

ImageRectOffset

並列読み取り

Class.ImageButton.ImageRectSize と一緒に画像の一部を表示することができます。このプロパティは、画像エリアを表示するピクセルオフセット (上部左側) を決定します。

このプロパティは ImageLabel.ImageRectSize と同じように動作します。

コードサンプル

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet

-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
end

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

ImageRectSize

並列読み取り

画像と ImageButton.ImageRectOffset を組み合わせて部分的に表示することができます。このプロパティは、画像エリアのピクセルサイズを決定します。如果両方のサイズが 0 に設定されている場合、画像全体が表示されます。

このプロパティは ImageLabel.ImageRectOffset と同じように動作します。

コードサンプル

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet

-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
end

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

ImageTransparency

並列読み取り

画像透明度は、UI 要素のレンダリング画像のアルファを決定します。値 0 は完全に不透明ですが、値 1 は完全に透明です (見えない)。このプロパティは、GuiObject.BackgroundTransparency またはBasePart.Transparency と同様に動作します。

コードサンプル

This code sample oscillates the ImageTransparency of an ImageLabel/ImageButton from 0 to 1 using a sine wave.

Oscillate ImageTransparency

local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
-- Oscillate ImageTransparency from 0 to 1 using a sine wave
imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5
end
RunService.RenderStepped:Connect(onRenderStep)

IsLoaded

読み取り専用
複製されていません
並列読み取り

Class.ImageButton.Image プロパティは、Class.ImageButton.Image プロパティが Roblox ウェブサイトから読み込まれたかどうかを示します。モデレーションによって拒否された画像は、Class.ImageButton.Image プロパティで読み込むみ込まれません。

コードサンプル

This code sample measures how long an ImageLabel or ImageButton takes to load an image. If the image was already loaded, this will be 0.

Image Load Time

local imageLabel = script.Parent
local startTime = workspace.DistributedGameTime
-- Wait for the image to load
while not imageLabel.IsLoaded do
task.wait()
end
-- Measure and display how long it took to load
local deltaTime = workspace.DistributedGameTime - startTime
print(("Image loaded in %.3f seconds"):format(deltaTime))

PressedImage

ContentId
並列読み取り

ボタンを押すと、ImageButton プロパティとして設定できるテクスチャ ID。ボタンを押すと、この画像が表示されます。

ResampleMode

並列読み取り

スケール時の画像の外観を決める。

デフォルトでは、サイズがテクスチャメモリのサイズより大きい場合、またはサイズがテクスチャメモリのサイズより小さい場合、画像のテクスチャをスムーズにします。一方、 Enum.ResamplerMode.Pixelated は、画像のピクセルの鋭いエッジを保持します。

並列読み取り

Class.ImageButton.Image のサイズは、ソース画像のサイズと UI 要素のサイズの差により、Class.ImageButton.Image がどのようにレンダリングされるかを決定します。

デフォルトでこのプロパティは Enum.ScaleType.Stretch で、イメージのサイズを拡大/縮小するだけでイメージが UI エレメントのスペースに正確にフィットします。透明なピクセルは、Roblox ウェブサイトにアップロードすると、透明なイメージが透明なアウトライン

For Enum.ScaleType.Slice の場合、ImageButton.SliceCenter プロパティは [プロパティ] ウィンドウに表示されます。これは 9 スライス UI の場合で、スケールアップすると、隅は元の画像サイズを維持します。画像の�

最後に、Enum.ScaleType.Tile の場合、ImageButton.TileSize プロパティはプロパティウィンドウに表示されます。これは、タイルイメージの場合、各タイルのサイズは ImageButton.TileSize プロパティによって決定されます。

コードサンプル

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

SliceCenter

並列読み取り

[スライスセンター] プロパティは、ImageButton.ScaleTypeEnum.ScaleType.Sliceに設定されているときにスライスボーダーを設定します。このプロパテ

9つのスライスされた画像について詳しくは、このチュートリアルをチェックしてください: UI 9 Slice Design

コードサンプル

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

SliceScale

並列読み取り

9スライスの端を指定した比率でスケールします。これにより、9スライスの端の周りにテクスチャのアップスケール版をアップロードした新しいバージョンが成長します。デフォルトは 1.0 です。

9つのスライスのボーダーの多重使用に便利なマルチプライヤーです

参照してください:

TileSize

並列読み取り

タイルサイズ は、画像ボタンのタイルサイズを設定します。デフォルトの UDim2 値は 1,0,1,0です。UDim2のスケールコンポーネントは、UDim2のサイズに基づいてタイルをスケールします。オフセットは、Raw ピクセ

このプロパティは、[画像ボタン] のスケールタイプが [タイル] で設定されている場合にのみ有効です。

コードサンプル

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

方法

イベント