omg my first tutorial!? yessssssssss!!!
4 hours ago I posted this : Image blur in roblox!
A blur system made using pure roblox code and editable images. How I did this you may say?
Well… let me tell you a few things first.
- This tutorial shows you how to manipulate images.
- The thing made in this tutorial though is quite laggy so use it at your own risk!
Lets get started!
Part 1:
What are editable images?
Editable images are the new roblox instance that allows for image manipulation so say bye to the old days where you use many images and frame to make an effect and say hi to the editable images!
How can I use them?
You can use them in serveral ways! From making a minimap to making custom 2d characters. You can also use them to find the average color of an image which can be quite useful! You can also make a blur system which I will shhow in just a bit.
What are its properties?
Editable image has one property and a lot and I mean A LOT OF METHODS.
You can read about them here: EditableImage | Documentation - Roblox Creator Hub
But this is just a little quick summary.
Recap
Methods are functions like:
workspace:GetChildren()
While properties are things like:
workspace.Part.Size
Editable image have the property Size which determines the size of the image in pixels. This can be as low and 0x0 and as big as 1024x1024. No big then that.
Its methods include:
| Method | Description |
|---|---|
| Copy | Has 2 arguments, min, max. Both are Vector 2. Using this method returns another editable image. |
| Crop | Has 2 arguments, min, max. Both are Vector 2. Using this method allows you to remove all other pixels BUT the pixels in the speicified area |
| Draw Circle | 4 arguments, Center, Radius, Color and Transparency. Makes a circle of said center and said radius with said color and transparency. |
| Draw Line | 4 arguments, point 1, point 2, color and transparency. Makes a line from point 1 to point 2 with said color and transparency. |
| Draw Image | 3 arguments, position, image, combinetype. The image is meant to be another editable image, and the combinetype is just a way on how the image should look. Its an enum value. |
| Draw rectangle | 4 arguments, position, size, color and transparency. The position is the top left point of the rectangle. And others are self explanatory. |
| Read Pixels | 2 arguments, position and size. The position should not exceed the bounds of the editable image and so shouldn't the size. |
| Resize | Rescales everything on the editable image to the size you want. |
| Rotate | Rotates the entire editable image a few said degrees with a boolean option to make it so that it also resizes the image to fit in the bounds. |
| Write Pixels | 3 arguments, position, size and pixels. The pixels is a table that should be of size: Size.X * Size.Y * 4. Where size is the size we want to write pixels on. And pixels being a table of format: {R,G,B,Transparency}. The following 4 values are to repeat until our said size has been reached. |
Part 2.
How blur module?
This is my code:
local function BlurImage(image,size,blursize)
local EI = game:GetService("AssetService"):CreateEditableImageAsync(image)
EI.Parent = ImageLabel
EI.Size = size
for x = 0,size.X-1 do
for y = 0,size.Y-1 do
local pos = Vector2.new(x,y)
local areasize = Vector2.new(math.clamp(size.X-x,1,blursize),math.clamp(size.Y-y,1,blursize))
local pixelsize = Vector2.one
local currentpixel = {}
local topleftpos = Vector2.new(math.clamp(pos.X-areasize.X/2,0,math.huge),math.clamp(pos.Y-areasize.Y/2,0,math.huge))
local pixels = EI:ReadPixels(topleftpos,areasize)
local r,g,b,a = 0,0,0,0
for i = 1,#pixels,4 do
local r0,g0,b0,a0 = pixels[i],pixels[i+1],pixels[i+2],pixels[i+3]
r += r0
g += g0
b += b0
a += a0
end
r,g,b,a = r/(#pixels/4),g/(#pixels/4),b/(#pixels/4),a/(#pixels/4)
currentpixel = {r,g,b,a}
EI:WritePixels(pos,pixelsize,currentpixel)
end
if x % 20 == 0 then
task.wait()
end
end
return EI
end
Let’s break it down into a few chunks:
Section 1: Initializing
local EI = game:GetService("AssetService"):CreateEditableImageAsync(image)
EI.Size = size
Here we first create an editable image using AssetService as given. Then we set the size of the editable image to the ACTUAL size of the image.
– Image size stuff.
Image size can be found by applying the image to a image label. Setting its ScaleType to slice. Clicking the SliceCenter property and clicking the three dots. Then on the gui that pops up the size will be showed some where on the bottom right corner.
Section 2: Looping
for x = 0,size.X-1 do
for y = 0,size.Y-1 do
Here I setted up 2 loops, x and y. Both start from 0 and end at their corresponding size coordinate - 1. I used -1 because the code can error when it reaches such ends because editable image only work in its bounds.
Section 3: Blurring
Now comes the hardest part yet!
local pos = Vector2.new(x,y)
local areasize = Vector2.new(math.clamp(size.X-x,1,blursize),math.clamp(size.Y-y,1,blursize))
local pixelsize = Vector2.one
local currentpixel = {}
local topleftpos = Vector2.new(math.clamp(pos.X-areasize.X/2,0,math.huge),math.clamp(pos.Y-areasize.Y/2,0,math.huge))
local pixels = EI:ReadPixels(topleftpos,areasize)
local r,g,b,a = 0,0,0,0
for i = 1,#pixels,4 do
local r0,g0,b0,a0 = pixels[i],pixels[i+1],pixels[i+2],pixels[i+3]
r += r0
g += g0
b += b0
a += a0
end
r,g,b,a = r/(#pixels/4),g/(#pixels/4),b/(#pixels/4),a/(#pixels/4)
currentpixel = {r,g,b,a}
EI:WritePixels(pos,pixelsize,currentpixel)
- First of all we get the position on our image.
- Then we calculate the area of blur. This will be explained further.
- We know that our pixel size is 1x1 so leave that.
- We make a table called currentpixel which is just information about our pixel.
- We need to get the pixels in an area next to our current pixel. For this we first calculate the top left position as shown in like 5.
- Then we use EditableImage:ReadPixels. Here we use the areasize which now explaining, is basically the total surrounding size of our current pixel.
- Then we set r,g,b,a whcih we will use to get the average of all surrounding pixels.
- We use a loop for that with a skip count of 4 because as said a pixel is a table of 4 values as shown:
{r,g,b,transparency} - We use arithematic mean to calculate the mean by first adding all r,g,b and a’s and then dividing them later own.
- After that we formulate our pixel table and set the current pixel as the average of its surround pixel.
Section 4: The end
if x % 20 == 0 then
task.wait()
end
end
return EI
end
Here is our end part which is just a task.wait function and me returning the editable image.
Part 3
Remarks
Hey everyone! I hope some of you found this useful! This was actually my first ever tutorial on roblox and so I am sorry if I was bad at explaining! Please let me know if I got something wrong or if I need to change something!
Thanks for reading! Bye bye!
Polls
- Great job on this!
- Bad job.
0 voters
- I learned something from this! Thanks!
0 voters
- Definitely you should!
- Definitely not.
0 voters
would be a very nice addition too! But nice tutorial!