Skip to content

Player HUD Arrow Wheel

Ayooluwa Fadeyibi edited this page Oct 18, 2026 · 1 revision

Player HUD: Arrow Wheel

Part of the Player HUD. This page covers how the wheel is drawn; the state, input handling and validation are in Arrow Selection Wheel.

Purpose

Holding Tab while a bow is equipped opens a pie-shaped wheel in the middle of the screen for choosing the arrow type. Releasing Tab confirms the highlighted slice.

Arrow wheel

  • The wheel is a pie split evenly into one slice per wheel type: standard arrow on top, then fire (bottom-right) and ice (bottom-left), 120 degrees apart, clockwise from the top.
  • The slice under the pointer lights up gold; slices the player has no arrows for are faded.
  • A disc in the middle (the pointer's deadzone) shows the currently equipped arrow, and a gold label under the wheel names the highlighted type (e.g. "Standard Arrow").

Class diagram

classDiagram
    class UIComponent {
        <<abstract>>
    }

    class ArrowWheelDisplay {
        -Map~ArrowType, Image~ slices
        -Map~ArrowType, Image~ icons
        -Image centreIcon
        -Label label
        +create()
        +draw(SpriteBatch)
        +dispose()
    }

    class ArrowWheelComponent {
        -boolean open
        -ArrowType highlighted
        -ArrowType selected
        +isOpen() boolean
        +getHighlighted() ArrowType
        +getSelected() ArrowType
        +isAvailable(ArrowType) boolean
        +setAvailable(ArrowType, boolean)
        +setScreenCentre(float, float)
    }

    class ArrowType {
        <<enum>>
        +DEADZONE_RADIUS
        +getWheelTypes() ArrowType[]
        +forDirection(Vector2) ArrowType
    }

    UIComponent <|-- ArrowWheelDisplay
    ArrowWheelDisplay --> ArrowWheelComponent : polls each frame
    ArrowWheelDisplay ..> ArrowType : one slice per wheel type
    ArrowWheelComponent ..> ArrowType : forDirection
Loading

Lifecycle

  1. create() builds the actors once: for each wheel type a normal and a highlighted slice texture, the centre disc, one icon per type and the label. The pie is drawn procedurally into Pixmap-backed textures (nothing is loaded from an atlas), then scaled to WHEEL_RADIUS. The root group starts hidden and is non-touchable.
  2. draw() runs every frame and only polls state; it listens to no events. If ArrowWheelComponent.isOpen() is false it hides the root and returns. Otherwise it:
    • centres the wheel on the stage and reports that centre to ArrowWheelComponent.setScreenCentre, so pointer offsets are measured from the wheel and not from the screen;
    • swaps each slice between its normal and highlighted drawable (getHighlighted()), and fades unavailable ones (isAvailable());
    • updates the centre icon to getSelected() and the label text.
  3. dispose() removes the root and disposes the generated textures.

The slice maths matches ArrowType.forDirection (slice i is centred i * 360 / count degrees clockwise from the top), so the slice drawn under the pointer is the one that gets selected.

Public methods

ArrowWheelDisplay has no API beyond the UIComponent lifecycle. What it reads from ArrowWheelComponent:

Method Used for
isOpen() Show or hide the wheel
getHighlighted() Which slice is lit, and the label text
getSelected() Centre icon
isAvailable(ArrowType) Fade slices with no arrows
setScreenCentre(x, yFromTop) Told where the wheel is, once per frame

Adding a wheel type means adding it to ArrowType.WHEEL_TYPES and giving it an icon in ArrowWheelDisplay.iconPathFor; the slice count and angles follow the array length.

Tuning constants

In ArrowWheelDisplay (and ArrowType):

Constant Value Purpose
WHEEL_RADIUS 170px Outer radius of the pie
ArrowType.DEADZONE_RADIUS 40px Hole in the middle; pointer here selects nothing
ICON_SIZE 76px Arrow icon size on each slice
CENTRE_ICON_SIZE 44px Icon in the centre disc
ICON_RING_SHARE 0.62 Icon distance from centre as a share of the radius
UNAVAILABLE_ALPHA 0.35 Opacity of slices with no arrows
SLICE_GAP_PIXELS / BORDER_PIXELS 5 Gap between slices and border width (in the 256px texture)
SLICE_FILL / SLICE_HIGHLIGHT_FILL dark teal / gold Slice colours

Tests

Links

Clone this wiki locally