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.
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
- 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:
- 4. Go back to your index.js inside the gamemode folder and add
- 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
- 5. Now in your index.js, add
mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald').
Your code structure should be like this:
Now join the server and check your discord status. It should look like this:
You have accomplished your first client-sided resource. You can view more resources created by the community.