Libgdx with Android For Game Dev
Game Dev Tutorial : Implement ShapeRenderer with Camera and Viewport
Game Dev -All Game Dev Tutorials
In our previous tutorial, we implemented a ShapeRenderer and drew a circle, a round shape ball. We created our game screen code and it worked fine, the shape rolled across the game screen. But what happens when we resize our game screen - turn the phone and view our game screen in the horizontal orientation or mode. Interestingly, the round shape ball now looks squished in the landscape mode on our game screen. And, when we switch back to portrait mode, the ball once again appears round and with proper aspect ratio as it rolls across the game screen. To resolve this issue with the squished round shape, we can add to our game code a Orthographic Camera, and a Viewport.
All code for this tutorial is at the Example Code section on this page. You can view the app shot to see the squished round shape in landscape mode.
Click Create; Round Shape Viewport Camera game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
App Shot Game Screen Portrait 5.8"
In this first app shot, the shape is properly displayed in the portrait screen orientation.
In this next app shot, the screen is now in Landscape orientation, and the round shape is not displayed properly, it looks squished.
In this 3rd app shot, the image is properly shown on the screen, not squished, as it was in the previous screen shot in the same landscape orientation. The camera and viewport have been added to the game code.
To add the Camera, and Viewport to our game code we must include it at: Imports, Variables, Create, and the Render methods, as shown in these next images of the code.
At Imports, we must include the import statements for Orthographic Camera and the Viewport, in this case we are using the ExtendViewport, so we include that import and then we declare/add our game variables for Camera and Viewport. We simply add the OrthographicCamera, and then create a variable name for it. You can name it as you like. Then for the ExtendViewport, we do the same.
At Create method, we create instances of the Camera and Viewport.
And, in Render method, we add the 'camera.update' code, and code to 'set the projection matrix', which is required so the camera and viewport work together to render shapes and images to the game screen in their proper aspect ratios. And, lastly, include the code for the 'resize', again so the screen updates as it should when it gets resized which happens when we go from portrait mode to landscape mode, or it could be a larger or smaller sreen size.
This can happen if your app is installed on a different size device than what you coded it on. For example, you code and install it on your 5.8 screen size device and the image looks fine, but it could also be installed on devices that have a larger or smaller screen size. If you DON'T have a viewport or camera code added, then most likely, your game assets(shapes and image) will appear out of context, like squished or distorted looking. Adding the Orthographic Camera and Viewport code will keep your game assets looking proper no matter what screen size or device they are installed on.
Another thing to mention is this code at the Create method, the ExtendViewport.
viewport = new ExtendViewport(800,600,camera);
Here we use 800,600 for our screen width and height proportions, however, you can change these if you want; for example, 1200,800, or 600,400. As you adjust these numbers and RUN your app code you'll notice the image will increase or decrease, which is fine. Changing the width and height values will not affect the aspect ratio of your image or shape, it only changes the overall size of them.
And, with some viewports like ScreenViewport, you don't need to set the values for width and height. With this type of viewport, it tells the system to set the screen size automatically to the device screen size. What type of viewport you use, depends on the style of your game. It is common to use two or more viewports in a game app; one for the game play, and one for the fixed assets. What you decide to incorporate into your game app, will depend on its' complexity.
This is common when a viewport and camera are not added to your game code when you are working with game assets like images. Although your game can be targeted for one particular orientation like Portrait Mode, having images that look proper will give your game more appeal, and look more professional. Implementing the Orthographic Camera , and Viewport, with your game code is good coding practice no matter what type of game you plan to market.
Game Dev -All Game Dev Tutorials
App Project Name: Round Shape Viewport Camera
In our previous tutorial, we implemented a ShapeRenderer and drew a circle, a round shape ball. We created our game screen code and it worked fine, the shape rolled across the game screen. But what happens when we resize our game screen - turn the phone and view our game screen in the horizontal orientation or mode. Interestingly, the round shape ball now looks squished in the landscape mode on our game screen. And, when we switch back to portrait mode, the ball once again appears round and with proper aspect ratio as it rolls across the game screen. To resolve this issue with the squished round shape, we can add to our game code a Orthographic Camera, and a Viewport.
All code for this tutorial is at the Example Code section on this page. You can view the app shot to see the squished round shape in landscape mode.
Create our Game App Screen
We are creating a new app for this tutorial. First, we must create our new mobile game app, so in AIDE, at the AppProject file hierachy, Choose Create New Project, select Mobile Game, and New Mobile Game; then add the App name, Round Shape Viewport Camera(Note: no spaces in the app name(can use _ ), or you can add spaces after you create it; Just Goto: the 'AppProject' folder; just select the App Name, and then select rename). Next, add the package name, 'com.aac.round_shape_viewport_camera'.Click Create; Round Shape Viewport Camera game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
App Shot Game Screen Portrait 5.8"
In this first app shot, the shape is properly displayed in the portrait screen orientation.
In this next app shot, the screen is now in Landscape orientation, and the round shape is not displayed properly, it looks squished.
In this 3rd app shot, the image is properly shown on the screen, not squished, as it was in the previous screen shot in the same landscape orientation. The camera and viewport have been added to the game code.
Code For This Tutorial
To add the Camera, and Viewport to our game code we must include it at: Imports, Variables, Create, and the Render methods, as shown in these next images of the code.
At Imports, we must include the import statements for Orthographic Camera and the Viewport, in this case we are using the ExtendViewport, so we include that import and then we declare/add our game variables for Camera and Viewport. We simply add the OrthographicCamera, and then create a variable name for it. You can name it as you like. Then for the ExtendViewport, we do the same.
At Create method, we create instances of the Camera and Viewport.
And, in Render method, we add the 'camera.update' code, and code to 'set the projection matrix', which is required so the camera and viewport work together to render shapes and images to the game screen in their proper aspect ratios. And, lastly, include the code for the 'resize', again so the screen updates as it should when it gets resized which happens when we go from portrait mode to landscape mode, or it could be a larger or smaller sreen size.
This can happen if your app is installed on a different size device than what you coded it on. For example, you code and install it on your 5.8 screen size device and the image looks fine, but it could also be installed on devices that have a larger or smaller screen size. If you DON'T have a viewport or camera code added, then most likely, your game assets(shapes and image) will appear out of context, like squished or distorted looking. Adding the Orthographic Camera and Viewport code will keep your game assets looking proper no matter what screen size or device they are installed on.
Another thing to mention is this code at the Create method, the ExtendViewport.
viewport = new ExtendViewport(800,600,camera);
Here we use 800,600 for our screen width and height proportions, however, you can change these if you want; for example, 1200,800, or 600,400. As you adjust these numbers and RUN your app code you'll notice the image will increase or decrease, which is fine. Changing the width and height values will not affect the aspect ratio of your image or shape, it only changes the overall size of them.
And, with some viewports like ScreenViewport, you don't need to set the values for width and height. With this type of viewport, it tells the system to set the screen size automatically to the device screen size. What type of viewport you use, depends on the style of your game. It is common to use two or more viewports in a game app; one for the game play, and one for the fixed assets. What you decide to incorporate into your game app, will depend on its' complexity.
Summary
In this tutorial, we learned how to add a Viewport, and Camera to our game code. These are important when working with images and assets that you want to scale properly in your game play for all screen sizes and orientations. Adding both of these makes our game screen adjust properly whenever the game screen size is changed from portrait to landscape, or landscape to portrait. If we don't add the viewport and camera, the Shape will continue to roll across the screen as we want it to, however, it will appear squished or distorted; in particular, in Landscape mode.This is common when a viewport and camera are not added to your game code when you are working with game assets like images. Although your game can be targeted for one particular orientation like Portrait Mode, having images that look proper will give your game more appeal, and look more professional. Implementing the Orthographic Camera , and Viewport, with your game code is good coding practice no matter what type of game you plan to market.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.