Libgdx Demo Application With Account Kit Huawei ID Authentication Part 2

Erdal Kaymak
Huawei Developers
Published in
5 min readJan 4, 2022

--

Introduction

If you did not read the first part of this article check this link. In this article, we are creating our screens and understanding libgdx advance topics. After that, we call our Account Kit functions from our screens using the interface.

DarkSpaceGame Class

This is our main class calling from the launchers. This class extends from the Libgdx Game class. We use this game class because of using screens and setting it.

We pass our interface to the constructor. That way we can use the interface from our screens.

AssetManager: Loads and stores assets like textures, bitmap fonts, tile maps, sounds, music, and so on.

SpriteBatch: It gives us the ability to draw so we can draw textures and fonts in our libgdx application.

(in line 15) We use the setScreen method to set our first screen in the create method.

(in line 19–20) We dispose of the AssetManager and SpriteBatch.

Loading Screen

In this screen we load our texture, fonts, sounds using the asset manager and we use Shape Renderer to create our progress bar animation. After this screen, we set our new screen by checking whether the user can be logged in or not.

We extend our screen from ScreenAdapter class. This class implements the Screen interface.

Orthographic Camera: When we use an orthographic camera all objects are projected on a single plane regardless of their distance, so we can create 2d games in 3d space.

Viewport: It is used to support multiple resolutions and aspect ratios.

Fit Viewport: It fits the camera to our screen.

Asset Descriptor: We use this class for matching our resource path.

(in line 26) We call our signInSilently method to control the user is logged in or not.

(in line 38–44) This method is important because it is calling every delta time. That means that libgdx calls that method between two frames. In this override method, firstly we clear our screen, and then we applied our viewport, after that, we set our Shape Renderer with camera combined. That way the Shape Renderer knows the camera properties. We should draw our render object between the render begin(in line 41) and the render end (in line 43 ) methods.

(in line 58) We override the resize method to update our viewport with a new height, width, and also center our camera.

(in line 88–94) I create a draw method for drawing our rectangle with the Shape Render object and create a progress bar animation with progress time.

Menu Screen Base Class

I create this class to extend from other screens such as Login Screen and Menu Screen.

Stage: Stage is a class that has a camera sprites batch and a root group. And it also handles drawings of our actors and distributes input events.

Input Processor: It is used for handling input and stage implements input process so we can just use the stage as input process (in line 10).

Actor: It is a 2D scene graph node. It has a position, rectangular size, origin, scale, rotation, Z index, and color.

(in line 11) We should add our actor to the stage with the stage addActor method.

(in line 19–23) In the render method, we should call stage.act() (line 21) and stage.draw() (in line 22 ) methods to draw our stage.

(in line 14) We over method from other screens when extending that class.

Texture Atlas

Texture Atlas loads images from textures created by Texture Packer. We use Texture Packer which is a GDX tool.

Texture Packer is used to pack all images in one big image.

We call the TexturePacker.process( ) to process our images for one big image with an Atlas File. We should create that class under a desktop folder like a DesktopLauncher. After running the main method we can get the atlas file with the atlas image.

Login Screen

On this screen, we logged in our user with Huawei Id authentication.

We extend this screen from MenuScreenBase and override the createUi() function.

Texture Atlas has a region names with that name used for Texture Region. It is a rectangle of a specific small picture to get Atlas we use assetManager.get()(in line 17 ) To get the region we use gamePlayAtlas.findRegion(Specific region name) (in line 19,20).

(In createUi() function) We create our table with a UI skin JSON file. That JSON file is used for the theme of our table. After that, we create buttons to add our table.

(in line 26–39) We call our interface onSignInButtonClicked() method to start intent from Account Kit. We trigger the AndroidLauncher onSignInButtonClicked () function that way. Then we can continue the Account Kit Screen to write our specific information logged in with Huawei Id.

(in line 70–77) After logging in we control the user is logged then continue with Menu Screen or if the user is not logged in then we continue with the Login Screen.

Menu Screen

We extend this screen from MenuScreenBase and override the createUi() function.

In createUi() function We create our table with a UI skin JSON file. That JSON file is used for the theme of our table. After that, we create buttons to add our table. We have 4 buttons. Play Button is used for starting the game by setting Game Screen (in line 15).

Conclusion

Now we learned how to implement and use the Account Kit with the libgdx application. Also, we learned how to create libgdx applications and how to use their futures. If you want to learn more about libgdx and its services, you can check this link.

I am looking forward to meeting you again until that time take care of yourself!

References:

--

--