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
|
||||
|
||||
# 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
|
||||
* 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.
|
||||
|
|
|
@ -27,39 +27,37 @@ const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
|
|||
Enum.KeyCode.Six,
|
||||
Enum.KeyCode.Seven,
|
||||
Enum.KeyCode.Eight,
|
||||
Enum.KeyCode.Nine
|
||||
Enum.KeyCode.Nine,
|
||||
// idk if this works
|
||||
Enum.KeyCode.Zero
|
||||
]
|
||||
|
||||
return (
|
||||
<frame
|
||||
{...spreadableProps}
|
||||
AutomaticSize={Enum.AutomaticSize.X}
|
||||
AnchorPoint={new Vector2(0.5, 1)}
|
||||
AnchorPoint={new Vector2(0, 0)}
|
||||
Position={new UDim2(0, 0, 0, 0)}
|
||||
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
|
||||
FillDirection={Enum.FillDirection.Horizontal}
|
||||
HorizontalAlignment={Enum.HorizontalAlignment.Center}
|
||||
VerticalAlignment={Enum.VerticalAlignment.Bottom}
|
||||
Padding={new UDim(0, 5)}
|
||||
VerticalAlignment={Enum.VerticalAlignment.Bottom}
|
||||
/>
|
||||
<Padding
|
||||
PaddingY={new UDim(0, 5)}
|
||||
Padding={new UDim(0, 10)}
|
||||
/>
|
||||
{
|
||||
clientState.backpack.GetChildren().map((tool, i) => (
|
||||
<Slot
|
||||
index={i + 1}
|
||||
Size={new UDim2(1, 0, 1, 0)}
|
||||
keycode={keycodes[i]}
|
||||
tool={tool as Tool}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</frame>
|
||||
</frame>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -44,50 +44,38 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
|
|||
})
|
||||
|
||||
return (
|
||||
<frame {...spreadableProps} BackgroundTransparency={1} SizeConstraint={Enum.SizeConstraint.RelativeYY}>
|
||||
<textbutton
|
||||
Position={new UDim2(0, 0, 0, 0)}
|
||||
<frame
|
||||
BackgroundColor3={Color3.fromHex("#11111b")}
|
||||
BackgroundTransparency={.7}
|
||||
Size={new UDim2(1, 0, 1, 0)}
|
||||
BackgroundColor3={new Color3()}
|
||||
BackgroundTransparency={0.3}
|
||||
Text=""
|
||||
Event={{
|
||||
Activated: (): void => {
|
||||
handleActivated()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<uicorner CornerRadius={new UDim(0.05, 0)}/>
|
||||
<uistroke
|
||||
Thickness={2}
|
||||
Color={new Color3(0.1, 0.1, 0.1)}
|
||||
ApplyStrokeMode={Enum.ApplyStrokeMode.Border}
|
||||
<uiaspectratioconstraint
|
||||
AspectRatio={6}
|
||||
/>
|
||||
<uicorner
|
||||
CornerRadius={new UDim(0, 8)}
|
||||
/>
|
||||
<Padding
|
||||
PaddingY={new UDim(.3, 0)}
|
||||
/>
|
||||
|
||||
<textlabel
|
||||
Size={new UDim2(1, 0, 0.2, 0)}
|
||||
TextColor3={Color3.fromHex("#cdd6f4")}
|
||||
BackgroundTransparency={1}
|
||||
Size={new UDim2(.2, 0, 1, 0)}
|
||||
Font={Enum.Font.GothamBold}
|
||||
Text={tostring(index)}
|
||||
TextXAlignment={Enum.TextXAlignment.Left}
|
||||
BackgroundTransparency={1}
|
||||
TextColor3={new Color3(1, 1, 1)}
|
||||
TextScaled
|
||||
>
|
||||
<uistroke Thickness={1}/>
|
||||
</textlabel>
|
||||
|
||||
/>
|
||||
<textlabel
|
||||
Size={new UDim2(1, 0, 1, 0)}
|
||||
AnchorPoint={new Vector2(0.5, 0.5)}
|
||||
Position={new UDim2(0.5, 0, 0.5, 0)}
|
||||
TextColor3={Color3.fromHex("#cdd6f4")}
|
||||
BackgroundTransparency={1}
|
||||
TextScaled
|
||||
Size={new UDim2(.8, 0, 1, 0)}
|
||||
Position={new UDim2(.2, 0, 0, 0)}
|
||||
Font={Enum.Font.Gotham}
|
||||
Text={tool.Name}
|
||||
TextColor3={Color3.fromRGB(255, 255, 255)}
|
||||
>
|
||||
<uistroke Thickness={1}/>
|
||||
<Padding Padding={new UDim(0.05, 0)}/>
|
||||
</textlabel>
|
||||
</textbutton>
|
||||
TextXAlignment={Enum.TextXAlignment.Left}
|
||||
TextScaled
|
||||
/>
|
||||
</frame>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue