• Из-за обновления 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) последний раз были обновлены:

Мануал Создаем Drag And Drop инвентарь за 5 минут.

Prostak

scammer
Автор темы
Мошенник
10 Окт 2020
131
51
57
Всем доброго времени суток! Решил поделиться с вами своим опытом и предложить вам, сделать свой D&D инвентарь. Мануал предназначен для тех, кто хоть чуть-чуть освоил знания в HTML/CSS/JS.
(Перед началом создайте 3 файла. index.html, style.css, script.js)

1. Начнем
Для начала нам нужно будет установить несколько дополнительных библиотек. JQuery и JQuery UI.
JQuery мы можем установить несколькими способами. Установив файл в нашу верстку (HTML) или же через CDN Google.

Чтобы установить JQuery через CDN вы можете воспользоваться данной строчкой (вставьте ее в Head вашего HTML проекта):
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Для установки файла вы можете воспользоваться прямой ссылкой на закачку данного файла через Google Disk:
Далее вам потребуется переместить этот файл в корень с вашим HTML проектом и прописать путь до него в head вашего проекта.

Для установки JQuery UI воспользуйтесь данной ссылкой:
Далее вам потребуется переместить эти файлы в корень с вашим HTML проектом и прописать путь до него в head вашего проекта.


2. Создание слотов
Следующим шагом нам нужно будет заполнить наш HTML файл слотами.
Используем данный код и вставляем его в наше тело (body):

HTML:
<div id="inventory">
        <div class="list-slots">
            <div class="slots">        <!--Используем данный элемент для установки отступов-->
                
            </div>
        </div>
    </div>
Следующим шагом будет парсинг слотов через JS. Открываем script.js, и первым делом прописываем цикл.
JavaScript:
for (let i = 0; i < 36; i++) {
    $('.slots').append(`
        <div class="slot"></div>
    `)
}
Он отвечает за количество слотов в нашем инвентаре. Для смены кол-ва слотов меняем значение 36 - на нужное вам

3. Установим стили
Для установки стилей, открываем файл style.css и вставляем данный код в наш файл:
CSS:
* {
    padding: 0vw;
    margin: 0vw;
    cursor: default;
    /*ЗАПРЕЩАЕМ ВЫДЕЛЯТЬ ТЕКСТ*/
     -ms-user-select: none;

            /**
             * Для мозилы
             */
            -moz-user-select: none;

            /**
             * Для конкверора
             */
            -khtml-user-select: none;

            /**
             * Для Сафари и Хрома
             */
            -webkit-user-select: none;
}

body {
    display: flex;
    justify-content: space-between;
    background: url(http://img.playground.ru/images/5/1/GTA5_2015-05-07_00-53-36-07.png); /*УСТАНОВИМ КАРТИНКУ ДЛЯ НАШЕГО ПРОЕКТА*/
}

#inventory {
    width: 100vw;
    height: 56.25vw;
    background: rgba(0,0,0,.5); /*УСТАНОВИМ ЗАТЕМНЕНИЕ ДЛЯ НАШЕГО ПРОЕКТА*/
}

.list-slots {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*ЗАДАЕМ НАШИМ СЛОТАМ ПОЗИЦИЮ ПО СЕРЕДИНЕ ЭКРАНА*/

    background: rgba(0,0,0,.7);
    width: 41.667vw;
    height: 41.667vw;
    max-width: 80%;
}

