Getting Started with Events: Difference between revisions
No edit summary |
|||
| (13 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
== | <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> | |||
</div> | |||
== | == Introduction == | ||
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:22px; margin:0 0 20px 0;"> | |||
Events are the <b>core scripting system</b> for RAGE:MP. | |||
They are registered by you and triggered when a specific action or situation happens. | |||
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> | |||
== Event Types == | |||
= | <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin:0 0 22px 0;"> | ||
<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> | |||
== | <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> | |||
</div> | |||
== Registering Events == | |||
<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> | |||
=== Server-side Event === | |||
<div | <div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; margin:0 0 18px 0;"> | ||
A normal server-side event can be registered like this: | |||
{{ServersideCode| | |||
<pre> | <pre> | ||
mp.events.add('eventName', (arg1, arg2 | mp.events.add('eventName', (arg1, arg2) => { | ||
// code | // code | ||
}); | }); | ||
</pre> | </pre> | ||
}} | |||
</div> | </div> | ||
=== 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>. | |||
This happens because the client sends the local player together with the event data, allowing the server to know who triggered it. | |||
{{ServersideCode| | |||
<pre> | <pre> | ||
mp.events.add('eventName', (player, arg1, arg2 | mp.events.add('eventName', (player, arg1, arg2) => { | ||
// code | // code | ||
}); | }); | ||
</pre> | </pre> | ||
}} | |||
</div> | </div> | ||
In | === 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 | == Calling Events == | ||
<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> | |||
< | <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;">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;"> | ||
<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;">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> | ||
{{JSContainer| | |||
<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> | ||
{{JSContainer| | |||
<pre> | |||
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> | |||
// | <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> | |||
/ | <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;">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> | ||
{{JSContainer| | |||
<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> | |||
</ | {| 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.
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
These are provided by RAGE:MP and are triggered automatically in certain situations.
- player entering a checkpoint
- player quitting
- player spawning
These are created by you and can be triggered whenever you want.
- 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:
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.
mp.events.add('eventName', (player, arg1, arg2) => {
// code
});
CEF Notes
- 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
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.
JavaScript Syntax
mp.events.call('eventName', args);
JavaScript Syntax
player.call('eventName', [arg1, arg2]);
JavaScript Syntax
mp.players.call('eventName', [arg1, arg2]);
JavaScript Syntax
mp.players.call(
mp.players.toArray().filter((_player) => _player.name == 'WeirdNewbie'),
'eventName',
[args]
);
JavaScript Syntax
mp.events.callRemote('eventName', args);
JavaScript Syntax
mbrowser.execute(`javascriptFunction('${variable1}', '${variable2}');`);
JavaScript Syntax
mp.trigger('eventName', args);
Example Flow
In this example, a player uses a server command, and the server tells that player's client to start a screen effect.
mp.events.addCommand('effect', (player, fullText, effect) => {
player.call('startEffectEvent', [effect]);
});
mp.events.add('startEffectEvent', (effect) => {
mp.game.graphics.startScreenEffect(effect, 10000, false);
});
Cancelling and Managing Events
To control an event instance directly, you can use mp.Event.
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
You can remove a specific handler, remove all handlers for an event, remove multiple events, or reset the whole tree.
// 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
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