Getting Started with Client-side

Introduction

Client-side is the side where you have better control on 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 client-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 till the file you want to require. Let us give you a little example of the structure of client-side.

• Go to client_packages folder inside your server-files and create a new file called index.js.
• Create a folder and name it whatever you want, let's say gamemode.
• Now your structure should be like that:

• 

• Edit your index.js and add require('./gamemode/index'); or require('./gamemode');
• Open your gamemode folder and create a new file called index.js.
• In the file add any test script you want, and it should work once you entered the game for example add mp.gui.chat.push('Hello World'). You should get it once you join the server.

Create your first client-side resource

As we learnt in the previous section how did the structure work, 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.

• Create a folder called modules (optional) inside your gamemode folder.
• Create a file called discord.js
• Add the following code:

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

• 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 required to add the rootFolder in your requiring to get the file, it's not like server-side where you can just do require('./modules/discord');.
• Now in your index.js add mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald'). If you're new to events system check Getting Started with Events tutorial
• If you want auto-complete check Getting Started with Development tutorial
• Your code structure should be like that:

• 

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

• 

You have accomplished your first resource. Now go create your own resources/servers and share your work with the community.