fbpx

Teki – The background

Reading Time: 4 minutes
We have already an intstalled project, what we been have reformatted to Kotlin, and we have also a nice icon for our app, but the background is still red, and to be honest, this not what we want, of course 😉

In this chapter we are going to talk about how to implement in our game the left moving background. Basically we will have 3 Textures, and the accelerating velocity.

Step 1 – Clear the code

Our first thing, what we are going to do is to delete the initially generated code, so the red background. From the render() method delete this 2 lines.

Gdx.gl.glClearColor(1f, 0f, 0f, 1f) Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT)

The rest can stay.

Step 2 – Get width and height

To have an always responsive background on all of the resolutions of the Android phones, we are going to save the current width and the height of the screen. So let’s define 2 variables at the beginning of the TekiTutorial::class.

var screenWidth = 0
var screenHeight = 0

The GDX library at the startup defines the width and the height of the screen of our phone. To have later our code cleaner and more transparent, we are going to save in our varaibles, so we don’t have write a longer code all the time. This 2 lines goes to the create() method.

screenWidth = Gdx.graphics.width
screenHeight = Gdx.graphics.height

Step 3 – Add the Textures

We will add the background as a SpriteBatch. The batch can be an image, a character or as in our case a background and we use to manage displaying animation. Add the batch!!.begin() line to the render() method and this tells the render that we are going to start displaying sprites from now.

In this case, in our game we will use a mutableList of Textures. Kotlin MutableList is an interface and generic collection of elements.

MutableList interface is mutable in nature. It inherits form Collection<T> class. The methods of MutableList interface supports both read and write functionalities. Once the elements in MutableList have declared, it can be added more elements in it or removed, so it has no fixed size length.

Definition

Define it at the beginning of the TekiTutorial::class.

var backgrounds = mutableListOf<Texture>()

We are going to define one more variable, what stores the number of the background images. It goes again to the beginning of the TekiTutorial::class.

val numberOfBackgrounds = 3

create()

In the create() method we will have a for loop, what is going to iterate from 1 until numberOfBackgrounds as a range. This loop will add the background images to our mutableList of Textures.

for(i in 1..numberOfBackgrounds)
{
    backgrounds.add(Texture(“background_${i}.png”))
}

Step 4 – Moving

Before we draw out the images, we have to set the moving. It is needed bacause for the draw() method we need 2 things. First which image should be drawn, and this image where should be. We have defined already the MutableList for the Textures, so now we need an Array for the positions. It’s going to be a FloatArray. Define it it in the TekiTutorial::class.

var backgroundX = FloatArray(numberOfBackgrounds)

The game gets faster over time, but now we need only a constant velocity variable. The initial value is going to be 12. Define it after the backgroundX.

var velocity = 12

create()

We are going to upload the positions using a for-loop at the end of the create() method.

for (i in 0 until numberOfBackgrounds)
{
    backgroundX[i] = screenWidth.toFloat() * i
}

render()

In the render() method our task will be more difficult, but I hope it will be understandable.

We have defined the the initial position using the screenWidth varible and we have put the images next to each other. The problem with this is, that between the 1. and 2. images there are a one pixel line overlap. When we draw the images we define the bottom left point of the batch, and from this point the width and the height. The first images X position goes to the coordinate 0 and the width is equal to the screenWidth. The bottom left point of the 2. image goes to the position of the screenWidth.

Aware of this we have to define a separate position for the first image. It means, when this image is 100% out of the screen, it goes to max value of the FloatArray of backgroundX, plus the screenWidth, minus the velocity. For the other images it is similar, but without the velocity.

If the position X is higher then the screenWidth in minus, then we should just subtract from it the velocity. With this line we can reach a left moving background, and it will look like our Teki runs.

backgroundX[i] = backgroundX[i] – velocity

… and whole for-loop of the moving.


for-loop of the moving
draw()

Before this for-loop will be the draw() of the backround images.

for(i in 0 until numberOfBackgrounds)
{
    drawBackground(i)
}


drawBackground()

The order of the lines is very important, otherwise during the run of the game can be some gaps between the background images.

TekiTutorial::class

Finally here is the whole source code for the TekiTutorial::class.


drawBackground()

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Click to rate this post!
[Total: 0 Average: 0]
Follow and like us:

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications