royzen228

[CEF] HUD для вашего проекта

Опубликовал royzen228 ,

В теме 6 сообщений

Опубликовано · Жалоба

Всем привет
Я решил показать как можно сделать HUD на CEF для вашего SAMP сервера.

В данном уроке нам нужно:

1.Плагин sscanf 2.8.3
2.Плагин Pawn.CMD
3.Плагин CEF
4.Web хостинг для файлов
5.Умение заливать файлы на хостинг

1.Для начала арендуем хостинг ( Рекомендую beget.com )

Создадим в нашем проекте файлы style.css, index.html, cef-interface.js , затем зальем их на хостинг.
Далее будет заполнять наши файлы кодом.

1.style.css

Спойлер 

container
{
    width: 10%;
}
.bg_interface {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 20px;
    background-color: rgb(64, 64, 64);
    position: absolute;
    left: 472px;
    top: 770px;
    width: 403px;
    height: 119px;
    z-index: 1;
}
  .nick_text {
    font-size: 18px;
    font-family: "TT Norms";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 0.1;
    text-align: center;
    position: absolute;
    left: 490px;
    top: 807px;
    width: 187px;
    height: 23px;
    z-index: 3;
  }
  
  .nick_img {
    background-image: url("nick_img.png");
    position: absolute;
    left: 495px;
    top: 795px;
    width: 21px;
    height: 21px;
    z-index: 2;
  }
  .money_text {
    font-size: 18px;
    font-family: "TT Norms";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 0.944;
    text-align: center;
    position: absolute;
    left: 500px;
    top: 824px;
    width: 88px;
    height: 29px;
    z-index: 4;

  }
 
  progress.styled {
    display: block;
    border-radius: 8px;
    width: 340px;
    height: 11px;
    z-index: 6;
    position: absolute;
    left: 497px;
    top: 849px;
  }

  progress.styled::-webkit-progress-bar {
      background-color: rgb(82, 82, 82);
      border-radius: 8px;
  }
  progress.styled::-webkit-progress-value {
      background-color: rgb(204, 62, 62);
      background-image: linear-gradient(rgb(204, 62, 62)), rgb(204, 62, 62));
      border-radius: 8px;
  }
  progress.styled::-moz-progress-bar {
      background-color: rgb(204, 62, 62);
      background-image: linear-gradient(rgb(204, 62, 62), rgb(204, 62, 62));
      border-radius: 8px;
  }

  progress.styled1 {
    display: block;
    border-radius: 8px;
    width: 340px;
    height: 11px;
    z-index: 6;
    position: absolute;
    left: 497px;
    top: 867px;
  }

  progress.styled1::-webkit-progress-bar {
      background-color: rgb(82, 82, 82);
      border-radius: 8px;
  }
  progress.styled1::-webkit-progress-value {
      background-color: rgb(53, 101, 233);
      background-image: linear-gradient(rgb(53, 101, 233)), rgb(53, 101, 233));
      border-radius: 8px;
  }
  progress.styled1::-moz-progress-bar {
      background-color: rgb(53, 101, 233);
      background-image: linear-gradient(rgb(53, 101, 233), rgb(53, 101, 233));
      border-radius: 8px;
  }

  .text_notification {
    font-size: 17px;
    font-family: "TT Norms";
    color: rgb(0, 144, 255);
    font-weight: bold;
    line-height: 0.944;
    text-align: center;
    position: absolute;
    left: 1230.39px;
    top: 330.573px;
    width: 340px;
    height: 17px;
    z-index: 3;
  }
  .bg_notification {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 20px;
    background-color: rgb(64, 64, 64);
    position: absolute;
    left: 1209px;
    top: 310px;
    width: 392px;
    height: 104px;
    z-index: 1;
  }
  .text_slide_notification {
    font-size: 17px;
    font-family: "TT Norms";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 0.944;
    text-align: center;
    position: absolute;
    left: 1230.39px;
    top: 360.933px;
    width: 307px;
    height: 18px;
    z-index: 4;
  }
  .bg_key {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 5px;
    background-image: -moz-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(215,215,215) 0%, rgb(255,255,255) 100%);
    position: absolute;
    left: 1549px;
    top: 357px;
    width: 26px;
    height: 27px;
    z-index: 2;
  }
  .key_text {
    font-size: 20px;
    font-family: "TT Norms";
    color: rgb(0, 144, 255);
    font-weight: bold;
    line-height: 0.85;
    text-align: center;
    -moz-transform: matrix( 1.02493819658632,0,1.07034501209888e-14,1.02493819658632,0,0);
    -webkit-transform: matrix( 1.02493819658632,0,1.07034501209888e-14,1.02493819658632,0,0);
    -ms-transform: matrix( 1.02493819658632,0,1.07034501209888e-14,1.02493819658632,0,0);
    position: absolute;
    left: 1554.154px;
    top: 362.498px;
    width: 11.5px;
    height: 14px;
    z-index: 5;
  }
  progress.styled2 {
    display: block;
    border-radius: 8px;
    width: 340px;
    height: 8px;
    z-index: 6;
    position: absolute;
    left: 1235.39px;
    top: 395.933px;
  }

  progress.styled2::-webkit-progress-bar {
      background-color: rgb(82, 82, 82);
      border-radius: 8px;
  }
  progress.styled2::-webkit-progress-value {
      background-color: rgb(53, 101, 233);
      background-image: linear-gradient(rgb(53, 101, 233)), rgb(53, 101, 233));
      border-radius: 8px;
  }
  progress.styled2::-moz-progress-bar {
      background-color: rgb(53, 101, 233);
      background-image: linear-gradient(rgb(53, 101, 233), rgb(53, 101, 233));
      border-radius: 8px;
  }
  

 


  
  
 

