Getting Started with Client-side - Revision history

Unknown at 10:55, 6 December 2019

2019-12-06T10:55:40Z

← Older revision		Revision as of 10:55, 6 December 2019
Line 51:		Line 51:
	== Final notes ==		== Final notes ==
	You have accomplished your first client-sided resource. You can view more [https://rage.mp/files/ resources] created by the community.		You have accomplished your first client-sided resource. You can view more [https://rage.mp/files/ resources] created by the community.

			== See also ==
			{{ScriptingTutorials}}

	[[Category:Tutorials]]		[[Category:Tutorials]]

Unknown at 10:47, 6 December 2019

2019-12-06T10:47:08Z

← Older revision		Revision as of 10:47, 6 December 2019
Line 24:		Line 24:
	:2. Create a file called '''discord.js'''		:2. Create a file called '''discord.js'''
	:3. Add the following code:		:3. Add the following code:
			{{ClientsideCode\|
	<pre>		<pre>
	//We registered an event to the client side's events tree which sets discord status.		//We registered an event to the client side's events tree which sets discord status.
Line 30:		Line 31:
	});		});
	</pre>		</pre>
			}}
	:4. Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>.		:4. Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>.
	::Like that you required the discord module once you join/download the server.		::Like that you required the discord module once you join/download the server.
