royzen228

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

6 posts in this topic

Всем привет
Я решил показать как можно сделать 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
 

Share this post


Link to post
Share on other sites

Норм

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

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by MurBoy

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • Kutuzov
      By Kutuzov
      Всем привет, хотелось бы спросить у тех, кто разбирается в PluginSDK.
      Какие есть источники, руководства, документации о PluginSDK?
      Я пока что ничего нормального не нахожу.
      Заранее спасибо 
    • Danila_Fazz
      By Danila_Fazz
      Добрый день вписал систему 3д номеров все запустилось, но когда создаю номера пишет что они записаны в бд но они не записываются в бд  когда еще раз отпровляю команду пишет опять что все записано, но не чо не записываеться когда компелирую мод показывает только варнинги 202 на разные строки
       
      C:\Users\Danila_Fazz\Desktop\Сервак\gamemodes\srp061.pwn(23135) : warning 202: number of arguments does not match definition
      C:\Users\Danila_Fazz\Desktop\Сервак\gamemodes\srp061.pwn(23162) : warning 202: number of arguments does not match definition
      C:\Users\Danila_Fazz\Desktop\Сервак\gamemodes\srp061.pwn(23199) : warning 202: number of arguments does not match definition
      C:\Users\Danila_Fazz\Desktop\Сервак\gamemodes\srp061.pwn(23288) : warning 202: number of arguments does not match definition
      C:\Users\Danila_Fazz\Desktop\Сервак\gamemodes\srp061.pwn(23335) : warning 202: number of arguments does not match definition
      C:\Users\Danila_Fazz\Desktop\Сервак\gamemodes\srp061.pwn(23388) : warning 202: number of arguments does not match definition
      C:\Users\Danila_Fazz\Desktop\Сервак\gamemodes\srp061.pwn(23397) : warning 202: number of arguments does not match definition
      Pawn compiler 3.10.20150531              Copyright (c) 1997-2006, ITB CompuPhase
      Header size:          18160 bytes
      Code size:          8734120 bytes
      Data size:          3641416 bytes
      Stack/heap size:      16384 bytes; estimated max. usage=6660 cells (26640 bytes)
      Total requirements:12410080 bytes
      7 Warnings.
      на каждой этой страке находиться   if(IsPlayerAdmin(playerid, 7)) return 1;