|
|
| Line 1: |
Line 1: |
| − | {{otherlang2
| + | <noinclude>{{Delete|Useless.}}</noinclude> |
| − | |en=Dota 2 Workshop Tools/Panorama
| |
| − | |title=Panorama
| |
| − | }}
| |
| − | ''Panorama'' - новый фреймворк интерфейса, созданный Valve. Он схож с современными языками веб-разработки (HTML5/CSS/JS), и позволяет быстро создавать интерфейсы высокого качества и производительности, которые интегрируются с игровым контентом (модели, системы частиц, др.)
| |
| − | | |
| − | Панорама полностью заменяет Scaleform для разработки пользовательского интерфейса в Dota. Для Workshop tools, UI панели пользовательского интерфейса и новые UI в Custom games реализуются с помощью панорамы. Dota HUD по-прежнему используется Scaleform, но в конечном итоге была преобразованы в панораму. Инструменты движка Source 2 имеют совсем другой набор требований и поэтому реализован на C++ и QT - они не будут перенесены в панорамы.
| |
| − | | |
| − | | |
| − | == Составляющие панорамы ==
| |
| − | === Панели ===
| |
| − | Смотрите: [[Dota 2 Workshop Tools:ru/Panorama:ru/Panels:ru]]
| |
| − | | |
| − | Панели являются строительными блоками любого пользовательского интерфейса(Panorama). (В веб-термины, панель по сути являются HTML-элементами.) Все, что вы видите в панораме пользовательского интерфейса - надписи, изображения, кнопки - это панель.
| |
| − | | |
| − | === Формат .XML (Файлы макета) ===
| |
| − | XML файлы являются скелетом ваших данных: они описывают какие панели находятся в вашем интерфейсе и их иерархию расположения. Их можно найти здесь:
| |
| − | | |
| − | content/dota_addons/ADDON_NAME/panorama/layout/custom_game/*.xml
| |
| − | | |
| − | Сложный пользовательский интерфейс панорамы,обычно создается в виде нескольких XML-файлов.(Это также позволяет создавать повторяющиеся элементы пользовательского интерфейса в одном месте.) Например,нам нужно создать табло на которое выводится - название команд и принадлежность игрока к команде.(Какой игрок находится в какой команде.) [http://pixs.ru/showimage/imagesakam_8927472_28199430.jpg Пример] Это табло будет состоять из 3 элементов - первый «root-корневого» XML-файла для основного макета табло,второй XML-файл «Team-команда» - описывающего как каждая команда представлена и третий XML-файл будет описывать «Player-игрока» как каждый игрок в каждой команде представлен.
| |
| − | | |
| − | === .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:
| |
| − | <li>The [[Dota 2 Workshop Tools/Panorama/CSS Properties|CSS Properties]] page</li>
| |
| − | <li>The properties panel inside of the [[Dota 2 Workshop Tools/Panorama/Debugger|Panorama Debugger]]</li>
| |
| − | <li>The "dump_panorama_css_properties" console command, which will always print out the most up-to-date documentation</li>
| |
| − | | |
| − | The [[Dota 2 Workshop Tools/Panorama/Layout|Panorama Layout]] page is also a good resource for getting an overview about how the Panorama layout system works.
| |
| − | | |
| − | === .JS (Javascript) ===
| |
| − | See: [[Dota_2_Workshop_Tools:ru/Panorama:ru/Javascript:ru]]
| |
| − | | |
| − | JS files are Javascript code that allows your UI to respond to user input or changing game state. They can be found here:
| |
| − | | |
| − | content/dota_addons/ADDON_NAME/panorama/scripts/custom_game/*.js
| |
| − | | |
| − | === Events ===
| |
| − | 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.)
| |
| − | | |
| − | If you're not familiar with web development, you can still benefit from the similarity. Most Panorama features are sufficiently similar to their web counterparts that searching online for documentation can be very helpful. If you want to learn more about web development, a good place to start is: https://www.javascript.com
| |
| − | | |
| − | === 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
| |
| − | | |
| − | == Scaleform in Custom Games ==
| |
| − | <font color=red>'''We will be deprecating the use of Scaleform for Dota Custom Games.'''</font>
| |
| − | | |
| − | 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 [http://dev.dota2.com/ Dev Forums].
| |
| − | | |
| − | == Разработка UI с Panorama ==
| |
| − | | |
| − | === Начало работы ===
| |
| − | Корневым - (важным,начальным) в любом самодельном пользовательском интерфейсе Panorama UI является это [[Dota 2 Workshop Tools/Panorama/Custom_UI_Manifest|Custom UI Manifest]]:
| |
| − | | |
| − | content/dota_addons/ADDON_NAME/panorama/layout/custom_game/custom_ui_manifest.xml
| |
| − | | |
| − | Обязательно посмотрите этот видео-урок на ютубе по созданию кастумного интерфейса. "Inclusive Panorama UI - Quest" (Спам лист не пропускает ссылку.)
| |
| − | | |
| − | === Рабочий процесс ===
| |
| − | При запуске Dota Tools, файлы XML, CSS и JS в content/папке отслеживаются как любые другие content файлы и автоматически перекомпилируются и перезагружаются при внесении изменений. (Это произойдет, только когда пользовательский интерфейс активен — неиспользованный XML будет скомпилирован только после того как,единожды будет использован.)
| |
| − | | |
| − | Panorama, как правило, неплохо обновляет пользовательский интерфейс,даже если учесть эти динамические изменения,но некоторые изменения слишком радикальны для правильного обновления интерфейса. Если вы видите неожиданные результаты, вам может потребоваться перезагрузить карту (dota_launch_custom_game ADDON_NAME MAP_NAME), чтобы убедиться, что пользовательский интерфейс полностью обновлен.
| |
| − | | |
| − | === Отладчик Panorama Debugger ===
| |
| − | [[Dota 2 Workshop Tools/Panorama/Debugger|Отладчик панорамы]] — это чрезвычайно полезный инструмент для отладки пользовательского интерфейса и изучения объединения существующего пользовательского интерфейса со своим.
| |
| − | === Советы ===
| |
| − | *Встроенный стиль не является хорошей практикой,но как черновик пойдет: <code><Panel style="border: 1px solid red;" /></code> (remember your closing ';' in the style!)
| |
| − | * Если вам трудно найти вашу панель, может быть очень полезно добавить временную: 'border: 1px solid red;' or explicit width/height.
| |
| − | * <code>$.Msg( "In function foo():", some_data );</code> это ваш друг!
| |
| − | * Вы можете использовать отладочную команду 'dota_custom_ui_debug_panel <element_type>' чтобы принудительно отобразить тип пользовательского интерфейса, если по другому это не получается.element_type является числовым значением из [[Dota 2 Workshop Tools/Panorama/Javascript/API#DotaCustomUIType_t|DotaCustomUIType]] (Пример: 'dota_custom_ui_debug_panel 5')
| |
| − | | |
| − | === Локализация ===
| |
| − | Поддержка языков в Panorama описана тут: [[Dota 2 Workshop Tools/Panorama/Localization]]
| |
| − | | |
| − | == 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.
| |
| − | | |
| − | See [[Dota 2 Workshop Tools/Panorama/Valve Provided UI|Valve Provided UI]] for more information.
| |
| − | | |
| − | == Additional Topics ==
| |
| − | | |
| − | === 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: <code>content/dota_addons/ADDON_NAME/panorama/layout/custom_game/custom_loading_screen.xml</code>
| |
| − | | |
| − | {{note|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.}} | |
| − | {{note|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.
| |
| − | | |
| − | {| class="standard-table" style="width: 100%;"
| |
| − | ! Function
| |
| − | ! Signature
| |
| − | ! Description
| |
| − | |-
| |
| − | | CustomUI.DynamicHud_Create
| |
| − | | <code>void DynamicHud_Create(int, string, string, handle)</code>
| |
| − | | 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
| |
| − | | <code>void DynamicHud_Destroy(int, string)</code>
| |
| − | | Destroy a custom hud element ( int PlayerID /*-1 means everyone*/, string ElementID )
| |
| − | |-
| |
| − | | CustomUI.DynamicHud_SetDialogVariables
| |
| − | | <code>void DynamicHud_SetDialogVariables(int, string, handle)</code>
| |
| − | | Add or modify dialog variables for an existing custom hud element ( int PlayerID /*-1 means everyone*/, string ElementID, table DialogVariables )
| |
| − | |-
| |
| − | | CustomUI.DynamicHud_SetVisible
| |
| − | | <code>void DynamicHud_SetVisible(int, string, bool)</code>
| |
| − | | Toggle the visibility of an existing custom hud element ( int PlayerID /*-1 means everyone*/, string ElementID, bool Visible )
| |
| − | |}
| |
| − | | |
| − | === GameUI.SetMouseCallback ===
| |
| − | 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.
| |
| − | | |
| − | == Common Mistakes ==
| |
| − | You may encounter these mistakes when writing XML, CSS and Javascript in Panorama:
| |
| − | {| class="standard-table" style="width: 100%;"
| |
| − | ! Relevant Area
| |
| − | ! Error
| |
| − | ! Solution
| |
| − | |-
| |
| − | | <code>hud.xml</code>
| |
| − | | Compile error "Found duplicate panel description"
| |
| − | | There must only be one panel without an ID in the <code><root></code> element
| |
| − | |-
| |
| − | | <code>game_info.xml</code>
| |
| − | | Compile error "Found duplicate panel description"
| |
| − | | There must only be one panel without an ID in the <code><root></code> element
| |
| − | |}
| |
| − | | |
| − | == Примеры панорамы ==
| |
| − | * [https://github.com/ynohtna92/CustomTimer Custom Timer (Добавляет таймер как в WC3)]
| |
| − | * [https://github.com/Perryvw/CustomHeroSelection Пользовательский Выбор Героя (Экран Выбора)]
| |
| − | * [https://github.com/TischelDota/SimplePanelAnimation Простая Панель Анимации]
| |
| − | | |
| − | {{shortpagetitle}}
| |
| − | [[Category:Dota 2 Workshop Tools]]
| |
| − | [[Category:Panorama]]
| |
