VisUI

VisUI allows to create nice looking UI in LibGDX using scene2d.ui. Library contains scene2d.ui skin, useful widgets like color picker and file chooser, it also contains modified scene2d.ui widgets to provide some extra functionality like focus borders, background change on over and click, etc. This is not a UI editor. If you are looking for level editor see VisEditor.

VisUI is licensed under Apache2 license meaning that you can use it for free in both commercial and non-commercial projects.

CHANGES file (definitely read before updating!)

Web demo! (source code)

Bigger screenshot

##Adding VisUI to your project

Please refer to LibGDX documentaion if you don't know how to mange dependencies with Gradle. Alternatively JAR can be downloaded from Maven repository. If you are creating new project, you can use gdx-setup to automatically add VisUI for you. (press 'Show Third Party Extension' button)

Manual Gradle setup:

Open build.gradle in project root. In ext section under allprojects add:

visuiVersion = '1.1.6'

Core dependency

compile "com.kotcrab.vis:vis-ui:$visuiVersion"

HTML dependency (only if you are using HTML)

compile "com.kotcrab.vis:vis-ui:$visuiVersion:sources"

GdxDefinition.gwt.xml and GdxDefinitionSuperdev.gwt.xml:

<inherits name='com.kotcrab.vis.vis-ui' />

Refresh Gradle dependencies.

NOTE for NetBeans users (not required since VisUI 1.1.2): If you are targeting Android you must disable Android Lint in your build.gradle file:

android {
    lintOptions {
        abortOnError false
    }
}

This is because NetBeans invokes Lint before building your project and it will find AWT imports in FileChooser (which is desktop only but Lint doesn't know that). If you don't do it you will get build errors.

LibGDX compatibility

Table bellows shows what version of LibGDX you need for your version of VisUI.

VisUI	LibGDX
1.0.2	1.9.2
1.1.6	1.9.3
1.2.0-SNAPSHOT	1.9.4

Using not matching versions may cause runtime exceptions.

CHANGES file (definitely read before updating!)

##Usage

Using VisUI is pretty simple, to load or unload the skin call:

VisUI.load();
VisUI.dispose();

Create your UI like always, for extra skin features you have to use Vis widgets instead of standard scene2d.ui:

VisUI	Standard scene2d.ui
VisLabel	Label
LinkLabel	-
VisCheckBox	CheckBox
VisList	List
VisProgressBar	ProgressBar
VisRadioButton	-
VisScrollPane	ScrollPane
VisSelectBox	SelectBox
VisSlider	Slider
VisSplitPane	SplitPane
VisTextArea	TextArea
VisTextButton	TextButton
VisImageTextButton	ImageTextButton
VisImageButton	ImageButton
VisTextField	TextField
VisValidatableTextField	-
VisTree	Tree
VisWindow	Window
VisTable	Table
DragPane	-
GridGroup	-
ListView	-
TabbedPane	-
[[NumberSelector	Number selector]]
CollapsibleWidget	-
ButtonBar	-
FlowGroups	-

Using Vis widgets is necessary for proper focus border management. All VisUI widgets constructors do not have Skin argument, they are using VisUI.skin field.

VisTable

VisTable allows to easily set default spacing for vis components, construct it like this:

VisTable table = new VisTable(true);

VisTable also allows adding vertical and horizontal separators to table:

table.addSeparator() //horizontal
table.addSeparator(true) //vertical

Using different SkinScales

Default VisUI skin can be too small for high resolution screens or mobile devices, in that case you can load a upscaled skin version simply by calling:

VisUI.load(SkinScale.X2);

Internal classes

Classes inside com.kotcrab.vis.[...].internal packages are considered private and aren't part of public API. Changes to that classes won't be listed in change log.

Default title align

Default title align for VisWindow and VisDialog is Align.left this can be changed by calling:

VisUI.setDefaultTitleAlign(int align)

Calling this method does not affect windows that have been already created.

##Modifying skin Raw skin files are available if you would like to modify them. After you pack them using LibGDX texture packer, add generated atlas to your project with uiskin.json, default.fnt and font-small.fnt and load it by calling:

VisUI.load(Gdx.files.iternal("path/to/your/modified/files/uiskin.json"))

Consider using USL if you want to extend existing VisUI styles. Read more

See also

• VisEditor - open source 2D game level editor made using VisUI
• gdx-lml-vis - VisUI extension for gdx-lml, LibGDX Markup Language for UI - web demo
• vis-ui-contrib - Community driven extension and utilities for VisUI
• gdx-setup - Alternative gdx-setup application - create your LibGDX projects with ease