Форум Pawn.Wiki - Воплоти мечту в реальность!: Новый HUD для игры - Форум Pawn.Wiki - Воплоти мечту в реальность!

Перейти к содержимому

  • (7 Страниц) +
  • 1
  • 2
  • 3
  • Последняя »
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

Новый HUD для игры HUD. Оценка: ***** 1 Голосов

#1
Пользователь офлайн   SRIPTER MODOV 
Отправлено 15 сентября 2021 - 19:14

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

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 и примера: Google, MEGA

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

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

Автор: Я

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

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

Сообщение отредактировал Romzes: 05 марта 2023 - 07:27

17

#2
Пользователь офлайн   NiceXPlayer 
Отправлено 15 сентября 2021 - 19:58

  • Пользователь
  • Вставить ник
  • Раскрыть информацию
Все работает, но мог бы продать :) Никто спасибо даже не скажет.

Сообщение отредактировал NiceXPlayer: 15 сентября 2021 - 19:58

0

#3
Пользователь офлайн   d1sconnect 
Отправлено 15 сентября 2021 - 20:05

  • Местный
  • Вставить ник
  • Раскрыть информацию
Всё красиво всё чётко персик!
Один минус шо на слабых пк(2 ядра 4 гига gt210) крашит.
На норм пк всё крутится будет.
+сик дал)
Пасибо за такой чудесный плагин

Сообщение отредактировал d1sconnect: 15 сентября 2021 - 20:06

0

#4
Пользователь офлайн   mama123123 
Отправлено 16 сентября 2021 - 07:21

  • Новичок
  • Вставить ник
  • Раскрыть информацию

Просмотр сообщенияSRIPTER MODOV (15 сентября 2021 - 19:14) писал:

Нажмите сюда, чтобы прочитать это сообщение. [Показать]

А как сделать, чтобы браузер считывал нажатые клавиши, я знаю что в cef есть cef_always_listen функция, но пока не со всем понимаю как она работает
0

#5
Пользователь офлайн   Aza_Kaifylin 
Отправлено 16 сентября 2021 - 07:58

  • Прохожий
  • Вставить ник
  • Раскрыть информацию
ТОП ВСЕ ХОРОШО РАБОТАЕТ СПАСИБО ДАВНО CEF ХОТЕЛ)
0

#6
Пользователь офлайн   SRIPTER MODOV 
Отправлено 16 сентября 2021 - 09:27

  • Пользователь
  • Вставить ник
  • Раскрыть информацию

Просмотр сообщенияmama123123 (16 сентября 2021 - 07:21) писал:

А как сделать, чтобы браузер считывал нажатые клавиши, я знаю что в cef есть cef_always_listen функция, но пока не со всем понимаю как она работает


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

#7
Пользователь офлайн   mama123123 
Отправлено 16 сентября 2021 - 10:04

  • Новичок
  • Вставить ник
  • Раскрыть информацию

Просмотр сообщенияSRIPTER MODOV (16 сентября 2021 - 09:27) писал:

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

Хорошо
0

#8
Пользователь офлайн   Romzes 
Отправлено 17 сентября 2021 - 08:55

  • ( ^_^ )
  • Вставить ник
  • Раскрыть информацию
Жаль что стандартный HUD скрыть нет возможности, нужно писать дополнительный клиент<<>>сервер плагин для этого.
0

#9
Пользователь офлайн   mama123123 
Отправлено 17 сентября 2021 - 10:38

  • Новичок
  • Вставить ник
  • Раскрыть информацию

Просмотр сообщенияRomzes (17 сентября 2021 - 08:55) писал:

Жаль что стандартный HUD скрыть нет возможности, нужно писать дополнительный клиент<<>>сервер плагин для этого.

Можно, просто в свой js впиши это cef.emit("game:hud:setComponentVisible", "interface", false); и стандартный интерфейс скроется
0

#10
Пользователь офлайн   Romzes 
Отправлено 17 сентября 2021 - 10:44

  • ( ^_^ )
  • Вставить ник
  • Раскрыть информацию

Просмотр сообщенияmama123123 (17 сентября 2021 - 10:38) писал:

Можно, просто в свой js впиши это cef.emit("game:hud:setComponentVisible", "interface", false); и стандартный интерфейс скроется


интересная возможность, не знал о том что CEF плагин это умеет.
2

Поделиться темой:


  • (7 Страниц) +
  • 1
  • 2
  • 3
  • Последняя »
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

1 человек читают эту тему
0 пользователей, 1 гостей, 0 скрытых пользователей


Яндекс.Метрика