Configuring the Screen and Viewport dimensions

Before we start we should determine the window size of the game for the desktop project and the camera's viewport. With LibGDX you can use an Orthographic Camera to which you assign a viewport. The viewport basically determines the (x,y) dimensions of the game "world" that the user can see. When the game is displayed on a device or in a window on our desktop the graphics get stretched to fit the screen. The original MSX version of the game had a Viewport of 256 x 192 pixels (aspect ratio 4:3). But because the Aspect Ratio on my own Android phone (5:3) and tablet (8:5) where bigger I decided to set the Viewport to 312 x 192 pixels. This would prevent that the graphics would get stretched too much horizontally on a device and be out of proportion compared to the original graphics.

More info in the LibGDX wiki on:
Orthographic Camera
Viewports


If you don't get it yet don't worry. Let's put everything down in code and play with it and I think it should get more understandable that way :-)
In the package explorer open up the src directories of the core and desktop project it should look something like this:


Right-click on the com.norakomi.mambow2 package (or whatever name you gave it), create a new class called Variables and add the following Variables to the class.

V_WIDTH & V_HEIGHT are used to set the dimensions of the desktop window in which the game will run. Setting these configuration is done in DesktopLauncher.java located in the Desktop project like this:


What is happening here?
On line 5 the a LwjglApplicationConfiguration object (config) is created that is used to determine the width and height of the desktop window when our game gets initialized. We want that window to have the dimensions of the V_WIDTH & V_HEIGHT that we set in our Variables class and that is done on line 6+7.
Finally (on line 8) our Application gets initialized with MambowGame.java as our starting class using the configurations that we defined in the previous lines.
The import statement - import static com.norakomi.mambow2.Variables.*; - imports V_WIDTH & V_HEIGHT from our Variables class so that we don't have to define them in the DesktopLauncher class.
Now to test if everything is working the way it's supposed to be right-click on the DesktopLauncher.java file and click on Run as -> Java Application and you should now see a 800x480 window displaying the BadLogic logo:


The Orthographic Camera

Now that we have set up the dimension of our window let's configure our camera. The LibGDX setup app automatically creates a starting class for our game in our core project that by default contains some code to display the Badlogic logo on a red background. When we create a new project with the LibGDX setup app we gave our starting class the name ManbowGame. Take a look at the code of this class and change it into the following (don't delete package declaration and imports):

Let's analyze what's happening here:
On line 1 we import our Variables class again so that we can use the VIEWPORT_WIDTH & VIEWPORT_HEIGHT variables that we defined earlier. When the instance of our ManbowGame class (as created in the DesktopLauncher) gets initialized(run) it first passes though the code in the create() method - just once - before going to the render() method. The render method will be "looped" and runs once every frame update (around 60 times/sec).
On line 11 the first parameter .setToOrthotakes in a boolean value that determines whether a y-up axis system should be used or not and the second and third parameters determine the viewport's width and height.
On line 12+13 we create a SpriteBatch - which is used for drawing textures on screen - and set it's projection matrix to match the camera's viewport.
What this basically does is it sets the dimensions of our "canvas" where we draw our graphics on and that will be visible in our desktop window (or device screen if we would run it on a phone or tablet). By default the SpriteBatch projection matrix dimensions are set to the dimension of the window size (800x480) that we have configured in our DesktopLauncher. If we would run our project without setting the projection matrix to cam.combined our "canvas" we could draw graphics on would be much larger than the viewport dimensions (312x192) that we are setting it to when we hook up the projection matrix to the camera.


Now to finish our code analysis:
In our render() method on line 19/20 we set a glClearColor that will be used to clear the screen (line 20) at every frame update before drawing the graphics on screen again.
glClearColor takes in R,G,B values between 0 and 1 for the amount of red, green and blue color that will be used and the fourth parameter determines the Alpha value (also between 0-1) of which 0 would be fully transparent and 1 fully opaque.
At line 21-23 we are drawing a texture (as created on line 14) on screen at x,y coordinates (0,0) using the SpriteBatch. By definition whenever you want to draw something on screen using a SpriteBatch you have to put the code that takes care of drawing - sb.draw... - between the sb.begin() and sb.end() call.
Run as -> Java application) you'll see the BadlogicGames logo way bigger than before due to our smaller viewport dimensions.


Okay, now that we've setup the basics let's see if we add the player's ship and make it move around the screen using the arrow keys.
We'll do that in the next section.




-->