Интерфейс выбора спавна через карту | React + Typescript
  • Создано
  • 332
𝐏𝐘𝐑𝐄𝐗
Основатель форума
Всех приветствую! Предоставляю вашему вниманию, интерфейс выбора спавна.
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:​
[CENTER][SIZE=4]{ "trigger": "trigger", "name": "Trigger", "position": { "x": 0, "y": 0 } }[/SIZE][/CENTER]

"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'; - триггеры точек
​
[CENTER][SIZE=4]{ house: boolean lastPosition: boolean organization?: ISpawns }[/SIZE][/CENTER]

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

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:​
[CENTER][SIZE=4]const positions = { ballas: new mp.Vector3(0, 0, 0); }[/SIZE][/CENTER]
​
[CENTER][SIZE=4]mp.events.add("EVENT:NAME", (spawn: 'ballas' | 'gov' | 'army' | 'sheriff' | 'airport' | 'house' | 'last:position') => { switch (spawn) { case 'ballas': player.position = ballas; break; } })[/SIZE][/CENTER]



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

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



Скачать - ​
Ответы1

All viewers

Show all users
Назад
Сверху
Лента Войти Разделы