fbpx

Teki – Add Teki, the Turtlegirl

Reading Time: 5 minutes
In the very last chapter we defined the gameState. It means, our Android game will have 4 states, but still we have in the source code defined only the Main Menu screen and the Running game screen.

In this lecture we are going to add our heroine, Teki, the Turtlegirl. We will define her Textures, because she has 4 states, and her positions on the screen.

Let’s start coding. 😉

Step 1 – Teki’s Texture

As we have done with the background, we are going to add at the beginning of the TekiTutorial::class the Texture for her. It will be again a mutableListOf, because of the 4 states.

var tekisLegStates = mutableListOf<Texture>()

To the create() method goes the upload of the images to the MutableList. If you have downloaded from the previous lecture the assets, then you can find the images with these names.

teki_legsOnTheGround.png
teki_rightLegUp.png
teki_leftLegUp.png
teki_basic_jump.png

To add the images we have to define all of the 4 lines separetly.

tekisLegStates.add(Texture(“teki_legsOnTheGround.png”)) 
tekisLegStates.add(Texture(“teki_rightLegUp.png”)) 
tekisLegStates.add(Texture(“teki_leftLegUp.png”))
tekisLegStates.add(Texture(“teki_basic_jump.png”)) 

Step 2 – Position X

Before we draw Teki on the screen we have to define the position of her. The position X will be always the same. She is going to be drawn from the left side of the screen. Because we will have 2 arrows behind her to control the jump and the crawl, she should be a little bit to the right. I define the 35% of the width of the screen. So tekiX is going to be the name of our variable, declare it at the beginning of the class.

var tekiX = 0f

We can set the value only if the game is already created, so this line goes after the Textures’ lines.

tekiX = screenWidth*0.35f

Step 3 – Position Y

In this chapter we are going to talk about Teki’s initial Y position. During the game it can be change, because she will jump and crawl to avoid the barriers. It means she can move up and down along the y-axis.

Add tekiY variable next to the tekiX.

var tekiY = 0f

Next line goes to the create() method.

tekiY = screenHeight*0.22f

Initially Teki has to be on the ground. It is alroad 22% of the height of the screen, so that’s why we are going to multiply the screenHeight.

Step 4 – The size

Next thing, what we have to define before the draw of Teki, is the size of her. It is very important to have a responsive game. It means our game has to have the same size and scale on all devices. To reach it we will define as a constant. We are going to name it as size. It goes after all of our variables, to the beginning of the TekiTutorial::class.

var size: Float = 0f

To the create() method goes the initial value. It is going to be the 6% of the height of the screen.

size = (screenWidth*0.06).toFloat()

Step 5 – drawTeki()

Next step is, after we have defined almost everything, to draw Teki. It goes to the drawTeki() method to have a clean and transparent code.

fun drawTeki(number: Int) {
    batch!!.draw(
         tekisLegStates[number],
         tekiX,
         tekiY,
         size*1.2f,
         size)
}

In the next step we are going to define the tekisStates, that’s why we need the integer, number as an argument of this method.

The first call of the method goes with argument 0 where the gameState is equals to 0, so to the Main Menu screen.

Step 6 – tekisStates and distance

If you have checked our Flappy Bird tutorial as well, then there you could see that our bird flapping realy fast. In our Teki game we will solve this issue. For this we will define a variable, called distance, what will store the distance traveled. Every time, when Teki’s covered distance is divisible by 20 the state of the legs are going to be changed to the next state.

We have defined the velocity, when we have talked about the background. Every time, when the render() method executes, the distance will be increased by the velocity.

As we have talk earlier, we have 4 states. We are going to represent these states with an integer variable, called tekisStates. We will declare before the create() method. 

var tekisStates = 0

Every time, when the distance is divisible by 20, this state will be changed.

if (distance % 20 == 0)
{
    when(tekisStates)
    {
        0 -> tekisStates = 1
        1 -> tekisStates = 2
        2 -> tekisStates = 1
        3 -> tekisStates = 0
    }
}

Because it will show, that our Teki is running, so it’s going to be executed when the game is running, so when the gameState is equal to value of 1.

Run the game. If you have made everything correctly, then you should see…. that our Teki will disappear when you touch the screen. It is because we have to call inside the gameState == 1 part the drawTeki() method as well, with the argument of tekiStates.

drawTeki(tekisStates)

Run again the game, and when you touch the screen, than our Teki will run. Great job. 🙂

TekiTutorial::class

Finally the whole TekiTutotorial::class soure code.


TekiTutorial::class

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