Затем вставим код в html

2.index.html

Спойлер 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="style.css">
<title>interface</title>
</head>
    
<body>
    <div class="bg_interface"></div>
    <div class="nick_img"></div>
        <a id="nick" class="nick_text">Royzen_Ghost</a>
        <a id="money" class="money_text">1000000$</a>
        <progress id="progress" class="styled" max="100" value="0"></progress>
        <progress id="progress2" class="styled1" max="100" value="0"></progress>
</body>
    <script src="cef-interface.js?ver=1452324"></script>
</html>

 


 

3. Затем создадим наш  cef-interface.js

 

Спойлер 

//здесь можно получать ID элементов, но я забыл это и получаю классы)
let nicks = document.querySelector('.nick_text');
let moneys = document.querySelector('.money_text');
let progress = document.querySelector('.styled');
let armour = document.querySelector('.styled1');
cef.emit('pwd:try');

//interface off
cef.emit("game:hud:setComponentVisible", "interface", false);

cef.on('pwd:money', (response) => {

    moneys.innerHTML += response + "$"; //это можно использовать как первый вариант ( второй: moneys.innerHTML = "$" + money; )
});
cef.on('pwd:armour', (armours) => {
    armour.value = armours;   
});
cef.on('pwd:hp', (hp) => {

    progress.value = hp;
});
cef.on('pwd:nick', (response) => {
    nicks.innerHTML = response;

});


//новая функция ( -1 не работает )

cef.on('pwd:allitem', (money, nick, armours, hp) => {
    if(money != -1)
    {
        moneys.innerHTML += money + "$";
    }
    if(nick != "")
    {
        nicks.innerHTML = nick;
    }
    if(armours != -1)
    {
        armour.value = armours; 
    } 
    if(hp != -1)
    {
        progress.value = hp;
    }
    
});

 

 

2. После создания и заполнения наших файлов их нужно залить на хостинг.

3. Теперь мы перейдем с вами к Pawn коду.


 

Спойлер 

#include <cef>
#include <Pawn.CMD>
#include <sscanf2>

#define LOGIN_BROWSER_ID 0x12346

public OnGameModeInit()
{
    cef_subscribe("pwd:try", "CefInterface"); //подписываемся на событие js скрипта и передаем его в игру
    return 1;
}

public OnPlayerSpawn(playerid)
{
    cef_create_browser(playerid, LOGIN_BROWSER_ID, "ваш url на сайт", false, false); //создаем браузер
    return 1; 
}

//cef
forward OnCefInitialize(player_id, success);
forward OnCefBrowserCreated(player_id, browser_id, status_code);
forward CefInterface(player_id);

public OnCefInitialize(player_id, success) {
    if (success == 1) {
        return;
    }

}

public OnCefBrowserCreated(player_id, browser_id, status_code) {
    if (browser_id == LOGIN_BROWSER_ID) {
        if (status_code != 200) {
            return;
        }

    }
}
public CefInterface(player_id) //выставляем настройки и отправляем их до отрисовки
{
    new money = GetPlayerMoney(player_id), Float:armour, Float:hp, name[40];
    GetPlayerName(player_id, name, sizeof(name));
    GetPlayerHealth(player_id, hp);
    GetPlayerArmour(player_id, armour);
    cef_emit_event(player_id, "pwd:allitem", CEFINT(money), CEFSTR(name), CEFINT(armour), CEFINT(hp));
}
//тестовые команды для проверки
cmd:set_hp(player_id, arg[])
{
    new hp;
    if(sscanf(arg, "i", hp)) return SendClientMessage(player_id, -1, "/set_hp [hp int]");
    cef_emit_event(player_id, "pwd:hp", CEFINT(hp));
    SendClientMessage(player_id, -1, "Успех");
    return 1;
}
cmd:set_money(player_id, arg[])
{
    new money;
    if(sscanf(arg, "i", money)) return SendClientMessage(player_id, -1, "/set_money [money]");
    GivePlayerMoney(player_id, money);
    cef_emit_event(player_id, "pwd:money", CEFINT(money));
    SendClientMessage(player_id, -1, "Успех");
    return 1;
}

 

3.После всех этих действий , заходим в игру и радуемся худу.


Ссылка на загрузку CEF и примера: https://drive.google.com/file/d/12pna_VBT7Z56Jo9Bq93GTWrIwMV3STyx/view?usp=sharing

Как установить:

После загрузки архива откройте папку cef_client, затем перекиньте данные файлы в игру. ( также закиньте файл cef.asi в корень ) .
Папку cef_client переименуйте в cef.
В папке "Пример" находиться index.html, cef-interface.js там можно скопировать код.
В папке "pawn" там лежат плагины для работы cef. 

Автор: Я ( vk.com/weckek )
Помогал: Андрей Дрыгин
Разработчик плагина: https://github.com/ZOTTCE/

Кому не сложно дайте + )

UPD:
При добавлении чего-то нового cef не забывайте удалять папку cache в папке cef. Иначе новые функции у вас не будут показываться. 

 

Данная тема существует:

pawn-wiki ( не реклама )

pawno-rus
 

10

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Опубликовано · Жалоба

Норм

0

Заметка от Cawfee , создано

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

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Опубликовано · Жалоба

сделайте тутор на заливание файлов на хост

 

0

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Опубликовано · Жалоба

Можно файл cef.so для запуска на хостинге, а то в архиве тока dll

0

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Опубликовано · Жалоба

@Clinton_Jones https://github.com/ZOTTCE/samp-cef

0

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Опубликовано (изменено) · Жалоба

Мб тема жива еще, все круто, автору спасибо. Не понимаю одного: как подключить правильно деньги? Все работает кроме них, как бы если выдавать через кмд в игре они выдаются и меняются в худе но толку нету. Т.к. это не сохраняется и не отображается реальный баланс игрока на сервере. Также очень желательно понять как это реализовать тут: *тык*, ну думаю что разницы нету особой. Заранее спасибо!

Отредактировано пользователем MurBoy

0

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!


Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.


Войти
Перейти к списку тем Готовые решения

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

  • Похожий контент

    • Redmondd
      Как сделать команду, которая убирает метку?
      От Redmondd
      Хочу сделать команду /gpsoff, которая убирает метку
    • Доналдо Фарекелка
      Arizona RolePlay || Ser
      От Доналдо Фарекелка
      Приветствую, этот мод я нашёл на просторах интернета. 
      Скачал мод у автора:  Developer Stravinskiy
      Доработал мод: Donaldo_Farekelka
       
      Предупреждаю! Мод сырой, багов стало меньше, но они есть.
      Мод: Баня, Подвал, В некоторых местах маппинг, система коронавируса, 8 лвл админок
       
      Информация:
      1) Dc_Cmd
      2) Mysql, mode, language - Всё настраивается теперь в pawno ( UPDATE: 1.1.0 )
      3) Административные права в данный момент можно выдать только через MYSQL ( BD ).
       
      То что я сделал ( Всё что я делаю сейчас, смотрите в изменениях ):