Урок Создаем работу дальнобойщика + интерфейс CEF для сервера RAGE:MP

[Harland David Sanders]

CОЗДАЁМ РАБОТУ ДАЛЬНОБОЙЩИКА НА СЕРВЕРЕ RAGE MULTIPLAYER С ИСПОЛЬЗОВАНИЕМ ВЕБ-ИНТЕРФЕЙСОВ (CEF):

Возможно некоторые функции, можно было бы объединить в одну, не спорю, но я сделал таким образом, чтобы новенькому было понятно, что за что отвечает и не пихать кучу свойств в одну. Спасибо.

Видео-урок можно найти по ссылке ниже:

#2 СОЗДАНИЕ СЕРВЕРА НА RAGE:MP(JS)

Этот урок является практическим занятием к первому. Создадим работу дальнобойщика используя веб-интерфейс (CEF).

ragemp.pro

ПОДГОТОВКА К РАЗРАБОТКЕ

1) Клиентская должна содержать папку trucker, в ней папка cef, а так же файл index.js (внутри основной папки).

2) Я использую мод freeroam, и изменил координаты места спавна на те, которые находятся вблизи работы.
(путь: packages/freeroam/configs/spawn_points.json)

{
"SpawnPoints": [
    { "x": -244, "y": 2187, "z": 130 }
]
}

3) Теперь добавим файлы в CEF-часть. По сути это была логин-панель, которую я переделал под окошко для работы
Хочется отметить, что на кнопку для начала я повесил событие onclick, которое вызывает в скрипте на клиентскую часть ивент.
Сделано для взаимодействия с кнопкой.

index.html: https://sourceb.in/FdtWHxqwq4
style.css: https://sourceb.in/PEWWbfNDGJ
script.js: https://sourceb.in/stnCnaOb7o

4) Для того, чтобы определить ваши координаты, можете на серверной стороне создать такую команду (взято у Rage Script):

mp.events.addCommand('sp', (player) => {
    const {position} = player.vehicle
    console.log(`{ x: ${position.x}, y: ${position.y}, z: ${position.z}, heading: ${player.vehicle.rotation.z}}`)
})

СКРИПТ НА СЕРВЕРНОЙ СТОРОНЕ

1) В packages создаем папку trucker и добавляем JS файл - index.js
2) Наша первая задача это указать координаты для маркера начала работы. Эти координаты мы будем использовать для colshape'ов и блипов так же.

const markerPos = { x: -263.631591796875, y: 2195.6708984375, z: 128.47988891601562}

3) Создаём встроенный ивент "playerReady". То есть когда игрок зайдет в игру и прогрузится, то тогда мы вызываем на клиентскую сторону пользовательский ивент "playerInitLogistWork" , а в качестве аргументов передаём наш markerPos.

mp.events.add('playerReady', (player) => {
    player.call('playerInitLogistWork', [markerPos]);
})

СКРИПТ НА СТОРОНЕ КЛИЕНТА

1) Для начала хочу отметить, что для удобства я разбил клиентскую сторону на 3 части. Первая - переменные, вторая - функции (в моём случае это строчные функции), третья - события. Сделано это для удобства и красоты кода, чтобы если через 2 месяца обратиться к этому коду, не было раздумий, а что за что отвечает.
2) Значит давайте рассмотрим первую часть. В коде я комментариями подметил, какая переменная, за что отвечает.

let colshape; // Невидимый объект для маркера начала работы.
let colshapeMarker; // Маркер начала работы.
let trackMarker; // Маркер конечного маршрута.
let trackColshape; // Невидимый объект конечного маршрута.
let showWork; // Используется для взаимодействия с CEF-частью.
let playerLocal = mp.players.local // Переменная с локальными данными игрока (для клиентской стороны)
let workStatus = 0; // Состояние работы: 0 - не работает; 1 - работает.
let muleSpawn = { x: -267.8572692871094, y: 2193.226806640625, z: 130.0386199951172, heading: -118.64833068847656} //Координаты спавна машины для работы.
let trackSpawn = { x: -230.88673400878906, y: 2081.921142578125, z: 138.77877807617188 } //Координаты спавна для маркера разгрузки.
let redColor = [255,0,0,100] //Для удобства вынес красный цвет в переменную, ибо часто используется.

3) Создав основные переменные, мы можем приступать к созданию функций, выполняющих в дальнейшем свою работу в ивентах. Очень много времени потребуется, для описания каждого действия в функции, поэтому ниже я проведу краткий экскурс по каждой, а уже подробную информацию можно найти в видео.

playerInitWork - создает маркер, колшэйп, блип при входе пользователя в игру.
beginWork - отвечает за нажатие на кнопку начала работы.
workNotify - используется как уведомление.
spawnVehiclesForWork - спавн рабочего автомобиля.
startColshape - вывод интерфейса.
setCheckPoint - установка чекпоинта в случае начала работы.
vehicleCheck - проверка на наличие игрока в машине(для того чтобы он не смог добежать пешком)
clearTrack - удаляет маркер, колшэйп и блип.
startTrackShape - окончание работы.

