ImageLabel

非推奨を表示

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

ImageLabel は画像アセットを使用して、Frame と同じように長方形をレンダーします。画像の表示は、ImageColor3 および ImageTransparency プロパティを介して操作できます。画像のみを表示し、長方形を非表示にするには、GuiObject.BackgroundTransparency を 1 に設定します。

高度な ImageLabel 使用には以下が含まれます：

  • タイル化された画像は、ScaleType を Enum.ScaleType.Tile に設定して、TileSize をレンダリングされたタイルのサイズに設定することで作成できます。

  • 9スライス画像は、ScaleType を Enum.ScaleType.Slice に設定して、SliceCenter を 9スライス画像の中央領域に設定することで作成できます。

  • スプライトシートは、ImageRectOffset と ImageRectSize を使用して実装できます。複数の画像を 1 つにパックし、このプロパティを使用すると、特に GUI で多くの小さなアイコンを使用している場合、エクスペリエンスの画像アセットがより速くロードされるようになります。

概要

プロパティ

  • Image:ContentId
    並列読み取り

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

  • ImageColor3:Color3
    並列読み取り

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

  • ImageContent:Content
    並列読み取り

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

  • ImageRectOffset:Vector2
    並列読み取り

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

  • ImageRectSize:Vector2
    並列読み取り

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

  • ImageTransparency:number
    並列読み取り

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

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

    画像が Roblox からロード完了したかどうかを示します。

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

    ラベルの画像再サンプリングモードを選択します。

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

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

  • SliceCenter:Rect
    並列読み取り

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

  • SliceScale:number
    並列読み取り

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

  • TileSize:UDim2
    並列読み取り

    ImageLabel のタイルサイズを設定します。

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

方法

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

イベント

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

プロパティ

Image

ContentId
並列読み取り

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

ImageColor3

Color3
並列読み取り

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

ImageContent

Content
並列読み取り

このプロパティは、アセット URI または参照を持つ必要があります EditableImage。

アセット URI は、Roblox にアップロードされたデカールまたは画像を参照できます。画像のロードに関しては、Decal.Texture と同じ機能を果たします。

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

ImageRectOffset

Vector2
並列読み取り

ImageRectSize と一緒に画像の部分表示を許可します。このプロパティは、表示される画像領域のピクセルオフセット (左上から) を決定します。

ImageRectSize

Vector2
並列読み取り

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

ImageTransparency

number
並列読み取り

このプロパティは、UI 要素のレンダリング画像のアルファを決定します。値 0 は完全に不透明で、値 1 は完全に透明 (見えない) です。

コードサンプル

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

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

このプロパティは、ImageLabel.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))

ResampleMode

Enum.ResamplerMode
並列読み取り

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

ScaleType

Enum.ScaleType
並列読み取り

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

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

For Enum.ScaleType.Slice 、SliceCenter プロパティは プロパティ ウィンドウに表示されます。これは、9スライス UI の場合です：スケールアップすると、角はソース画像サイズのままで残ります。画像の端は、画像の幅/高さにストレッチします。最後に、画像の中心が画像の中心領域を埋めるために伸びます。

最後に、Enum.ScaleType.Tile で、TileSize プロパティが プロパティ ウィンドウに表示されます。これは、タイル化された画像で、各画像タイルのサイズは TileSize プロパティによって決定されるものです。

SliceCenter

Rect
並列読み取り

このプロパティは、ScaleType が Enum.ScaleType.Slice に設定されたとき、9スライス画像の境界を設定します。このプロパティは、この条件下でのみ プロパティ ウィンドウに表示されることに注意してください。

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

SliceScale

number
並列読み取り

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

See also ScaleType , SliceCenter , そして SliceScale 。

TileSize

UDim2
並列読み取り

このプロパティは、デフォルトで ImageLabel のタイルサイズを設定し、UDim2.new(1, 0, 1, 0) です。タイルは画像の左上隅から始まります。このプロパティは、ScaleType に対する ImageLabel が Enum.ScaleType.Tile に設定されている場合にのみ有効です。

コードサンプル

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
Instance から継承されたものをすべて表示
Object から継承されたものをすべて表示

方法

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

イベント

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