Fivem-js v1.5.1 - Javascript/Typescript wrapper - Now with Menu class (NativeUI)!

fivem-js typescript-vs-javascript

Current Version: v1.5.1

contributions welcome CircleCI

https://nodei.co/npm/fivem-js.png?downloads=true&downloadRank=true&stars=true


Recently I’ve noticed an influx of FiveM users interested in developing resources using Typescript or Javascript. Typings and auto-complete for natives already exist using the @citizenfx/client and @citizenfx/server packages provided by FiveM, but these only give access to the natives.

This npm package tries to enhance this by providing a common set of classes and functions, just like the C# counterpart used for C# development - CitizenFX.Core.Client.dll.


Important Links

Source Code: Link
npm Package: Link
Documentation: Link


What is fivem-js?

Javascript/Typescript wrapper for the FiveM natives.

Functionality of this wrapper is based on the FiveM C# wrapper - link. It’s a feature-rich set of helper classes, objects, and functions to help you develop your project faster.

This package is especially useful for those coming from C#.


Features

  • One dependency @citizenfx/client
  • Abstracts common used FiveM practices
  • Entity management through class objects (i.e. Vehicle and Ped entities)
  • UI elements such as scaleforms and loading prompts
  • New! NativeUI-like menu class (Cfx.Menu) - example
  • Audio, Blips, Cameras and more… In other words, whatever the FiveM C# wrapper can do, this package can as well.

Note: Not all features are currently available. They will be added as development continues as well as additional language specific features. If you are a developer, please provide Pull Requests and/or improvements.


Installation

Simply install it as a node module - npm i fivem-js or yarn add fivem-js.


Usage / Examples

Make sure you are using webpack so that you can require (Javascript) or import (Typescript) node_modules.

Typescript:

import * as Cfx from "fivem-js";

RegisterCommand("adder", async (source: number, args: string[]) => { 
    const position = Cfx.Game.PlayerPed.Position;
    const heading = Cfx.Game.PlayerPed.Heading;
    const model = new Cfx.Model("adder");

    const vehicle = await Cfx.World.createVehicle(model, position, heading); 

    Cfx.Game.PlayerPed.setIntoVehicle(vehicle, Cfx.VehicleSeat.Driver);
}, false); 

You can also individually import classes.

import { World } from 'fivem-js/lib/World';

Javascript:

/// <reference path="node_modules/fivem-js/lib/index.d.ts"/>
/// <reference path="node_modules/@citizenfx/client/natives_universal.d.ts"/>
const Cfx = require('fivem-js');

RegisterCommand("adder", async(source, args) => { 
    const position = Cfx.Game.PlayerPed.Position;
    const heading = Cfx.Game.PlayerPed.Heading;
    const model = new Cfx.Model("adder");
    const vehicle = await Cfx.World.createVehicle(model, position, heading); 

    Cfx.Game.PlayerPed.setIntoVehicle(vehicle, Cfx.VehicleSeat.Driver);
}, false); 

Contributing

You are more than welcome to contribute to this project by submitting a pull request and creating issues.

I encourage you to test the features and add what you find missing. A guide on how to contribute will be added in the near future (keep an eye out on the repository). For now, please pull request to the development branch!


Final Words

This tool is not complete, but will be actively developed over time. The basic features such as entity creation and manipulation work as well as other common features such as Scaleforms and HUD elements. Please keep up-to-date with the source code to see what is currently implemented.

I am in the process of learning Typescript as well, so if you see any improvements, please let me know. I encourage everyone to at least try out Javascript or Typescript with or without this package.

You can modify or edit the code as you like, but you cannot re-release it. Please see the LICENSE

33 Likes

Looks nice, good work!

1 Like

Nice this is some good work m8 im going to start testing this out


I’m going to add more when I have tested it more


EDIT:

Me and my dev have ben testing around a bit and it works good for us atm im not in the charge im working on other stuff but I im going to update this Post when I im back in the coding and i’m going to also say what we are working on but atm that is an secret

EDIT2:
Ohh nice im going to use the new Audio stuff

Nice.

Nice work.

Looks really useful, great work. Can’t wait to use it.

OMFG you Beautiful Bastard you have made my day with this i cant believe it i just started using TS in a new resource i was working on and this will make it even more cake :smiley:

1 Like

Thank you…

oh wow, this is amazing. :heart:

