[Panorama] Изи баттон - изи лайф!

doter.ua

Продвинутый
17 Авг 2014
280
5
[size=24pt]Создаем простую кнопку![/size]​

cab966301cf3e69732090068a1847ec6.png
[youtube]https://youtu.be/lITBWhAEtQ0[/youtube]​

Возможности:
1) Интерактивный дизайн (изменяется при наведении\клике)
2) Передача инфы из JS в Lua.

Урок создавался на примере empty addon. Заходим в папку "dota 2 beta\content\dota_addons\название_аддона\" и создаем там папку panorama.
В ней создаем( новый.тхт и меняем расширение, гугл в помощь) несколько папок и 4 файла, должно получиться так:

  • [li] layout/custom_game/custom_ui_manifest.xml - настройки\конфиг интерфейса[/li]
    [li] layout/custom_game/test.xml - описывает структуру элементов ( теги и атрибуты как в html ) [/li]
    [li] scripts/custom_game/test.js -JavaScript [/li]
    [li] styles/custom_game/test.css - таблицы стилей [/li]
Не буду останавливаться на вышеупомянутых технологиях, про них можно почитать в гугле\вики.
Рассмотрим код ( описание в виде комментариев ):
Заскринил
24eb5363087aa8d2a4fcde4bcd4165cd.png
т.к. здесь нету подсветки, а читабельность в гайде очень важна. Собсна читаем на скринах, копируем снизу или качаем ZIPник в приложенных файлах.

custom_ui_manifest.xml

Код:
<root>
  <Panel >
    <CustomUIElement type="Hud" layoutfile="file://{resources}test.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" >
		<!-- Элемент кнопка, добавляем в атрибуты слушатель на клик onactivate, указываем имя функции, которую создадим в JS -->
		<Button id="btnTest" onactivate="onBtnTestClick('myArgument')" /> 
	</Panel>
</root>


test.css

Код:
/* Если вкратце, то здесь описывают свойства элементов из XML файла
	.Класс {
		свойства
	} 
	#ИД {
		свойства
	} 
 */
.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 #fffF;	
}


test.js

Код:
function onBtnTestClick(event){
  $.Msg("onBtnTestClick") // вывод в консоль

  var plyID = Game.GetLocalPlayerID(); // Game - глобальная штука, смотри API JS

  var data = {		// Обьект для передачи в Луа
    playerID: plyID, 
    msg: event     // аргумен, который указывали в хмл onactivate="onBtnTestClick('myArgument')
  }

  // кладем 					   "придуманное_имя_события" и наш обьект
  GameEvents.SendCustomGameEventToServer( "event_test",       data ); 

}


addon_game_mode.lua
Регистрируем слушателя на событие event_test и печатаем приходящие аргументы в консоль.

Код:
function CAddonTemplateGameMode:InitGameMode()
	print( "Template addon is loaded." )
	CustomGameEventManager:RegisterListener("event_test", Dynamic_Wrap(CAddonTemplateGameMode, 'OnTest'))
end

function CAddonTemplateGameMode:OnTest( keys )
	for k,v in pairs(keys) do
		print(k,v)
	end
end


Доступные свойства CSS https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Panorama/CSS_Properties
API JavaScript https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Panorama/Javascript/API

ЗЫ в архиве папка panorama + аддон_гейм_мод.
 
Последнее редактирование модератором:

Se7eN

Друзья CG
22 Ноя 2014
334
18
Блин сделал бы кнопочку покрасивее и где-нибудь повыше)

А так плюсую)
 

kekman

Новичок
13 Дек 2018
4
0
Поправьте ему код, вводит новичков в заблуждение (custom_ui)
 

xDes

Продвинутый
8 Ноя 2018
232
34
Проект
Boss Survival Adventure
т.е. при загрузке карты должна появиться кнопка ? у меня так не работает
 
Реклама: