Getting Started with Events: Difference between revisions

From RAGE Multiplayer Wiki
No edit summary
 
(13 intermediate revisions by 5 users not shown)
Line 1: Line 1:
== Introduction ==
<div style="max-width:1200px; margin:0 auto; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height:1.65;">
 
<div style="background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border:1px solid #334155; border-radius:18px; padding:28px 30px; margin:16px 0 24px 0; color:#f8fafc;">
<div style="font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#93c5fd; margin-bottom:10px;">
RAGE:MP Documentation
</div>
<div style="font-size:34px; font-weight:800; line-height:1.15; margin-bottom:12px;">
Events System
</div>
<div style="font-size:16px; color:#cbd5e1; max-width:850px;">
Events are the backbone of scripting in RAGE:MP. This page explains what they are, how to register them, how communication works between server, client, and CEF, and how to manage them cleanly.
</div>
</div>
 
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:0 0 24px 0;">
 
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:18px;">
<div style="font-size:12px; font-weight:700; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Core Idea</div>
<div style="font-size:18px; font-weight:800; color:#0f172a; margin-bottom:6px;">Events react to things</div>
<div style="color:#475569; font-size:14px;">Built-in events react automatically. Custom events react when you trigger them.</div>
</div>
 
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:18px;">
<div style="font-size:12px; font-weight:700; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Communication</div>
<div style="font-size:18px; font-weight:800; color:#0f172a; margin-bottom:6px;">Know your direction</div>
<div style="color:#475569; font-size:14px;">Server, client, and CEF do not all communicate the same way.</div>
</div>
 
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:18px;">
<div style="font-size:12px; font-weight:700; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Rule</div>
<div style="font-size:18px; font-weight:800; color:#0f172a; margin-bottom:6px;">Register first</div>
<div style="color:#475569; font-size:14px;">An event must be registered before you can use or trigger it.</div>
</div>


Events are the core scripting system for RAGE:MP. They are registered upon your request and triggered in a certain situation, For example, [[PlayerEnterCheckpoint|PlayerEnterCheckpoint]] triggers when a player enters a checkpoint, so the event is automatically triggered and returns for you the '''Player''' that entered the checkpoint and the '''Checkpoint''' that he entered.
</div>


== Events system ==
== Introduction ==


In-order to use the events you need to register the event into the events tree using [[Events::add|addEvent]].<br>  
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:22px; margin:0 0 20px 0;">
There are 2 types of '''Events''':
Events are the <b>core scripting system</b> for RAGE:MP.
*Built in events
*Custom events


=== Built in events ===
They are registered by you and triggered when a specific action or situation happens.


They are events provided by '''RAGE:MP''' to be auto-triggered in a certain situation as we mentioned in the beginning (a '''Player''' entering a '''Checkpoint''').<br>
For example, [[PlayerEnterCheckpoint|PlayerEnterCheckpoint]] is triggered when a player enters a checkpoint. 
That event gives you:
<ul style="margin:10px 0 0 20px;">
<li>the <b>Player</b> that entered it</li>
<li>the <b>Checkpoint</b> that was entered</li>
</ul>
</div>


These are listed on the following pages:
== Event Types ==
*[[Server-side_events|Server-side events]]
*[[Client-side_events|Client-side events]]


=== Custom events ===
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin:0 0 22px 0;">


They are events build for you to control/call them anytime you want and in any situation you create for the '''Player'''.<br>
<div style="background:linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); border:1px solid #bfdbfe; border-radius:18px; padding:22px;">
<div style="font-size:13px; font-weight:800; text-transform:uppercase; color:#1d4ed8; margin-bottom:8px;">Type 1</div>
<div style="font-size:24px; font-weight:800; color:#0f172a; margin-bottom:10px;">Built-in Events</div>
<div style="color:#334155; margin-bottom:12px;">
These are provided by <b>RAGE:MP</b> and are triggered automatically in certain situations.
</div>
<div style="color:#475569; font-size:14px; margin-bottom:10px;">Examples:</div>
<ul style="margin:0 0 12px 20px; color:#475569;">
<li>player entering a checkpoint</li>
<li>player quitting</li>
<li>player spawning</li>
</ul>
<div style="font-size:14px;">
<b>Lists:</b><br />
* [[Server-side_events|Server-side events]]<br />
* [[Client-side_events|Client-side events]]
</div>
</div>


