Timer Bars 2 1.0.1

Timer Bars 2 is a complete rewrite of my old Timer Bars resource. It's not backwards compatible, meaning you'll need to update your existing timerbar code if you want to switch to this resource.

Changes

• Now requires RAGE Multiplayer 1.1.0 and above
• Now using offsets, sizes and logic from alexguirre's RAGENativeUI. It really is a great project and deserves some GitHub stars, check it out.
• OOP approach
• Probably a bit more efficient
• Definitely more pleasing to look at

Clientside API

You can access the API by loading timerbars into a variable:

const timerBarPool = require("timerbars");

timerbars/index.js exports these functions:

// Adds timerbars into the internal timerbar pool. Values sent to this function must be an instance of TimerBarBase or they'll be ignored.
add(...args);

// Returns whether the internal timerbar pool has specified timerbar.
has(timerBar);

// Removes the specified timerbar from the internal timerbar pool. If you added the same timerbar multiple times, you'll need to use this function multiple times.
remove(timerBar);

// Empties the internal timerbar pool.
clear();

Timer Bars

TimerBarBase

This is the base class for other timer bar classes, not really useful on its own since it just draws the title and background. You can inherit from this class to implement your own timer bar designs.

/* Constructor */
new TimerBarBase(title);

/* Properties */
// Title (left text) of the timer bar. Accepts and returns a string.
title

// Color of the timer bar's title. Accepts HUD color IDs or RGBA array, returns RGBA array.
titleColor

// Highlight color of the timer bar. Accepts HUD color IDs or RGBA array. Returns null if a highlight color isn't set and RGBA array otherwise.
highlightColor

/* Functions */
// Calls mp.game.gxt.reset on the internal GXT entries. Should be used if you're going to stop using a timer bar completely.
resetGxt()

TextTimerBar

This is the timer bar with a title and a text.

/* Constructor */
new TextTimerBar(title, text);

/* Properties */
// Inherited from TimerBarBase
title
titleColor
highlightColor

// Label (right text) of the timer bar. Accepts and returns a string.
text

// Color of the timer bar's label. Accepts HUD color IDs or RGBA array, returns RGBA array.
textColor

// Color of the timer bar's label and title, accepts HUD color IDs or RGBA array. No return value since it's just a setter.
color

/* Functions */
// Inherited from TimerBarBase
resetGxt()

PlayerTimerBar

This is the timer bar with a title and a text, except the title is styled to be like GTA Online's player name display.

/* Constructor */
new PlayerTimerBar(title, text);

/* Properties */
// Inherited from TimerBarBase
title
titleColor
highlightColor

// Inherited from TextTimerBar
text
textColor
color

/* Functions */
// Inherited from TimerBarBase
resetGxt()

BarTimerBar

This is the timer bar with a title and a progress bar.

/* Constructor */
new BarTimerBar(title, progress);

/* Properties */
// Inherited from TimerBarBase
title
titleColor
highlightColor

// Progress of the timer bar. Accepts and returns a number between 0.0 and 1.0.
progress

// Background color of the progress bar. Accepts HUD color IDs or RGBA array, returns RGBA array.
backgroundColor

// Foreground color of the progress bar. Accepts HUD color IDs or RGBA array, returns RGBA array.
foregroundColor

/* Functions */
// Inherited from TimerBarBase
resetGxt()

CheckpointTimerBar

This is the timer bar with a title and a bunch of circles.

/* Constructor */
new CheckpointTimerBar(title, numCheckpoints);

/* Static properties */
CheckpointTimerBar.state = {
    inProgress: 0,
    completed: 1,
    failed: 2
};

/* Properties */
// Inherited from TimerBarBase
title
titleColor
highlightColor

// The amount of checkpoints of the timer bar. Read only, returns a number.
numCheckpoints

// Color of the checkpoints with the state "completed". Accepts HUD color IDs or RGBA array, returns RGBA array.
color

// Color of the checkpoints with the state "inProgress". Accepts HUD color IDs or RGBA array, returns RGBA array.
inProgressColor

// Color of the checkpoints with the state "failed". Accepts HUD color IDs or RGBA array, returns RGBA array.
failedColor

/* Functions */
// Inherited from TimerBarBase
resetGxt()

// Sets a specified checkpoint's state, checkpoint indices start from 0 and go up to numCheckpoints - 1. Refer to static properties section for newState values.
setCheckpointState(index, newState);

// Sets all checkpoints state of the timer bar. Refer to static properties section for newState values.
setAllCheckpointsState(newState);

Check the wiki for HUD colors: https://wiki.rage.mp/index.php?title=Fonts_and_Colors#HUD_Colors

Example

Creating the timerbars in the screenshot:

const timerBarPool = require("timerbars");

const TextTimerBar = require("timerbars/classes/TextTimerBar");
const PlayerTimerBar = require("timerbars/classes/PlayerTimerBar");
const BarTimerBar = require("timerbars/classes/BarTimerBar");
const CheckpointTimerBar = require("timerbars/classes/CheckpointTimerBar");

// Set up text bars
const mapTimeBar = new TextTimerBar("MAP TIME", "00:08");
mapTimeBar.textColor = [224, 50, 50, 255]; // or 6 (HUD_COLOUR_RED)
mapTimeBar.highlightColor = 8; // HUD_COLOUR_REDDARK

const ksBar = new TextTimerBar("KILLSTREAK", "5");

// Set up progress bar
const progressBar = new BarTimerBar("CAPTURING", 0.33);

// Set up checkpoint bar
const checkpointBar = new CheckpointTimerBar("BASES", 5);
checkpointBar.color = 18; // HUD_COLOUR_GREEN, or [114, 204, 114, 255]

for (let i = 0; i < 3; i++) {
    checkpointBar.setCheckpointState(i, CheckpointTimerBar.state.completed);
}

// Set up player bars
const playerBars = [
    new PlayerTimerBar("3rd: PlayerName3", "9 kills"),
    new PlayerTimerBar("2nd: PlayerName2", "12 kills"),
    new PlayerTimerBar("1st: AimbotNub", "30 kills")
];

playerBars.forEach((bar, index) => {
    bar.color = 107 + index;
});

// Bars won't be drawn until they are in the timerBarPool, so press F6 to add them
mp.keys.bind(0x75 /* F6 */, false, () => {
    timerBarPool.add(mapTimeBar, ksBar, progressBar, checkpointBar, ...playerBars);
});

// ...and press F7 to clear the timerBarPool (or remove them individually with the timerBarPool.remove function)
mp.keys.bind(0x76 /* F7 */, false, () => {
    timerBarPool.clear();
});

// Pressing F8 toggles a loading prompt, which makes the timerbars go up a bit
mp.keys.bind(0x77 /* F8 */, false, () => {
    mp.game.gxt.set("TB_TEST_LOADING", "Preparing next map...");

    if (!mp.game.invoke("0xD422FCC5F239A915") /* BUSYSPINNER_IS_ON */) {
        mp.game.ui.setLoadingPromptTextEntry("TB_TEST_LOADING");
        mp.game.ui.showLoadingPrompt(1);
    } else {
        mp.game.invoke("0x10D373323E5B9C0D" /* BUSYSPINNER_OFF */);
    }
});

Source code is available on GitHub in case you don't want to download: https://github.com/root-cause/ragemp-timerbars