.slots {
    max-width: 87%;
    margin: auto;
    padding-top: 3.125vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.slot {
    width: 5.208vw;
    height: 5.208vw;
    background: rgba(255,255,255,.5);
    margin-bottom: 0.781vw;
}
Мы запретили выделение текста и остальных элементов, задали размеры нашим элементам в 'VW', что позволяет нам использовать размеры элементов исходя из ширины экрана (резиновая верстка).
Поставили для нашего проекта фон и сделали затемнение данного фона темно-серым. (Для удаления фона удалите строчку под номером 27 CSS файла).

4. Предметы для инвентаря
Добавим парочку предметов в наши слоты, для проверки нашего D&D в будущем. Первым делом нам нужны иконки которые мы будем использовать. Желательно чтобы иконки были по размеру с нашим слотом инвентаря. К примеру, наш слот на данный момент размером 100x100 пикселей. Используем иконку/картинку предмета такого же размера, но располагаем предмет по середине (берем картинку 50x50 и обвертываем его в невидимый блок 100x100 подробнее в спойлере нижу). После получения изображений, мы создаем папку в корне нашего проекта и называем как вам удобнее, я по стандарту назову "img", в ней создам подкатегорию (еще одну папку) items и загружу все предметы туда.
Берем любое изображение предмета и выгружаем его в Figma со стандартным разрешением:
1625166779239.png

Следующим шагом будет уменьшение этого изображения до 100 пикселей в ширину или высоты, смотрите на то чтобы при уменьшении ширины, высота была меньше или равна 100 пикселям
1625166877536.png

Мы создали предмет 100 на 12 пикселей. Но он будет слишком мал для нашего слота. Для этого мы создаем квадрат 100x100 пикселей и делаем его прозрачным. Располагаем предмет по середине, потом связываем картинку с квадратом и получается что-то вроде этого:
1625167041748.png

Экспортируем изображение в ранее созданную нами папку. Для удобства используйте название изображения как ID предмета. (0 - x).png.
Теперь мы можем расположить наши элементы в нашем инвентаре.
Создадим массив объектов, в котором пропишем следующее:
JavaScript:
let items =
{
    playerItems:
    [
        {
            img: './img/items/1.png',
            name: 'bat',
            id: 1
        },
        {
            img: './img/items/2.png',
            name: 'axe',
            id: 2
        },
        {
            img: './img/items/2.png',
            name: 'axe',
            id: 2
        },
    ],
}
Таким образом мы задали значения инвентаря игрока. Здесь говориться о том что игрок содержит в инвентаре 3 предмета. 1 биту и два топора. Далее это нужно будет превратить в JSON для получения значений с сервера, но об этом не в этой статье.
Теперь когда у нас есть список предметов мы можем закинуть их в наши слоты, что мы сейчас и сделаем. Запустим еще один цикл который по порядку в слот положит наши предметы.
JavaScript:
for (let i = 0; i < items.weaponsItem.length; i++) {
        $('.slot:nth-child('+ (i + 1) +')').append(`
            <div class="item" id="`+ items.playerItems[i].id +`" style="background: url(`+ items.playerItems[i].img +`); width: 100px; height: 100px; background-repeat: no-repeat; padding-top: 60px;"><div class="size">1</div>
        `)
    }
Здесь мы сказали о том что у нас должны появиться предметы в инвентаре по порядку. Сейчас мы уже можем их увидеть.


5. Подключаем JQuery UI и D&D
В нашем JS файле первым делом мы прописываем вот это:
JavaScript:
let i = 1;
var item_isStackable = "";
Мы объявляем переменную i, которая в будущем поможет нам считать кол-во одинаковых предметов в одном слоте. И к этому-же объявляем переменную которая поможет искать нам предметы.
После этого мы создаем Draggable функцию, которая поможет нам перетаскивать предметы.
JavaScript:
$( ".slot .item").draggable({ // ВЫБИРАЕМ ЭЛЕМЕНТЫ КОТОРЫЕ БУДЕМ ПЕРЕМЕЩАТЬ
        scroll: false, // ЗАПРЕЩАЕМ ПОЯВЛЕНИЮ SCROLL ВО ВРЕМЯ ПЕРЕМЕЩЕНИЯ
        helper: "clone", // ПРИ ПЕРЕМЕЩЕНИИ СОЗДАЕТ КЛОНА
        cursor: "pointer", // КУРСОР В СТИЛЕ POINTER
        zIndex: 27, // ОТОБРАЖЕНИЕ ПЕРЕТАСКИВАЕМОГО ЭЛЕМЕНТА СВЕРХУ
        drag: function(event, ui)
        {
            item_isStackable = $(this).hasClass("stackable");
        },
    });
Теперь создадим функцию для принятия данных элементов:
JavaScript:
$( ".slot" ).droppable({ // Элемент который будет принимать для себя предметы
        accept: ".item", // Принимаемые элементы
        drop: function( event, ui ) {  // Функция выполнится при дропе предмета
            var item = $(this).find(".item");
            if(item.length == 0) /// Просмотр, есть ли уже какие-либо предметы в выбранном в данный момент слоте инвентаря  //
            {
                ui.draggable.detach().appendTo($(this)); // если нет, вставьте предмет в свободный слот ///
            }
            else if (ui.draggable.attr('id') == $(this).children().attr('id')) { // если id предметов совпадают
                    i++;
                    console.log('gf')
                    ui.draggable.detach();  /// Если предметы совпадают, уничтожьте клона и добавьте + 1 к количеству //
                    $(this).children().children().html(i)
                    return i;
            }
            else if(item_isStackable == true && item.children("item")){
                    ui.draggable.detach(); /// Если да, просто уничтожьте клона //
                    ui.draggable.animate(ui.draggable.data().origPosition,"slow"); 
            }else{
                console.log(ui.draggable.attr('id'))
                // в случае , если это не одинаковые предметы, верните элемент в предыдущее положение //
                ui.draggable.animate(ui.draggable.data().origPosition,"slow"); 
                let idSlot = $(this).attr('id')
            }
        }
    });
На этом все, пробуйте, пишите о ошибках и скажите что нужно добавить и что я мог упустить. Не судите строго, в первый раз пишу мануал. Надеюсь на вашу отдачу и дальнейшую поддержку в написании мануалов. Если кому-то нужна будет помощь, буду рад всем в ЛС дискорд: Простак#7939
 

Лорд

Начинающий специалист
6 Окт 2020
49
6
72
30
Зачем указывать тип курсору, если rage не поддерживает данную функцию? :rolleyes:
 

Amazingevich

Гуру
27 Апр 2021
654
482
124
А где здесь что-то говорится про Rage?🤨
Нигде, кроме того, что ты это постишь на тематическом форуме и в разделе, которое имеет название "Программирование в RAGE:MP". :j33r:
 

Prostak

scammer
Автор темы
Мошенник
10 Окт 2020
131
51
57
  • Like
Реакции: skyElmax

skyElmax

Специалист
high coder
15 Сен 2020
151
96
85
  • Like
Реакции: Prostak

UchihaMadara

Гуру
high coder
27 Окт 2020
512
225
101
RAGE не поддерживает HTML 5 Drag&Drop.
Draggable и Droppable не будет работать в игре
 
  • Like
Реакции: skyElmax

Prostak

scammer
Автор темы
Мошенник
10 Окт 2020
131
51
57
RAGE не поддерживает HTML 5 Drag&Drop.
Draggable и Droppable не будет работать в игре
Используется JQuery UI D&D, там же написано. При установке все работало нормально. Делал его для одного проекта.
 
  • Like
Реакции: skyElmax

skyElmax

Специалист
high coder
15 Сен 2020
151
96
85
Используется JQuery UI D&D, там же написано. При установке все работало нормально. Делал его для одного проекта.
@UchihaMadara сообщает о том что именно если использовать HTML D&D то в CEF RAGE:MP он не будет работать. Любой другой на JS будет
 

Prostak

scammer
Автор темы
Мошенник
10 Окт 2020
131
51
57
@UchihaMadara сообщает о том что именно если использовать HTML D&D то в CEF RAGE:MP он не будет работать. Любой другой на JS будет
Я понимаю. Но в данный момент он не сообщил, а указал на ошибку.
RAGE не поддерживает HTML 5 Drag&Drop. точка
новый абзац
Draggable и Droppable не будет работать в игре
Имея ввиду то, что данный используемый Draggable и Droppable не будет работать в игре, но как я и сказал ранее, проблем с использованием JQuery UI D&D не возникло , а именно
Код:
$(element).draggable / $(element).droppable