We reached 186 downloads in the first 2 days! :partying_face: Thank you for this. I haven’t heard any feedback regarding performance/features, so please report back once you’ve used it.

(@godgutten have you tested it already like you promised?)

In upcoming updates I will be improving the comments, so that the experience for intellisense and documentation (new) will be improved. Some classes also have missing functions, which require me to write some other custom classes. I aim to also add these the next update.

New version v1.0.6 changelog is below.


Update v1.0.6

This update adds a couple of new classes and documentation.

  • Added auto-generated documentation available here
  • Added Audio, Camera, and GameplayCamera classes
  • Fixed Prop class missing

1 Like

Nice! Does it have NativeUI support?

No, there is currently no functionality to add menus. However, it could be something to look in to!

Hi, I don’t why is not working i read this usage / examples and im using the resource webpack but i have the same error http://prntscr.com/mqo166 i do not understand

As I didn’t test it in Javascript, I’ll do that later today.

Nice man
1+

Please make sure that you correctly use webpack. I’ve added a JavaScript example to showcase how to use fivem-js. See here

Since the last update, there have been some movements in the repository. However, they are not yet ready to be pushed for v1.0.7. Primarily, the clcore (C# wrapper) accesses the memory for certain elements, which I may not be able to use. As such, I will have to come up with my own solution.

If you want to run so called bleeding edge, you’re more than welcome to use the latest commit, however it’s not recommended. I hope to have v1.0.7 out in the next week or two.

We are still getting downloads each week, thank you :heart: ! This shows me that you are interested and I will continue with this project.


Upcoming additions v1.0.7

  • Raycast class
  • Checkpoint class
  • ParticleFx
  • RelationshipGroups manipulation between entities
  • Ropes

As mentioned 3 days ago, I have added a JavaScript example for those having trouble using this package. Please let me know if you’d like me to create a TypeScript example too. Fortunately, you need webpack to use Typescript so you should not have any issues starting out! If you do, you could refer to my fivem-ts-boilerplate.

Talking about asking for opinions, I’d like to ask you all if you’d like me to include some sort of menu class that mimics “NativeUI”.

Do you want to see a menu builder class? :partying_face: Implemented in v1.1.0+

  • Yes
  • No
  • I don’t mind

0 voters


That’s it from me for today!
-d0p3t

You (all) asked for it, so you’re getting it!

NativeUI

I have started working on a NativeUI complement Menu class that you can use to easily create menus. Methods, properties and object names will be familiar to those that have used NativeUI. No messing with rendering, it’s all done by the class itself. Follow the progress in the feature/nativeui branch. All code is an edited version of this repository by XMGamingMaster.

Preview

image

Code Preview

const menu = new Cfx.Menu("fivem-js", "Hello Chase!", new Point(50, 50));

setTick(() => {
  if (Cfx.Game.IsControlJustPressed(0, Control.InteractionMenu)) {
    if (menu.Visible) {
      menu.Close();
    } else {
      menu.Open();
    }
  }
});

This is expected to ship with v1.0.7, which will hopefully be released at the end of this week. I need to fix some issues as you can see in the preview. The menu item text is not showing for some reason.

2 Likes

I have decided to publish a new minor version as this adds totally new functionality!


Update v1.1.1

Highlights

  • Menu builder (NativeUI style)
  • Raycasting
  • Relationship Groups
  • Particle Fx
  • (currently not working) Checkpoints, Entity bones, Ropes
  • Bumped to v1.1.1 - Oops forgot some console.log()'s

:partying_face: We got a new Menu class that resembled NativeUI! The code is an adapted and edited version of this repository. What I will do is continue to develop this class to add features like custom background textures, “Parent” item for character creation and so on.

If you have any ideas :bulb: what items to add, let me know!

Example Menu

FiveM_GTAProcess_2019-03-14_22-43-45

Example Code

For example code, see here. It should be familiar to those with NativeUI experience elsewhere.

Don’t forget you can always look at the documentation


Also thanks @Hellslicer for the first PR that got merged. He’s got another small patch in the pipeline!

That’s it for now. Enjoy!
-d0p3t

Oops, I left in some console.log()'s - patched to v1.1.1 - That’s a nicer number anway

1 Like

I’m getting an error while trying the very basic command that you have here as a sample.

The error comes from the fivem-js lib "ReferenceError: IsModelAVehicle is not defined".

I’ve set the webpack mode to development and tried using import, using const and require, but different errors show up all the time (PlayerId is not defined and such).

Any tips ?