const playerInitWork = (marker) => {
    colshapeSphere = mp.colshapes.newSphere(marker.x, marker.y, marker.z + 1, 2)
    colshapeMarker = mp.markers.new(1, [marker.x + 1, marker.y, marker.z + 1], 1, {
        color: redColor
    });
    mp.peds.new(
        mp.game.joaat('cs_dreyfuss'),
        [marker.x, marker.y, marker.z + 2, 1],
        260.0,
        playerLocal.dimension
    );
}
const beginWork = () => {
    showWork.execute("mp.invoke('focus', false)")
    showWork.active = false
    mp.game.graphics.stopScreenEffect("ChopVision")
    mp.gui.chat.activate(true)
}
const workNotify = (msgText) => {
    mp.game.ui.setNotificationTextEntry('STRING');
    mp.game.ui.setNotificationMessage('CHAR_RON', 'CHAR_RON', false, 2, 'Новое сообщение', msgText);
};
const spawnVehiclesForWork = (carName, carSpawn) => {
    mp.vehicles.new(mp.game.joaat(carName), carSpawn, {
        heading: carSpawn.heading
    })
}
const startColshape = () => {
    showWork = mp.browsers.new('package://trucker/cef/index.html')
    showWork.execute("mp.invoke('focus', true)")
    mp.gui.chat.activate(false)
    mp.game.graphics.startScreenEffect("ChopVision", 0, true)
}

const setCheckPoint = () => {
    trackColshape = mp.colshapes.newSphere(trackSpawn.x, trackSpawn.y, trackSpawn.z, 3)
    trackMarker = mp.markers.new(1, [trackSpawn.x, trackSpawn.y, trackSpawn.z - 2], 3, {
        color: redColor,
        visible: true
    });
    trackBlip = mp.blips.new(431, [trackSpawn.x, trackSpawn.y, trackSpawn.z], {
        shortRange: false
    });
    trackBlip.setRoute(true);
}
const vehicleCheck = () => {
    if (!playerLocal.vehicle) {
        workNotify('Вы не можете доставить груз на ногах!')
        return false;
    }
    return true;
}
const clearTrack = () => {
    trackColshape.destroy();
    trackMarker.destroy();
    trackBlip.destroy()
}
const startTrackShape = () => {
    if (!vehicleCheck()) return mp.gui.chat.push("Вы должны быть в транспорте.")
    clearTrack()
    workStatus = 0
}

4) В завершении события. Опять же подробную информацию о каждой строчке вы найдете в видео. Я же кратко пробегусь по каждому из них.

playerInitLogistWork - событие, отвечающие за установку маркеров и т д.
playerEnterColshape - событие, проверяет встал ли игрок на колшэйп.
beginWork - событие, сверяющие не начал ли игрок работу.
playerEnterVehicle - событие, отвечающие за то, что если игрок в машине, то ему устанавливается рабочий маршрут.

mp.events.add('playerInitLogistWork', (markerPos) => {
    playerInitWork(markerPos)
})
/////////////////////////////////////////////////////////////
mp.events.add('playerEnterColshape', (colshape) => {
    if (colshape == colshapeSphere) {
        startColshape()
    }
    if (colshape == trackColshape) {
        startTrackShape()
        workNotify('Ты доставил груз. Возвращайся!')
    }
})
//////////////////////////////////////////////////////////////
mp.events.add('beginWork', () => {
    if (workStatus == 1) {
        beginWork()
        workNotify('Вы уже начали работу!')
    } else {
        beginWork()
        spawnVehiclesForWork('mule3', muleSpawn)
        workNotify('Начинайте развозить товары!')
        workStatus = 1
    }
})
//////////////////////////////////////////////////////////////
mp.events.add('playerEnterVehicle', () => {
    if (workStatus = 1) {
        setCheckPoint()
    }
})

СКАЧАТЬ РАБОТУ ДАЛЬНОБОЙЩИКА С CEF (АРХИВ):
P.S Если вы нажали на кнопку нажатия работы и у вас далее ничего не произошло - релогнитесь.

https://drive.google.com/file/d/15pazakGaemZW7L3m-po-Cub-aCCGAzhH/view?usp=sharing

Очень интересно, что вы думаете по этому уроку. Код скорее всего можно и укоротить, чтобы он был меньше, но я старался все максимально подробно описать, чтобы новеньким было понятно. Надеюсь получилось, спасибо

Автор: shevdev

 

[PATRIOT]

Опа. Что то новое

 

[Алдар-Косе]

чел ты...
Там скрин от папки с трафиком

 

[Alternant]

Зачем создавать colshapes на стороне каждого клиента, если можно создать его на сервере? Этого немного недопонимаю

 

[Wair]

Зачем создавать colshapes на стороне каждого клиента, если можно создать его на сервере? Этого немного недопонимаю

рабочая тема в системах, где колшейп должен быть виден игроку лично и выборочно ( как с системой домов и гаражей, например ), но в этой ситуации ( я толком код не изучал ) выглядит не как самый худший вариант

 

[X-Clusiv]

Зачем создавать colshapes на стороне каждого клиента, если можно создать его на сервере? Этого немного недопонимаю

Представь, играет 100 человек, и все колшейпы которые им нужны создаются на сервере. Все данные о этих колшейпах будут транслироваться для всех игроков, зачем? А если подобных работ не одна а больше. Не сложно представить насколько будет все работать через одно место в случае большого онлайна.

 

[Alternant]

Представь, играет 100 человек, и все колшейпы которые им нужны создаются на сервере. Все данные о этих колшейпах будут транслироваться для всех игроков, зачем? А если подобных работ не одна а больше. Не сложно представить насколько будет все работать через одно место в случае большого онлайна.

Да, я уже разобрался. Вопрос был задан относительно маркера о взятии работы, просто плохо сформулирован.