melonJS
    Preparing search index...

    Interface ProgressBarSettings

    The settings a ProgressBar takes. Only width and height are required.

    interface ProgressBarSettings {
        bindEvent?: keyof Events;
        borderColor?: Paint | null;
        borderWidth?: number;
        direction?: ProgressBarDirection;
        fillColor?: Paint;
        font?: string;
        fontSize?: number;
        height: number;
        labelFillStyle?: Paint;
        labelFormat?: (value: number, ratio: number) => string;
        max?: number;
        min?: number;
        onChange?: (value: number, ratio: number, bar: ProgressBar) => void;
        padding?: number;
        radius?: number;
        shadowBlur?: number;
        shadowColor?: Paint | null;
        shadowOffsetX?: number;
        shadowOffsetY?: number;
        showLabel?: boolean;
        trackColor?: Paint | null;
        value?: number;
        width: number;
    }
    Index
    bindEvent?: keyof Events

    An event to take the value from, instead of setting it by hand: each time the event fires, its first argument becomes the value. The bar stops listening when it is destroyed.

    borderColor?: Paint | null

    the colour of the border drawn around the bar; null for none

    null
    
    borderWidth?: number

    the border's thickness, in pixels, drawn inside the bar's edge

    1
    

    which edge the fill grows from; see ProgressBarDirection

    "left-to-right"
    
    fillColor?: Paint

    The colour of the fill. A Color is read again every frame, so changing the one you passed changes the bar.

    "#ffffff"
    
    font?: string

    the label's CSS font family

    "sans-serif"
    
    fontSize?: number

    the label's text height, in pixels; 70% of the bar's height (at least 8), rounded, if not given

    height: number

    the bar's full height, in pixels

    labelFillStyle?: Paint

    the label's colour

    "#ffffff"
    
    labelFormat?: (value: number, ratio: number) => string

    What the label says, given the value and its 0..1 fraction. The default shows a rounded percentage, such as "75%".

    max?: number

    the value that shows as full; given below min, the two are swapped

    1
    
    min?: number

    the value that shows as empty

    0
    
    onChange?: (value: number, ratio: number, bar: ProgressBar) => void

    Called each time the value changes, with the new value, the same as a 0..1 fraction of the way from min to max, and the bar. Not called when the value is set to what it already is.

    padding?: number

    the gap between the track's edge and the fill on each side, in pixels

    0
    
    radius?: number

    the corner radius, in pixels; 0 is square. The fill's corners are reduced by padding, so they stay parallel to the track's.

    0
    
    shadowBlur?: number

    how far the shadow's soft edge spreads, in pixels; 0 is a sharp edge

    8
    
    shadowColor?: Paint | null

    The colour of a drop shadow under the bar; null for none. Its alpha sets how dark the shadow is, e.g. "#00000066".

    null
    
    shadowOffsetX?: number

    how far right the shadow falls, in pixels; negative goes left

    0
    
    shadowOffsetY?: number

    how far down the shadow falls, in pixels; negative goes up

    4
    
    showLabel?: boolean

    draw a text label centred over the bar

    false
    
    trackColor?: Paint | null

    the colour behind the fill; null leaves it hollow, showing whatever is behind the bar

    null
    
    value?: number

    the starting value, clamped between min and max; min if not given

    width: number

    the bar's full width, in pixels