Line 47:		Line 49:
	</gallery>		</gallery>

	You have accomplished your first resource. ~~Now go create your own~~ resources~~/servers and share your work with~~ the community.		== Final notes ==
			You have accomplished your first client-sided resource. You can view more [https://rage.mp/files/ resources] created by the community.
			[[Category:Tutorials]]

Wingear: /* Create your first client-side resource */

2019-03-22T10:31:13Z

Create your first client-side resource

← Older revision		Revision as of 10:31, 22 March 2019
Line 21:		Line 21:
	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.		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.

	*Create a folder called modules (optional) inside your '''gamemode''' folder.		:1. Create a folder called modules (optional) inside your '''gamemode''' folder.
	*Create a file called '''discord.js'''		:2. Create a file called '''discord.js'''
	*Add the following code:		:3. Add the following code:
	<pre>		<pre>
	//We registered an event to the client side's events tree which sets discord status.		//We registered an event to the client side's events tree which sets discord status.
Line 30:		Line 30:
	});		});
	</pre>		</pre>
	*Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>. 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 <code>require('./modules/discord');</code>.		:4. Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>.
	*Now in your '''index.js''', add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>. If you're new to the events system, check '''[[Getting Started with Events\|Getting Started with Events tutorial]]'''.		::Like that you required the discord module once you join/download the server.
	*If you want autocomplete, check '''[[Getting Started with Development\|Getting Started with Development tutorial]]'''.		::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 <code>require('./modules/discord');</code>.
	*Your code structure should be like this:		:5. Now in your '''index.js''', add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>.
			::''If you're new to the events system, check '''[[Getting Started with Events\|Getting Started with Events tutorial]]'''.''
			::''If you want autocomplete, check '''[[Getting Started with Development\|Getting Started with Development tutorial]]'''.''

			Your code structure should be like this:

	<gallery widths=776px heights=133px>		<gallery widths=776px heights=133px>
	File:Client_struct_2.png		File:Client_struct_2.png
	</gallery>		</gallery>
	*Now join the server and check your discord status. It should look like this:		Now join the server and check your discord status. It should look like this:
	<gallery widths=250px heights=100px>		<gallery widths=250px heights=100px>
	File:UpdatedRichPresence.jpg		File:UpdatedRichPresence.jpg

Wingear: /* Using Client-side */

2019-03-22T10:17:16Z

Using Client-side

← Older revision		Revision as of 10:17, 22 March 2019
Line 9:		Line 9:
	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.		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'''.		: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'''.		:2. Create a folder and name it whatever you want, let's say '''gamemode'''.
	Now your structure should be like this:		:Now your structure should be like this:
	<gallery widths=600px heights=77px>		<gallery widths=600px heights=77px>File:Client_struct_1.png</gallery>
	File:Client_struct_1.png		:3. Edit your '''index.js''' and add <code>require('./gamemode/index');</code> or <code>require('./gamemode');</code>
	</gallery>		:4. Open your '''gamemode''' folder and create a new file called '''index.js'''.
	3. Edit your '''index.js''' and add <code>require('./gamemode/index');</code> or <code>require('./gamemode');</code>		:5. In the file, add any test script you want and it should work once you enter the game. For example, add <code>mp.gui.chat.push('Hello World')</code>. You should get the message once you join the server.
	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 <code>mp.gui.chat.push('Hello World')</code>. You should get the message once you join the server.

	== Create your first client-side resource ==		== Create your first client-side resource ==

Wingear: /* Using Client-side */

2019-03-22T10:10:55Z

Using Client-side

← Older revision		Revision as of 10:10, 22 March 2019
Line 9:		Line 9:
	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.		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.

	*Go to the client_packages '''folder''' inside your server-files and create a new file called '''index.js'''.		1. Go to the 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'''.		2. Create a folder and name it whatever you want, let's say '''gamemode'''.
	* Now your structure should be like this:		Now your structure should be like this:
	<gallery widths=600px heights=77px>		<gallery widths=600px heights=77px>
	File:Client_struct_1.png		File:Client_struct_1.png
	</gallery>		</gallery>
	*Edit your '''index.js''' and add <code>require('./gamemode/index');</code> or <code>require('./gamemode');</code>		3. Edit your '''index.js''' and add <code>require('./gamemode/index');</code> or <code>require('./gamemode');</code>
	*Open your gamemode folder and create a new file called '''index.js'''.		4. 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 enter the game. For example, add <code>mp.gui.chat.push('Hello World')</code>. You should get the message once you join the server.		5. In the file, add any test script you want and it should work once you enter the game. For example, add <code>mp.gui.chat.push('Hello World')</code>. You should get the message once you join the server.

	== Create your first client-side resource ==		== Create your first client-side resource ==

Threshold: Minor grammatical fixes.

2018-12-22T07:44:26Z

Minor grammatical fixes.

← Older revision		Revision as of 07:44, 22 December 2018
Line 3:		Line 3:
	== Introduction ==		== 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.		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 ==		== 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.		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.

	*Go to client_packages '''folder''' inside your server-files and create a new file called '''index.js'''.		*Go to the 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'''.		*Create a folder and name it whatever you want, let's say '''gamemode'''.
	* Now your structure should be like ~~that~~:		* Now your structure should be like this:
	<gallery widths=600px heights=77px>		<gallery widths=600px heights=77px>
	File:Client_struct_1.png		File:Client_struct_1.png
Line 17:		Line 17:
	*Edit your '''index.js''' and add <code>require('./gamemode/index');</code> or <code>require('./gamemode');</code>		*Edit your '''index.js''' and add <code>require('./gamemode/index');</code> or <code>require('./gamemode');</code>
	*Open your gamemode folder and create a new file called '''index.js'''.		*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 <code>mp.gui.chat.push('Hello World')</code>. You should get it once you join the server.		*In the file, add any test script you want and it should work once you enter the game. For example, add <code>mp.gui.chat.push('Hello World')</code>. You should get the message once you join the server.

	== Create your first client-side resource ==		== 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.		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.

	*Create a folder called modules (optional) inside your '''gamemode''' folder.		*Create a folder called modules (optional) inside your '''gamemode''' folder.
Line 27:		Line 27:
	*Add the following code:		*Add the following code:
	<pre>		<pre>
	//We registered a event to the client side's events tree which sets discord status.		//We registered an event to the client side's events tree which sets discord status.
	mp.events.add('setDiscordStatus', (serverName, status) => {		mp.events.add('setDiscordStatus', (serverName, status) => {
	mp.discord.update(serverName, status)		mp.discord.update(serverName, status)
	});		});
	</pre>		</pre>
	*Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>. 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 <code>require('./modules/discord');</code>.		*Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>. 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 <code>require('./modules/discord');</code>.
	*Now in your '''index.js''' add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>. If you're new to events system check '''[[Getting Started with Events\|Getting Started with Events tutorial]]'''		*Now in your '''index.js''', add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>. If you're new to the events system, check '''[[Getting Started with Events\|Getting Started with Events tutorial]]'''.
	*If you want ~~auto-complete~~ check '''[[Getting Started with Development\|Getting Started with Development tutorial]]'''		*If you want autocomplete, check '''[[Getting Started with Development\|Getting Started with Development tutorial]]'''.
	*Your code structure should be like ~~that~~:		*Your code structure should be like this:

	<gallery widths=776px heights=133px>		<gallery widths=776px heights=133px>
	File:Client_struct_2.png		File:Client_struct_2.png
	</gallery>		</gallery>
	*Now join the server and check your discord status. It should look like ~~that~~:		*Now join the server and check your discord status. It should look like this:
	<gallery widths=250px heights=100px>		<gallery widths=250px heights=100px>
	File:UpdatedRichPresence.jpg		File:UpdatedRichPresence.jpg

Unknown at 07:12, 12 October 2018

2018-10-12T07:12:07Z

← Older revision		Revision as of 07:12, 12 October 2018
Line 1:		Line 1:
			__TOC__

	== Introduction ==		== Introduction ==

Unknown at 07:07, 12 October 2018

2018-10-12T07:07:26Z

← Older revision		Revision as of 07:07, 12 October 2018
Line 24:		Line 24:
	*Create a file called '''discord.js'''		*Create a file called '''discord.js'''
	*Add the following code:		*Add the following code:
	<~~syntaxhighlight lang="javascript"~~>		<pre>
	//We registered a event to the client side's events tree which sets discord status.		//We registered a event to the client side's events tree which sets discord status.
	mp.events.add('setDiscordStatus', (serverName, status) => {		mp.events.add('setDiscordStatus', (serverName, status) => {
	mp.discord.update(serverName, status)		mp.discord.update(serverName, status)
	});		});
	</~~syntaxhighlight~~>		</pre>
	*Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>. 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 <code>require('./modules/discord');</code>.		*Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>. 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 <code>require('./modules/discord');</code>.
	*Now in your '''index.js''' add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>. If you're new to events system check '''[[Getting Started with Events\|Getting Started with Events tutorial]]'''		*Now in your '''index.js''' add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>. If you're new to events system check '''[[Getting Started with Events\|Getting Started with Events tutorial]]'''

Unknown at 07:06, 12 October 2018

2018-10-12T07:06:33Z

← Older revision		Revision as of 07:06, 12 October 2018
Line 31:		Line 31:
	</syntaxhighlight>		</syntaxhighlight>
	*Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>. 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 <code>require('./modules/discord');</code>.		*Go back to your '''index.js''' inside the '''gamemode''' folder and add <code>require('./gamemode/modules/discord');</code>. 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 <code>require('./modules/discord');</code>.
	*Now in your '''index.js''' add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>. If you're new to events system check [[Getting Started with Events\|Getting Started with Events tutorial]]		*Now in your '''index.js''' add <code>mp.events.call('setDiscordStatus', 'Playing on Freeroam', 'Playing as Ronald McDonald')</code>. If you're new to events system check '''[[Getting Started with Events\|Getting Started with Events tutorial]]'''
	*If you want auto-complete check [[Getting Started with Development\|Getting Started with Development tutorial]]		*If you want auto-complete check '''[[Getting Started with Development\|Getting Started with Development tutorial]]'''
	*Your code structure should be like that:		*Your code structure should be like that:

Unknown at 07:06, 12 October 2018

2018-10-12T07:06:03Z

← Older revision		Revision as of 07:06, 12 October 2018
Line 40:		Line 40:
	*Now join the server and check your discord status. It should look like that:		*Now join the server and check your discord status. It should look like that:
	<gallery widths=250px heights=100px>		<gallery widths=250px heights=100px>
	File:~~Client_struct_2~~.~~png~~		File:UpdatedRichPresence.jpg
	</gallery>		</gallery>

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