Panorama
Template:Otherlang2 “Panorama”是Valve新开发的一个UI（用户界面）框架。它深受现代网页设计方式的影响，和HTML5/CSS/JS等框架非常相像。通过使用这个系统，用户可以快速开发出高质量的用户界面，包括流畅的游戏内容整合（如3D模型，粒子特效等）。
Panorama将完全取代原先的Scaleform的UI开发方式。在Workshop Tools Beta中，前端的自定义游戏用户界面都是使用Panorama开发的。目前的Dota用户界面仍是由Scaleform开发的，但是最终也会被Panorama取代。起源2引擎有一些非常不同的需求，而它们仍然是由C++和Qt-实现的——这些语言不会被移植到Panorama中。
Panorama基本概念
板
另见: Dota 2 Workshop Tools/Panorama/Panels
Panels 是Panorama中的组成部件。在网页开发的概念中，板相当于一个基本的HTML元素。所有Panorama中可见的元素——标签、图片、按钮——都是板构成的。
.XML (Layout Files)
XML文件相当于其他文件的骨架。XML文件包含了UI中将要使用的板，以及它们的继承布局。XML文件可以从下列位置找到：
content/dota_addons/ADDON_NAME/panorama/layout/custom_game/*.xml
一个复杂的Panorama UI，为了保持简洁和清晰，往往具有多个XML文件（同时让多个元素可以被用在同一个位置）。比如说，一个比分牌可以拥有一个基本的XML文件，画好主要的布局，然后加上一个二级XML文件，具体画出队伍信息，再加上一个三级XML文件，画出玩家信息。
.CSS (Style Sheets)
CSS文件用来描述XML中的元素是通过怎样的方式被展现的。可以从下列位置找到：
content/dota_addons/ADDON_NAME/panorama/styles/custom_game/*.css
另有三个地方包含了所支持的CSS有关属性：
这一页Panorama Layout 也包含了关于Panorama布局系统的运行方式的资源。
.JS (Javascript)
另见: Dota 2 Workshop Tools/Panorama/Javascript
JS文件包含了Javascript代码，它们可以用来相应玩家输入，或者改变游戏状态。可以在下列位置找到：
content/dota_addons/ADDON_NAME/panorama/scripts/custom_game/*.js
Events
另见: Dota 2 Workshop Tools/Panorama/Events
Panaroma事件是一种沟通多个板的方法。这些事件和javascript函数很像，但在发送信息方面有所不同。在制作UI时，事件可以用来简化一些普通的操作。
与网页设计的相像之处
如果你很熟悉网页设计的话，你会觉得一个Panorama XML文件很像HTML5，CSS文件几乎和网页中使用的一模一样（除了网页设计的复杂程度和浏览器兼容性），而JS文件和网页开发者们熟悉的也是一样（仅在函数功能的库上有些不同）。
就算你对网页设计不那么熟悉，这些相像之处也是很有用的。Panorama与网页设计具有相似的特点，这意味着你可以从网络上搜索到大量的相关资料。如果你想深入学习网页设计的话，这里有一个很好的网站： https://www.javascript.com
与网页的不同之处
- CSS代码的一些部分被调整过以变得更易用。
- 在javascript中，JQuery风格的“$”按键非常不好用，目前它只能通过ID来匹配单个按键。如果没有匹配的按键，会返回一个null值而不是空选择，这可能造成一些意外的错误。
- 某些网页设计的属性被省略了，因为实在是没有用或者太麻烦了。
Scaleform和自定义游戏
我们不建议开发者在游戏中使用scaleform
一开始在Beta版本中Scaleform仍然是可用的，但是使用Scaleform或者Actionscript的游戏将最终不再受支持。Panorama是个令人激动的玩意儿，我们希望更多的人能通过它创作更高质量的UI，然而它和Scaleform有着非常不同运行方式。如果你在把UI移植到Panaroma的过程中遇到了缺失属性的情况，请告诉我们。Dev Forums
用Panorama创作UI
迈出第一步
Custom UI Manifest是所有PanoramaUI的基础
content/dota_addons/ADDON_NAME/panorama/layout/custom_game/custom_ui_manifest.xml
工作流程
当运行Dota tool 的时候，content/folder下的XML、CSS和JS文件会和其他文件一样一起被监视，并且在用户做出改变的时候自动重新编译和加载（这个功能只有在UI被激活的时候才会生效，也就是说一个未被使用的XML文件只会在被用到的时候编译）
在面对一些动态变化的时候，Panorama通常都会很好地更新这些变化，但是一些太过“激烈”的变化就另当别论了。如果你看到了意外的结果，你需要重新加载你的地图(dota_launch_custom_game ADDON_NAME MAP_NAME) 来确保UI完全刷新。
Panorama的Debugger
Panorama Debugger 这是一个非常好用的工具，不仅能排错，还能让你了解现有的UI是如何组合在一起的。
注意
- 对于原型开发来说，行内格式并不是一个好的选择。
<Panel style="border: 1px solid red;" />(记住在最后加上分号“；”！ ) - 如果你一时半会找不到你要的板，不如先添加一个临时的“边框”-1px solid red; 或者具体的宽度/高度。
$.Msg( "In function foo():", some_data );真的很好用。- 你也可以使用'dota_custom_ui_debug_panel <element_type>' 这条排错命令来强制让一种UI（比如说开局的UI和结束的UI就是两种UI）变的可见。 element_type 是一个数值，来自于DotaCustomUIType（比如说结束画面是 'dota_custom_ui_debug_panel 5'）
Localization
Multi-language support in Panorama is described here: 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 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: 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 ) |
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:
| 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
|