Hey there developers!
So I was recently playing Loomian Legacy, and become interested in recreating something like this:
I really want to know how to recreate the radar chart in the centre of the image.
(btw, its also animated)
Here’s another image of a radar chart:
Do you use multiple frames? Connect points?
local sp=script.Parent
local HALF = Vector2.new(0.5, 0.5);
local IMG = Instance.new("ImageLabel");
IMG.BackgroundTransparency = 1;
IMG.AnchorPoint = HALF;
IMG.BorderSizePixel = 0;
local RIGHT = "rbxassetid://319692151";
local LEFT = "rbxassetid://319692171";
local function drawtriangle(a, b, c, w1, w2)
local ab, ac, bc = b - a, c - a, c - b;
local abd, acd, bcd = ab:Dot(ab), ac:Dot(ac), bc:Dot(bc);
if (abd > acd and abd > bcd) then
c, a = a, c;
elseif (acd > bcd and acd > abd) then
a, b = b, a;
end
ab, ac, bc = b - a, c - a, c - b;
local unit = bc.unit;
local height = unit:Cross(ab);
local flip = (height >= 0);
local theta = math.deg(math.atan2(unit.y, unit.x)) + (flip and 0 or 180);
local m1 = (a + b)/2;
local m2 = (a + c)/2;
w1 = w1 or IMG:Clone();
w1.Image = flip and RIGHT or LEFT;
w1.AnchorPoint = HALF;
w1.Size = UDim2.new(0, math.abs(unit:Dot(ab)), 0, height);
w1.Position = UDim2.new(0, m1.x, 0, m1.y);
w1.Rotation = theta;
w1.Parent = sp.RadarChart;
w2 = w2 or IMG:Clone();
w2.Image = flip and LEFT or RIGHT;
w2.AnchorPoint = HALF;
w2.Size = UDim2.new(0, math.abs(unit:Dot(ac)), 0, height);
w2.Position = UDim2.new(0, m2.x, 0, m2.y);
w2.Rotation = theta;
w2.Parent = sp.RadarChart;
return w1, w2;
end
local center=Vector2.new(300,300)
local length=150
local function constructbackground()
local color=Color3.new(.2,.2,.2)
for i=1,5 do
local degrees=math.rad(i*360/5+360/10)
local prior=degrees-math.rad(360/5)
local b=center+Vector2.new(1*math.sin(prior),1*math.cos(prior))*length
local c=center+Vector2.new(1*math.sin(degrees),1*math.cos(degrees))*length
local t1,t2=drawtriangle(center,b,c)
t1.ImageColor3=color
t2.ImageColor3=color
end
end
constructbackground()
local order={
"Power";
"Speed";
"Trick";
"Recovery";
"Defense";
}
local stats={
5;
2;
7;
5;
1;
}
local function showstats()
local color=Color3.new(1,.6,0)
for i,v in pairs(order) do
local stat=stats[i]
local laststat=stats[i-1] or stats[#stats]
local degrees=math.rad(i*360/5+360/10)
local prior=degrees-math.rad(360/5)
local b=center+Vector2.new(1*math.sin(prior),1*math.cos(prior))*length*laststat/10
local c=center+Vector2.new(1*math.sin(degrees),1*math.cos(degrees))*length*stat/10
local t1,t2=drawtriangle(center,b,c)
t1.ImageColor3=color
t2.ImageColor3=color
end
end
constructbackground()
showstats()
I used EgoMoose’s triangle function and cos/sin to get the rotation direction. This script generates a very fragmentary hexagonal radar chart. Still working on how I can make it look more complete.
