[size=24pt]Создаем простую кнопку![/size]
[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]
Рассмотрим код ( описание в виде комментариев ):
Заскринил
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 + аддон_гейм_мод.
Последнее редактирование модератором: