This page has been translated automatically.
视频教程
界面
要领
高级
实用建议
专业(SIM)
UnigineEditor
界面概述
资源工作流程
版本控制
设置和首选项
项目开发
调整节点参数
Setting Up Materials
设置属性
照明
Sandworm
使用编辑器工具执行特定任务
如何擴展編輯器功能
嵌入式节点类型
Nodes
Objects
Effects
Decals
光源
Geodetics
World Nodes
Sound Objects
Pathfinding Objects
Players
编程
基本原理
搭建开发环境
使用范例
C++
C#
UnigineScript
UUSL (Unified UNIGINE Shader Language)
Plugins
File Formats
材质和着色器
Rebuilding the Engine Tools
双精度坐标
应用程序接口
Animations-Related Classes
Containers
Common Functionality
Controls-Related Classes
Engine-Related Classes
Filesystem Functionality
GUI-Related Classes
Math Functionality
Node-Related Classes
Objects-Related Classes
Networking Functionality
Pathfinding-Related Classes
Physics-Related Classes
Plugins-Related Classes
IG Plugin
CIGIConnector Plugin
Rendering-Related Classes
VR-Related Classes
创建内容
内容优化
材质
Material Nodes Library
Miscellaneous
Input
Math
Matrix
Textures
Art Samples
Tutorials

Skin Layout

General Information#

All textures must be power of two in size, rectangular textures are supported, for example, 16×16, 128×32, 8×64, etc. All files are in the RGBA format.

Icons#

Standard 32x32 icon

Layout#

There are four states of an icon:

  1. Not pressed, not in focus.
  2. Not pressed, in focus.
  3. Pressed, not in focus.
  4. Pressed, in focus.

Assembly#

Parts of the texture are copied 1:1.

Boot and Loading Screens#

Texture splash screen

Layout#

The texture is divided into two parts: the initial state (upper) and the final state (lower).

Assembly#

While a texture of a loading screen is being displayed, the initial picture (upper) is gradually replaced with the final one (lower). Pseudo-animation can be created using the alpha channel: regions of the lower half with small alpha values will be shown first, regions with larger alpha values will be shown last.

Base Skin#

gui_background.png#

Background texture

Assembly#

The texture is resized to fit a widget.

gui_border.png#

Frame borders

Layout#

Assembly#

All four corners are copied 1:1 from corresponding corners of the texture:

  1. The top-left corner
  2. The top-right corner
  3. The bottom-left corner
  4. The bottom-right corner

Vertical and horizontal strips (2 pixels in width), which are located at the center of the corresponding half of the texture are used to fill in space between corners. The strips are stretched, and the resulting color bar is constructed using interpolation between colors of the pixels in the strips.

gui_button.png#

Button

Layout#

The texture contains four variants of buttons in different states, the same as defined for icons. Also, each button is divided into 3 parts, which are shown below.

Assembly#

All four corners are copied 1:1 from corresponding corners of the texture. Vertical and horizontal strips (2 pixels in width), which are located at the center of the corresponding half of the texture and marked as 2 and 3 on the picture are used to fill in space between corners. The strips are stretched, and the resulting color bar is constructed using interpolation between colors of the pixels in the strips.

gui_checkbox.png#

Checkboxes and radiobuttons

Layout#

The texture contains two variants of checkboxes (left column) and two variants of radio buttons (right column) for unchecked/unselected (top row) and checked/selected (bottom row) states.

Assembly#

Parts of the texture are copied 1:1.

gui_combobox.png#

Drop-down menu

Layout#

The texture contains two variants of combobox icons: closed menu (upper) and opened menu (lower).

Assembly#

Parts of the texture are copied 1:1.

gui_editor.png#

Background for editline and edittext widgets

Assembly#

The left half of the texture is stretched to fill a widget. When pointing a mouse, it smoothly shifts to the right half.

gui_hpaned.png#

Movable separator

Assembly#

The texture is stretched to the given height.

gui_hscroll.png#

Horizontal scroll bar

Layout#

The texture is divided into five zones, each of which uses the layout similar to the icon layout. Bottom-left corner has a specific layout, since it contains unused regions (highlighted with green hatching).

Assembly#

The scroll bar handle is combined from the left (1), central (3) and right (2) parts; the underlying bar is stretched to the given width.

gui_hslider.png#

Horizontal slider

Layout#

The layout is similar to the layout of a horizontal scroll bar.

gui_hspacer.png#

Horizontal spacer

Assembly#

The texture is stretched to the given width.

gui_mouse.png#

Mouse pointers

Layout#

There is a number of slots for different pointer states:

  1. Base pointer
  2. Operation is not permitted
  3. Drag-and-drop mode
  4. Reserved slot
  5. Changing size horizontally
  6. Changing size vertically
  7. Changing size diagonally (1)
  8. Changing size diagonally (2)
  9. Movement
  10. Rotation
  11. Scaling

Other slots are reserved.

Assembly#

Parts of the texture are copied 1:1.

gui_selection.png#

Selection texture

Assembly#

The left half of the texture is used to highlight the text and the right one is used to highlight the selected tree element.

gui_spinbox.png#

Spinbox

Layout#

The texture is divided into two parts: the left part is for an upper arrow, the right part is for a lower arrow. The layout of each part is the same as the icon layout and contains four states:

  1. Not pressed, not in focus.
  2. Not pressed, in focus.
  3. Pressed, not in focus.
  4. Pressed, in focus.

Assembly#

Parts of the texture are copied 1:1.

gui_tabbox.png#

Tabs of the tabbox widget

Layout#

Layout is the same as for buttons.

Assembly#

The assembly is the same as for buttons.

gui_tooltip.png#

Tooltip background texture

Layout#

Layout is the same as for borders.

Assembly#

The assembly is the same as for borders.

gui_treebox.png#

Texture for the treebox widget

Layout#

The texture is divided into three parts:

  1. The upper left part is for folded non-leaf nodes.
  2. The lower left part is for folded non-leaf nodes.
  3. The right part is for "branches" connecting nodes.

Assembly#

Parts of the texture are copied 1:1.

gui_vpaned.png#

Movable separator

Assembly#

The texture is stretched to the given width.

gui_vscroll.png#

Vertical scroll bar

Layout#

Layout is similar to the layout of the horizontal scroll bar.

Assembly#

Assembly is similar to the assembly of the horizontal scroll bar.

gui_vslider.png#

Vertical slider

Layout#

Layout is similar to the layout of the horizontal slider.

Assembly#

Assembly is similar to the assembly of the horizontal slider.

gui_vspacer.png#

Vertical spacer

Assembly#

The texture is stretched to the given height.

gui_window.png#

Window skin

Layout#

On the image below, the left half is for windows with caption and the right half is for windows without caption.

Assembly#

All four corners are copied 1:1 from the corresponding corners of the texture. Vertical and horizontal strips (two pixels in width), which are located at the center of the corresponding half of the texture are used to fill in space between corners. The strips are stretched, and the resulting color bar is constructed using interpolation between colors of the pixels in the strips.

Dialogs#

Base Dialog#

Simple dialog

Two files are used to create a base dialog. These files correspond to two buttons of the dialog. Images are copied 1:1.

  • - dialog_ok.png
  • - dialog_cancel.png

File Dialog#

File selection dialog

This dialog requires four images that use the icon layout.

  • Go to the upper directory:
    dialog_file_path.png
  • Add a tab
    dialog_file_add.png
  • Remove the tab
    dialog_file_remove.png
  • Mini-icons for different file objects; split vertically into squares:
    dialog_file_list.png

Image Dialog#

This dialog requires four images that use the icon layout.

  • Red channel toggle:
    dialog_image_r.png
  • Green channel toggle:
    dialog_image_g.png
  • Blue channel toggle:
    dialog_image_b.png
  • Alpha channel toggle:
    dialog_image_a.png
Last update: 2022-09-26
Build: ()