The preview of UI components is not functioning correctly. #8
Description
I've been trying to use the Previewer to create my UIs, but sometimes it doesn't work. It works for simple things, but when it's a little more complex, it doesn't seem to work properly.
IDE:
In Game:
Code:
$C = "../Common.ui";
$ServerCard = "ServerCard.ui";
$C.@PageOverlay {
Group #Lol {
LayoutMode: Top;
Anchor: (Width: 400, Height: 550);
Background: #131D30(0.85);
Group {
LayoutMode: Center;
FlexWeight: 3;
Group {
LayoutMode: Left;
Anchor: (Width: 150, Height: 50);
Group {
LayoutMode: Center;
Anchor: (Full: 1);
FlexWeight: 6;
AssetImage {
Anchor: (Width: 48, Height: 48);
Background: "../Common/logo.png";
}
}
Group {
LayoutMode: Bottom;
Anchor: (Left: 5, Full: 1);
FlexWeight: 10;
Label {
Style: (TextColor: #38BDF8, FontSize: 30, RenderBold: true);
FlexWeight: 1;
Text: "Nexus";
}
Label {
Style: (TextColor: #707070, FontSize: 11, RenderBold: true);
Anchor: (Top: 10);
FlexWeight: 1;
Text: "Main Menu";
}
}
}
}
Group #Servers {
LayoutMode: TopScrolling;
ScrollbarStyle: $C.@DefaultScrollbarStyle;
FlexWeight: 8;
Anchor: (Width: 400);
}
Group {
LayoutMode: Top;
FlexWeight: 4;
//Background: #2cfdff;
Group {
LayoutMode: Left;
FlexWeight: 1;
Padding: (Horizontal: 14);
Group {
LayoutMode: Left;
Anchor: (Height: 50, Right: 5);
FlexWeight: 1;
Padding: (Full: 5);
Background: #475AC4(0.5);
Group {
LayoutMode: Center;
Anchor: (Vertical: 1);
FlexWeight: 1;
Group {
Anchor: (Width: 24, Height: 24);
Background: #ffffff;
}
}
TextButton #Btn {
FlexWeight: 4;
Anchor: (Vertical: 1);
Text: "Discord";
Background: #475AC4;
Style: (
Sounds: $C.@ButtonSounds,
Default: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff)),
Hovered: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff)),
Pressed: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff)),
Disabled: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff))
);
}
}
Group {
LayoutMode: Top;
Anchor: (Height: 50, Left: 5);
FlexWeight: 1;
Background: #EA580C(0.5);
}
}
}
Group {
LayoutMode: Top;
FlexWeight: 2;
//Background: #FFFFFF;
Label {
Text: "IP: play.nexushytale.com";
Style: (
HorizontalAlignment: Center,
TextColor: #bfcdd5
);
}
}
}
}
$C.@BackButton {}
Another Example:
IDE:
In Game:
Code:
$C = "../Common.ui";
Group {
LayoutMode: Left;
Padding: (Horizontal: 7, Bottom: 10);
Group #ServerCard {
LayoutMode: Left;
FlexWeight: 1;
Background: #2F548C(0.5);
Group {
LayoutMode: Center;
Anchor: (Vertical: 1);
FlexWeight: 4;
Padding: (Full: 5);
ItemIcon #Item {
Anchor: (Width: 64, Height: 64);
Background: #FFFFFF;
}
}
Group {
LayoutMode: Top;
Anchor: (Vertical: 1);
FlexWeight: 12;
Padding: (Left: 5, Right: 10, Top: 5, Bottom: 5);
Group {
LayoutMode: Top;
FlexWeight: 5;
Group {
LayoutMode: Left;
FlexWeight: 1;
Label #Name {
Style: (TextColor: #ffffff, FontSize: 15, RenderBold: true);
FlexWeight: 3;
Text: "Survival";
}
Label #Label {
Style: (TextColor: #2ec262, FontSize: 12, HorizontalAlignment: End);
FlexWeight: 1;
Text: "51/500";
}
}
Group {
LayoutMode: Top;
FlexWeight: 1;
Label #Description {
Style: (TextColor: #9e9e9e, FontSize: 12);
Text: "Explore, build and survive";
}
}
}
Group {
LayoutMode: Top;
FlexWeight: 3;
TextButton #Btn {
Text: "Play";
Background: #059669;
Style: (
Sounds: $C.@ButtonSounds,
Default: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff)),
Hovered: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff)),
Pressed: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff)),
Disabled: (LabelStyle: (...$C.@DefaultButtonLabelStyle, TextColor: #ffffff))
);
}
}
}
}
}I really like being able to preview the result in the IDE, which is why I would like you to fix these issues!
Thank you very much for your work!