Menu Progress

I've been working on adding functionality to the menu buttons. The most recent challenge I encountered was adding a slider for people to adjust the mass of a body. Like the buttons, a Slider is a widget included in scene2d ui. It's relatively simple to use once you get it set up. I found an example on the libgdx website and built mine off that model. Here's the code used to create a slider:

Slider slider = new Slider(min, max, step_size, false, skin);

Here, min and max are the minimum and maximum values of the slider and step_size is the step size in between. For example, if min = 0, max = 10, and step_size = 1, then the values you could get from the slider would be {0, 1, 2, 3, ... , 9, 10}. The fourth parameter (false here) corresponds to whether the slider should be displayed vertically. The skin is the reference to the .json file that determines graphics. The skin object is declared like this:

Skin skin = new Skin(Gdx.files.internal("data/uiskin.json"));

In this same example I found, I navigated to uiskin.json to figure out how this worked. It turns out that it's very similar to CSS. The .json file references the .atlas file that contains information for a .png texture atlas. Basically, the .png file is a big picture with a bunch of small pictures stitched together. The .atlas file tells the program where all of those pictures are using coordinates, dimensions, and angles. Then the .json file has entries that look like the below code snippet that tell the program what pictures should be used for what objects (such as slider elements or buttons).

{

"com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle": {
"default-horizontal": { "background": "default-slider", "knob": "default-slider-knob" },
"default-vertical": { "background": "default-slider", "knob": "default-round-large" }

}

I used this to create a slider that can be used to adjust the mass of a selected body. The slider actually adjusts the radius and then the mass is adjusted accordingly using volume and density. The min and max values of the slider are the respective radii of the MIN_MASS and MAX_MASS constants defined in the main file. The step size is 0.01 so that users can adjust to a fine precision. The skin is currently using the same .png file from the example I found as a temporary placeholder until we make our own graphics to replace it.

Here's a screenshot of the slider. Like before, disregard the yellow and blue lines. Those are temporary and just used for debugging.

The example referred to in this post can be seen here:
https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests/src/com/badlogic/gdx/tests/UITest.java
https://github.com/libgdx/libgdx/tree/master/tests/gdx-tests-android/assets/data
(the second link points to the folder containing uiskin.json, uiskin.png, and uiskin.atlas)