Hello, I present to you this module to simulate a map of normals in your images.
-Get the Module HERE.
How to use it:
-Get the Module HERE.
Small example of use: Controller.rbxm (8.8 KB)
-You can put the module wherever you want, I recommend in the ReplicatedStorage.
-You must have permissions activated to use EditableImage.
Here is an example script (remember that you cannot upload images that do not have editing permissions or do not belong to you):
-
Place script as a child of an ImageLabel or ImageButton
local player = game.Players.LocalPlayer
local mouse = player:GetMouse()
local ImageLabel = script.Parent:WaitForChild("ImageLabel")
local function getMouseScalePosition()
local framePosition = ImageLabel.AbsolutePosition
local frameSize = ImageLabel.AbsoluteSize
local mouseX, mouseY = mouse.X, mouse.Y
local scaleX = (mouseX - framePosition.X) / frameSize.X
local scaleY = (mouseY - framePosition.Y) / frameSize.Y
return Vector2.new(scaleX, scaleY)
end
local Data = {
["Range"] = ImageLabel:GetAttribute("Range") or 1,
["Depth"] = ImageLabel:GetAttribute("Depth") or 1,
["Brightness"] = ImageLabel:GetAttribute("Brightness") or 1,
["Position"] = ImageLabel:GetAttribute("Position") or Vector2.new(0.5,0.5)
}
local NormalMapUI = game.ReplicatedStorage:WaitForChild("LightEffect")
local LightEffect = require(NormalMapUI)
local ColorMap = 129339073052860
local NormalMap =110360935400807
local Size = Vector2.new(250,250)
local ColorMapId,EditableImage = LightEffect.CreateBuffer(ColorMap,NormalMap,Size)
local IDs = {}
local NewLightID
if EditableImage then
LightEffect.AddToImage(ImageLabel,EditableImage)
game:GetService("RunService").Heartbeat:Connect(function()
local scalePosition = getMouseScalePosition()
Data["Position"] = scalePosition
end)
mouse.Button1Down:Connect(function()
NewLightID = LightEffect.AddLight(ColorMapId,Data)
end)
mouse.Move:Connect(function()
if NewLightID then
LightEffect.UpdateLight(ColorMapId,NewLightID,Data)
end
end)
end
-Things changed, now the image can support multiple lights, improvements in normal calculations (now they are calculated correctly). The optimization was noticeably reduced (I’m still working on it).
Explanation of Methods:
- CreateBuffer(ColorMap,NormalMap,Size)
-
You must give it 3 parameters, the first is the numerical ID of the ColorMap, the second is the numerical ID of the NormalMap and the third is a vector2 in which you will choose what resolution your image will be at (maximum 1024x1024 pixels).
-
This will return a numerical variable as an identifying ID (you must use it) and the EditableImage generated with the intention that the user can have the Object in a variable and thus be able to manipulate it or assign it to instances.
AddToImage(ImageLabel,EditableImage)
- This contains 2 parameters, the first is the instance that will display the image (ImageLabel or ImageButton) and the second is the EditableImage that you have or that the module has returned previously.
AddLight(ImageID:number,Attributes:table)
- Add a light with the required parameters (if you don’t give it the parameters it will add some by default). It will return a numerical ID identifier to be able to change its values in the future.
Effect.RemoveLight(ImagesID:number,LightID:number)
- Allows you to remove an existing light.
- The first parameter is the ID of your image that you received when creating it; The second parameter is the ID of the light that you received when using AddLight.
UpdateLight(ImageID, LightID, Attributes)
-
Change the attributes of a specific light point (if you don’t give it the parameters it will add some by default).
-
Example:
function Effect.AddLight(ImageID:number,Attributes:table)
local LightID = CreateUniqueId(5,Lights)
Lights[ImageID][LightID] = {["Brightness"] = Attributes["Brightness"],
["Position"] = Attributes["Position"],
["Range"] = Attributes["Range"]}
UPDATETEXTURE(ImageID)
return LightID
end
Effect.SetNormalDirection(ImageID,X,Y)
- Change how the image normal is calculated, so you can reverse the direction.
You must enter the ID of the light as the first parameter, X and Y are numerical, you can add the number you want. Limit: (-1,-1);(1,1).
-The table that will affect how the effect behaves must have these Indices:
Position: Determine the position of the light.
-
Type vector2 with scale dimensions (0-1).
-
It can be less than 0 and greater than 1.
Range:Determine the range of the light.
-
Numerical type with scale size (0-1)
-
It can be less than 0 and greater than 1.
Brigthness: Determines the brightness of the light.
-
Numerical type with scale size (0-1)
-
It can be less than 0 and greater than 1.
Depth: Determines the depth of the normals (I recommend this value at 1)
-
Numerical type with scale size (0-1)
-
It must not be equal to or less than 0
-All Indexes must be of type String:
local Data = {
["Range"] = 0.5,
["Depth"] = 1,
["Brightness"] = 0.5,
["Position"] = Vector2.zero
}
-I appreciate you reading this, sorry for my bad English.
Well, it looks good doesn’t it? Unfortunately, it has a serious problem, and that is that in the videos the resolution of the images is 250x250, and unfortunately, higher numbers like 500x500 almost reduce the FPS to such a point that it takes away its attractiveness, I do this with the intention that you help me optimize this and that you can use it and thus have effects like these in the interface.
-If you have a suggestion to Optimize this, I’m open to it.
500x500 