You may encounter these mistakes when writing XML, CSS and Javascript in Panorama:
| Relevant Area | Error | Solution |
|---|---|---|
hud.xml | Compile error «Found duplicate panel description» | There must only be one panel without an ID in the <root> element |
game_info.xml | Compile error «Found duplicate panel description» | There must only be one panel without an ID in the <root> element |
Panorama — новый фреймворк интерфейса, созданный Valve. Он схож с современными языками веб-разработки (HTML5/CSS/JS), и позволяет быстро создавать интерфейсы высокого качества и производительности, которые интегрируются с игровым контентом (модели, системы частиц, др.)
Панорама полностью заменяет Scaleform для разработки пользовательского интерфейса в Dota. Для Workshop tools, UI панели пользовательского интерфейса и новые UI в Custom games реализуются с помощью панорамы. Dota HUD по-прежнему используется Scaleform, но в конечном итоге была преобразованы в панораму. Инструменты движка Source 2 имеют совсем другой набор требований и поэтому реализован на C++ и QT — они не будут перенесены в панорамы.
The root of any custom game Panorama UI is the Custom UI Manifest ():
content/dota_addons/ADDON_NAME/panorama/layout/custom_game/custom_ui_manifest.xml
When running the Dota tools, XML, CSS, and JS files in the content/ folder are monitored like any other content files and auto-recompiled and reloaded when you make changes. (This will only happen when the UI is active — an unused XML will only be compiled once it’s actually used.)
Panorama generally does a good job updating the UI to take into account these dynamic changes, but some changes are too drastic for it to correctly update the UI. If you are seeing unexpected results, you may need to reload your map (dota_launch_custom_game ADDON_NAME MAP_NAME) to ensure the UI is fully refreshed.
The Panorama Debugger () is an extremely useful tool for debugging your UI and learning how existing UI is put together.
- Inline style is not good practice but good for prototyping:
<Panel style="border: 1px solid red;" />(remember your closing ‘;’ in the style!) - If you’re having a hard time finding your panel, it can be very helpful to add a temporary ‘border: 1px solid red;’ or explicit width/height.
$.Msg( "In function foo():", some_data );is your friend!- You can use the ‘dota_custom_ui_debug_panel <element_type>’ debug command to force a type of UI to be visible when it otherwise wouldn’t be. The element_type is a numeric value from DotaCustomUIType (eg. for end screen: ‘dota_custom_ui_debug_panel 5’)
Multi-language support in Panorama is described here: Dota 2 Workshop Tools/Panorama/Localization ()
Custom Loading Screens
Custom loading screens are separate from the normal UI manifest because they are loaded earlier.
The loading screen is a normal Panorama XML and will be loaded from: content/dota_addons/ADDON_NAME/panorama/layout/custom_game/custom_loading_screen.xml
Примечание:Loading screens should be as lightweight as possible, since they have to be loaded too! They should also avoid being computationally-heavy, as that can slow down the loading process.
Примечание:You should not reference game content (3D models, particle systems, etc.) in a loading screen, as this can interfere with the normal loading process.
Custom Hud Elements
A simpler but less powerful API to display XMLs on clients directly from server Lua code.
| Function | Signature | Description |
|---|---|---|
| CustomUI.DynamicHud_Create | void DynamicHud_Create(int, string, string, handle) | Create a new custom UI HUD element for the specified player(s). ( int PlayerID /*-1 means everyone*/, string ElementID /* should be unique */, string LayoutFileName, table DialogVariables /* can be nil */ ) |
| CustomUI.DynamicHud_Destroy | void DynamicHud_Destroy(int, string) | Destroy a custom hud element ( int PlayerID /*-1 means everyone*/, string ElementID ) |
| CustomUI.DynamicHud_SetDialogVariables | void DynamicHud_SetDialogVariables(int, string, handle) | Add or modify dialog variables for an existing custom hud element ( int PlayerID /*-1 means everyone*/, string ElementID, table DialogVariables ) |
| CustomUI.DynamicHud_SetVisible | void DynamicHud_SetVisible(int, string, bool) | Toggle the visibility of an existing custom hud element ( int PlayerID /*-1 means everyone*/, string ElementID, bool Visible ) |
The GameUI.SetMouseCallback API can be used to register a function that is called before the main gameplay code processes the mouse. Dota_2_Workshop_Tools/Panorama/GameUI_SetMouseCallback_Example () This page contains an example of how to use this functionality.
Смотрите: Dota 2 Workshop Tools/Panorama/Panels ()
Панели являются строительными блоками любого пользовательского интерфейса(Panorama). (В веб-термины, панель по сути являются HTML-элементами.) Все, что вы видите в панораме пользовательского интерфейса — надписи, изображения, кнопки — это панель.
Формат .XML (Файлы макета)
XML files are the skeleton of your data: they describe what panels are in your UI and their hierarchical layout. They can be found here:
content/dota_addons/ADDON_NAME/panorama/layout/custom_game/*.xml
A complex Panorama UI is usually authored as multiple XML files for simplicity and clarity. (This also allows repeated elements in the UI to be authored in a single place.) For example, a scoreboard may consist of a «root» XML file for the main scoreboard layout, a second «team» XML file that describes how each team is represented, and a third «player» XML file that describes how each player on each team is represented.
.CSS (Style Sheets)
CSS files describe how the elements from your XML are presented. They can be found here:
content/dota_addons/ADDON_NAME/panorama/styles/custom_game/*.css
There are three sources for documentation about the supported CSS properties:
The Panorama Layout () page is also a good resource for getting an overview about how the Panorama layout system works.
See: Dota 2 Workshop Tools/Panorama/Javascript ()
content/dota_addons/ADDON_NAME/panorama/scripts/custom_game/*.js
See: Dota 2 Workshop Tools/Panorama/Events ()
Panorama events are a way to communicate between different Panels. They are similar to javascript functions, but have different rules around routing and handling. Events are useful to simplify many common tasks when creating custom UI with Panorama.
Similarity to the Web
If you are familiar with web development, a Panorama XML file closely resembles an HTML5 document, a CSS file is nearly identical to its web counterpart (without the complexity of browser compatibility), and JS files are the same JavaScript you’re familiar with. (With a slightly different library of functionality.)
Differences from the Web
- Some parts of CSS have been tweaked to make them simpler or easier to use
- In javascript, the JQuery-style ‘$’ panel selector is very limited. It can currently only match a single panel by ID. If there is no matching panel it will return null instead of a empty selector, which can result in unexpected JS errors.
- Some web features are simply missing, due to lack of need or their complexity/cost
By the forge of creation.
This section is under construction. It may still lack crucial information or contain unvalidated statements.
You can help by coordinating with the authors and offer your help.
Not to be confused with ability .
Cosmetic Modifiers are customizations granted by certain cosmetic items.
Cosmetic items with this modifier change specific animations. Sometimes, these changes are very minor in order to prevent model clipping, while other cases completely change specific animations like cast, attack, move, or any other animation. Note that these animation changes do not affect cast or attack timings, however, they may affect cast and attack backswings, as the backswing duration is based on the animation’s frame length.
Cosmetic items with this modifier change the announcer and/or killing spree sound files. This modifier is exclusively used by announcer packs.
Cosmetic items with this modifier change the appearance of the in-game HUD. This modifier is exclusively used by HUD skins.
Cosmetic items with this modifier customize the hero’s health bar. This modifier is currently unused.
Cosmetic items with this modifier change an ability’s name. This modifier is currently unused.
Cosmetic items with this modifier change the loadings screen image. This modifier is exclusively used by loading screens.
Cosmetic items with this modifier customize the in-game mouse cursor, including all its variants (i.e. the attack cursor). This modifier is exclusively used by cursor packs.
Cosmetic items with this modifier customize the hero portrait. Sometimes, these changes are minor, to make the model fit within the frame, while others come with completely new portraits.
Cosmetic items with this modifier come with extra ambient particle effects tailored to the cosmetic item itself.
Cosmetic items with this modifier change multi-kill banners. This modifier is exclusively used by multikill banners.
Cosmetic items with this modifier customize one or multiple abilities’ particle effects.
Cosmetic items with this modifier completely replace a model, either from the equipping hero, or their summoned units.
Cosmetic items with this modifier changes the hero’s model scale. This modifier is currently unused.
Cosmetic items with this modifier are wearable by heroes. Note that this modifier is not displayed in most cases.
Cosmetic items with this modifier change the player’s courier model. This modifier is exclusively used by couriers.
Cosmetic items with this modifier change the player’s flying courier model. This modifier is deprecated.
Cosmetic items with this modifier change the environmental weather. This modifier is used by weather effects, as well as some custom maps.
Cosmetic items with this modifier change one or multiple sound effects of the equipped hero.
Cosmetic items with this modifier change the entire soundscape of the map. This modifier is used by weather effects, as well as some custom maps.
Cosmetic items with this modifier change the hero’s voice sound files. This can be either a stand-alone voice pack, or be bound to a wearable cosmetic item.
Cosmetic items with this modifier customize one or multiple abilities’ icons.
Cosmetic items with this modifier completely customize the in-game terrain, including trees trees, textures, ambient creatures, and in some cases neutral creeps.
| In-game |
|
| Matchmaking | |
| User Interface | |
| Steam | |
| Social | |
| Client | |
| Other | |
Scaleform in Custom Games
We will be deprecating the use of Scaleform for Dota Custom Games.
Scaleform will initially remain functional during the Beta, but Custom Games that use Scaleform or ActionScript will eventually stop working. We’re excited about Panorama and think it will allow more people to author higher quality UI, but it’s very different from Scaleform. If you run into missing features while converting your UI features to Panorama, please let us know on the Dev Forums.
Valve-Provided Panorama UI
As part of our example game mode «Overthrow» we created several new UI components that can be used directly for your custom game, or as a starting point to create your own unique UI. These are primarily designed to handle a wide range of team and player arrangements beyond normal Dota 5v5.
