revamp hotbar ui
This commit is contained in:
parent
f9403100de
commit
d6af38eba1
3 changed files with 57 additions and 69 deletions
|
@ -7,6 +7,8 @@ An in-dev game that I plan to make a shooter game out of.
|
||||||
|
|
||||||
— reidlab
|
— reidlab
|
||||||
|
|
||||||
|
# Ui theming is based on Catppucin Mocha. You can find the colors [here](https://github.com/catppuccin/catppuccin) and the style guide [here](https://github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md)
|
||||||
|
|
||||||
# Hacks
|
# Hacks
|
||||||
* I get a strange error about private identifiers in [`./src/ReplicatedStorage/ecs/state.ts`](./src/ReplicatedStorage/ecs/state.ts)
|
* I get a strange error about private identifiers in [`./src/ReplicatedStorage/ecs/state.ts`](./src/ReplicatedStorage/ecs/state.ts)
|
||||||
* I decided to omit the "TS" folder from [`./default.project.json:40`](./default.project.json) due to the script override not working in Health.server.ts in StarterCharacterScripts.
|
* I decided to omit the "TS" folder from [`./default.project.json:40`](./default.project.json) due to the script override not working in Health.server.ts in StarterCharacterScripts.
|
||||||
|
|
|
@ -27,38 +27,36 @@ const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
|
||||||
Enum.KeyCode.Six,
|
Enum.KeyCode.Six,
|
||||||
Enum.KeyCode.Seven,
|
Enum.KeyCode.Seven,
|
||||||
Enum.KeyCode.Eight,
|
Enum.KeyCode.Eight,
|
||||||
Enum.KeyCode.Nine
|
Enum.KeyCode.Nine,
|
||||||
|
// idk if this works
|
||||||
|
Enum.KeyCode.Zero
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<frame
|
<frame
|
||||||
{...spreadableProps}
|
{...spreadableProps}
|
||||||
AutomaticSize={Enum.AutomaticSize.X}
|
AnchorPoint={new Vector2(0, 0)}
|
||||||
AnchorPoint={new Vector2(0.5, 1)}
|
Position={new UDim2(0, 0, 0, 0)}
|
||||||
BackgroundTransparency={1}
|
BackgroundTransparency={1}
|
||||||
Key="Hotbar"
|
Size={new UDim2(.25, 0, 1, 0)}
|
||||||
|
Key={"Hotbar"}
|
||||||
>
|
>
|
||||||
<frame Size={new UDim2(0, 0, 0.5, 0)} Position={new UDim2(0.5, 0, 0.5, 0)} BackgroundTransparency={1}>
|
<uilistlayout
|
||||||
<uilistlayout
|
Padding={new UDim(0, 5)}
|
||||||
FillDirection={Enum.FillDirection.Horizontal}
|
VerticalAlignment={Enum.VerticalAlignment.Bottom}
|
||||||
HorizontalAlignment={Enum.HorizontalAlignment.Center}
|
/>
|
||||||
VerticalAlignment={Enum.VerticalAlignment.Bottom}
|
<Padding
|
||||||
Padding={new UDim(0, 5)}
|
Padding={new UDim(0, 10)}
|
||||||
/>
|
/>
|
||||||
<Padding
|
{
|
||||||
PaddingY={new UDim(0, 5)}
|
clientState.backpack.GetChildren().map((tool, i) => (
|
||||||
/>
|
<Slot
|
||||||
{
|
index={i + 1}
|
||||||
clientState.backpack.GetChildren().map((tool, i) => (
|
keycode={keycodes[i]}
|
||||||
<Slot
|
tool={tool as Tool}
|
||||||
index={i + 1}
|
/>
|
||||||
Size={new UDim2(1, 0, 1, 0)}
|
))
|
||||||
keycode={keycodes[i]}
|
}
|
||||||
tool={tool as Tool}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</frame>
|
|
||||||
</frame>
|
</frame>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,50 +44,38 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<frame {...spreadableProps} BackgroundTransparency={1} SizeConstraint={Enum.SizeConstraint.RelativeYY}>
|
<frame
|
||||||
<textbutton
|
BackgroundColor3={Color3.fromHex("#11111b")}
|
||||||
Position={new UDim2(0, 0, 0, 0)}
|
BackgroundTransparency={.7}
|
||||||
Size={new UDim2(1, 0, 1, 0)}
|
Size={new UDim2(1, 0, 1, 0)}
|
||||||
BackgroundColor3={new Color3()}
|
>
|
||||||
BackgroundTransparency={0.3}
|
<uiaspectratioconstraint
|
||||||
Text=""
|
AspectRatio={6}
|
||||||
Event={{
|
/>
|
||||||
Activated: (): void => {
|
<uicorner
|
||||||
handleActivated()
|
CornerRadius={new UDim(0, 8)}
|
||||||
}
|
/>
|
||||||
}}
|
<Padding
|
||||||
>
|
PaddingY={new UDim(.3, 0)}
|
||||||
<uicorner CornerRadius={new UDim(0.05, 0)}/>
|
/>
|
||||||
<uistroke
|
<textlabel
|
||||||
Thickness={2}
|
TextColor3={Color3.fromHex("#cdd6f4")}
|
||||||
Color={new Color3(0.1, 0.1, 0.1)}
|
BackgroundTransparency={1}
|
||||||
ApplyStrokeMode={Enum.ApplyStrokeMode.Border}
|
Size={new UDim2(.2, 0, 1, 0)}
|
||||||
/>
|
Font={Enum.Font.GothamBold}
|
||||||
|
Text={tostring(index)}
|
||||||
<textlabel
|
TextScaled
|
||||||
Size={new UDim2(1, 0, 0.2, 0)}
|
/>
|
||||||
Text={tostring(index)}
|
<textlabel
|
||||||
TextXAlignment={Enum.TextXAlignment.Left}
|
TextColor3={Color3.fromHex("#cdd6f4")}
|
||||||
BackgroundTransparency={1}
|
BackgroundTransparency={1}
|
||||||
TextColor3={new Color3(1, 1, 1)}
|
Size={new UDim2(.8, 0, 1, 0)}
|
||||||
TextScaled
|
Position={new UDim2(.2, 0, 0, 0)}
|
||||||
>
|
Font={Enum.Font.Gotham}
|
||||||
<uistroke Thickness={1}/>
|
Text={tool.Name}
|
||||||
</textlabel>
|
TextXAlignment={Enum.TextXAlignment.Left}
|
||||||
|
TextScaled
|
||||||
<textlabel
|
/>
|
||||||
Size={new UDim2(1, 0, 1, 0)}
|
|
||||||
AnchorPoint={new Vector2(0.5, 0.5)}
|
|
||||||
Position={new UDim2(0.5, 0, 0.5, 0)}
|
|
||||||
BackgroundTransparency={1}
|
|
||||||
TextScaled
|
|
||||||
Text={tool.Name}
|
|
||||||
TextColor3={Color3.fromRGB(255, 255, 255)}
|
|
||||||
>
|
|
||||||
<uistroke Thickness={1}/>
|
|
||||||
<Padding Padding={new UDim(0.05, 0)}/>
|
|
||||||
</textlabel>
|
|
||||||
</textbutton>
|
|
||||||
</frame>
|
</frame>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue