代码元素
代码元素用于将 Javascript 应用于皮肤。
代码元素用于添加自定义 Javascript 和 CSS。当脚本添加自定义属性时，它们将作为参数添加到接口中。然后可以将代码元素本身保存为组件。
代码元素自定义属性
添加到 Javascript 的用户可定义参数将在此处显示为交互式设置。
代码元素
法典
使用文本字段添加 Javascript。如果需要更多空间，请使用 打开编辑器（Open Editor） 按钮打开更大的编辑器。
可以保存代码并用作外部文件。保存代码后，将选择 “从文件” 并添加文件的路径。要找到文件或更改路径，请右键单击路径以打开上下文菜单。
将代码添加为外部文件后，编辑器将变为只读。
代码可以包含一个特殊的注释块，该注释块必须位于代码的开头。它必须以 /*！ 开头，以 */ 结尾。在该注释中，您可以包含包含在 <style> 标记中的 css 样式。
此外，还可以为代码元素指定自定义属性 。自定义属性在名为 ggproperties 的 JSON 对象中定义。下面的示例演示了如何定义自定义属性、我们支持哪些类型的属性，以及如何在 Javascript 代码中使用这些属性中的值。
最后，代码元素可能使用皮肤变量。当复制代码元素（将其粘贴到另一个皮肤中）或制作成组件时，你可能会希望这些皮肤变量与代码元素一起出现。为此，请在同一注释块中指定名为 ggvariables 的 JSON 对象中的变量。在下面的示例中，我们定义如果复制代码元素或放入组件中，则还必须复制皮肤变量 var1 和 var2。
这是此类注释块的示例（加上末尾的一些 Javascript 代码），其中包含上述所有内容。在实践中，并非所有东西都必须存在。或者，如果不需要这些，您可以完全省略注释块：
/*! <style> .myclass { font-family: "Times", serif; line-height: 1.3; font-size: 20px; padding: 10px; } .glow { -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5)); filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5)); } .shadow { -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5)); } </style> { "ggproperties": [ { "id": "transparency", "type": "checkbox", "label": "Transparent", "default": true }, { "id": "text", "type": "text", "label": "Text field", "default": "Add your text here." }, { "id": "int_var", "type": "spinbox", "label": "Integer Number", "default": 42 }, { "id": "float_var", "type": "doublespinbox", "label": "Float Number", "default": 3.141 }, { "id": "color", "type": "color", "label": "Text Color", "default": "blue" }, { "id": "color2", "type": "combobox", "label": "Background Color", "default": "red", "values": [ { "label": "Black","value": "black" }, { "label": "Red", "value": "red" }, { "label": "Blue", "value": "blue" } ] } ], "ggvariables" : [ "var1", "var2" ] } */ // Now you can use those classes and properties in your code console.log("Text: " + el.ggproperties.text); el.className += " myclass shadow"; el.style.color = el.ggproperties.color; el.style.background = el.ggproperties.color2; el.innerHTML = el.ggproperties.text;
外部文件
外部文件用于将 Javascript 代码元素作为组件共享。元素所依赖的任何文件都将成为组件的一部分，然后在将组件添加到皮肤时包含在内。
要添加文件，请单击行右侧的加号按钮或双击表格。选择文件应是 CSS 还是 JavaScript 文件，然后输入 URL。
本地文件
在本地文件表中，您可以从硬盘驱动器添加文件，这些文件将包含在皮肤文件中，并在输出时复制到输出文件夹。例如，添加要在代码元素中定义的 CSS 样式中使用的字体文件。
要添加文件，请单击行右侧的加号按钮或在表格中双击。导航到该文件。该文件将出现在表格中。现在，您可以通过单击文件来编辑表中的文件名。这将是将其复制到输出文件夹时使用的文件名。您可以在前面添加一个子文件夹，以便将文件复制到输出中的子文件夹。
例如，您可以从硬盘驱动器 myFont.ttf 添加字体文件。然后，将表中的文件名编辑为 fonts/myFont.ttf。创建输出后，此文件将被复制到输出文件夹中，位于名为 fonts 的子文件夹中。
位置
身份证
为元素指定唯一的 ID 或名称。ID 是自动给出的，当添加多个 ID 时，将按数字排序。如果某个 ID 已被另一个元素使用，则输入字段旁边将出现一个警告符号。
点热点模板将有一个菜单，显示所有默认模板 ID 以及项目中使用的任何模板 ID。
★ 提示： 单击警告符号可为该元素创建唯一 ID。
位置
元素的 X 和 Y 坐标。
元素的位置相对于其父元素及其锚定位置（Canvas 是顶级元素的父元素）。
例如，锚定并放置在画布中间的视频将将其锚点设置为中心 ，X 和 Y 设置为 0。因此，如果元素锚定到水平中心，则 X 坐标是从父元素中心到元素水平中心测量的。同样，如果一个元素锚定在右侧，则 x 坐标是从父元素的右侧到元素的右侧测量的，如箭头所示。
★ 提示： 双击箭头将 X 和 Y 设置为
0。这使得精确定位元素变得更加容易，尤其是在播放器的边缘。例如，要使元素保持在播放器的底部中心并与边缘保持一定距离，请将锚点设置为底部中心，并将 Y 值设置为 20 像素，将 X 值设置为 0。
X 和 Y：
-
百分比 – 根据玩家的大小/窗口设置元素位置的单位。 -
像素 – 用于设置元素在蒙皮中的实际位置的单位。 -
CSS – 选择 CSS 作为单位，以允许在添加逻辑块时更改单位或使用计算。
示例：将 x 位置单位设置为 CSS。在编辑字段中输入100px。添加一个逻辑块，选择一个触发器，然后增加20%的大小，有效地切换单元。
锚
使用此网格将元素“粘贴”到播放器窗口的一部分。请参阅上文 ，了解锚点如何影响位置。
大小
热点模板（Hotspot Template） 和 节点标记（Node Marker） 没有大小参数。
以像素为单位调整元素的大小（宽度和高度）。 宽度和高度 ：
-
百分比 – 根据玩家的大小/窗口设置元素大小的单位。 -
像素 – 设置元素实际大小的单位。 -
锁定纵横比 – 单击链接图标以在画布中调整大小或在属性面板中更改大小值时锁定元素的大小纵横比。当选择另一个元素时，此按钮将重置为关闭 。 -
CSS – 选择 CSS 作为单位，以允许在添加逻辑块时更改单位或使用计算。
示例：将元素定位在距顶部 50 像素的位置，然后将高度设置为calc（100% - 50px）。然后，该元素将始终与顶部保持相同的距离，即 50px，并将直接向下延伸到底部。
-
重置大小 – 适用于图像、按钮和 SVG 元素。单击以返回图像的原始大小。 -
重置大小/2 – 可用于图像、按钮和 SVG 元素。当您想要将 PNG 或 JPG 添加到项目中，但仍希望它在 Hi-DPI 显示器中看起来清晰时，请使用此选项。例如，如果皮肤需要 32 像素的图像，请使用 64 像素的图像，然后单击重置大小/2。这将使其在皮肤中达到 32 像素，但仍具有高分辨率显示的所有像素。
外观
缩放
沿 x 轴和 y 轴缩放元素。例如，将任一轴上的值加倍，元素的大小将加倍。如果启用了缩放修饰符，则忽略此缩放设置。
中心
使用此网格可以确定元素的缩放方式。默认值设置为中心，以便元素将从其中心缩小或缩小。例如，如果将缩放锚定到左上角，则缩放将从该点居中。
角度
使用此参数调整元素的角度。它将使用中心网格（上图）作为其轴。例如，如果选择中心，它将围绕其中心旋转。如果选择左下角，按钮将围绕该角旋转。
可见
选择或取消选择以使元素保持可见或不可见。可见性或不可见性可以通过作进行更改和切换。
阿尔法
元素的透明度。设置为 1.000 是不透明的。降低此数字将增加元素的透明度。
光标
选择鼠标在元素上滚动时显示的光标。
继承 – 元素将从其父元素继承光标。这是除 Button 和 Seekbar 之外的所有元素的默认设置。
手 – 手形光标将显示。这是 Button 和 Seekbar 元素的 deafult。选中后，光标不会从其父元素继承。
默认 – 选择此选项可强制浏览器的默认光标（通常为箭头）。选中后，光标不会从其父元素继承。
掩蔽
仅容器和矩形元素选择“已启用”以激活掩码。掩码意味着容器或矩形的子元素将在容器或矩形的边界处被裁剪。
可及性
选项卡索引
要使皮肤元素可通过键盘控制，必须将它们添加到网页的 Tab 键顺序中。制表符索引 -1（默认值）会从 Tab 键顺序中排除该元素。制表符索引 0 将元素包含在制表符顺序中。浏览器将通过在活动元素周围放置一个矩形来突出显示活动元素。一旦皮肤元素成为活动元素（由突出显示指示），请按 Enter/Return 键触发其单击作。
ARIA 标签、描述、详细信息
这些是用于定义元素和支持角色的属性或属性。
标签 – 定义或命名元素。
描述 – 提供元素的简要描述。
详细信息 – 提供元素的扩展、详细描述。
ARIA 角色
ARIA 角色用于定义 UI 元素（按钮、加载栏等）。从列表中选择最能定义元素的元素。
隐藏
选择以隐藏所有 ARIA 属性。
高深
z-index
设置 CSS z-index 属性 。使用数字设置堆叠顺序或将设置保留为默认值。默认将使用树中设置的堆叠顺序。
这用于确保元素以正确的堆叠顺序显示，尤其是在靠近或重叠时。
可渗透的
选择以确保元素不接受鼠标单击。当您想要在皮肤中包含元素但又不希望它妨碍与全景交互的能力时，这非常有用。例如，您可以添加晕影、徽标或边框，单击这些晕影或徽标或边框，将允许与全景图进行交互。
热点代理 ID
输入相应的 ID。该 ID 来自热点属性中热点的 ID 字段。热点代理使您能够将皮肤元素链接到特定热点。这意味着该元素将接收与热点相同的鼠标和触摸事件（鼠标单击、鼠标双击、鼠标进入和鼠标离开）。您还可以添加 {} 以将节点 ID 用作热点代理。 了解更多 。
CSS 类
输入所选元素的 CSS 类名称。您可以输入多个以空格分隔的类。如果您需要更多空间，请单击字段右侧的编辑按钮以获得更大的文本字段。没有点 。 需要。
CSS 样式
输入所选元素的 CSS 样式属性。您可以输入多个用分号分隔的样式。如果您需要更多空间，请单击字段右侧的编辑按钮以获得更大的文本字段。
CSS 样式内部元素
输入所选元素的内部元素的 CSS 样式属性。（某些皮肤元素，如 Image、Video 和 External Image，在元素的主 <div> 内嵌套了一个内部元素。
例如，图像元素可以有一个边框： border-radius: 20px; border: 5px solid red; 。也可以用换行符输入：border-radius：20px; 边框：5px 纯红色;
添加了 CSS 边框的图像
捷径
输入首选键以控制为元素定义的作。例如，选择文本字段，按键盘上的向上键。然后添加鼠标单击作。单击或按下向上键时，该元素将执行分配的作。
从翻译中排除
选择此选项可不将此元素包含在皮肤的翻译文件中。
安全区域
可用于容器元素 。
选择 “使用安全区域作为位置和大小 ”，将容器的子元素保持在设备的安全区域内。此选项可确保元素始终 100% 可见，并且皮肤会自动对设备的安全区域做出反应。
确保在 Web 输出的 HTML 模板设置中未选择“ 忽略安全区域 ”。
动作
可以将作或一组方向应用于添加到皮肤的任何元素以创建交互性。
双击“作”区域或单击右侧的加号以打开“作设置”。
有关所有作的详细信息，请参阅皮肤作 。
修饰 符
添加修改器允许您在平移、倾斜、缩放或加载全景图时使元素移动、缩放或旋转。使用修饰符的一个很好的示例是加载条，该加载条会根据已加载的全景图量进行缩放。
双击 修改器（Modifiers） 区域或点击右侧的加号以打开 修改器设置（Modifier Settings）。
有关所有修改器的更多详细信息，请参阅蒙皮修改器 。
笔记
使用此部分添加有关元素的信息。如果您有一个组件并想要解释该组件中的元素，这尤其有用。
注释将在树中显示为工具提示。