EditableImage Reflections

[pyxfluff (Pyx)]

Hello,

I’m trying to make a reflection of an image with EditableImages. There’s no direct API for it and I’m confused as to how I would go about it. Reading the last half of the pixels and changing a value?

Thanks.

[pyxfluff (Pyx)]

Decided to try myself because this got no traction. Sadly the API is really confusing so I wasn’t able to get it with this, would still appreciate help. All it seems to have done is made it really blurry.

local function CreateReflection(Card)
	local EditableImage = AssetService:CreateEditableImageAsync(Card.Icon.Image)

	for Y = 1, math.floor(Card.Icon.ImageRectSize.Y * 0.25) do
		EditableImage:SetRow(Card.Icon.ImageRectSize.Y + Y, EditableImage:GetRow(Card.Icon.ImageRectSize.Y - math.floor(Card.Icon.ImageRectSize.Y * 0.25) + Y - 1))
	end

	for Y = 1, math.floor(Card.Icon.ImageRectSize.Y * 0.25) do
		for X = 1, Card.Icon.ImageRectSize.X do
			local R, G, B = EditableImage:GetPixel(X, Card.Icon.ImageRectSize.Y + Y)
			EditableImage:SetPixel(X, Card.Icon.ImageRectSize.Y + Y, R * (1 - Y / math.floor(Card.Icon.ImageRectSize.Y * 0.25)), G * (1 - Y / math.floor(Card.Icon.ImageRectSize.Y * 0.25)), B * (1 - Y / math.floor(Card.Icon.ImageRectSize.Y * 0.25)))
		end
	end

	return EditableImage
end

[theseformasentence (kaziel)]

Hello. Does it specifically need to be made with EditableImage? There’s another rather simple way of reflecting an image (only on UI objects like SurfaceGui / ScreenGui), and that is to set the size to a negative value, like {0,-100},{0,100} which reflects it on the X-axis. If you need to use EditableImage though, I made this not so fast function that should do it.

local function reflectImage(id: string)
	local editableImage = game:GetService("AssetService"):CreateEditableImageAsync(id)
	--[[editableImage:Resize(Vector2.new(10,10))]]
	
	local px = editableImage:ReadPixels(Vector2.zero,editableImage.Size)
	local npx = {}
	for pixelChunk = 0,(#px/4-1) do
		local pixel = {px[pixelChunk*4+1],px[pixelChunk*4+2],px[pixelChunk*4+3],px[pixelChunk*4+4]}
		local pixelPosition = Vector2.new(pixelChunk % editableImage.Size.X,math.floor(pixelChunk/editableImage.Size.X))
		local indexTo = editableImage.Size.X*4 - pixelPosition.X*4 + pixelPosition.Y*editableImage.Size.X*4 - 3
		table.move(pixel,1,4,indexTo,npx)
	end
	
	editableImage:WritePixels(Vector2.zero,editableImage.Size,npx)
	return editableImage
end

reflectImage("rbxasset://textures/ui/GuiImagePlaceholder.png")

I dont quite know if it is true but the reflected image (the one on the left) feels just slightly colored differently. The background feels a tiny bit darker and the icon feels a tiny bit brighter. Maybe it’s just me though.

Edit: Heres a slightly faster version.

local function reflectImage(id: string)
	local editableImage = game:GetService("AssetService"):CreateEditableImageAsync(id)
	--[[editableImage:Resize(Vector2.new(10,10))]]
	
	local px = editableImage:ReadPixels(Vector2.zero,editableImage.Size)
	local npx = {}
	for pixelChunk = 0,(#px/4-1) do
		local indexTo = editableImage.Size.X*4 - (pixelChunk % editableImage.Size.X)*4 + math.floor(pixelChunk/editableImage.Size.X)*editableImage.Size.X*4 - 3
		table.move(px,pixelChunk*4+1,pixelChunk*4+4,indexTo,npx)
	end
	
	editableImage:WritePixels(Vector2.zero,editableImage.Size,npx)
	return editableImage
end

reflectImage("rbxasset://textures/ui/GuiImagePlaceholder.png")

[pyxfluff (Pyx)]

@theseformasentence

here’s another rather simple way of reflecting an image (only on UI objects like SurfaceGui / ScreenGui), and that is to set the size to a negative value, like {0,-100},{0,100}

You can? This is all that happens for me:

Thank you though, that worked seemingly: