We will be adding the following background to the game:
But it would be nice to make the background look as if it is moving instead of a static one. For that I will be using the following technique: I will show two copies of the image and keep two rectangles that will determine the current position where each image should be rendered. We will save the background image inside the $PROJECT_ROOT/android/assets/ path, and name it background.png. Let’s keep track of the image path in our Constants class:
Now let’s create our Background class. Like I said before, it will keep a reference to a TextureRegion objects with two Rectangle objects. It will update the bounds of each Rectangle in the -x direction at a constant speed and when one of the Rectangle bounds reaches the end of the screen, reset both boundaries. Note that this class extends Actor and not our GameActor. This is because we don’t really need any of the box2d elements since the background is not really a game character:
Now on to the GameStage. We need to get rid of our Box2dDebugRenderer (the ugly boxes where just for debugging purposes). We will also update the camera viewport and begin translating our box2d coordinates to screen coordinates (in pixels).
For now, we will only render our newly created Background:
Run the game and you will see a nice, smooth animation of a moving background just like the video below:
Whoa! So what happened to the game? The ground, runner and enemies are still there, we are just not rendering them anymore with the Box2dDebugRenderer. That means the game started, an enemy came towards the runner and probably hit him without us noticing :D.
Add Texture to the Ground
For the ground, I will pretty much follow the same logic we used for the background. This will be our image for the ground:
I know that I should have all my textures in an atlas but I am making an exception with the ground so I can have a good image quality since I will stretch the image a lot. Let’s keep track of the image name (ground.png inside the assets directory) in our Constants class along with the previous one:
Now, one thing to note is that when we rendered the Background we used rectangles the size of the screen to know where to render. That was fine since we got a nice image which has the same size as the screen measurements we are working with. We don’t really want to do that for the other GameActor objects since we will be working with smaller images. In order to know the current Rectangle that we are supposed to render in screen coordinates, I am going to add a screenRectangle to my GameActor and update it in its act() method. I’m also going to check if the GameActor’s Body was destroyed by the GameStage (this happens when an Enemy or the Runner go out of bounds:
I mentioned before that I am translating 1 meter as 32 pixels. You can translate the units using whatever ratio works for you. The value goes in the Constants:
Since we are going to be working with the body’s position, we should change the way we create our Ground in WorldUtils. Before doing so, we have to match the GroundUserData constructor with its parent’s to store the width and height:
Now we can make the change in WorldUtils:
And now we apply pretty much the same logic we applied to the background in order to render the Ground with the exception of the texture loading (Note that I’m being lazy and should reuse the same methods from the Background class instead of copying them):
Now run the game and you should see the Background getting rendered along with the Ground just like it’s shown on the video below:
The game looks really good so far, even though we lost our characters :D. Let’s work with that on the next part.
If you have any questions or comments please let me know in the comments section. Please keep in mind that this was my way of solving the box2d to scene2d graphics conversion and I know that there are probably better ways to implement these kind of animations.