Clientside JS Snippets

From RAGE Multiplayer Wiki
Revision as of 10:31, 1 December 2020 by NoBrain (talk | contribs)

Client-side Javascript - Helpful Code Snippets/Examples

These should not be limited to one existing function. If they are, simply propose the edit on the function as an example

Rotate Recentangle The rotate rectangle allows you to get the Vehicle size and rotate it to get the correct X and Y from the Game.

rotateRect(angle, ox, oy, x, y, w, h) {
        const xAx = Math.cos(angle);  // x axis x
        const xAy = Math.sin(angle);  // x axis y
        x -= ox;  // move rectangle onto origin
        y -= oy;
        return [[ // return array holding the resulting points
            x * xAx - y * xAy + ox,   // Get the top left rotated position
            x * xAy + y * xAx + oy,   // and move it back to the origin
        ], [
            (x + w) * xAx - y * xAy + ox,   // Get the top right rotated position
            (x + w) * xAy + y * xAx + oy,
        ], [
            (x + w) * xAx - (y + h) * xAy + ox,   // Get the bottom right rotated position
            (x + w) * xAy + (y + h) * xAx + oy,
        ], [
            x * xAx - (y + h) * xAy + ox,   // Get the bottom left rotated position
            x * xAy + (y + h) * xAx + oy,
        ]
        ];
    }

Get Vehicle Layout (Sizings and Location in Game) This function allows you to get the full layout of the vehicle such as front, rear, roof.

vehicleLayout(Vehicle) {
        const sizeofVehicle = mp.game.gameplay.getModelDimensions(Vehicle.model);
        const vehicleRotation = Vehicle.getRotation(2);
        const Xwidth = (0 - sizeofVehicle.min.x) + (sizeofVehicle.max.x);
        const Ywidth = (0 - sizeofVehicle.min.y) + (sizeofVehicle.max.y);
        const degree = (vehicleRotation.z + 180) * Math.PI / 180;
        const newDegrees = this.rotateRect(degree, Vehicle.position.x, Vehicle.position.y, Vehicle.position.x - sizeofVehicle.max.x, Vehicle.position.y - sizeofVehicle.max.y, Xwidth, Ywidth);
        const frontX = newDegrees[0][0] + ((newDegrees[1][0] - newDegrees[0][0]) / 2);
        const frontY = newDegrees[0][1] + ((newDegrees[1][1] - newDegrees[0][1]) / 2);
        const bottomX = newDegrees[2][0] + ((newDegrees[3][0] - newDegrees[2][0]) / 2);
        const bottomY = newDegrees[2][1] + ((newDegrees[3][1] - newDegrees[2][1]) / 2);
        return {
            front: {x: frontX, y: frontY},
            back: {x: bottomX, y: bottomY},
            center: {x: Vehicle.position.x, y: Vehicle.position.y},
            size: {
                lengthX: Xwidth,
                lengthY: Ywidth,
                min: {x: sizeofVehicle.min.x, y: sizeofVehicle.min.y},
                max: {x: sizeofVehicle.max.x, y: sizeofVehicle.max.y},
                z: sizeofVehicle.min.z
            }
        };
    }


Perform async loop in CEF This function will allow you to process large arrays that you have and want to process them inside your html file which using normal ones will block your UI and crash your client

/**
 * @description perform an async loop in CEF for large arrays to prevent UI block and client crash
 * @param array Array you want to do loop on
 * @param callback callback containing (item, index, array)
 * @param end will be called when the async loop is finished
 */
const asyncLoop = (array, callback, end) => {
  // Index which is going to be proccessed
  var index = 0;
  function doLoop() {

      // Check if it's the end of the array
      if (index < array.length) 
      {
          callback(array[index], index, array);
          ++index;
          // Do async wait for 1 ms
          setTimeout(doLoop, 1);
      }
      else
      {
        // calls when the loop is finished
        end()
      }
  }    
  doLoop();    
}


Disable AFK Cam

mp.events.add('render', () => {
    mp.game.invoke("0xF4F2C0D4EE209E20"); //Invalidate Camera 0xF4F2C0D4EE209E20
})