ImageButton

非推奨を表示

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

ImageButton はレンダリングに関して、ImageLabel と同様の動作をしますが、GuiButton の追加動作があります。

概要

プロパティ

  • HoverImage:ContentId
    並列読み取り

    ImageButton がホバリングされているときに使用されるテクスチャ ID。

  • HoverImageContent:Content
    並列読み取り
  • Image:ContentId
    並列読み取り

    ImageButton 要素によって表示される画像コンテンツ。読み込みと書き込みを ImageContent します。

  • ImageColor3:Color3
    並列読み取り

    レンダリングされた画像がどのように色付けされるかを決定します。

  • ImageContent:Content
    並列読み取り

    UI 要素に表示される画像コンテンツ。アセット URI と EditableImage オブジェクトをサポートします。

  • ImageRectOffset:Vector2
    並列読み取り

    表示される画像のサブエリアのピクセルオフセット。

  • ImageRectSize:Vector2
    並列読み取り

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

  • ImageTransparency:number
    並列読み取り

    レンダリングされた画像の透明度を決定します。

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

    画像が Roblox ウェブサイトからロードが完了したかどうかを示します。

  • PressedImage:ContentId
    並列読み取り

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

  • PressedImageContent:Content
    並列読み取り
  • ResampleMode:Enum.ResamplerMode
    並列読み取り

    ボタンの画像再サンプリングモードを選択します。

  • ScaleType:Enum.ScaleType
    並列読み取り

    ソース画像と異なるサイズの UI 要素に表示される場合、画像がどのようにスケールするかを決定します。

  • SliceCenter:Rect
    並列読み取り

    9分割された画像のスライス境界を設定します。

  • SliceScale:number
    並列読み取り

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

  • TileSize:UDim2
    並列読み取り

    ImageButton のタイルスケールを設定します。

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

    ボタンがマウスがホバーしたりクリックしたりすると自動的に色が変更されるかどうかを決定します。

  • HoverHapticEffect:HapticEffect
    並列読み取り

    A HapticEffect インスタンスは、GuiButton がホバリングされているときに再生する。

  • Modal:boolean
    並列読み取り

    GUI 要素が表示されている間、true であれば、右マウスボタンが下になっていない限り、マウスはロックされません。

  • PressHapticEffect:HapticEffect
    並列読み取り

    A HapticEffect インスタンスは、GuiButton が押されたときに再生する。

  • Selected:boolean
    並列読み取り

    オブジェクトが選択されたかどうかを示すブールプロパティ。

  • Style:Enum.ButtonStyle
    並列読み取り

    GuiButton のスタイルを、事前決定されたスタイルのリストに基づいて設定します。

GuiObject から継承した プロパティGuiBase2d から継承した プロパティ
Instance から継承されたものをすべて表示
Object から継承されたものをすべて表示

方法

GuiObject から継承した 方法
Instance から継承されたものをすべて表示
Object から継承されたものをすべて表示

イベント

GuiButton から継承した イベントGuiObject から継承した イベントGuiBase2d から継承した イベント
Instance から継承されたものをすべて表示
Object から継承されたものをすべて表示

プロパティ

HoverImage

ContentId
並列読み取り

ImageButton がホバリングされているときに使用されるテクスチャ ID。

HoverImageContent

Content
並列読み取り

Image

ContentId
並列読み取り

このプロパティは、Roblox（ロブロックス）blox にアップロードされたデカールまたは画像のアセットIDを保持するコンテンツタイププロパティです。Roblox から画像をロードする点で、Decal.Texture と同じ機能を果たします。レンダリングされた画像は、ImageColor3 を使用してカラー化されます。

ScaleType プロパティを調整することで、画像をタイル化、スケールしてフィットさせるか、9スライスに分割することができることに注意してください。

コードサンプル

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

Color3
並列読み取り

このプロパティは、画像がどのように色付けされるかを決定します。白に設定すると、色分化は発生しません。このプロパティは、画像アセットの再使用に非常に便利です：ソース画像が透明で完全に白い場合、このプロパティを使用して画像の全体の色を一度に設定できます。

コードサンプル

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()

ImageContent

