Leaderboard

Introduction Hello, So I have decided I should make this tutorial about how to use CEF alongside RAGEMP to make interactable UI because I have spent some time understanding it from examples without a clear tutorial, I am going to explain how to interact between the CEF browsers and RAGEMP client, and how to send/receive information from and to server. This tutorial is targeting new comers in RAGEMP but who have background in scripting and know how to run and connect their server locally. So the main points will be: 1-What is CEF 2-Sending information from CEF to RAGEMP client (and vice versa) 3-Sending information from RAGEMP to The Server (and vice versa) (I will be using C# Bridge API for working with the serverside scripting) Before we start you are going to need the following to better understand the tutorial: Basic knowledge in HTML, CSS and JavaScript (Optional – Nice to have) Bootstrap and JQuery Let’s start! What is CEF CEF is abbreviation to Chromium Embedded Framework an open source framework that allow the ability to embed HTML webpages into applications. RAGEMP already integrates the CEF so you don’t have to download anything externally to begin using it. CEF and RAGEMP Client So now we are going to learn how to create a browser inside the RAGEMP client and interact with it. I am going to teach by giving example, it is going to be a basic login/register system. First download or or create your own webpage design, If you don't know how to create a webpage just use my sample (Attached to this thread) and follow the tutorial. Start by going to RAGEMP/server-files/client_packages folder and create a new folder name it “Login” then inside the Login folder we’ve just created place the HTML,CSS and JS files that is related to the webpage inside and then create the (clientside) script we will call it “Main.js” that will be the main connecting point between the CEF browser, client and the server. NOTE: In the Login folder you are going to place the webpage files and all dependences such as Bootstrap or JQuery libraries. So to this point you should’ve something similar to this Dependences folder contains the minified JQuery and Bootstrap libraries, Links below: https://getbootstrap.com/docs/3.3/getting-started/ https://code.jquery.com/jquery-3.3.1.min.js/ So I have pre-made this simple page for the sake of this tutorial, I will link download to all of the files that I have used at the bottom of this thread. But you can go with any page design you like. Disclaimer: I am new to web development so it may not look that good but it does the job. Now we need to interact with this page, Inside the Login.html (assuming you already have made/imported a page) find the main components that you want to interact with and give them the ‘id’ attribute, in my case I need the buttons and text input elements, image below for more understanding Also notice how we referenced the “Login.js” script. We are going to use these inside our “Login.js” file, so Open the Login.js file and write the following: (Code is written using JQuery) $('#loginButton').click(() => { mp.trigger('loginInformationToServer', $('#loginUsernameText').val(), $('#loginPasswordText').val()); }); $('#registerButton').click(() => { mp.trigger('registerInformationToServer', $('#registerUsernameText').val(), $('#registerPasswordText').val()); }); So what this basically does is once the loginButton/registerButton is clicked is going to trigger (mp.trigger) an event with the given name and pass the values inside the text fields as arguments, that later we are going to catch that in our “Main.js” script. (This point is where we send information from CEF Browser to RAGEMP Client). Now that we have send the information and they are waiting to be caught, But before we do that we are going to show the browser window when a player connect to our server. Open “Main.js” and use mp.browsers.new(‘package://path’); In our case: we have the html page inside our Login folder. var loginBrowser = mp.browsers.new('package://Login/Login.html'); Now at this point when the player connects to our server this will show him our page that we’ve just made, it is still not functional yet until we catch the information that we’ve sent before. Let’s catch them now, inside the “Main.js” add the following: mp.events.add('loginInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerLoginAttempt', username, password); }); mp.events.add('registerInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerRegisterAttempt', username, password); }); I am not going to go into much details here on the syntax but what we are doing is catching the 'loginInformationToServer' and 'registerInformationToServer' events (like you’d do in any other client event in ragemp) and sending them directly to the server to verify the information passed. But before we forget go back to the client_packages folder and create or open the file ‘index.js’ and place require('./Login/Main.js'); to let the server know that this file contains JavaScript codes that related to RAGEMP client (mp.events.add, mp.events.callRemote and mp.browsers.new), a complete list found on ragemp wiki https://wiki.rage.mp/index.php?title=Client-side_functions RAGEMP Client and RAGEMP Server Now that we have sent the information from the CEF client to the RAGEMP client, and then to the RAGEMP server via (mp.events.callRemote) we didn’t catch the event on the server yet, so let’s go ahead and do that. It can be done in same ways but different syntax depending on which programming language you are using, I am going to be using C# because I am more familiar with but it can be easily done with JS serverside once you are familiar with scripting in it. So go ahead and inside any resource file that you are using type the following: [RemoteEvent("OnPlayerLoginAttempt")] public void OnPlayerLoginAttempt(Client player, string username, string password) { NAPI.Util.ConsoleOutput($"[Login Attempt] Username {username} | Password: {password}"); if(username == "Max" && password == "123") { player.TriggerEvent("LoginResult", 1); } else player.TriggerEvent("LoginResult", 0); } So The above code catch the event that is triggered when player sends the information to the server so we validate them then send back a response to the client with either success or fail depending on the player data, in ideal case we should check the information from a database but that’s out of the scope for this tutorial so I am just checking if his username is Max and password is 123 then we send information back to the client with result 1 (success) else we send the result of 0 (incorrect username/password) Same thing apply for the register event handle. Now you can notice a pattern here is that whenever we send an event from one place to another we need to catch it, so back to the “Main.js” and let’s handle the response sent from the server, Add the following: mp.events.add('LoginResult', (result) => { if (result == 1) { //Success we destroy the loginBrowser as we don't need it anymore loginBrowser.destroy(); mp.gui.cursor.show(false, false); mp.gui.chat.push("You have successfully logged in."); } else { //Failed we just send a message to the player saying he provided incorrect info //Here you can be creative and handle it visually in your webpage by using the (browser).execute or loginBrowser.execute in our case to execute a js code in your webpage mp.gui.chat.push('Incorrect password or username.'); } }); Similar to what we did when we caught function from CEF we did for catching from server and we checked if the value passed is 1 then the player succeeds in logging in else he fails. Now you can just run your server and connect with your client and you should see the login page appear, enter anything and hit login - it should message Then try using the combinations of Max and 123 and you should see and the window should disappear. Same practice apply to the register I will leave it for you to practice and try to implement that by yourself! Good luck! Summary Important things to remember: - From CEF browser to RAGEMP client => mp.trigger caught by mp.events.add - From RAGEMP client to RAGEMP server (C#) => mp.events.callRemote caught by [RemoteEvent()] flag and a function Now the other way around: - From RAGEMP server (C#) to RAGEMP client => (Client).TriggerEvent caught by mp.events.add - From RAGEMP client to CEF browser => (Browser).execute For more information about the syntax for these you can check the ragemp wiki NOTE: Sometimes you don’t need to send anything to the server, For example a browser that contains information about your server, you just need to contact between CEF and RAGEMP client. NOTE: Similarly if you want to use JavaScript for serverside scripting you can find the equivalent to my functions used and do the same, however everything done in clientside scripts (Main.js) should remain the same for both languages!! The End And here you’ve just completed the tutorial! Thanks for taking your time to read and if you have faced any problems or any question post a comment below and I will do my best to answer it. Also feel free to correct me if there is any suggestions or any syntax/logical errors. Happy coding! Files used in this tutorial: https://www.solidfiles.com/v/nYR8xn43j57jv

Description GTA World Roleplay is a server opened the 16th of October on Grand Theft Multiplayer, with very specific values and goals. After witnessing the fall of text roleplay communities from SAMP in the last years, where most of them became a dictature-like system with untouchable administrators and rigged with corruption. All administrators are players first: No administrators shall be more protected than any players nor disrespect a player. Transparency in any decision: The server management always inform the players before any decision and is completely transparent : from financial subjects to roleplay ones. We decided to open our voice roleplay server Playground Roleplay in Alpha with no whitelist to make it accessible to everyone who wishes to discover what roleplaying is and to enjoy our unique gamemode. Features description Scripted Jobs We offer hundreds of jobs for you to roleplay, however we strongly recommend working for a company or a player: Store cashier Phone vendor Alcohol vendor Lawyer Government worker Police officer Fireman Mining Trucking Component delivery Metallurgist Mechanic Taxi driver Car thief Strict & realistic police department Journalist Fishing Business system You are able to use, lease or become the owner of the following business: Airsoft 24/7 Ammunation Cinema Barbershop Clothing Store Plastic Surgery Clinic Tattoo Parlor Gas Station Mask Shop Electronic Shop Factory Garage / Chop Shop Restaurant Bar Night club Warehouse Phone shop Liquor store We like to offer our players a wide variety of business they can own and use, and our Property Management team offer a list of 50+ business for lease which you can apply for based on your roleplay project: no need for grinding to get them! Property system More than 3000 houses and apartments are available for players to own, with a garage system linked to your house and more than 300 interiors to choose from! Our furniture system allows you to completely create your own interior from A to Z, but you can also decide to use a premade interior and make some minor changes. You can also import your own mapping from Menyoo or other editors, and map the outside world for your business! Basic Income : No more grinding! On GTAW, we do not believe in grinding. While some servers think that forcing players to grind for hundred of hours will help them keep the players busy, on GTAW we do our best to avoid you from grinding: Every character starts with a $5000 paycheck per hour up to 40 hours, which are $200,000 available for you to buy a decent car and house. This amount is enough for most players to start roleplay the story they want without having to worry about grinding! ... And way more features! Cats & Dogs Police K9 Faction system XM Radio with your own radio station Social styles : customize your walk style, mood... Vehicle modding Most advanced furniture system Easy to use customization system: save up to 20 outfits, change them completely in a minute! Weed farming Speed radars Forensics Multiple phones system House robberies Safes Airsoft Vehicle hotwiring & lockpicking Facebook like system with Facebrowser Emergency advanced CEF MDC system Join 30,000 players today https://playground.gta.world/ play.gta.world:22008 https://discord.gg/bceebPh (strongly recommended) The server is now available to everyone during its alpha test on play.gta.world:22008, no wipe.

A voice-chat based ROLEPLAY SERVER Come to our RAGE:MP roleplay servers (EN) play.eclipse-rp.net:22005 (LT) play.eclipse-rp.net:22010 Join our Discord server https://discord.gg/eclipserp Visit our website and forums https://eclipse-rp.net/ ABOUT OUR COMMUNITY We welcome and invite everyone to become part of our great community. Both hardened roleplayers and inexperienced players, who are not that familiar with the idea of roleplay, are able to find their place within our community as long as they have the determination to learn and improve their skills. Our community is experienced, large and well established. It has gone a long way since it's launch back in February 2017. The community is extremely active - our administration and players will help you whenever you have any questions or problems. Our player count rises to nearly 600 during peak hours, so you will never feel lonely in any part of San Andreas! The server has been constantly evolving throughout all the years since the launch date and we have no intention to slow down our advancement in the future. Join our community and we will help to learn, we will guide you to a better roleplay experience. SERVER DEVELOPMENT The server receives constant updates, who are made by talented and passionate developers. Updates are always polished, and if something does break, the developers make sure it is fixed before the majority of the players even become aware of the problem. Server updates are always extensively tested before release by our most incredible administrative staff. Our server script is one of the most advanced scripts out there, when compared to other Grand Theft Auto V roleplay servers, which means there are a LOT of features you can try and a LOT of things you can do. CONTENT We offer an enormous variety of activities that our players can engage in. Become a member of our law enforcement force, uphold the law, protect the citizens and apprehend criminals. Join our emergency services as a medic or firefighter, devote yourself to saving the lives of others, support our law enforcement officers in 911 situations. Get yourself employed as a prison guard, uphold order inside the prison facilities, interact with other guards and prisoners. If you desire a safer life, you can work as a taxi driver, car mechanic, trucker, delivery van driver or a news reporter at Weazel News. Become a lumberjack and chop down trees in a forest or be a miner who collects precious ores from the mines, grow your own crops as a farmer or catch fish with a fishing rod. Criminal roleplay is a big and important part of our server too! Players are able to create their own criminal factions and work their way up to becoming an official faction. Commit robberies, extort businesses and distribute illegal items. Control the flow of illegal shipments full of weapons and drugs. Build a drug laboratory in your home or in a cheap and disposable motorhome and much more! CORE FEATURES VOIP - Our community is primarily VOIP (voice-chat) based. However, if you are unable to use voice-chat or prefer to text, the default text chat is still available and allowed to be used. Houses & Properties - Players are able to own real estate in our server. House prices are set by the owner of the house, and these prices can inflate. Players can also purchase custom built properties which they may use to start up their own business! Furniture System - We have implemented a system where players can purchase furniture objects from the furniture shop and place them inside and outside of their houses, properties or businesses. This allows players to customize their properties however they would like and decorate their houses and businesses with furniture items from the native Grand Theft Auto V. Businesses - At the moment, players are able to own vehicle dealerships, loan companies, general stores, gun stores and gas stations. What you wish to do with your business is up to you - you set the prices, you set the rules and much more. Businesses need to order new stock once it's depleted and the players that work in the trucking industry are responsible for the delivery of the orders. Vehicles & Markets - As with houses and properties, players can buy their own personal vehicle from either a vehicle dealership or one of the many car markets (where players can sell their existing vehicles) we have in-game. Jail & Prison - Actions have consequences. Just like in real life, if you get caught doing a crime, you will face repercussions in character here as well. Players facing more serious crimes will be sent to the state penitentiary. At the state penitentiary, you can roleplay with other criminals serving time and correctional officers (prison guards) from the Department of Corrections. You are also able to go on parole for crimes that are not very serious. Store Robberies & Player Muggings - Our script allows players to rob the money from the cashier at general stores. This is one of the many ways smaller criminals can begin their way up. Criminals are also able to rob players, but these robberies have to be done by our server rules which disallows unrealistic robberies. Inventory System - We believe that having an inventory system is imperative for roleplay. Our inventory system allows players to pick up items and use them / drop them straight from their inventory. We also have a clothing inventory to allow players to change clothes and remove clothing items straight from their inventory without having to use commands. Drug Laboratories - Criminal factions that are official can order drug stoves from the black market and use them to create drugs from inside their properties, houses or even motorhomes. Gangs that are still smaller and are building their way up can go to static drug labs at certain locations to cook narcotics. Pets - Players can purchase pets from the pet store. Pets can be named to whatever you'd like and they follow you around. They can even get in your vehicle and roll around with you! Vehicle modding - We allow our players to customize their personal vehicles at the two mechanic shops in San Andreas to their liking. Visual modifications, performance modifications and much more to make your vehicle special to you. Islands - If you are one of the richer citizens of Los Santos, you can purchase an island where you can build your own house, dock and whatever you can think of by utilizing our furniture system. Speakers - To allow players to enhance their roleplay scenarios, we've added Speakers that you can buy from general stores. These can be used to play YouTube URLs! HOW DO I CONNECT? To connect to our server you can either open the server list on your RAGE:MP client and find ECLIPSE ROLEPLAY and click connect or use the direct connect feature and type in our address: play.eclipse-rp.net:22005 Every new player is required to pass our roleplay application system monitored by our staff team. The application process consists of several open questions related to our server rules and roleplay scenarios. After you finish the application process and send your answers for review, you can already start to create and customize your character so you can begin playing immediately after your application gets accepted. The applications are reviewed within 24 hours (but could take less than an hour) by our amazing and wonderful staff team. Once you pass the application process, you can freely join the server, spawn your character and start your roleplay journey on ECLIPSE ROLEPLAY! If you encounter any difficulties figuring when trying to connect to our server, you can have a look at this video created by one of our community members: https://www.youtube.com/watch?v=pDasWlCEJ-Y

You'll need to place it in a clientside file.

You can search for one house system, i don't knew if there're some of them for free. If you want to create by your own you have to use IPL. You can check this post to have a idea on how uses and creates the IPLs: And you can use the wiki to get the IPL's list: https://wiki.rage.mp/index.php?title=Interiors_and_Locations

Unfortunately there aren't any simple way to make things. You need to code all by yourself or you can use scripts already done. You can use JS + Vue, you can use js + react, you can use c# ... There are a lot you can do to make the systems you want. One very nice script is the menu builder: It's client side, but you can use Events::callRemote to call a server-side event from a client-side script: https://wiki.rage.mp/index.php?title=Events::callRemote There are one starter project with Vue (by MarkCavalli: https://rage.mp/profile/19144-markcavalli/) https://github.com/MarkCavalli/rage-server-start-template I found today a nice guide: