Libraries
59 files
-
Input Window | Only HTML / CSS Design
This is a Input Window, its only a design. maked with html and css,
you must script it on your server.
there are more windows for more options inside the html
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
197 downloads
(0 reviews)0 comments
Updated
-
Interactive CEF wheel
By -Andreas
This resource allows you to setup interactive wheels with actions hooked to the slices presented in the pie - all from server-side. Once you have it ready you can display it to the player. It is made possible using the wheelnav.js library by Software Tailoring that eases development of interactive wheels and are highly customizable. I wrote a C# wrapper to control when to display the wheel and hooked server-side actions to each slice in the wheel. This was initially created as a feature for a larger gamemode that will become available at my GitHub later.
My idea was to have one primary wheel from where subwheels could spring from. It is not necessary to create subwheels, but you can simply fill it with slices with actions hooked. The wheel will automatically close and destroy itself when the user releases the designated key that you supply when instantiating the primary wheel. Oh.. and the system also supports icons for the wheels. There's a lot free to use by wheelnav.js but you can also add your own. See the source-code to see how.
How to install
To get started move the GenericWheel-Client folder to your client_packages and ensure you have included the GenericWheel-Client/js/index.js in your own index.js. You'd probably also need to include the server-side files in your namespace.
How to use
1) We first have to instantiate our primary wheel, and we supply it with id 0. The id will be used by subwheels to reference which wheel they will return to.
var wheel = new PrimaryInteractionWheel(0, "My wheel", keyToBind: "c"); 2) Next, create a subwheel by instantiating an InteractionWheel. We then add this subwheel to the list of subwheels on our primary wheel. The primary wheel now knows of the subwheel and will be able to navigate to it.
var extraWheel = new InteractionWheel(1, "Walkingstyle"); wheel.AddSubWheel(extraWheel); 3) Now that we have our primary and subwheel set up we will create two slices for our primary wheel. One will be a simple action slice that takes an Action which will be invoked if the user clicks on the slice. The other slice is used to open subwheels. We supply that slice with the id of our subwheel.
var slices = new List<object>() { new WheelSliceAction("icon.play", () => player.SendChatMessage("You pressed on a play icon slice")), new WheelSliceSubMenu("icon.list", extraWheel.ID) }; wheel.Slices = slices; 4) We will now add a few slices to our subwheel. Notice that we also add a WheelSliceSubMenu to our subwheel itself in order to give the user the opportunity to navigate back to our primary wheel.
var extraSlices = new List<object>() { new WheelSliceAction("Normal", () => player.SetSharedData("walkingStyle", "Normal")), new WheelSliceAction("Brave", () => player.SetSharedData("walkingStyle", "Brave")), }; extraSlices.Add(new WheelSliceSubMenu("icon.arrowleft", wheel.ID)); extraWheel.Slices = extraSlices; 5) Finally we just need to call the display method of our primary wheel to show the user our wheel.
wheel.Display(player);
Demonstration
There's a video demonstration on the GitHub readme for the project.
The source code is available at Github https://github.com/Andreas1331/ragemp-wheelnav
172 downloads
(2 reviews)0 comments
Submitted
-
Inventory | Only HTML / CSS Design
This is a Inventory, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
842 downloads
(0 reviews)0 comments
Updated
-
Inventory API
By rootcause
This resource provides an inventory API to server developers.
This resource will not save anything on its own, it just provides you the functions to make your own inventory system using CEF/NativeUI/commands.
Installing
Put the files you downloaded in their respective places Read the documentation and examples to set up some items etc. All done
Features
Easy to use (hopefully!) Events Custom attributes for items (see examples)
Inventory API
const invAPI = require("../inventory-api"); /** * Adds an item to the inventory system. * @param {string} key Item identifier, such as "item_medkit". * @param {string} name Item name, such as "Medkit". * @param {string} description Item description, such as "Gives you 10 health". * @param {function} [onUse] Optional - Function that gets called when the item is used. * @param {function} [nameFunc] Optional - Function that gets called when getItemName() is used. * @param {function} [descFunc] Optional - Function that gets called when getItemDescription() is used. * @return {object} The added item, will be null if there are any mistakes. * @fires itemDefined */ invAPI.addItem(key, name, description, onUse, nameFunc, descFunc); /** * Returns whether the specified key is a registered or not. * @param {string} key Item identifier, such as "item_medkit". * @return {Boolean} True if registered, false otherwise. */ invAPI.hasItem(key); /** * Returns the specified item. * @param {string} key Item identifier, such as "item_medkit". * @return {object} The item at the specified key, will be undefined if the key isn't registered. */ invAPI.getItem(key); /** * Returns all registered item identifiers. * @return {string[]} An array of registered item identifiers. */ invAPI.getAllItems(); /** * Returns the human readable name of the specified item. * @param {string} key Item identifier, such as "item_medkit". * @param {string} [data] Optional - An object that has item attributes. * @return {string} Human readable item name. */ invAPI.getItemName(key, data); /** * Returns the description of the specified item. * @param {string} key Item identifier, such as "item_medkit". * @param {string} [data] Optional - An object that has item attributes. * @return {string} Item's description. */ invAPI.getItemDescription(key, data);
Inventory API Events
/** * itemDefined * This event is called when an item is added to the system with invAPI.addItem() * @param {string} key Item identifier. * @param {string} name Human readable name of the item. * @param {string} description Description of the item. */ invAPI.on("itemDefined", (key, name, description) => { // Example: console.log(`Item defined, key: ${key} | name: ${name} | description: ${description}`); }); /** * itemAdded * This event is called when a player receives an item. * @param {player} player The player who received the item. * @param {string} key Item identifier. * @param {number} amount Amount the player received. * @param {object} data Item attributes. */ invAPI.on("itemAdded", (player, key, amount, data) => { // Example: console.log(`${player.name} received ${amount}x ${key}.`); }); /** * itemUsed * This event is called when a player uses an item. * @param {player} player The player who used the item. * @param {number} invIdx Index of the item in player's inventory. * @param {string} key Item identifier. * @param {object} data Item attributes. */ invAPI.on("itemUsed", (player, invIdx, key, data) => { // Example: console.log(`${player.name} used ${key}.`); }); /** * itemRemoved * This event is called when an item is removed from a player's inventory. * @param {player} player The player who lost an item. * @param {number} invIdx Index of the item that got removed in player's inventory. * @param {string} key Item identifier. * @param {number} amount Removed item amount. * @param {object} data Item attributes. */ invAPI.on("itemRemoved", (player, invIdx, key, amount, data) => { // Example: console.log(`${player.name} lost ${amount}x ${key}.`); }); /** * itemRemovedCompletely * This event is called when an item is no longer in a player's inventory. * @param {player} player The player who lost an item. * @param {string} key Item identifier. * @param {object} data Item attributes. */ invAPI.on("itemRemovedCompletely", (player, key, data) => { // Example: console.log(`${player.name} no longer has ${key} (${data ? "with data" : "without data"}) in their inventory.`); }); /** * inventoryReplaced * This event is called when a player's inventory array gets changed by player.setInventory() * @param {player} player The player who had an inventory change. * @param {object[]} oldInventory The player's old inventory array. * @param {object[]} newInventory The player's new inventory array. */ invAPI.on("inventoryReplaced", (player, oldInventory, newInventory) => { // Example: console.log(`${player.name} had their inventory replaced. (Old item count: ${oldInventory.length}, new: ${newInventory.length})`); });
Player API
/** * Returns the inventory array of the player. * @return {object[]} An array that holds all items of the player. */ player.getInventory(); /** * Replaces the inventory array of the player with the specified one. * @param {Array} newInventory An array that's going to be the new inventory of the player. * @return {Boolean} True if successful, false otherwise. * @fires inventoryReplaced */ player.setInventory(newInventory); /** * Returns whether the player has the specified item or not. * @param {string} itemKey Item identifier. * @return {Boolean} True if player has the item, false otherwise. */ player.hasItem(itemKey); /** * Same as hasItem but for items with custom attributes. * @param {string} itemKey Item identifier. * @param {object} data An object that has item attributes. * @return {Boolean} True if player has the item, false otherwise. */ player.hasItemWithData(itemKey, data); /** * Gets the item's index in the player's inventory. * @param {string} itemKey Item identifier. * @return {number} Index of the item, -1 if not found. */ player.getItemIndex(itemKey); /** * Same as getItemIndex but for items with custom attributes. * @param {string} itemKey Item identifier. * @param {object} data An object that has item attributes. * @return {number} Index of the item, -1 if not found. */ player.getItemIndexWithData(itemKey, data); /** * Gets how many of the specified item exists in the player's inventory. * @param {string} itemKey Item identifier. * @return {number} Item amount. */ player.getItemAmount(itemKey); /** * Same as getItemAmount but for items with custom attributes. * @param {string} itemKey Item identifier. * @param {object} data An object that has item attributes. * @return {number} Item amount. */ player.getItemAmountWithData(itemKey, data); /** * Gets total amount of items the player has in their inventory. * @return {number} Amount of all items. */ player.getTotalItemAmount(); /** * Gives the specified item to the player. * @param {string} itemKey Item identifier. * @param {number} amount Amount to give. * @param {object} [data] Optional - An object that has item attributes. * @return {Boolean} True if successful, false otherwise. * @fires itemAdded */ player.giveItem(itemKey, amount, data); /** * Uses the item at the specified index of the player's inventory array. * @param {number} itemIdx Index of the item in player's inventory array. * @return {Boolean} True if successful, false otherwise. * @fires itemUsed */ player.useItem(itemIdx); /** * Removes the item at the specified index of the player's inventory array. * @param {number} itemIdx Index of the item in player's inventory array. * @param {number} [amount] Optional - Amount to remove. * @return {Boolean} True if successful, false otherwise. * @fires itemRemoved * @fires itemRemovedCompletely */ player.removeItem(itemIdx, amount);
Examples
Full Test Script (used during development): https://gist.github.com/root-cause/6f15f0ee2276872c2d15a5333fed6a10
Name/Description Function Test Script: https://gist.github.com/root-cause/500b6e197348e941aeebfa8f883486bb
Source code is available on GitHub in case you don't want to download: https://github.com/root-cause/ragemp-inventory-api
2680 downloads
-
Iris: An Interaction Library
By rootcause
Iris is a raycast based interaction system with two components: the core library and a basic interaction UI which can be reimplemented by server developers to fit their needs, making it highly customizable.
Installing
Put the files you downloaded in their respective places Add require("iris") to client_packages/index.js (Optional) Add require("iris-ui") to client_packages/index.js or build your own UI to handle interactions with
Clientside API
The library defines a global object named Iris that can be used to interact with the library. Here are its members:
Constants
The Iris global object has a property called SearchType which acts as an enum to avoid magic values in code:
Iris.SearchType.Invalid // 0 Iris.SearchType.EntityType // 1 Iris.SearchType.EntityModel // 2 Iris.SearchType.EntityHandle // 3 Iris.SearchType.NumSearchTypes // 4
Functions
/** * Creates an interaction. * @param {number} searchType * @param {number} target * @param {object} interaction Must have a `name` property. `order` (number) is also an optional property to display the interaction above/below other interactions. * @returns {number} The interaction ID which can be used with `getInteraction` and `removeInteraction` functions. */ Iris.createInteraction(searchType, target, interaction); /** * Returns the interaction with the specified ID. * @param {number} interactionId * @returns {object|undefined} The interaction object if found, `undefined` otherwise. */ Iris.getInteraction(interactionId); /** * Removes the interaction with the specified ID. * @param {number} interactionId * @returns {boolean} `true` if the removal is successful, `false` otherwise. */ Iris.removeInteraction(interactionId); /** * Returns whether the library is scanning for interactions or not. * @returns {boolean} */ Iris.isActive(); /** * Sets the interaction scanning status of the library. * @fires `iris::stateChange` clientside event with the first argument being the new scanning status. * @param {boolean} value */ Iris.setActive(value); /** * Returns the distance used for the interaction scanning raycast. * @returns {number} */ Iris.getRaycastDistance(); /** * Sets the distance used for the interaction scanning raycast. * @param {number} newDistance */ Iris.setRaycastDistance(newDistance); /** * Returns the flags used for the interaction scanning raycast. Refer to: https://wiki.rage.mp/index.php?title=Raycasting::testPointToPoint * @returns {number} */ Iris.getRaycastFlags(); /** * Sets the flags used for the interaction scanning raycast. Refer to: https://wiki.rage.mp/index.php?title=Raycasting::testPointToPoint * @param {number} newFlags */ Iris.setRaycastFlags(newFlags); /** * Returns the handle of the last entity that was hit by the interaction scanning raycast. * @returns {number} */ Iris.getLastEntityHandle();
Events
The library uses RAGEMP's clientside events.
/** * iris::stateChange is called when scanning for interactions is enabled/disabled. * @param {boolean} newState `true` if scanning, `false` otherwise. */ mp.events.add("iris::stateChange", function(newState) { // your code here }); /** * iris::focusChange is called when the entity detected by the interaction scanner changes. * @param {object} focusChangeContext * @param {number} focusChangeContext.newEntityHandle * @param {number} focusChangeContext.oldEntityHandle * @param {number|undefined} focusChangeContext.newEntityType * @param {number|undefined} focusChangeContext.newEntityModel * @param {object[]|undefined} focusChangeContext.interactions The available interactions for the new entity. * @param {object|undefined} focusChangeContext.raycastResult The raycast result that was responsible for calling this event, set only if the `focusChangeContext.newEntityHandle` is valid. Refer to: https://wiki.rage.mp/index.php?title=Raycasting::testPointToPoint */ mp.events.add("iris::focusChange", function(focusChangeContext) { // your code here });
Example Script
// https://wiki.rage.mp/index.php?title=Entity::getType const ENTITY_TYPE_VEHICLE = 2; const ENTITY_TYPE_OBJECT = 3; // Create some interactions // "eventName" and "selectedFn" properties only work with the default iris-ui script, they're intended to show two simple ways to handle interactions. const myVehicleInteraction = Iris.createInteraction(Iris.SearchType.EntityType, ENTITY_TYPE_VEHICLE, { name: "Generic vehicle interaction (get remoteId)", eventName: "my_custom_event_name" }); const myObjectInteraction = Iris.createInteraction(Iris.SearchType.EntityType, ENTITY_TYPE_OBJECT, { name: "Generic object interaction (get handle)", selectedFn: function(entityHandle) { mp.gui.chat.push(`This object's handle is: ${entityHandle}`); } }); const adderOnlyInteraction = Iris.createInteraction(Iris.SearchType.EntityModel, mp.game.joaat("adder"), { name: "Adder only interaction", eventName: "adder_option_clicked", order: 99 // make it the top option }); // Liquor store example (non-functional) const mp_m_shopkeep_01 = mp.game.joaat("mp_m_shopkeep_01"); mp.peds.new(mp_m_shopkeep_01, new mp.Vector3(-2966.05, 391.43, 15.05), 90.0, 0); // Options for the shopkeeper Iris.createInteraction(Iris.SearchType.EntityModel, mp_m_shopkeep_01, { name: "Ask about his day"}); Iris.createInteraction(Iris.SearchType.EntityModel, mp_m_shopkeep_01, { name: "Pay for items" }); Iris.createInteraction(Iris.SearchType.EntityModel, mp_m_shopkeep_01, { name: "Threaten" }); // Options for various items inside the store Iris.createInteraction(Iris.SearchType.EntityModel, mp.game.joaat("v_ret_ml_sweetego"), { name: "Add EgoChaser to cart ($5)" }); Iris.createInteraction(Iris.SearchType.EntityModel, mp.game.joaat("v_ret_ml_sweet4"), { name: "Add Sweet Nothings to cart ($2)" }); Iris.createInteraction(Iris.SearchType.EntityModel, mp.game.joaat("v_ret_ml_sweet3"), { name: "Add P's & Q's to cart ($1)" }); Iris.createInteraction(Iris.SearchType.EntityModel, mp.game.joaat("v_ret_ml_beeram"), { name: "Add A. M. Beer (6-pack) to cart ($12)" }); Iris.createInteraction(Iris.SearchType.EntityModel, mp.game.joaat("v_ret_ml_beerdus"), { name: "Add Dusche Gold (6-pack) to cart ($14)" }) // Event handlers function handleGetVehicleRemoteId(entityHandle) { const vehicle = mp.vehicles.atHandle(entityHandle); if (vehicle) { mp.gui.chat.push(`This vehicle's remoteId is: ${vehicle.remoteId}`); } } function handleAdderClick() { mp.gui.chat.push("You found the adder exclusive interaction... aaand it's gone."); Iris.removeInteraction(adderOnlyInteraction); Iris.setActive(false); } // Register event handlers mp.events.add({ "my_custom_event_name": handleGetVehicleRemoteId, "adder_option_clicked": handleAdderClick });
Source code is also available on GitHub: https://github.com/root-cause/ragemp-iris
100 downloads
(2 reviews)0 comments
Updated
-
-
Login Window | Only HTML / CSS Design
This is a Login window, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
599 downloads
(3 reviews)0 comments
Updated
-
(0 reviews)0 comments
Submitted
-
MC-RP Object Editor
By Ahmed
This is a public release of the object editor used on the Mafia City Roleplay server.
Usage client-side:
let obj = mp.objects.new(mp.game.joaat(model), new mp.Vector3(position.x, position.y, position.z)); mp.events.call('objecteditor:start', obj.id); mp.events.add('objecteditor:finish', (objId, pos, rot) => { if(obj.id == objId) { // send pos and rot to server and save or do whatever. return; } });
Github Link: https://github.com/Ahmad45123/ragemp-objecteditor
396 downloads
-
mp.game.data
By rootcause
This resource adds wrappers for these natives:
GET_TATTOO_SHOP_DLC_ITEM_DATA GET_SHOP_PED_COMPONENT GET_SHOP_PED_PROP GET_DLC_WEAPON_DATA GET_DLC_WEAPON_COMPONENT_DATA GET_PED_HEAD_BLEND_DATA GET_WEAPON_HUD_STATS GET_WEAPON_COMPONENT_HUD_STATS GET_DLC_VEHICLE_DATA GET_SHOP_PED_OUTFIT GET_SHOP_PED_OUTFIT_PROP_VARIANT GET_SHOP_PED_OUTFIT_COMPONENT_VARIANT Before 1.1.0, you couldn't use these natives because they needed pointers to their respective structures but since 1.1 allows developers to use ArrayBuffers, that is no longer a problem. Thing is, you still need to create a buffer, invoke the native and read the data from your buffer. (too much work)
This resource is made to prevent that.
Installing
Put gamedata into your server's client_packages directory, then add require('gamedata'); to client_packages/index.js.
Clientside API
This resource extends "mp.game" by adding a "data" object that contains multiple functions.
/* Returns information about a decoration/tattoo. characterType: * 0 = Michael * 1 = Franklin * 2 = Trevor * 3 = MPMale * 4 = MPFemale decorationIndex: * Decoration/tattoo index between 0 and GET_NUM_TATTOO_SHOP_DLC_ITEMS(characterType). Returned object: * { lockHash, id, collection, preset, cost, eFacing, updateGroup, textLabel } This native was researched & documented by TomGrobbe. (https://github.com/TomGrobbe) */ mp.game.data.getTattooShopDlcItemData(characterType, decorationIndex); /* Returns information about a clothing item. componentHash: * Obtained by GET_HASH_NAME_FOR_COMPONENT. Returned object: * { lockHash, uniqueNameHash, locate, drawableIndex, textureIndex, cost, eCompType, eShopEnum, eCharacter, textLabel } */ mp.game.data.getShopPedComponent(componentHash); /* Returns information about a clothing item. (prop) propHash: * Obtained by GET_HASH_NAME_FOR_PROP. Returned object: * { lockHash, uniqueNameHash, locate, propIndex, textureIndex, cost, eAnchorPoint, eShopEnum, eCharacter, textLabel } */ mp.game.data.getShopPedProp(propHash); /* Returns information about a ped's headblend data. entityOrHandle: * Entity (mp.players.local) or handle (mp.players.local.handle) of the ped you want to get headblend data of. Returned object: * { shapeFirstId, shapeSecondId, shapeThirdId, skinFirstId, skinSecondId, skinThirdId, shapeMix, skinMix, thirdMix, isParent } */ mp.game.data.getPedHeadBlendData(entityOrHandle); /* Returns information about a weapon's HUD stats. weaponHash: * Hash of the weapon you want to get HUD stats of. Returned object: * { hudDamage, hudSpeed, hudCapacity, hudAccuracy, hudRange } */ mp.game.data.getWeaponHudStats(weaponHash); /* Returns information about a weapon component's HUD stats. componentHash: * Hash of the weapon component you want to get HUD stats of. Returned object: * { hudDamage, hudSpeed, hudCapacity, hudAccuracy, hudRange } */ mp.game.data.getWeaponComponentHudStats(componentHash); /* Returns information about a DLC weapon. dlcWeaponIndex: * DLC weapon index between 0 - GET_NUM_DLC_WEAPONS(). Returned object: * { lockHash, weaponHash, id, cost, ammoCost, ammoType, defaultClipSize, textLabel, weaponDesc, weaponTT, weaponUppercase } */ mp.game.data.getDlcWeaponData(dlcWeaponIndex); /* Returns information about a DLC weapon's component. dlcWeaponIndex: * DLC weapon index between 0 - GET_NUM_DLC_WEAPONS(). dlcWeaponComponentIndex: * DLC weapon component index between 0 - GET_NUM_DLC_WEAPON_COMPONENTS(dlcWeaponIndex). Returned object: * { attachBone, isDefault, lockHash, componentHash, id, cost, textLabel, componentDesc } */ mp.game.data.getDlcWeaponComponentData(dlcWeaponIndex, dlcWeaponComponentIndex); /* Returns information about a DLC vehicle. dlcVehicleIndex: * DLC vehicle index between 0 - GET_NUM_DLC_VEHICLES(). Returned object: * { lockHash, modelHash, cost } */ mp.game.data.getDlcVehicleData(dlcVehicleIndex); /* Returns information about an outfit. outfitHash: * uniqueNameHash of the outfit. Returned object: * { lockHash, uniqueNameHash, cost, numProps, numComponents, eShopEnum, eCharacter, textLabel } */ mp.game.data.getShopPedOutfit(outfitHash); /* Returns information about an outfit's component. outfitHash: * uniqueNameHash of the outfit. componentIndex: * index of the outfit's component. Returned object: * { uniqueNameHash, enumValue, eCompType } */ mp.game.data.getShopPedOutfitComponentVariant(outfitHash, componentIndex); /* Returns information about an outfit's prop. outfitHash: * uniqueNameHash of the outfit. propIndex: * index of the outfit's prop. Returned object: * { uniqueNameHash, enumValue, eAnchorPoint } */ mp.game.data.getShopPedOutfitPropVariant(outfitHash, propIndex);
Example Script
Writes bunch of information to the console. (which you can access by pressing F11)
mp.keys.bind(0x75, false, () => { // First freemode male tattoo const tattooData = mp.game.data.getTattooShopDlcItemData(3, 0); if (tattooData) { mp.console.logInfo(`Tattoo data: ${JSON.stringify(tattooData)}`); } // Player's top const component = 11; const componentHash = mp.game.invoke("0x0368B3A838070348", mp.players.local.handle, component, mp.players.local.getDrawableVariation(component), mp.players.local.getTextureVariation(component)); const topData = mp.game.data.getShopPedComponent(componentHash); if (topData) { mp.console.logInfo(`Top data: ${JSON.stringify(topData)}`); } // Player's hat const prop = 0; const propHash = mp.game.invoke("0x5D6160275CAEC8DD", mp.players.local.handle, prop, mp.players.local.getPropIndex(prop), mp.players.local.getPropTextureIndex(prop)); const hatData = mp.game.data.getShopPedProp(propHash); if (hatData) { mp.console.logInfo(`Hat data: ${JSON.stringify(hatData)}`); } // Headblend mp.players.local.setHeadBlendData(21, 2, 0, 21, 2, 0, 0.75, 0.5, 0.0, false); const blendData = mp.game.data.getPedHeadBlendData(mp.players.local.handle); if (blendData) { mp.console.logInfo(`Headblend data: ${JSON.stringify(blendData)}`); } // Current weapon HUD stats const weaponData = mp.game.data.getWeaponHudStats(mp.players.local.weapon); if (weaponData) { mp.console.logInfo(`Current weapon HUD stats: ${JSON.stringify(weaponData)}`); } // COMPONENT_AT_MUZZLE_04 HUD stats const componentData = mp.game.data.getWeaponComponentHudStats(mp.game.joaat("COMPONENT_AT_MUZZLE_04")); if (componentData) { mp.console.logInfo(`Component HUD stats: ${JSON.stringify(componentData)}`); } // DLC weapon data const dlcWeaponIndex = 7; const dlcWeaponData = mp.game.data.getDlcWeaponData(dlcWeaponIndex); if (dlcWeaponData) { mp.console.logInfo(`DLC weapon data: ${JSON.stringify(dlcWeaponData)}`); // First component of weapon const dlcWeaponCompData = mp.game.data.getDlcWeaponComponentData(dlcWeaponIndex, 0); if (dlcWeaponCompData) { mp.console.logInfo(`DLC weapon first component data: ${JSON.stringify(dlcWeaponCompData)}`); } } // DLC vehicle data const dlcVehicleIndex = 21; const dlcVehicleData = mp.game.data.getDlcVehicleData(dlcVehicleIndex); if (dlcVehicleData) { mp.console.logInfo(`DLC vehicle data: ${JSON.stringify(dlcVehicleData)}`); } // Outfit data const outfitHash = mp.game.joaat("DLC_MP_SUM24_M_OUTFIT_0"); // Pizza This... Outfit const outfitData = mp.game.data.getShopPedOutfit(outfitHash); if (outfitData) { mp.console.logInfo(`Outfit data: ${JSON.stringify(outfitData)}`); // First component of outfit if (outfitData.numComponents > 0) { const outfitComponentData = mp.game.data.getShopPedOutfitComponentVariant(outfitHash, 0); if (outfitComponentData) { mp.console.logInfo(`First component of outfit: ${JSON.stringify(outfitComponentData)}`); } } // First prop of outfit if (outfitData.numProps > 0) { const outfitPropData = mp.game.data.getShopPedOutfitPropVariant(outfitHash, 0); if (outfitPropData) { mp.console.logInfo(`First prop of outfit: ${JSON.stringify(outfitPropData)}`); } } } });
Notes
If mp.game.invoke fails (trying to get non-DLC item data/invalid params etc.), return value of the function will be null. Most non-DLC items (core GTAV weapons like Pistol, Assault Rifle etc, initial freemode tattoos, initial freemode clothes) are not supported by the natives. Strings returned by the functions (textLabel, componentDesc etc.) are GXT entries. You're supposed to use them with getLabelText or GXT::get.429 downloads
(2 reviews)0 comments
Updated
-
Native Menu
By Blue Dadjun
Here is an open-source native menu implementation for Rage-MP. (the documentation is not ready)
https://github.com/BlueDadjun/Native-Menu-RageMP
744 downloads
-
NativeUI
By GamingMaster
NativeUI for RageMP!
This can only be used Clientside!
Documentation: Click
Github: Click
16616 downloads
-
NativeUI Improved
By Kar
Improvements over the previous nativeui:
Added `UIMenuDynamicListItem`. Descriptions are no longer cut off at 99 characters, but now support 99 * 3. `UIMenuListItem` and `UIMenuSliderItem` can now store extra data. Improved description line wrapping. Description caption is now only updated when necessary. Description background is now only updated (recalculated) when necessary. Bettered the position of the left arrow for list items. Added new badges (Sale, Arrows and Voice Icons). Added `Menu.RemoveItem(item: UIMenuItem)`. When binding an item to a menu, automatically add that item if it isn't in the menu items list already. Added `MenuOpen` event when `menu.Visible` is changed. When hovering over the currently selected ListItem's title text, the cursor will be MiddleFinger, just like in the original menus. `GoLeft` and `GoRight` now correctly handles disabled items. Added experimental automated menu pool system (It's a bit effy right now). MENUS ARE NO LONGER SHOWN BY DEFAULT. Added `closeChildren: boolean = false` parameter to `menu.Close()`. An optional parameter specifiing whether or not you want to close all children with the menu. NOTE BRIEFLY:
The description and optimization updates for me saved over 20-30 FPS while a menu is open. You might want to be careful with menu pools right now. I haven't went deep into it but for simple menu pools it works GREAT. `MenuClose` event is NOT emitted when Visible is set to false. This is to allow users to reopen menus at it's same state, for e.g searching through a store. The GitHub will not match the file here. So please download the file from GitHub (dist/index.ts) or compile it yourself.
https://github.com/karscopsandrobbers/RAGEMP-NativeUI
715 downloads
-
PayCheck - Popup | Only HTML / CSS Design
This is a PayCheck - Popup, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
269 downloads
(0 reviews)0 comments
Updated
-
Playerinteraction Menu | Only HTML / CSS Design
This is a Playerinteraction Menu its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
1566 downloads
(2 reviews)0 comments
Updated
-
Popup Window | Only HTML / CSS Design
This is a Popup Window, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
199 downloads
(1 review)0 comments
Updated
-
RAGE MP + React
By ynhhoJ
To install all packages, use: yarn install or npm install.
For running this example, use: yarn run start or npm start.
For building project, use: yarn run build or npm run build.
In client_packages is an example of how you can use compiled RAGE MP functions and React.
Credits to Mispon(rage-mp-react-ui) for branch example.
The principal difference between our examples is hot reload and more understandable example of code in my version.
Repo: https://github.com/Corso-Project/RAGE-MP-React-Example
388 downloads
(0 reviews)0 comments
Submitted
-
rage_utils
By ShrewdSpirit
A bunch of utility functions for rage (cross environment: server, client, browser) that are not easy to implement in JS specially for client and browser! Also you can use this package for projects other than rage.
If you want a new feature in utilities that you think others might use too, submit an issue on github page
Install instructions, features and documentation are all available on npm registery and github page
I highly recommend visiting the linked pages and using npm/yarn for installing
107 downloads
(1 review)0 comments
Updated
-
rage-progressbar
By nns
rage-progressbar
Very simple Progress Bar to delay event execution.
How to use:
Put the "progress" folder inside "client_packages" into your "client_packages" folder (or wherever you have your client files).
Import the "progress/index.js" in your main "index.js" like it is done in my main "index.js"
You can then create a Progress Bar on the server-side with the following code:
player.call('progress:start', [SECONDS, TASK, DIRECTION, EVENT, PARAMS]);
SECONDS
How many seconds is the Progress Bar running
TASK
String which is displayed inside the progress bar
DIRECTION
Is the event which is called after the bar has finished a server-side or client-side event
EVENT
The event to be called afterwards
PARMS
Additional params to send to the following event
That's pretty much it. Customize it as you want, this is as basic as possible.
"packages/Progress/index.js" contains an example with an example /progress command and a follow-up event.
315 downloads
(1 review)0 comments
Updated
-
.thumb.png.a3b1ef2817611f3f3fdbbdcca095e2af.png)
RageMP-BigData
By noBrain
RageMP-BigData
This plugin was created for experiment and might not be what you are looking for, this is intended to be used for sending big data to clients in chunks to make the size unlimited for the server owners, this will eliminate original rage-mp events limit and will be as fast as them when being used for small data, but i suggest that you use original ones just in case.
This is still experimental and the way it works might change in a future update
GITHUB LINK : https://github.com/safra36/RageMP-BigData
API
for obvious reasons i made this only to go from server-side to client-side and not client-side to server-side, there is a commented code about this and with a bit of knowlegde you can get it to work but it's not recommended since it will basically flood your server if you have many players so stay of it!
Server-Side Functions
/** Send a big data to a player @param player valid muliplayer player object @param eventName the event which is defined on client-side (just a normal event name) @param DataArray It's an array of data like how player.call works, and it supports all types of data (objects, numbers, strings with no effect on the typing!) @callback dataReceived Optional callback triggers when the data is received in full by the client @param retry Optional param which is true by default, pass false to disable auto retry (this will cause the data to be lost, added by request but don't use it!) */ player.callBig(eventName, DataArray, dataReceived, &retry) /** Send a big data to all players @param eventName the event which is defined on client-side (just a normal event name) @param DataArray It's an array of data like how player.call works, and it supports all types of data (objects, numbers, strings with no effect on the typing! */ mp.players.callBig(eventName, DataArray) /** Set a big shared variable on players @param name name of the data @param data any type of data @callback dataReceived Optinal callback triggers when the data is received in full by the client @param retry Optional param which is true by default, pass false to disable auto retry (this will cause the data to be lost, added by request but don't use it!) */ player.setBigVariable(name, data, dataReceived, &retry) /** Get a previously set shared data on the client @param name name of the data */ player.getBigVariable(name) /** Set a big private data on client which is only set on a certain client, access it on server-side with player.privateData[dataName] You can use player.pdata.name instead from 0.0.3 @param name name of the data @param data any type of data @callback dataReceived Optinal callback triggers when the data is received in full by the client @param retry Optional param which is true by default, pass false to disable auto retry (this will cause the data to be lost, added by request but don't use it!) */ player.setPrivateData(name, data, dataReceived, &retry) /** Delete private data on server-side and client-side @param name name of the data */ player.deletePrivateData(name) Server-Side Variables
/** * Setter * Sets private data on client like setPrivateData but without optional retry * Use with try catch, it can only be set if there is no other pending data on the target name (throw error if there is a pending data) */ player.pdata.dataName = value /** * Getter * Get private data which was set, must be used with await since the data may take time to reach client; */ var data = await player.pdata.dataName; Server-Side Events
/** Detemine if a data has been fully received by the client @param player playerObject which has sent this signal @param id Id of the data sending session @param eventName Name of the even you have been called on the client previously using callBig */ mp.events.add('DataSender:End', (player, id, eventName) => {}) /** This will be called when the sent data was failed (there is an auto retry to put the data on player for sure but see this as a notification) @param id Id of the data sending session @param dataName Name of the data you have been set on the client @param errorCode -1 Means the data could not be parsed on client, -2 means there was some data chunks lost on the send proccess */ mp.events.add('DataSender:Failed', (id, dataName, errorCode) => {}) Client-Side Functions
/** Get a shared variable of a player @param name data name that was set on the player */ player.getBigVariable(name) Client-Side Variables
You can get client private data using mp.players.local.privateData[dataName] Client-Side Events
/** Get notified when a shared data get's updated on server-side @param dataName shared data name @param entityId id of the entity which this it's shared data has been updated (currently it's only a player) @param type get type of entity which is updated (player, object, vehicle, ped but currenly it's only player) @param oldData previously set data if it's forst time then it's undefined @param newData the latest data has been set on this name */ mp.events.addBigDataHandler(dataName, (entityId, type, oldData, newData) => {}) /** Get notified when a shared data get's updated on server-side @param dataName private data name @param oldData previously set data if it's forst time then it's undefined @param newData the latest data has been set on this name */ mp.events.addPrivateDataHandler(dataName, (oldData, newData) => {}) Example (BigData Event Sample)
Server-Side
// Big data is an array of rage-mp cloths (something around 15MB of data) and other ones are regular data (can be big data as well) player.callBig('GetBigData', [BigData, 'Some Other Test Arguments', 3]); Client-Side
mp.events.add('GetBigData', (BigJSONData, args1, argg2) => { mp.gui.chat.push(`Data: ${BigJSONData['Tops']['Male']['NONE'][0].name} - Type: ${typeof(BigJSONData)}`); mp.gui.chat.push(`Data: ${args1} - Type: ${typeof(args1)}`); mp.gui.chat.push(`Data: ${argg2} - Type: ${typeof(argg2)}`); }) Results
Benchmark
Well, the time it takes to transfer the data really depends on player network speed, data chunk size and the size of the data it self. For testing, i sent a very big json file contaning all rage-mp clothing with their torsos and names and prices (which i use on server-side my self), the file is something around 15MB, it took something about ~3s to transfer the whole data to the client, this is a beta version of the library but any help is accepted for optimizations.
Installation
Copy all the files to your packages/client-packages Make sure to add the client-side file to your index.js Enjoy! Known Issues
If your data fails and you set a new data which does not fail, the old data is probably gonna replace the new data over retry
104 downloads
-
ReactTS using NextUI and TailwindCSS template
By -Andreas
Template for ReactTS using NextUI and TailwindCSS
This project serves as a template for getting started with React on your RageMP server. It is using TypeScript, and comes with NextUI providing all necessary building blocks and TailwindCSS for additional styling. The idea is to have one UI project containing everything you need, with modals that can be toggled on demand.
I was struggling with getting what I needed from Vue, and decided to scrap that idea and went forward with React. I hope this will save others some time if you should choose the same. After browsing the forum a bit and seeing some of the valuable examples already existing for user interfaces, they didn't quite get me where I needed. So this is my take using, a globally exposed function invokeEvent that can be used to show, hide and toggle modals. This allows for as many modals to be displayed at the same time as you would like. I do want to mention https://rage.mp/forums/topic/2571-guide-creating-ui-with-react/ for having the idea of an EventManager to get the bridge between RageMP and the React instance. Though it is meant for JavaScript it was helpful to get things rolling.
Build
Run npm run build and grab the dist folder and put it inside your server client packages.
Client events
After instantiating your browser it will support three functions for toggling modals on demand. The template contains a login example, so invoking trigger('show', 'login'); will enable the login modal etc. More modals can easily be created by following the structure as seen in the code.
let browser = mp.browsers.new("http://package/gamemode/cef/index.html"); mp.events.add('ShowModal::Client', (modal) => { browser.execute(`invokeEvent('show', '${modal}');`); }); mp.events.add('ToggleModal::Client', (modal) => { browser.execute(`invokeEvent('toggle', '${modal}');`); }); mp.events.add('HideModal::Client', (modal) => { browser.execute(`invokeEvent('hide', '${modal}');`); });
Check out my GTARoleplay gamemode where this resource is actively being used.
Read more about it here: https://github.com/Andreas1331/ragemp-roleplay-readme
GitHub repository link
https://github.com/Andreas1331/ragemp-roleplay-ui
174 downloads
(0 reviews)0 comments
Updated
-
Shared World Data
By rootcause
If you ever used GTA Network's setWorldSyncedData/SetWorldSharedData, you probably have an idea of what this resource does. If you haven't used those, this resource lets you set variables that will be synced to all clients.
Installing
Put the files you downloaded in their respective places Add require('worlddata') to client_packages/index.js, preferably as the first module you require All done
Using
There isn't much to it, you can do one of these to set shared data:
mp.world.data.myDataKey = myValue; mp.world.data["myDataKey"] = myValue; you can do one of these to get shared data:
mp.world.data.myDataKey mp.world.data["myDataKey"] and you can do one of these to remove shared data:
delete mp.world.data.myDataKey; delete mp.world.data["myDataKey"]; (1.1) now you can do this to set multiple shared data at once, thanks to @kemperrr:
mp.world.setData(updatedObject); // see examples You can use setting/deleting code on clientside as well but it won't affect the data on serverside. If anything your changes will get overriden when myDataKey is updated, so there's no point in using setting/deleting code on clientside.
Events (Clientside)
// worldDataReady is called when the player receives all shared data. mp.events.add("worldDataReady", () => { // Example, print all data keys to chat mp.gui.chat.push(`World data ready! ${Object.keys(mp.world.data).join(",")}`); }); // worldDataChanged is called when shared data changes. mp.events.add("worldDataChanged", (key, oldValue, newValue) => { // Example, show which data key changed with its old and new value mp.gui.chat.push(`World data changed: ${key} | old: ${oldValue} | new: ${newValue}`); }); // worldDataRemoved is called when shared data is removed. mp.events.add("worldDataRemoved", (key) => { // Example, show which data key got removed mp.gui.chat.push(`World data removed: ${key}`); });
Example (Serverside)
let gameSeconds = 0; // Increase gameSeconds every second and update the world data every 5 seconds, for no reason... setInterval(() => { gameSeconds++; if (gameSeconds % 5 === 0) { // You can use mp.world.data["exampleVariable"] as well mp.world.data.exampleVariable = gameSeconds; console.log(`exampleVariable is now ${mp.world.data.exampleVariable}`); } }, 1000); // Will update serverUpdated, serverName, serverWebsite shared data. mp.world.setData({ "serverUpdated": Date.now(), "serverName": "RAGE Multiplayer Server #545" "serverWebsite": "https://rage.mp/" }); Source code is available on GitHub in case you don't want to download: https://github.com/root-cause/ragemp-world-data
174 downloads
(3 reviews)0 comments
Updated
-
Simple ATM | Only HTML / CSS Design
This is a ATM Menu, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
644 downloads
(4 reviews)0 comments
Updated
-
Speedometer | Only HTML / CSS Design
This is a Speedometer, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
739 downloads
(3 reviews)0 comments
Updated
-
Synced Time Progression
By Angel
I posted this in the forum, but it is probably better suited here.
This is a very simple script that gives the same time progression experience as single player mode. The source for the time is current GMT time and the calculation rolls this time into an in-game day 24 hour period that lasts 48 minutes (IRL time). Note that as the calculations are based off GMT (and not local time) all clients using this will have the same in game time (dependent on whether their computer's time and timezone is set up correctly).
To use it, simply copy the file somewhere and "require" it in your client_resources script.
There's nothing to configure.
Known Bugs:
Because the date is not recalculated, it continues to reflect the current real world date regardless of how many in game 24 hour periods there are within the game.581 downloads