royzen228

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

В теме 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
 

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


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

Норм

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

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

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


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

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

 

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


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

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

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


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

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


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

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

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

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


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

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

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

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

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


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

Войти

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


Войти

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

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

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

    • gooding
      От gooding


      Скачать файл PAR RP | Доработанный мод Cruela RP | Без багов
      Всем здравствуйте, уважаемые читатели. Я много времени потратил на доработку данного игрового мода, чтобы его выставить на форум.
      Лог доработок можно посмотреть внизу, а скриншоты игрового мода внизу и верху.
      Основа данного мода: Cruela RP
       
       

      Добавил gooding Добавлено 20.11.2024 Категория Моды Автор GOODING (Я)  
    • gooding
      От gooding
      Всем здравствуйте, уважаемые читатели. Я много времени потратил на доработку данного игрового мода, чтобы его выставить на форум.
      Лог доработок можно посмотреть внизу, а скриншоты игрового мода внизу и верху.
      Основа данного мода: Cruela RP
       
       

    • Max Luilchack
      От Max Luilchack
      Нужен человек который сможет сделать примерную карту Украины для сервера crmp mobile. Если есть желающие пишите в дс: lamarlml
    • Yashich
      От Yashich
      Возникла проблема, не работает команда /giverank Что здесь может работать не так? Заранее спасибо за ответ)
      Вот строки кода связанные с этой командой (мод Аризона)
       
      CMD:giverank(playerid, params[]) {     if(PI[playerid][pMember]<=0)return 0;     if(PI[playerid][pRank] < 9 && PI[playerid][pLeader] == 0) return SCM(playerid, COLOR_RED, !"Отказано в доступе!");     if(sscanf(params,"ud",params[0],params[1])) return SCM(playerid, COLOR_RED, !"Используйте: /giverank [id] [rank]");     if(!ProxDetectorS(8.0, playerid, params[0])) return SCM(playerid, COLOR_GREY, !"Вы должны находиться рядом с игроком!");     if(PI[params[0]][pLeader] > 0 ) return SCM(playerid, COLOR_RED, !"Вы не можете изменять ранг лидеру");     if(params[1] < 1) return SCM(playerid, COLOR_GREY, !"Нельзя повысить до этого ранга");     if(Clother[params[0]]!=-1)return 0;     if(GetPlayerVirtualWorld(playerid)!=GetPlayerVirtualWorld(params[0]))return 0;     if(!IsPlayerConnected(params[0])) return SCM(playerid, COLOR_GREY, !"Игрок не найден");     if(PI[playerid][pRank] <= PI[params[0]][pRank]) return SCM(playerid, COLOR_GREY, !"Вы не можете повысить/понизить этого игрока");     if(PI[playerid][pRank] == 9 && params[1] > 8) return SCM(playerid, COLOR_RED, !"Нельзя выдать ранг больше 8");     if(params[1] > 9) return SCM(playerid, COLOR_GREY, !"Нельзя повысить до этого ранга");     if(PI[params[0]][pMember] != PI[playerid][pMember]) return SCM(playerid, COLOR_GREY, !"Игрок находиться в другой организации!");     str_1[0] = EOS;     f(str_1,100,"Лидер %s %s до %i ранга",PN(playerid),PI[params[0]][pRank] > params[1] ? ("понизил"):("повысил"),params[1]);     SCM(params[0],COLOR_LIGHTBLUE,str_1);     f(str_1,100,"Вы %sи игрока %s до %i ранга",PI[params[0]][pRank] > params[1] ? ("понизил"):("повысил"),PN(params[0]),params[1]);     SCM(playerid,COLOR_LIGHTBLUE,str_1);     PI[params[0]][pRank] = params[1];     UpdatePlayerDataInt(params[0], "Rank", params[1]);     if(PI[params[0]][pSex] == 2) if(TeamDuty{params[0]}) SetPlayerSkinEx(params[0],GOrgSkins[GetTeamID(params[0])][params[1]]), TogglePlayerControllable(params[0],true);     else if(TeamDuty{params[0]}) SetPlayerSkinEx(params[0],MOrgSkins[GetTeamID(params[0])][params[1]]), TogglePlayerControllable(params[0],true);     return 1; }