Getting Started with Client-side

Introduction

Client-side is the side where you have better control over a single player and provides you access to more information about the game world, but less information about the other players. You can use client-side to create GUI (Graphical User Interface), visual effects, and much more.

Using Client-side

Client-side has a different pattern than server-side. Requiring the files are a bit different, and you can't use NPM Packages like server-side. Client-side's requiring files system needs to start from the root folder until the file you want to require. Let us give you a little example of the structure of client-side.

1. Go to the client_packages folder inside your server-files and create a new file called index.js.

2. Create a folder and name it whatever you want, let's say gamemode.

Now your structure should be like this:

3. Edit your index.js and add require('./gamemode/index'); or require('./gamemode');

4. Open your gamemode folder and create a new file called index.js.

5. In the file, add any test script you want and it should work once you enter the game. For example, add mp.gui.chat.push('Hello World'). You should get the message once you join the server.

Create your first client-side resource

As we learned how the structure works in the previous section, now we'll create our first resource to show how client-side actually works. Remember the index we added inside the gamemode folder, it's the first file that triggered when you completely download your files, so now we'll create a simple resource which sets your discord rich presence into a custom made message.

1. Create a folder called modules (optional) inside your gamemode folder.

2. Create a file called discord.js

3. Add the following code:

Client-Side

//We registered an event to the client side's events tree which sets discord status.
mp.events.add('setDiscordStatus', (serverName, status) => {
  mp.discord.update(serverName, status)
});

4. Go back to your index.js inside the gamemode folder and add require('./gamemode/modules/discord');.

Like that you required the discord module once you join/download the server.

It's always necessary to add the rootFolder in your required file-path to get the file, it's not like server-side where you can just do require('./modules/discord');.

5. Now in your index.js, add mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald').

If you're new to the events system, check Getting Started with Events tutorial.

If you want autocomplete, check Getting Started with Development tutorial.

Your code structure should be like this:

Now join the server and check your discord status. It should look like this:

Final notes

You have accomplished your first client-sided resource. You can view more resources created by the community.

Introduction

Using Client-side

Create your first client-side resource

Final notes

See also