Are you ready to enhance your libGDX game or application with stunning user interfaces? Then you’re in luck! VisUI is a powerful library that allows developers to create visually appealing UIs using the scene2d.ui framework. In this blog post, we’ll walk you through the process of using VisUI, troubleshoot potential issues, and explore some of its exciting features.

What is VisUI?

VisUI is a scene2d.ui skin library that includes engaging widgets like color pickers and file choosers. This library is packed with modified scene2d.ui widgets that add extra functionality for an improved user experience, such as focus borders and background changes on hover or click. Best of all, VisUI is licensed under the Apache 2.0 license, giving you the freedom to use it in commercial and non-commercial projects.

Adding VisUI to Your Project

Integrating VisUI into your project is a breeze. Follow these simple steps:

1. Using Gradle for Dependency Management

If you’re unfamiliar with managing dependencies with Gradle, be sure to check out the libGDX documentation. Alternatively, you can download the JAR file from the Maven repository.

2. Manual Gradle Setup

• Open your build.gradle file in the root of your project.
• Add the following line in the ext section under allprojects:

ext.visuiVersion = '1.X.X'

• Ensure to check the CHANGES file to find the compatible version of VisUI for your libGDX version. Mismatched versions may lead to runtime exceptions.

3. Core and HTML Dependencies

api 'com.kotcrab.vis:vis-ui:$visuiVersion'

If you are using GWT, you’ll also need:

api 'com.kotcrab.vis:vis-ui:$visuiVersion:sources'

Add the following lines to your GdxDefinition.gwt.xml file:

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

Don’t forget to refresh your Gradle dependencies!

Using VisUI

Getting started with VisUI is straightforward. To load or unload the skin, use the following commands:

VisUI.load(); // Load skin
VisUI.dispose(); // Unload skin

When creating your UI, use Vis widgets instead of standard scene2d.ui widgets for enhanced features. Here’s a breakdown of some common VisUI widgets:

• VisLabel vs. Label
• VisCheckBox vs. CheckBox
• VisList vs. List
• VisProgressBar vs. ProgressBar
• VisTextButton vs. TextButton

Understanding the Code: An Analogy

Think of your application as a restaurant. In this scenario, the dishes served are your UI elements. VisUI provides an innovative chef that specializes in aesthetic presentations (Vis widgets) compared to regular cooks (standard scene2d.ui widgets). By opting for VisUI, you’re ensuring your dishes not only taste good but also look great, thereby improving your guests’ dining experience (user satisfaction).

Customizing VisUI

VisTable allows you to easily set default spacing for your Vis components. Create it like this:

VisTable table = new VisTable(true);

You can also add vertical and horizontal separators for a clean layout:

table.addSeparator(); // Horizontal separator
table.addSeparator(true); // Vertical separator

Troubleshooting

Some common issues that you might face while using VisUI include:

• Runtime exceptions due to version mismatch: Always make sure the versions of VisUI and libGDX you are using are compatible.
• UI elements not rendering correctly: Ensure you are using the correct VisUI widgets instead of standard widgets for special features.
• Scale issues on high-resolution displays: Use VisUI.load(SkinScale.X2); to upscale your skin for better visibility.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

VisUI not only beautifies your user interfaces but also enhances functionality. By following the guided steps outlined above, you can seamlessly integrate VisUI into your libGDX project. Remember, at fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.