Добро пожаловать на RAGEM.RU

Все для RageMP GTA 5
  • Собираем команду. подробности ТYТ либо в discord канале форума!

JS Интерфейс выбора спавна через карту | React + Typescript Rage:MP

Appi

Пробегом тут
Випка
Команда форума
Куратор портала
Регистрация
27.03.2023
Сообщения
194
Реакции
113
Баллы
80
RC
329
Предоставляю вашему вниманию, интерфейс выбора спавна.
99p9M3u.png


Интерфейс написан с использованием стека: React TS, SaSS, ESlint

Если же ваш проект без использования React, то ничего страшного. При билде вам вернет index.html файл, с интерфейсом, который можно будет импортировать в проект.

В интерфейсе прописаны триггеры и ивенты, без названия. Для подключения - нужно зайти на проект и исправить "EVENT:NAME", на имя ивента и/или триггера.

Будем благодарны за оценку интерфейса!

Разработчик проекта - @dooj


Установка и запуск проекта:

1.
Установка проекта с GitHub.

Есть несколько вариантов установки проекта.
Установка через GitHub Desktop. Для этого вам потребуется
Каждый из способов по своему хорош, но эта тема не для этого. Подробнее можно почитать про Git в документации или же по роликам на ютубе.

2. Установка зависимостей проекта.

Для работы проекта у вас должен быть установлен Node JS

Для установки зависимостей - переходим в корень проекта, открываем терминал (или же переходим в корень через IDE) и прописываем команду: npm install.

3. Запуск проекта.

Для запуска проекта - переходим в корень проекта, открываем терминал (или же переходим в корень через IDE) и прописываем команду: npm start.

4. Билд проекта.

Для билда проекта - переходим в корень проекта, открываем терминал (или же переходим в корень через IDE) и прописываем команду: npm run build.

После окончания, в корне, у вас появится папочка build с файлом index.html и папками. Данные файлы мы можем использовать для импорта в наш проект.

Подробное описание структуры проекта:

1. Установка дополнительных точек спавна

Для установки дополнительной точки, мы переходим по пути: src/configs/SpawnPoints.json. Открыв файл мы можем обнаружить массив с точками мест спавна на карте.

Чтобы добавить новую точку, создаем и добавляем еще один объект вида:
JavaScript:
{ "trigger": "trigger", "name": "Trigger", "position": { "x": 0, "y": 0 } }

"trigger" - отвечает за имя элемента, который будет отправляться триггером, при нажатии "появиться в выбранном месте"
"name" - отвечает за отображение имени на карте, в интерфейсе
"position" - имеет еще один объект, с X и Y элементами. X отвечает за левую сторону оси X, а Y за верхнюю сторону оси Y. Позиция указывается в PX относительно размеру 1920x1080 пикселей.

СПОЙЛЕР: ОСИ "X" И "Y"

После добавления точки спавна, нам нужно открыть файл по пути: src/Spawn.tsx.
Затем найти строчку:
JavaScript:
export type ISpawns = 'ballas' | 'gov' | 'army' | 'sheriff' | 'airport' | 'house' | 'last:position'; // Update Points To src/config/SpawnPoints.json

Сюда мы вписываем указанный trigger, который создали при добавлении точки. Все триггеры должны разделяться символом "|".

2. Управление ивентами и триггерами

На проекте имеется 1 главный rage ивент и 1 главный rage триггер.

Event

Ивент находится по пути: src/Spawn.tsx.

Ивент отвечает за принятие и парсинг данных полученных через клиент, с сервера. Принимает данный вида:

JavaScript:
// ISpawns = 'ballas' | 'gov' | 'army' | 'sheriff' | 'airport' | 'house' | 'last:position'; - триггеры точек

{ house: boolean lastPosition: boolean organization?: ISpawns }

Разберем каждый элемент объекта.

1. house - отвечает за то, есть ли у персонажа дом. Если дома нету - соответственно отображение точки спавна у дома - не будет. Принимает true или false

2. lastPosition - отвечает предоставление персонажу возможности спавна на последнем месте выхода. Принимает true или false

3. organization - отвечает за вывод точки спавна на карте по триггеру. Условно, мы добавили триггер vagos к точкам и установили на карте по координатам. Чтобы отобразить именно эту доступную точку, нам нужно в organization отправить триггер данной точки, чтобы указать что персонажу доступен там спавн. Принимает undefined или имя триггера.

Весь ивент принимает JSON.stringify() строку, отправленную через browser.call(EVENT:NAME, data).

Название ивента прописываем вручную - на месте 'EVENT:NAME'

Trigger

Триггер находится по пути: src/rage/triggers.ts.

Rage триггер отправляет данные о информации спавна (триггер точки спавна). На данный момент, по нажатию "Появиться в выбранной точке" с выбранной точкой, у вас автоматически отправляется триггер, который прописан в конфиге.

Для дома и места спавна отправляются триггеры: "house" и "last:position".

На клиентской стороне мы соответственно обрабатываем это:
JavaScript:
const positions = { ballas: new mp.Vector3(0, 0, 0); }

mp.events.add("EVENT:NAME", (spawn: 'ballas' | 'gov' | 'army' | 'sheriff' | 'airport' | 'house' | 'last:position') => { switch (spawn) { case 'ballas': player.position = ballas; break; } })


Это примерный скрипт, по которому можно вести обработку.

Название триггера прописываем вручную - на месте 'EVENT:NAME'

Скрытое содержимое доступно для зарегистрированных пользователей!
Зеркало
Скрытое содержимое доступно для зарегистрированных пользователей!
 
Современный облачный хостинг провайдер | Aéza

Все для RAGE:MP

Все для RAGE:MP. Портал о мультиплеере. Подумывали об том «как создать гта 5 сервер?» или «скачать готовый сервер rage mp?» на нашем сайте вы найдете очень много полезных ресурсов для RAGE:MP: готовые сервера, скрипты, моды, карты, шаблоны сайтов, мануалы и уроки, помощь в разработке, услуги скриптеров и других специалистов в сфере RAGE Multiplayer.

RAGE Multiplayer

Объединитесь с другими игроками, создайте свой сервер, сообщество или новый игровой режим. В RAGE Multiplayer вас ждут безграничные возможности и беспрецедентный контроль. Пусть ваше воображение будет единственным горизонтом.

Сайт входит в группу проектов GTA V MP
Верх