Cursor.registerCustomIcon

From RAGE Multiplayer Wiki

Client-Side
Function

 JavaScript



JavaScript Syntax

Register a custom cursor.

NOTE: If you'd like to reset the cursor simply set the path to an empty string.

Required Params

  • type: Number
  • packageFilePath: String
  • offsetX: Float
  • offsetY: Float


Return Value

  • void void

Cursor Types

//This types are taken from here: https://rage.mp/files/file/495-windows-style-cursor-pack/

const MAP_CURSOR_NAME_TO_TYPE = {
    CT_POINTER: 0,
    CT_CROSS: 1,
    CT_HAND: 2,
    CT_IBEAM: 3,
    CT_WAIT: 4,
    CT_HELP: 5,
    CT_EASTRESIZE: 6,
    CT_NORTHRESIZE: 7,
    CT_NORTHEASTRESIZE: 8,
    CT_NORTHWESTRESIZE: 9,
    CT_SOUTHRESIZE: 10,
    CT_SOUTHEASTRESIZE: 11,
    CT_SOUTHWESTRESIZE: 12,
    CT_WESTRESIZE: 13,
    CT_NORTHSOUTHRESIZE: 14,
    CT_EASTWESTRESIZE: 15,
    CT_NORTHEASTSOUTHWESTRESIZE: 16,
    CT_NORTHWESTSOUTHEASTRESIZE: 17,
    CT_COLUMNRESIZE: 18,
    CT_ROWRESIZE: 19,
    CT_MIDDLEPANNING: 20,
    CT_EASTPANNING: 21,
    CT_NORTHPANNING: 22,
    CT_NORTHEASTPANNING: 23,
    CT_NORTHWESTPANNING: 24,
    CT_SOUTHPANNING: 25,
    CT_SOUTHEASTPANNING: 26,
    CT_SOUTHWESTPANNING: 27,
    CT_WESTPANNING: 28,
    CT_MOVE: 29,
    CT_VERTICALTEXT: 30,
    CT_CELL: 31,
    CT_CONTEXTMENU: 32,
    CT_ALIAS: 33,
    CT_PROGRESS: 34,
    CT_NODROP: 35,
    CT_COPY: 36,
    CT_NONE: 37,
    CT_NOTALLOWED: 38,
    CT_ZOOMIN: 39,
    CT_ZOOMOUT: 40,
    CT_GRAB: 41,
    CT_GRABBING: 42,
    CT_CUSTOM: 43,
};

Syntax

mp.gui.cursor.registerCustomIcon(type, packageFilePath, offsetX, offsetY);

Example

This example is taken from here: https://rage.mp/files/file/495-windows-style-cursor-pack/

Client-Side
const CURSORS = [
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_POINTER,
		path: 'cursors/pointer.png',
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_HELP,
		path: 'cursors/help.png',
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_NONE,
		path: 'cursors/pointer.png',
		offset: [10000, 10000],
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_HAND,
		path: 'cursors/hand.png',
		offset: [-10, 0],
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_IBEAM,
		path: 'cursors/beam.png',
		offset: [-24, -24],
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_MOVE,
		path: 'cursors/move.png',
		offset: [-18, -18],
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_EASTWESTRESIZE,
		path: 'cursors/east-west-resize.png',
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_NORTHSOUTHRESIZE,
		path: 'cursors/nort-south-resize.png',
	},
	{
		type: MAP_CURSOR_NAME_TO_TYPE.CT_NOTALLOWED,
		path: 'cursors/notallowed.png',
		offset: [-12, -12],
	}
];

mp.events.add('playerReady', () => {
	mp.browsers.new('package://ui/cursor-tester.html');
	setTimeout(() => mp.gui.cursor.visible = true, 500);

	for (const cursor of CURSORS) {
		const offset = cursor.offset || [0, 0];
		mp.gui.cursor.registerCustomIcon(cursor.type, cursor.path, offset[0], offset[1]);
	}
});


See also