Content
並列読み取り

このプロパティは、アセット URI または参照を持つ必要があります EditableImage。アセット URI は、RobloRoblox（ロブロックス） にアップロードされたデカルまたは画像を参照できます。画像のロードに関しては、Decal.Texture と同じ機能を果たします。

レンダリングされた画像は、ImageColor3 を使用してカラー化されます。ScaleType プロパティを調整して、画像をタイル化、スケールしてフィットさせるか、9スライスに分割することで、画像をレンダリングできます。

ImageRectOffset

Vector2
並列読み取り

このプロパティは、表示される画像領域のピクセルオフセット (左上から) を決定し、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

ImageRectSize

Vector2
並列読み取り

このプロパティは、表示される画像領域のピクセルサイズを決定し、ImageRectOffset と一緒に画像の部分表示を可能にします。どちらの次元も 0 に設定されている場合、代わりに全体の画像が表示されます。

コードサンプル

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

ImageTransparency

number
並列読み取り

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

画像レンダリングを無効にするには、ImageTransparency を 1 に設定して、ボタンとして使用できるプレーンな長方形が生成されます。しかし、空白の TextButton を使用する方が良いかもしれません。

IsLoaded

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

このプロパティは、Image プロパティが Roblox からロードが完了したかどうかを示します。モデレーションによって拒否された画像は決して読み込むードされません。

コードサンプル

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。

PressedImageContent

Content
並列読み取り

ResampleMode

Enum.ResamplerMode
並列読み取り

スケールされたときに画像がどのように見えるかを決定します。デフォルトでは、画像はテクスチャメモリ内のサイズより大きく表示されるか、小さく表示されると、テクスチャの粒度がスムーズになります。反対に、Enum.ResamplerMode.Pixelated は画像ピクセルの鋭い端を保持します。

ScaleType

Enum.ScaleType
並列読み取り

このプロパティは、UI 要素の絶対サイズがソース画像のサイズと異なるときに Image プロパティがどのようにレンダリングされるかを決定します。

デフォルトでは、このプロパティは Enum.ScaleType.Stretch で、画像のサイズを単にストレッチ/コンパクトして、UI 要素のスペースに正確にフィットします。透明なピクセルは、Roblox にアップロードすると黒に設定されるため、透明な画像はアルファブレンドを適用して、スケーリングされた画像の周りに黒っぽい境界線を避ける必要があります。

For Enum.ScaleType.Slice 、スケールアップすると、角はソース画像サイズのままで残ります。画像の端は、画像の幅/高さにストレッチします。最後に、画像の中心が画像の中心領域を埋めるために伸びます。9スライス画像について詳しく学ぶには、UI 9スライスデザイン を参照してください。

For Enum.ScaleType.Tile 、各画像タイルのサイズは TileSize プロパティによって決定されます。

SliceCenter

Rect
並列読み取り

このプロパティは、ScaleType が Enum.ScaleType.Slice に設定されたとき、9スライス画像の境界を設定します。

9スライス画像について詳しく学ぶには、UI 9スライスデザイン を参照してください。

SliceScale

number
並列読み取り

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

9スライスの境界の乗数として、円形の角画像を複数の半径で再使用するのに便利です。

ソース画像と異なるサイズの UI 要素に表示される場合、画像がどのようにスケールするかを決定する ScaleType も参照してください。

TileSize

UDim2
並列読み取り

画像の左上隅から開始して、タイルサイズを設定します ImageButton 。デフォルトの UDim2 値は 1, 0, 1, 0 ; スケールコンポーネントの UDim2 は、ImageButton のサイズに基づいてタイルをスケールし、オフセットコンポーネントは生のピクセルです。たとえば、0.5 のスケールは、タイルが対応する軸の ImageButton の半分のサイズになることを意味します。

このプロパティは、ScaleType プロパティが Enum.ScaleType.Tile に設定されている場合にのみ有効です。

Instance から継承されたものをすべて表示
Object から継承されたものをすべて表示

方法

Instance から継承されたものをすべて表示
Object から継承されたものをすべて表示

イベント

Instance から継承されたものをすべて表示
Object から継承されたものをすべて表示