Teki – The barriers

In the very last chapter we implemented in our Teki Android game tutorial the jump and the crawl movement. So our heroine, Teki is closer and closer the have the chance to avoid the barriers.

In this chapter we gonna add this barriers to our game. A barrier can be a colorful, flying bird with different flight altitude or a stone on the ground. Further grit to the birds are flapping every second. 😉

Step 1 – The Textures

As always we are going to add first the Textures of the barriers. Basically we have birds and stones. In case of the birds we have up and down flapstates. There are several ways to solve how to add the images. My solution is to have 2 mutableList of Textures. One for the upflaps and one for the downflaps. Both of them contains the same stones as well.

If you have a better solution, leave me a comment. 😉
The Textures

Add this 2 lines to the beginning of the TekiTutorial::class, where we have declared the other variables.

var downFlapBirdsAndStones = mutableListOf<Texture>()
var upFlapBirdsAndStones = mutableListOf<Texture>()

create()

Still the MutableLists are empty, so now we gonna add for them the images. We have 10 different barriers, so we will add 10 different images to the MutableLists.

downFlapBirdsAndStones.add(Texture(“bird_11.png”)) downFlapBirdsAndStones.add(Texture(“bird_21.png”)) downFlapBirdsAndStones.add(Texture(“bird_31.png”)) downFlapBirdsAndStones.add(Texture(“bird_41.png”)) downFlapBirdsAndStones.add(Texture(“bird_51.png”)) downFlapBirdsAndStones.add(Texture(“bird_61.png”)) downFlapBirdsAndStones.add(Texture(“stone_1.png”)) downFlapBirdsAndStones.add(Texture(“stone_2.png”)) downFlapBirdsAndStones.add(Texture(“stone_3.png”)) downFlapBirdsAndStones.add(Texture(“stone_4.png”)) upFlapBirdsAndStones.add(Texture(“bird_12.png”)) upFlapBirdsAndStones.add(Texture(“bird_22.png”)) upFlapBirdsAndStones.add(Texture(“bird_32.png”)) upFlapBirdsAndStones.add(Texture(“bird_42.png”)) upFlapBirdsAndStones.add(Texture(“bird_52.png”)) upFlapBirdsAndStones.add(Texture(“bird_62.png”)) upFlapBirdsAndStones.add(Texture(“stone_1.png”)) upFlapBirdsAndStones.add(Texture(“stone_2.png”)) upFlapBirdsAndStones.add(Texture(“stone_3.png”)) upFlapBirdsAndStones.add(Texture(“stone_4.png”))

Step 2 – The draw

This step will be a little bit difficult, because we have to set 4 things, to have a left moving, random stones and flapping birds. So what do we have to define?

    1. The position X
    2. The position Y
    3. Which barrier?
    4. Velocity
    5. If the barrier is out of the screen, redraw.
Declare the variables

Here we gonna declare all fo the variables, what we will gonna use later. Don’t be affraid, it it looks like to much, but all of them will have important part in the barriers-system. 😉

val numberOfBarriers = 10
val barrierX = mutableListOf<Float>()
val barrierY = mutableListOf<Float>()
val barrierYPositions = mutableListOf<Float>()
var randomBarrier = mutableListOf<Int>()
var constOfJumpCrawlDist = 0
var minBarrierOffset = 0f
var birdsFlapState = 0
var random = 0

numberOfBarriers – To set all of the state and the positions, we are going to use a for-loop. This loop will set every time when the render() method executes. For this we need to know how many barriers do we have.

barrierX and barrierY – The positions of the barriers on the screen or outside of it.

barrierYPositions – The barriers can get 4 Y positions on the screen. It depends on what is the barrier. If it is a bird, then this position can get 4 different value. If it is a stone, then it can be always on the ground. We need to keep an eye on that later.

randomBarrier – This will set the image of the barrier. We won’t have always the same sequence of the barriers. During the game it can be various.

constOfJumpCrawlDist – We have to take care the maximum distance of the jump and of the crawl. Otherwise our game will finish to early.

minBarrierOffset – We will have a plus offset between the barriers as well. It is needed to have some time to think about what the user should do, jump/stay/crawl.

birdsFlapState – The state of the birds will be changed every second.

random – It will be a random number between 0 and 2. We will use it to have additionally an offset between the barriers.

create()

Next we have to add values for the MutableLists.

We gonna start with the barrierYPositions. As we have talked about, it will contain 4 positions. So in this 4 positions can be the barriers. We will compare the Y positions to Teki, because they have to be front of her. 😉

barrierYPositions.add(tekiY)
barrierYPositions.add(tekiY + size*0.5f)
barrierYPositions.add(tekiY + size*1.1f)
barrierYPositions.add(tekiY + size*2f)

The next 3 variables we have to clear first, because when we later on restart the game, we have to all of them empyt to have a clear state.

barrierX.clear()
barrierY.clear()
randomBarrier.clear()

After the clear we gonna upload them using a for-loop. This loop will iterate throw from 0 utnil the numbers of the barriers, so until 10 in our case.

Inside of this for-loop first we gonna generate a random number between 0 and 9. This will select the image for the barrier.

Then we will have an if-else-statement. Because we have to separet the index 0. It will appear on the screen immediatelly, when the user pushes the Play button. To the X positions of the other barriers we will add the constOfJumpCrawlDist, minBarrierOffset and the size multiplied by the random number.

The constOfJumpCrawlDist gonna be the maximum distance of the jump, so (size*8).toInt().

The minBarrierOffset will size*2. You can play with it.

Inside the for-loop we have to define one more if-else-statement to know which barrier is a bird and which is a stone. At the beginning we added the stones last to the list of the Textures. So if the rand number is between 6 and 9, then it has to be a stone.


for-loop in the create() method
render()

Similarly to the create() method we will have here also a for loop. One difference is that we won’t handle the index 0 separately. The second is the velocity, because during the game the barriers have to move to left. The velocity gonna be the same like the velocity of the background.

When the barrier is outside of the screen at the left side, then it must be reset. In other words the position X and Y, and the image must be reset.


for-loop in the render() method

The third thing is that finally here we have to draw the barriers. We gonna do it in the drawBarriers() method. As the only argument it will take over the number of the barrier.


for-loop in the render() method

As you see, we will have here a when-statement, which will check the number of the birdsFlapState

Step 3 – The birdsFlapState

In addition, as we have already defined, the birds flap during the game. In other words, the state of the birds will be changed every second. If the birdsFlapState is 0, then the wings are down, of 1, then they are up.

This few lines of code will be in the startTimer() method and there in the run() method, where we count the scores.

birdsFlapState = if (birdsFlapState == 0) {
    1
} else {
    0
}

TekiTutorial::class

This chapter had lots of information. If you are lost, then you can check yourself now.


for-loop in the render() method

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! 🙂

 


 

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

Leave a Reply

Your email address will not be published. Required fields are marked *