Libgdx with Android For Game Dev
Game Dev Tutorial : Create Shape Circle Action: Add Delta Time
Game Dev -All Game Dev Tutorials
In this tutorial lesson, we are adding a shape circle using the ShapeRenderer code call, and we are going to add action to our Circle Shape, so it moves in a 'zigzag' fashion around the game screen. We are adding some math logic so we can keep the shape in a loop sequence as it travels to the top of the game screen and then reverses and travels to the bottom of the game screen.
All code for this tutorial is at the Example Code section on this page. You can see the action of the Shape Circle at the app shot.
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
Click Create; Parallel Action game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
App Shot - Portrait 5.8" Game Screen
Shape Circle 'Get Delta Time'
Imports & Game Class Code
Firstly, we include the Import Statements for the code calls we are going to be adding for this tutorial. Since we are creating a 'round shape' we include the import for ShapeRenderer. Also included are the standard required imports. And, we include the game class just after the imports, which is
public class MyGdxGame extends ApplicationAdapter for this game code.
Variables
At variables, we declare our game variables, and add our own name for each of them. We include variables for the ShapeRenderer, and also the position and speed values for our shape circle. We include float circleX = 200; and, float circleY = 100;. These are the position coordinates for the shape once it's drawn to the game screen, basically its' starting position, or its set position if your not adding any action to it.
We also set its' x and y frame speed with the;
float xSpeed =4; and,
float ySpeed =2;
These values will set the speed it travels per frame rate. Each device has its' own predetermined frame rate. The xSpeed and ySpeed variables hold the horizontal and vertical speed of the circle, so the values we add determine how it(the circle shape) will travel around the game screen.
Frame Rate vs Seconds Rate
Frame rates work fine if your game is fairly simple, but otherwise, you should consider implementing the Seconds Rate and include getDeltaTime. If you only use Frame rate:
float xSpeed =4; and, float ySpeed =2;, your shape is actioned by the frame rate of the device it's installed on. So, essentially, different devices could render your game shape at different speeds. However, if instead you use - 'Seconds Rate'
float xSpeed =360;
float ySpeed =80;
together with the 'getDeltaTime', your shape is actioned based on the time that has elapsed since the last frame, so now it moves either slower or faster, but the speed will be consistent across all devices it is installed on:
Here's the code:
circleX += xSpeed * Gdx.graphics.getDeltaTime();
circleY += ySpeed * Gdx.graphics.getDeltaTime();
By using seconds: 360, and 80, for your x and y speeds, and then multiplying those by the getDeltaTime, you can create a much more accurate timing for your shape's action. And, with more complex games you definitely want to make sure your game runs at the same speed, especially across different devices.
Create Method
At Create method, we create our instance of the ShapeRenderer, as this is required to include or execute our shape code.
Render Method
In the render() function, we add the code to move the circle by its speed, and then check whether it’s going outside the bounds of the screen. If it does, we simply reverse the speed of the circle, which makes it appear to bounce off the edges of the screen. And, that is how we create a loop like action for our game shape.
To accomplish this, we must add math logic to the game code. The Render method is where we add our 'math logic' for the shape, which includes its' trajectory as it travels around the game screen. Because we want to add some if scenarios, we include math logic 'if' statements. There are many ways to write 'if' statements; for our example, we include if and or statements to our code. If is notated with if, and or is notated with ||. The math logic code looks complicated, but actually it's fairly straightforward.
Math Logic Code
This first line says- if the shape(circleX) goes to less than 0, or greater than the width of the game screen, then reverse its' direction. Remember, the left bottom of the game screen is position 0.0. And X refers to screen width.
To reverse the shape we use the -1; and, the same for line two, the getHeight code.
Basically the same if statement but for its' height trajectory on the game screen. So basically, the shape will go to the sides of the game screen and then reverse direction and continue in a zig zag fashion based on the values we have set. It essentially travels in a continual loop around the game screen because of the 'math logic' we have added.
if(circleX < 0 || circleX > Gdx.graphics.getWidth()){
xSpeed *= -1;
}
//height, if shape is less than 0 or greater than height of screen, reverse it
if(circleY < 0 || circleY > Gdx.graphics.getHeight()){
ySpeed *= -1;
}
At Render, we also set our screen color and the circle shape color. Lastly, we draw our shape to the game screen with the code:shapeRenderer.circle(circleX,circleY.70).
Dispose Method
At dispose method, we dispose of our game assets with this code:
shapeRenderer.dispose();
Timing is also important for our actioned shape. If we only add code for and set the x and y frame rate speed(we used 4 and 2) function for our shape circle instead of using seconds rate speed together with getDeltaTime code, our shape can only move at frame rate which can be different on different mobile devices. This is not what we want. So, to make sure it does move around the screen at the same x and y speed on all mobile devices, we implement the seconds rate along with getDeltaTime code function. This way, the shape circle moves at a speed that factors in the amount of time that has elapsed since the last frame.
LibGDX lets us use - Gdx.graphics.getDeltaTime() function, which returns how much time has elapsed since the last frame. To make this work, we should store our xSpeed and ySpeed as the distance to move per second. In this example, we use 360 and 80 for our x and y 'seconds rate', with this code.
float xSpeed =360;
float ySpeed =80;
Then we should multiply those rates by the delta time to get the distance for the current frame:
circleX += xSpeed * Gdx.graphics.getDeltaTime();
circleY += ySpeed * Gdx.graphics.getDeltaTime();
Now our circle will move at the same speed regardless of what the frame rate of the device is.
Game Dev -All Game Dev Tutorials
App Project Name: Shape Circle Delta Time
In this tutorial lesson, we are adding a shape circle using the ShapeRenderer code call, and we are going to add action to our Circle Shape, so it moves in a 'zigzag' fashion around the game screen. We are adding some math logic so we can keep the shape in a loop sequence as it travels to the top of the game screen and then reverses and travels to the bottom of the game screen.
All code for this tutorial is at the Example Code section on this page. You can see the action of the Shape Circle at the app shot.
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
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, ShapeCircle_DeltaTime(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.example_shape_deltatime'.Click Create; Parallel Action game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
App Shot - Portrait 5.8" Game Screen
Shape Circle 'Get Delta Time'
Code For This Tutorial
Imports & Game Class Code
Firstly, we include the Import Statements for the code calls we are going to be adding for this tutorial. Since we are creating a 'round shape' we include the import for ShapeRenderer. Also included are the standard required imports. And, we include the game class just after the imports, which is
public class MyGdxGame extends ApplicationAdapter for this game code.
Variables
At variables, we declare our game variables, and add our own name for each of them. We include variables for the ShapeRenderer, and also the position and speed values for our shape circle. We include float circleX = 200; and, float circleY = 100;. These are the position coordinates for the shape once it's drawn to the game screen, basically its' starting position, or its set position if your not adding any action to it.
We also set its' x and y frame speed with the;
float xSpeed =4; and,
float ySpeed =2;
These values will set the speed it travels per frame rate. Each device has its' own predetermined frame rate. The xSpeed and ySpeed variables hold the horizontal and vertical speed of the circle, so the values we add determine how it(the circle shape) will travel around the game screen.
Frame Rate vs Seconds Rate
Frame rates work fine if your game is fairly simple, but otherwise, you should consider implementing the Seconds Rate and include getDeltaTime. If you only use Frame rate:
float xSpeed =4; and, float ySpeed =2;, your shape is actioned by the frame rate of the device it's installed on. So, essentially, different devices could render your game shape at different speeds. However, if instead you use - 'Seconds Rate'
float xSpeed =360;
float ySpeed =80;
together with the 'getDeltaTime', your shape is actioned based on the time that has elapsed since the last frame, so now it moves either slower or faster, but the speed will be consistent across all devices it is installed on:
Here's the code:
circleX += xSpeed * Gdx.graphics.getDeltaTime();
circleY += ySpeed * Gdx.graphics.getDeltaTime();
By using seconds: 360, and 80, for your x and y speeds, and then multiplying those by the getDeltaTime, you can create a much more accurate timing for your shape's action. And, with more complex games you definitely want to make sure your game runs at the same speed, especially across different devices.
Create Method
At Create method, we create our instance of the ShapeRenderer, as this is required to include or execute our shape code.
Render Method
In the render() function, we add the code to move the circle by its speed, and then check whether it’s going outside the bounds of the screen. If it does, we simply reverse the speed of the circle, which makes it appear to bounce off the edges of the screen. And, that is how we create a loop like action for our game shape.
To accomplish this, we must add math logic to the game code. The Render method is where we add our 'math logic' for the shape, which includes its' trajectory as it travels around the game screen. Because we want to add some if scenarios, we include math logic 'if' statements. There are many ways to write 'if' statements; for our example, we include if and or statements to our code. If is notated with if, and or is notated with ||. The math logic code looks complicated, but actually it's fairly straightforward.
Math Logic Code
This first line says- if the shape(circleX) goes to less than 0, or greater than the width of the game screen, then reverse its' direction. Remember, the left bottom of the game screen is position 0.0. And X refers to screen width.
To reverse the shape we use the -1; and, the same for line two, the getHeight code.
Basically the same if statement but for its' height trajectory on the game screen. So basically, the shape will go to the sides of the game screen and then reverse direction and continue in a zig zag fashion based on the values we have set. It essentially travels in a continual loop around the game screen because of the 'math logic' we have added.
if(circleX < 0 || circleX > Gdx.graphics.getWidth()){
xSpeed *= -1;
}
//height, if shape is less than 0 or greater than height of screen, reverse it
if(circleY < 0 || circleY > Gdx.graphics.getHeight()){
ySpeed *= -1;
}
At Render, we also set our screen color and the circle shape color. Lastly, we draw our shape to the game screen with the code:shapeRenderer.circle(circleX,circleY.70).
Dispose Method
At dispose method, we dispose of our game assets with this code:
shapeRenderer.dispose();
Summary
With this tutorial, we again are creating a shape and adding action to it. By including some math logic we can have our 'shape circle' roll across the game screen in a zig zag fashion, and watch as it moves up the screen(portrait mode) and then once it gets to the top of the game screen, it reverses, and zig zags back down the game screen. Basically, we have created a loop for our shape circle.Timing is also important for our actioned shape. If we only add code for and set the x and y frame rate speed(we used 4 and 2) function for our shape circle instead of using seconds rate speed together with getDeltaTime code, our shape can only move at frame rate which can be different on different mobile devices. This is not what we want. So, to make sure it does move around the screen at the same x and y speed on all mobile devices, we implement the seconds rate along with getDeltaTime code function. This way, the shape circle moves at a speed that factors in the amount of time that has elapsed since the last frame.
LibGDX lets us use - Gdx.graphics.getDeltaTime() function, which returns how much time has elapsed since the last frame. To make this work, we should store our xSpeed and ySpeed as the distance to move per second. In this example, we use 360 and 80 for our x and y 'seconds rate', with this code.
float xSpeed =360;
float ySpeed =80;
Then we should multiply those rates by the delta time to get the distance for the current frame:
circleX += xSpeed * Gdx.graphics.getDeltaTime();
circleY += ySpeed * Gdx.graphics.getDeltaTime();
Now our circle will move at the same speed regardless of what the frame rate of the device is.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.