This article relates to the game "Dota 2". Click here for more information.
This article relates to the SDK/Workshop Tools for "Dota 2 创意工坊工具集". Click here for more information.
这篇条目有关 Source 2引擎。如需详情,点击这里。

Panorama 用户界面

From Valve Developer Community
Jump to: navigation, search
English (en)Русский (ru)中文 (zh)Translate (Translate)

“Panorama”是Valve新开发的一个UI(用户界面)框架。它深受现代网页设计方式的影响,和HTML5/CSS/JS等框架非常相像。通过使用这个系统,用户可以快速开发出高质量的用户界面,包括流畅的游戏内容整合(如3D模型,粒子特效等)。

Panorama将完全取代原先的Scaleform的UI开发方式。在Workshop Tools Beta中,前端的自定义游戏用户界面都是使用Panorama开发的。虽然目前的Dota用户界面仍然采用Scaleform,但是最终也会被Panorama取代。起源2引擎有一些非常不同的需求,而它们仍然是由C++和Qt-实现的——这些语言不会被移植到Panorama中。

Panorama基本概念

标签元素 layout files

XML文件相当于其他文件的骨架。XML文件包含了UI中将要使用的板,以及它们的继承布局。XML文件可以从下列位置找到:

content/dota_addons/ADDON_NAME/panorama/layout/custom_game/*.xml

一个复杂的Panorama UI,为了保持简洁和清晰,往往具有多个XML文件(同时让多个元素可以被用在同一个位置)。比如说,一个比分牌可以拥有一个基本的XML文件,画好主要的布局,然后加上一个二级XML文件,具体画出队伍信息,再加上一个三级XML文件,画出玩家信息。

基础标签:panel

另见: Panorama-板(en)

Panels 是Panorama中的组成部件。在网页开发的概念中,板相当于一个基本的HTML元素:<dir />。所有Panorama中可见的元素——标签、图片、按钮——都是板构成的。

样式表格 Style Sheets

CSS文件用来描述XML中的元素是通过怎样的方式被展现的。可以从下列位置找到:

content/dota_addons/ADDON_NAME/panorama/styles/custom_game/*.css

另有三个地方包含了所支持的CSS有关属性:

  • The CSS 属性(en) page
  • The properties panel inside of the Panorama Debug工具(en)
  • The "dump_panorama_css_properties" console command, which will always print out the most up-to-date documentation
  • 这一页Panorama Layout(en) 也包含了关于Panorama布局系统的运行方式的资源。

    脚本 𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭

    另见: Panoroma-𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭(en)

    JS文件包含了𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭代码,它们可以用来相应玩家输入,或者改变游戏状态。可以在下列位置找到:

    content/dota_addons/ADDON_NAME/panorama/scripts/custom_game/*.js
    

    事件 Events

    另见: panorama事件(en)

    Panaroma事件是一种沟通多个板的方法。这些事件和javascript函数很像,但在发送信息方面有所不同。在制作UI时,事件可以用来简化一些普通的操作。

    与网页设计的相像之处

    如果你很熟悉网页设计的话,你会觉得一个Panorama XML文件很像HTML5,CSS文件几乎和网页中使用的一模一样(除了网页设计的复杂程度和浏览器兼容性),而JS文件和网页开发者们熟悉的也是一样(仅在函数功能的库上有些不同)。

    就算你对网页设计不那么熟悉,这些相像之处也是很有用的。Panorama与网页设计具有相似的特点,这意味着你可以从网络上搜索到大量的相关资料。如果你想深入学习网页设计的话,这里有一个很好的网站: https://www.javascript.com

    与网页的不同之处

    • CSS代码的一些部分被调整过以变得更易用。
    • 在javascript中,JQuery风格的“$”按键非常不好用,目前它只能通过ID来匹配单个按键。如果没有匹配的按键,会返回一个null值而不是空选择,这可能造成一些意外的错误。
    • 某些网页设计的属性被省略了,因为实在是没有用或者太麻烦了。

    用Panorama创作UI

    迈出第一步

    Manifest文件(en)是所有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(en) 这是一个非常好用的工具,不仅能排错,还能让你了解现有的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')

    方言

    这里有关于Panaroma多语言支持的信息:方言(en)

    Valve提供的Panaroma UI

    在Valve提供的模板RPG“乱战先锋”中有一些新的UI元素,它们可以被直接用到你的自定义游戏里。当然你也可以重头开始创建独特的用户界面。这些元素主要是用来解决多个队伍以及多个玩家的问题,因为传统的两个队伍5v5的用户界面已经不够用了。

    更多信息请参阅:V爹的UI(en)

    附加主题

    自定义载入界面

    自定义载入界面不同于普通的UI设计,因为载入画面必须要在游戏前载入。

    载入画面可以用一个简单的PanaromaXML文件解决,游戏会从下列位置载入XML文件:content/dota_addons/ADDON_NAME/panorama/layout/custom_game/custom_loading_screen.xml

    Note.png注意:载入画面要尽可能地小巧,毕竟它们也需要载入。对电脑的负担同样越小越好,不然可能会减慢载入进程。
    Note.png注意:不要在载入画面里使用附带的游戏内容(3D模型、粒子特效等)。这可能会影响这些内容在游戏里的载入。

    自定义HUD元素

    服务器的Lua代码里有些很简单也很强力的API可以用来在客户端上显示XML:

    Function Signature Description
    CustomUI.DynamicHud_Create void DynamicHud_Create(int, string, string, handle) 为指定玩家(们)创建一个新的HUD元素。 ( 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) 删除一个HUD元素 ( int PlayerID /*-1 means everyone*/, string ElementID )
    CustomUI.DynamicHud_SetDialogVariables void DynamicHud_SetDialogVariables(int, string, handle) 增加或改变已有的自定义HUD元素的会话变量 ( int PlayerID /*-1 means everyone*/, string ElementID, table DialogVariables )
    CustomUI.DynamicHud_SetVisible void DynamicHud_SetVisible(int, string, bool) 切换已有的HUD元素的可见性。 ( int PlayerID /*-1 means everyone*/, string ElementID, bool Visible )

    响应鼠标

    GameUI.SetMouseCallback这个API用来在游戏主代码之前注册一个函数,来响应鼠标。

    示例(en)这一页内有一个关于这个功能的例子。
    

    绑定按键

    https://github.com/XavierCHN/EndlessDungeon/blob/master/content/ed/panorama/scripts/custom_game/key_binding.js key_binding(en) https://www.jianshu.com/p/bdab22027ef8 按键绑定(en)

    常见错误

    在你处理XML、CSS和JS代码的时候,你可能会遇到这些错误:

    Relevant Area Error Solution
    hud.xml 编译错误: "Found duplicate panel description" <root>元素里,只能有一个不带ID的panel元素。
    game_info.xml 编译错误:"Found duplicate panel description" <root>元素里,只能有一个不带ID的panel元素。(这两条不是重复,注意XML文件)

    Panoroma 范例