• Все публичные ресурсы на нашем портале доступны для скачивания абсолютно БЕСПЛАТНО после регистрации! Регистрация открывает доступ сразу ко всем публичным ресурсам.
  • Из-за обновления GTA 5 (был добавлен новый патч) может временно не работать вход в RAGE Multiplayer.

    ERROR: Your game version is not supported by RAGE Multiplayer.

    Данная ошибка говорит о том, что GTA V обновилась до новой версии (GTA Online тоже). Вам необходимо обновить саму игру в главном меню вашего приложения (Steam / Epic Games / Rockstar Games).
    Если после этого RAGE:MP все равно не работает - вам нужно дождаться выхода патча для самого мультиплеера (обычно это занимает от нескольких часов до нескольких дней).

    Новости и апдейты Rockstar Games - https://www.rockstargames.com/ru/newswire/
    Статус всех служб для Rockstar Games Launcher и поддерживаемых игр: https://support.rockstargames.com/ru/servicestatus


    Grand Theft Auto 5 (+ GTA Online) последний раз были обновлены:
Интерфейс выбора спавна через карту | React + Typescript

CEF UI Figma Интерфейс выбора спавна через карту | React + Typescript 1.0

Нет прав для скачивания
Совместимость с RAGE:MP
  1. 1.1 (prerelease)
Всех приветствую! Предоставляю вашему вниманию, интерфейс выбора спавна.

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

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

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

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


Разработчик проекта - @dooj
Ссылка на тему форума
Ссылка на телеграмм

Ссылка на Figma

Скриншоты / Видео:

99p9M3u.png





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

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

Есть несколько вариантов установки проекта.

  • Установка через GitHub Desktop. Для этого вам потребуется
  • Установка через консоль вашего IDE или терминал Windows.
    • Переходим в нужную нам директорию (в которой будет проект)
    • Открываем терминал
    • Прописываем команду: git clone https://github.com/Intarial/rage_spawn
  • Установка при помощи zip архива
Каждый из способов по своему хорош, но эта тема не для этого. Подробнее можно почитать про 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 пикселей.

vrS5ihB.png

После добавления точки спавна, нам нужно открыть файл по пути: 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'

Если будут обнаружены какие-то проблемы с проектом, баги, ошибки и тд... Прошу написать мне в личные сообщения в телеграмм или в обсуждениях данного ресурса.
  • Like
Реакции: Amazingevich
Автор
dooj
Скачивания
157
Просмотры
4,717
Первый выпуск
Обновление
Оценка
5.00 звёзд 1 оценок

Последние рецензии

Отличная работа, учитывая free-resource! А так к любым работам можно придратся, сколько разработчиков, столько и мнений)