Настройки в игре

EnDronist · 1 Дек 2016

Как сделать панель настроек игры во время загрузки игроков, во время пика и во время игры, с нуля? К примеру:

CryDeS · 1 Дек 2016

EnDronist написал(а):
Как сделать панель настроек игры во время загрузки игроков, во время пика и во время игры с нуля? К примеру:

На загрузочный экран ставишь кучу кнопочек и чего угодно, и посылаешь на сервак инфу о выбранных настройках.
https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Panorama#Custom_Loading_Screens

EnDronist · 1 Дек 2016

[quote author=CryDeS link=topic=1175.msg7042#msg7042 date=1480586368]
На загрузочный экран ставишь кучу кнопочек и чего угодно, и посылаешь на сервак инфу о выбранных настройках.
https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Panorama#Custom_Loading_Screens
[/quote]
Она ещё выезжала сбоку, а по нажатию кнопки снова заезжала влево

CryDeS · 1 Дек 2016

EnDronist написал(а):
Она ещё выезжала сбоку, а по нажатию кнопки снова заезжала влево

ставишь кнопку которая перемещает панель?
и на случай плагиата у других кастомок - gcfscape в помощь.

ZLOY · 1 Дек 2016

Не на загрузочном экране же
https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Custom_Game_Setup

CryDeS · 1 Дек 2016

[quote author=ZLOY link=topic=1175.msg7045#msg7045 date=1480588949]
Не на загрузочном экране же
https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Custom_Game_Setup
[/quote]
А да, мой косяк, но суть почти не меняется.

MahouShoujo · 1 Дек 2016

Я может не понял но Game Setup как раз на загрузочном экране. Точнее layout загрузочного экрана остается на фоне и поверх него кладется геймсетап.

EnDronist · 3 Дек 2016

[quote author=ZLOY link=topic=1175.msg7045#msg7045 date=1480588949]
Не на загрузочном экране же
https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Custom_Game_Setup
[/quote]
Тут только информация о событиях при нажатии кнопок, которые изначально уже есть. А насчёт кастомных настроек?

ZLOY · 3 Дек 2016

Добавляешь в Custom UI Manifest

Код:

<CustomUIElement type="GameSetup" layoutfile="file://{resources}/layout/custom_game/my_custom_game_setup.xml" />

И в соответствующем файле пилишь свой интерфейс.

EnDronist · 3 Дек 2016

[quote author=ZLOY link=topic=1175.msg7053#msg7053 date=1480757252]
Добавляешь в Custom UI Manifest

Код:

<CustomUIElement type="GameSetup" layoutfile="file://{resources}/layout/custom_game/my_custom_game_setup.xml" />

И в соответствующем файле пилишь свой интерфейс.
[/quote]
Я в панораме - полный ноль. Гайд, как сделать кнопку, мне в этом поможет или подобный стиль кнопок (CheckBox, ComboBox, SpinButton и т.д.) уже есть где-то в кэше?
(Кнопку сделал, а вот как изменить что-либо в игре по её нажатии - не знаю, в JS API такого, как SetHealth(), нет)

ZLOY · 3 Дек 2016

EnDronist написал(а):
Кнопку сделал, а вот как изменить что-либо в игре по её нажатии - не знаю, в JS API такого, как SetHealth(), нет

https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Custom_Game_Events

EnDronist · 3 Дек 2016

ZLOY,

layout:

custom_ui_manifest.xml

Код:

<root> <Panel> <CustomUIElement type="Hud" layoutfile="file://{resources}/layout/custom_game/test.xml" /> <CustomUIElement type="Hud" layoutfile="file://{resources}/layout/custom_game/test2.xml" /> <CustomUIElement type="Hud" layoutfile="file://{resources}/layout/custom_game/test3.xml" /> <CustomUIElement type="Hud" layoutfile="file://{resources}/layout/custom_game/test4.xml" /> </Panel> </root>

test.xml

Код:

<root> <styles> <include src="file://{resources}/styles/custom_game/test.css" /> </styles> <scripts> <include src="file://{resources}/scripts/custom_game/test.js" /> </scripts> <Panel class="Main" > <Button id="btnTest" onactivate="onBtnTestClick('myArgument')" /> </Panel> </root>

test2.xml

Код:

<root> <styles> <include src="file://{resources}/styles/custom_game/test2.css" /> </styles> <scripts> <include src="file://{resources}/scripts/custom_game/test2.js" /> </scripts> <Panel class="Main2" > <RadioButton checked="checked" group="Demo" id="Demo1" text="Radio button 1" onactivate="onTest2Click('myArgument')"/> </Panel> </root>

test3.xml

Код:

<root> <styles> <include src="file://{resources}/styles/custom_game/test3.css" /> </styles> <scripts> <include src="file://{resources}/scripts/custom_game/test3.js" /> </scripts> <Panel class="Main3" > <RadioButton group="Demo" id="Demo2" text="Radio button 2" onactivate="onTest3Click('myArgument')"/> </Panel> </root>

test4.xml

Код:

<root> <styles> <include src="file://{resources}/styles/custom_game/test4.css" /> </styles> <scripts> <include src="file://{resources}/scripts/custom_game/test4.js" /> </scripts> <Panel class="Main4" > <RadioButton group="Demo" id="Demo3" text="Radio button 3" onactivate="onTest4Click('myArgument')"/> </Panel> </root>

scripts:

test.css

Код:

.Main { vertical-align: center; /* выравнивание по центру */ horizontal-align: center; } #btnTest { /* Обычное состояние */ background-color: #ec4; /* Цвет фона */ width: 200px; /* Ширина и ниже - высота */ height: 200px; } #btnTest:hover { /* При наведении */ width: 205px; height: 205px; } #btnTest:active { /* При нажатии */ border: 4px solid #fff; /* Рамка в 4 пикселя шириной и с белым цветом */ }

test2.css

Код:

.Main2 { vertical-align: center; /* выравнивание по центру */ horizontal-align: center; } #Demo1 { /* Обычное состояние */ background-color: #ec4; /* Цвет фона */ width: 200px; /* Ширина и ниже - высота */ height: 150px; }

test3.css

Код:

.Main3 { vertical-align: center; /* выравнивание по центру */ horizontal-align: center; } #Demo2 { /* Обычное состояние */ background-color: #ec4; /* Цвет фона */ width: 150px; /* Ширина и ниже - высота */ height: 200px; } #Demo2:hover { /* При наведении */ width: 205px; height: 205px; } #Demo2:active { /* При нажатии */ border: 4px solid #fff; /* Рамка в 4 пикселя шириной и с белым цветом */ }

test4.css

Код:

.Main4 { vertical-align: center; /* выравнивание по центру */ horizontal-align: center; } #Demo3{ /* Обычное состояние */ background-color: #ec4; /* Цвет фона */ width: 220px; /* Ширина и ниже - высота */ height: 220px; } #Demo3:hover { /* При наведении */ width: 205px; height: 205px; } #Demo3:active { /* При нажатии */ border: 4px solid #fff; /* Рамка в 4 пикселя шириной и с белым цветом */ }

styles:

test.js

Код:

function onBtnTestClick(event){ $.Msg("Ti pidr") // вывод в консоль GameUI.SetCameraTarget( Players.GetPlayerHeroEntityIndex( -1 ) ) var plyID = Game.GetLocalPlayerID(); // Game - глобальна¤ штука, смотри API JS Game.SetPlayerMuted( plyID, 0 ) $.Msg(plyID) var data = { // ќбьект дл¤ передачи в Ћуа playerID: plyID, msg: event // аргумен, который указывали в хмл onactivate="onBtnTestClick('myArgument') } // кладем "придуманное_им¤_событи¤" и наш обьект GameEvents.SendCustomGameEventToServer( "event_test", data ); }

test2.js

Код:

function onTest2Click(event){ $.Msg("Ti pidr") // вывод в консоль GameUI.SetCameraTarget( Players.GetPlayerHeroEntityIndex( -1 ) ) var plyID = Game.GetLocalPlayerID(); // Game - глобальна¤ штука, смотри API JS Game.SetPlayerMuted( plyID, 0 ) $.Msg(plyID) var data = { // ќбьект дл¤ передачи в Ћуа playerID: plyID, msg: event // аргумен, который указывали в хмл onactivate="onBtnTestClick('myArgument') } // кладем "придуманное_им¤_событи¤" и наш обьект GameEvents.SendCustomGameEventToServer( "event_test", data ); }

test3.js

Код:

function onTest3Click(event){ $.Msg("Ti pidr") // вывод в консоль GameUI.SetCameraTarget( Players.GetPlayerHeroEntityIndex( -1 ) ) var plyID = Game.GetLocalPlayerID(); // Game - глобальна¤ штука, смотри API JS Game.SetPlayerMuted( plyID, 0 ) $.Msg(plyID) var data = { // ќбьект дл¤ передачи в Ћуа playerID: plyID, msg: event // аргумен, который указывали в хмл onactivate="onBtnTestClick('myArgument') } // кладем "придуманное_им¤_событи¤" и наш обьект GameEvents.SendCustomGameEventToServer( "event_test", data ); }

test4.js

Код:

[b]function onTest4Click(event){ $.Msg("Ti pidr") // вывод в консоль GameUI.SetCameraTarget( Players.GetPlayerHeroEntityIndex( -1 ) ) var plyID = Game.GetLocalPlayerID(); // Game - глобальна¤ штука, смотри API JS Game.SetPlayerMuted( plyID, 0 ) $.Msg(plyID) var data = { // ќбьект дл¤ передачи в Ћуа playerID: plyID, msg: event // аргумен, который указывали в хмл onactivate="onBtnTestClick('myArgument') } // кладем "придуманное_им¤_событи¤" и наш обьект GameEvents.SendCustomGameEventToServer( "event_test", data ); }

Итог:

EnDronist · 4 Дек 2016

Что я сделал не так и как укомпановать все файлы в один? Нужен ли мне vtex формат для создания целой панели с кнопками?

CryDeS · 4 Дек 2016

EnDronist написал(а):
Что я сделал не так и как укомпановать все файлы в один? Нужен ли мне vtex формат для создания целой панели с кнопками?

Я не вижу на быстрый взгляд косяков, сделай один файл с одним радиобаттоном, и потом попробуй и выложи код, так будет проще.

EnDronist · 5 Дек 2016

Ну, кнопка у меня есть, а вот наложить на неё нормальную текстуру и поменять шрифт текста я не могу

Ну а сама кнопка так же и выглядит, я не знаю, как сделать текстуру, которая была бы похожа на RadioButton
P.S. Разобрался, но текстуру кнопки брать откуда? Где-то искать, скачивать или вырезать и фотошопить?

CryDeS · 5 Дек 2016

EnDronist написал(а):
Ну, кнопка у меня есть, а вот наложить на неё нормальную текстуру и поменять шрифт текста я не могу
Ну а сама кнопка так же и выглядит, я не знаю, как сделать текстуру, которая была бы похожа на RadioButton

Ну ты меня понял

Код:

background-image: url("file://{images}/custom_game/ui_timer.png");

EnDronist · 5 Дек 2016

Не меняется шрифт и положение текста

Код:

.Main2 {
  vertical-align: center;  /* выравнивание по центру */
  background-image: url("s2r://panorama/images/custom_game/buttons/asdf.png");
  background-repeat: no-repeat;
  horizontal-align: left;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: right;
  color: #F9F2E3;
}

ZLOY · 5 Дек 2016

Попробуй так

Код:

.Main2 > Label{
  vertical-align: center;  /* выравнивание по центру */
  background-image: url("s2r://panorama/images/custom_game/buttons/asdf.png");
  background-repeat: no-repeat;
  horizontal-align: left;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: right;
  color: #F9F2E3;
}

EnDronist · 5 Дек 2016

ZLOY,

С "> RadioButton" всё то же самое, что и без этой части кода, только не выравнивается кнопка, а сидит в верхнем левом углу

ZLOY · 5 Дек 2016

А вообще в тулах нажимаешь F6 и исследуешь как сделан интерфейс доты.
+ стандартная дотовская кнопочка.

Код:

//
// Radio Button
//

RadioButton
{
	background-color: none;
	flow-children: right;
//	padding: 4px 4px;
	color: white;

	transition-property: background-color, box-shadow, color, brightness;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

RadioButton > .RadioBox
{
	min-width: 20px;
	min-height: 20px;
	
	border-radius: 50%;
	background-color: gradient( radial, 50% 50%, 0% 0%, 10% 10%, from( #000000 ), to( #000000 ) );
	
	border: 2px solid #5e686966;
	box-shadow: #00000055 -2px -2px 1px 4px;
	
	transition-property: background-color, box-shadow, color, border;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

RadioButton:selected > .RadioBox
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #e7f6f5 ), to( #333399 ) );
	border: 3px solid #000000;

	box-shadow: #5b62bf77 -3px -3px 6px 6px;
	
	transition-property: background-color;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

RadioButton:enabled:hover > .RadioBox
{
	border: 2px solid #697879;
}

RadioButton:enabled:selected:hover > .RadioBox
{
	border: 3px solid #000000;
}

RadioButton > Label
{
	color: baseText;
	margin-left: 8px;
	font-size: 16px;

	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

DOTASettingsEnum RadioButton > Label
{
	font-size: 18px;
	color: #7d8688;
}


RadioButton:selected > Label
{
	color: white;

	transition-property: color, text-shadow;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

RadioButton:enabled:hover > Label
{
	color: white;

	transition-property: color;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

RadioButton:disabled > .RadioBox
{
	color: transparent;
	box-shadow: #33333377 -4px -4px 8px 8px;
	background-color: #00000000;
}

RadioButton:disabled:selected > .RadioBox
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #e7f6f533 ), to( #33339933 ) );
}

RadioButton:disabled > Label
{
	color: #333333;
}

Настройки в игре

Продвинутый

Друзья CG

Продвинутый

Друзья CG

Администратор

Друзья CG

Продвинутый

Продвинутый

Администратор

Продвинутый

Администратор

Продвинутый

Продвинутый

Друзья CG

Продвинутый

Друзья CG

Продвинутый

Администратор

Продвинутый

Администратор