GUI creation with Scene2D

We have our game, but you may be wondering why we haven't done anything with the lifecycle of the game, like we did with Snake. Well, that is because we are going to add new screens that will appear at the start and the end. But before we get on to creating and making the new screens, I want to talk about a really useful set of UI tools LibGDX offers for making UIs, Scene2D. Well, what is it?

According the LibGDX wiki page:

"Scene2d is a 2D scene graph for building applications and UIs using a hierarchy of actors."

At its core, Scene2d is made of three classes:

  • Actor: This contains the position, size (rectangular only), origin, scale, rotation, and color.
  • Group: This is an Actor class that can contain other actors and children.
  • Stage: This class has a Camera class, a SpriteBatch class, and a Group class. It orchestrates the updating, drawing, and input handling for all the children in its Group.

Of course, this wouldn't be LibGDX if it stopped there. There is a whole host of useful classes subclassed from the Actor classes.

Here is a link to the reference page for an Actor class: http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/Actor.html.

I suggest that you take a look at the hierarchy so you can get a feel of how powerful Scene2d really is!

The Stage class

Let's have a quick chat about the Stage class before we get on to using it. A Stage class has two core methods that have to be called in order for it to work:

act(float delta);
draw();

The first method, act(), will go through and update all the child Actor classes in the graph. Each Actor has its own act() method, so it is this class that is called. It is useful to know this, as you may want to implement your own Actor implementation and you might want to do some specific work in every frame.

The second method, draw(), will render the UI graph to the screen. As you can imagine, this really simplifies the code of your game!

One last key thing to mention is that the Stage class is also an InputProcessor, this allows for it to fire off input events to the child Actor classes. This means that LibGDX needs to be told to use this class:

Gdx.input.setInputProcessor(stage);

It is really that simple to get up and running with Scene2d, however, more on that later. I would like to finish off telling you about the wonders of Scene2d.

The Actor class

An Actor class keeps track of all sorts of useful information about itself. A particular one I use often is the rotation of the Actor class. This is useful when it comes to rendering the Actor class as Scene2d automatically takes care of the rendering with rotation! The same applies to the scaling as well. This means we can focus more on making our game than building the UI.

The Actor classes also have a concept called Actions associated to them. An Action class is designed to manipulate the Actor class in some way, perhaps to move, scale, rotate, hide, or show it. The list goes on, you can build your own Action classes as well! As an added bonus, there is the ability to chain together a sequence of Action classes either in parallel or in a sequence. This gives us endless possibilities.

So what kind of Actors would we commonly use? Well, I can't speak for everyone who uses it but the classes you will find in my code are:

  • Labels: These are used to display text
  • ImageButtons/Buttons: This UI element has three states, namely normal, pressed, and checked

For more information on the Scene2d.ui components, check out LibGDX's wiki page at https://github.com/libgdx/libgdx/wiki/Scene2d.ui.

Finally, before we dive in and start making some UIs, this is just a small portion of what the Scene2d toolkit can do. We are just looking at the basics for now. We didn't cover, for example, the skinning or the styling aspects that can make the more complex UI easier to manage. With that said, let's crack on and make our new screens.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.96.105