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!
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:
Another Example:
IDE:
In Game:
Code:
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!