Is there a way to "erase" a part of the image in an EditableImage?

The title says it all, I’ve been trying to create some kind of lighting effect using EditableImages by creating a black semi-transparent box on the whole screen and then erasing the parts where there is lighting but I still haven’t figured out the erasing part.


This is my game, I want to be able to erase the area where the white circle is, any ideas?

thanks!!!

This solution looks scarier than I was hoping, but you can use EditableImage:WritePixels() to overwrite the alpha component (opacity) of pixels in a certain region. However, this region is rectangular, so we need a little math to get things circular.

You can paste this code directly into the command line to produce the example shown above. It essentially draws the translucent background and cuts out the circle (which is stretched to fit the screen).

-- Conjure a magical function to cut out a circle
local function CutCircle(image: EditableImage, position: Vector2, radius: number, alpha: number)
	local center = image.Size/2 + Vector2.new(0.5, 0.5)
	local diameter = radius * 2
	local pixels = table.create(diameter^2 * 4, 0) -- Initialize a square of transparent pixels (r, g, b, a)
	local x0, y0 = position.X, position.Y
	
	-- Keep pixels outside of the given radius translucent
	for x = 1, diameter do
		for y = 1, diameter do
			if (center - Vector2.new(x + x0, y + y0)).Magnitude > radius then
				pixels[((y - 1) * diameter + x) * 4] = alpha -- Set alpha component of each pixel
			end
		end
	end
	
	-- Overwrite the image region
	image:WritePixels(position, Vector2.new(diameter, diameter), pixels)
end


local alpha = 0.5 -- Background opacity (1 = fully opaque)

-- Create the image and draw the translucent background
local label = Instance.new("ImageLabel")
label.Size = UDim2.fromScale(1, 1) -- Fill screen
label.BackgroundTransparency = 1
label.Parent = Instance.new("ScreenGui", game.StarterGui)

local image = Instance.new("EditableImage")
image.Size = Vector2.new(1024, 1024) -- Current max size
image.Parent = label
image:DrawRectangle(Vector2.new(), image.Size, Color3.new(), 1 - alpha)

-- Cut the circle (magically)
local radius = 300
local halfSize = image.Size/2
local position = Vector2.new(halfSize.X - radius, halfSize.Y - radius) -- Center
CutCircle(image, position, radius, alpha)
2 Likes

Thank you so much!!
I wish they added an option to modify the opacity of pixels using different shapes but your solutions good enough for me!!

Again thanks!!!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.