== Using events ==
<div style="background:linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); border:1px solid #bbf7d0; border-radius:18px; padding:22px;">
<div style="font-size:13px; font-weight:800; text-transform:uppercase; color:#15803d; margin-bottom:8px;">Type 2</div>
<div style="font-size:24px; font-weight:800; color:#0f172a; margin-bottom:10px;">Custom Events</div>
<div style="color:#334155; margin-bottom:12px;">
These are created by <b>you</b> and can be triggered whenever you want.
</div>
<div style="color:#475569; font-size:14px; margin-bottom:10px;">Use them to:</div>
<ul style="margin:0 0 0 20px; color:#475569;">
<li>connect systems together</li>
<li>trigger your own gameplay logic</li>
<li>send data between layers</li>
<li>create reusable scripting flows</li>
</ul>
</div>


=== Registering an event ===
</div>


You always have to register an event to the events tree before using it anywhere.<br>
== Registering Events ==


Registering it is pretty simple, but you have to keep in mind in which area it'll be called.<br>
<div style="background:#fff7ed; border:1px solid #fdba74; border-radius:16px; padding:16px 18px; margin:0 0 18px 0; color:#9a3412;">
<b>Important:</b> You must register an event before using it anywhere.
</div>


if your event will be for server-side use only then you can register it the way you want.
=== Server-side Event ===


<div class="header" style="background-color: #408DAE; color: #FFFFFF; border: 2px solid #408DAE;">
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; margin:0 0 18px 0;">
<div style="margin: 10px 10px 10px 10px;"><b>Server-Side</b></div>
A normal server-side event can be registered like this:
{{ServersideCode|
<pre>
<pre>
mp.events.add('eventName', (arg1, arg2, etc.) => {
mp.events.add('eventName', (arg1, arg2) => {
// code
    // code
});
});
</pre>
</pre>
}}
</div>
</div>


if your event will be called from client-side and you registered it in server-side. You have to add '''player''' argument as a main first argument because client-side delivers the localPlayer with your data, so you can know which player is it.
=== Client → Server Event ===
 
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; margin:0 0 18px 0;">
If the event is <b>triggered from client-side</b> but <b>registered on server-side</b>, the first argument must be <b>player</b>.


<div class="header" style="background-color: #408DAE; color: #FFFFFF; border: 2px solid #408DAE;">
This happens because the client sends the local player together with the event data, allowing the server to know who triggered it.
<div style="margin: 10px 10px 10px 10px;"><b>Server-Side</b></div>
{{ServersideCode|
<pre>
<pre>
mp.events.add('eventName', (player, arg1, arg2, etc.) => {
mp.events.add('eventName', (player, arg1, arg2) => {
// code
    // code
});
});
</pre>
</pre>
}}
</div>
</div>


In '''CEF''' you're not allowed to register any events. You can only call the functions that are registered in your '''CEF'''.
=== CEF Notes ===
 
<div style="background:#f8fafc; border:1px solid #cbd5e1; border-radius:16px; padding:18px; margin:0 0 22px 0;">
<div style="font-size:18px; font-weight:800; color:#0f172a; margin-bottom:10px;">CEF behaves differently</div>
<ul style="margin:0 0 12px 20px; color:#475569;">
<li>CEF cannot communicate directly with server-side</li>
<li>CEF mainly communicates with client-side</li>
<li>Older documentation often describes CEF more restrictively, but newer support exists in later versions</li>
</ul>
 
<div style="font-size:14px; font-weight:700; color:#334155; margin-bottom:8px;">In version 1.1:</div>
<div style="background:#0f172a; color:#e2e8f0; border-radius:14px; padding:16px; overflow:auto;">
<pre style="margin:0; white-space:pre-wrap;">
Added: CEF: mp.events.add(string eventName, function handler)
Added: CEF: mp.events.reset()
Added: CEF: mp.events.remove(string eventName)
Added: CEF: mp.events.call(string eventName) (alias to mp.trigger)
Added: Client-side: Browser.call(eventName, arguments...)
</pre>
</div>
</div>


== Calling methods ==
== Calling Events ==


It is pretty important to know how to call your events on each side, or you'll be totally lost in your development. We made it easier for you with the following calling methods, so you can know how the events calling system is working.
<div style="background:#eef2ff; border:1px solid #c7d2fe; border-radius:16px; padding:18px; margin:0 0 20px 0; color:#3730a3;">
<b>Tip:</b> Most event confusion comes from not knowing which side is calling which side.
</div>


<syntaxhighlight lang="javascript">
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px; margin:0 0 24px 0;">


// calls server-side local events / calls client-side local events
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:20px;">
<div style="font-size:12px; font-weight:800; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Local</div>
<div style="font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px;">Same Side</div>
<div style="color:#475569; margin-bottom:12px;">Use this when you call an event on the same side it exists on.</div>
<div style="font-weight:700; margin-bottom:8px;">Syntax</div>
{{JSContainer|
<pre>
mp.events.call('eventName', args);
mp.events.call('eventName', args);
</pre>
}}
</div>


/*
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:20px;">
* Calls client-side event from server-side.
<div style="font-size:12px; font-weight:800; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Remote</div>
* Notice: arguments must be inside an array.
<div style="font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px;">Server → Client</div>
*/
<div style="color:#475569; margin-bottom:12px;">The server tells one player or multiple players to execute a client-side event.</div>
 
<div style="font-weight:700; margin-bottom:8px;">Single player</div>
{{JSContainer|
<pre>
player.call('eventName', [arg1, arg2]);
player.call('eventName', [arg1, arg2]);
</pre>
}}


/*
<div style="font-weight:700; margin:14px 0 8px 0;">All players</div>
* Makes server's all players call their client-side.
{{JSContainer|
* Notice: arguments must be inside an array.
<pre>
*/
mp.players.call('eventName', [arg1, arg2]);
mp.players.call('eventName', [arg1, arg2]);
</pre>
}}


/*
<div style="font-weight:700; margin:14px 0 8px 0;">Filtered players</div>
* Makes server-side call filtered player's client-side.
{{JSContainer|
* For example this filters player with name '''WeirdNewbie''' to call his client-side.
<pre>
* Notice: arguments must be inside an array.
mp.players.call(
*/
    mp.players.toArray().filter((_player) => _player.name == 'WeirdNewbie'),
mp.players.call(mp.players.toArray().filter((_player) => _player.name == 'WeirdNewbie'), 'eventName', [args]);
    'eventName',
    [args]
);
</pre>
}}
</div>


// Makes client-side call server-side event
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:20px;">
<div style="font-size:12px; font-weight:800; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Remote</div>
<div style="font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px;">Client → Server</div>
<div style="color:#475569; margin-bottom:12px;">Use this when the client wants to trigger a server-side event.</div>
<div style="font-weight:700; margin-bottom:8px;">Syntax</div>
{{JSContainer|
<pre>
mp.events.callRemote('eventName', args);
mp.events.callRemote('eventName', args);
</pre>
}}
</div>


// Makes client-side call a function registered in CEF
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:20px;">
browser.execute(´javascriptFunction('${variable1}','${variable2}');´);
<div style="font-size:12px; font-weight:800; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Bridge</div>
<div style="font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px;">Client ↔ CEF</div>
<div style="color:#475569; margin-bottom:12px;">CEF does not directly talk to server-side. It goes through the client.</div>


/*
<div style="font-weight:700; margin-bottom:8px;">Client → CEF</div>
*Makes CEF call a event in client-side
{{JSContainer|
*Notice: You can't communicate between CEF and server-side
<pre>
*/
mbrowser.execute(`javascriptFunction('${variable1}', '${variable2}');`);
</pre>
}}
 
<div style="font-weight:700; margin:14px 0 8px 0;">CEF → Client</div>
{{JSContainer|
<pre>
mp.trigger('eventName', args);
mp.trigger('eventName', args);
</pre>
}}
</div>
</div>
== Example Flow ==
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:22px; margin:0 0 24px 0;">
<div style="font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px;">Server command triggering a client effect</div>
<div style="color:#475569; margin-bottom:18px;">
In this example, a player uses a server command, and the server tells that player's client to start a screen effect.
</div>
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px;">
<div>
<div style="font-size:16px; font-weight:800; color:#0f172a; margin-bottom:8px;">Server-side</div>
{{ServersideCode|
<pre>
mp.events.addCommand('effect', (player, fullText, effect) => {
    player.call('startEffectEvent', [effect]);
});
</pre>
}}
</div>
<div>
<div style="font-size:16px; font-weight:800; color:#0f172a; margin-bottom:8px;">Client-side</div>
{{ClientsideCode|
<pre>
mp.events.add('startEffectEvent', (effect) => {
    mp.game.graphics.startScreenEffect(effect, 10000, false);
});
</pre>
}}
</div>
</div>
</div>
== Cancelling and Managing Events ==
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px; margin:0 0 24px 0;">
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:20px;">
<div style="font-size:12px; font-weight:800; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Method 1</div>
<div style="font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px;">Pause / Destroy</div>
<div style="color:#475569; margin-bottom:12px;">
To control an event instance directly, you can use <b>mp.Event</b>.
</div>
{{ServersideCode|
<pre>
let ev = new mp.Event("playerDeath", (player, reason, killer) =>
{
    mp.players.broadcast('First blood!');
    ev.destroy(); // this event handler will not be called anymore
});
// ev.destroy(); // destroy it before it can execute again
</pre>
}}
</div>
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; padding:20px;">
<div style="font-size:12px; font-weight:800; text-transform:uppercase; color:#64748b; margin-bottom:8px;">Method 2</div>
<div style="font-size:22px; font-weight:800; color:#0f172a; margin-bottom:10px;">Remove from Tree</div>
<div style="color:#475569; margin-bottom:12px;">
You can remove a specific handler, remove all handlers for an event, remove multiple events, or reset the whole tree.
</div>
{{SharedCode|
<pre>
// Remove specified handler of specified event
function playerJoinHandler(player)
{
}
mp.events.add("playerJoin", playerJoinHandler);
mp.events.remove("playerJoin", playerJoinHandler);
// Remove handler(s) of specified event(s)
mp.events.remove("playerJoin");
mp.events.remove(["playerJoin", "playerQuit"]);
// Reset whole event tree
mp.events.reset();
// Get all handlers of specified event
mp.events.getAllOf("playerJoin").forEach(_ev => _ev(null));
</pre>
}}
</div>
</div>
== Quick Reference ==
<div style="background:#0f172a; border:1px solid #334155; border-radius:18px; padding:22px; margin:0 0 24px 0; color:#e2e8f0;">
<div style="font-size:22px; font-weight:800; margin-bottom:14px;">Cheat Sheet</div>


</syntaxhighlight>
{| class="wikitable" style="width:100%; background:#ffffff; color:#0f172a; border-radius:12px; overflow:hidden;"
! style="padding:10px;" | Action
! style="padding:10px;" | Method
|-
| Register local event
| <code>mp.events.add(...)</code>
|-
| Call local event
| <code>mp.events.call(...)</code>
|-
| Client to server
| <code>mp.events.callRemote(...)</code>
|-
| Server to one client
| <code>player.call(...)</code>
|-
| Server to all clients
| <code>mp.players.call(...)</code>
|-
| CEF to client
| <code>mp.trigger(...)</code>
|-
| Client to CEF
| <code>browser.execute(...)</code>
|-
| Remove event
| <code>mp.events.remove(...)</code>
|-
| Reset all events
| <code>mp.events.reset()</code>
|}
</div>
 
== Summary ==
 
<div style="background:linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border:1px solid #e2e8f0; border-radius:18px; padding:22px; margin:0 0 24px 0;">
<ul style="margin:0 0 0 20px; color:#334155;">
<li>Events are the foundation of scripting in RAGE:MP</li>
<li>Built-in events are automatic, custom events are created by you</li>
<li>Always register events before using them</li>
<li>Server, client, and CEF each have different communication rules</li>
<li>You can disable, destroy, remove, or reset events when needed</li>
</ul>
</div>
 
== See also ==
 
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; margin:0 0 20px 0;">
{{ScriptingTutorials}}
</div>
 
[[Category:Tutorials]]
 
</div>

Latest revision as of 00:42, 7 April 2026

RAGE:MP Documentation

Events System

Events are the backbone of scripting in RAGE:MP. This page explains what they are, how to register them, how communication works between server, client, and CEF, and how to manage them cleanly.

Core Idea
Events react to things
Built-in events react automatically. Custom events react when you trigger them.
Communication
Know your direction
Server, client, and CEF do not all communicate the same way.
Rule
Register first
An event must be registered before you can use or trigger it.

Introduction

Events are the core scripting system for RAGE:MP.

They are registered by you and triggered when a specific action or situation happens.

For example, PlayerEnterCheckpoint is triggered when a player enters a checkpoint. That event gives you:

  • the Player that entered it
  • the Checkpoint that was entered

Event Types

Type 1
Built-in Events

These are provided by RAGE:MP and are triggered automatically in certain situations.

Examples:
  • player entering a checkpoint
  • player quitting
  • player spawning
Type 2
Custom Events

These are created by you and can be triggered whenever you want.

Use them to:
  • connect systems together
  • trigger your own gameplay logic
  • send data between layers
  • create reusable scripting flows

Registering Events

Important: You must register an event before using it anywhere.

Server-side Event

A normal server-side event can be registered like this:

Server-Side
mp.events.add('eventName', (arg1, arg2) => {
    // code
});

Client → Server Event

If the event is triggered from client-side but registered on server-side, the first argument must be player.

This happens because the client sends the local player together with the event data, allowing the server to know who triggered it.

Server-Side
mp.events.add('eventName', (player, arg1, arg2) => {
    // code
});

CEF Notes

CEF behaves differently
  • CEF cannot communicate directly with server-side
  • CEF mainly communicates with client-side
  • Older documentation often describes CEF more restrictively, but newer support exists in later versions
In version 1.1:
Added: CEF: mp.events.add(string eventName, function handler)
Added: CEF: mp.events.reset()
Added: CEF: mp.events.remove(string eventName)
Added: CEF: mp.events.call(string eventName) (alias to mp.trigger)
Added: Client-side: Browser.call(eventName, arguments...)

Calling Events

Tip: Most event confusion comes from not knowing which side is calling which side.

Local
Same Side
Use this when you call an event on the same side it exists on.
Syntax

JavaScript Syntax

mp.events.call('eventName', args);


Remote
Server → Client
The server tells one player or multiple players to execute a client-side event.
Single player

JavaScript Syntax

player.call('eventName', [arg1, arg2]);


All players

JavaScript Syntax

mp.players.call('eventName', [arg1, arg2]);


Filtered players

JavaScript Syntax

mp.players.call(
    mp.players.toArray().filter((_player) => _player.name == 'WeirdNewbie'),
    'eventName',
    [args]
);


Remote
Client → Server
Use this when the client wants to trigger a server-side event.
Syntax

JavaScript Syntax

mp.events.callRemote('eventName', args);


Bridge
Client ↔ CEF
CEF does not directly talk to server-side. It goes through the client.
Client → CEF

JavaScript Syntax

mbrowser.execute(`javascriptFunction('${variable1}', '${variable2}');`);


CEF → Client

JavaScript Syntax

mp.trigger('eventName', args);


Example Flow

Server command triggering a client effect

In this example, a player uses a server command, and the server tells that player's client to start a screen effect.

Server-side
Server-Side
mp.events.addCommand('effect', (player, fullText, effect) => {
    player.call('startEffectEvent', [effect]);
});
Client-side
Client-Side
mp.events.add('startEffectEvent', (effect) => {
    mp.game.graphics.startScreenEffect(effect, 10000, false);
});

Cancelling and Managing Events

Method 1
Pause / Destroy

To control an event instance directly, you can use mp.Event.

Server-Side
let ev = new mp.Event("playerDeath", (player, reason, killer) =>
{
    mp.players.broadcast('First blood!');
    ev.destroy(); // this event handler will not be called anymore
});

// ev.destroy(); // destroy it before it can execute again
Method 2
Remove from Tree

You can remove a specific handler, remove all handlers for an event, remove multiple events, or reset the whole tree.

Shared
// Remove specified handler of specified event
function playerJoinHandler(player)
{

}

mp.events.add("playerJoin", playerJoinHandler);
mp.events.remove("playerJoin", playerJoinHandler);

// Remove handler(s) of specified event(s)
mp.events.remove("playerJoin");
mp.events.remove(["playerJoin", "playerQuit"]);

// Reset whole event tree
mp.events.reset();

// Get all handlers of specified event
mp.events.getAllOf("playerJoin").forEach(_ev => _ev(null));

Quick Reference

Cheat Sheet
Action Method
Register local event mp.events.add(...)
Call local event mp.events.call(...)
Client to server mp.events.callRemote(...)
Server to one client player.call(...)
Server to all clients mp.players.call(...)
CEF to client mp.trigger(...)
Client to CEF browser.execute(...)
Remove event mp.events.remove(...)
Reset all events mp.events.reset()

Summary

  • Events are the foundation of scripting in RAGE:MP
  • Built-in events are automatic, custom events are created by you
  • Always register events before using them
  • Server, client, and CEF each have different communication rules
  • You can disable, destroy, remove, or reset events when needed

See also