Step 4¶
Moving Character with button Inputs - Overview¶
In the previous chapter we breathed some life into Glod and transformed him from a static image into a fully animated character. Amazing! However, we can take things further. Lets free Glod from stationary curse and make him move! To do this we will
- Place a variable in the :Position tag of UI.Area
- Changing this variable to make Glod move
- Use Velocity and Acceleration concepts to make Glod jump.
Step 4.1¶
First, let's edit our code a little. Currently Glod is situated in the center of our screen, while this can work, lets change his current Anchor.Center
to Anchor.Top
and bring him down to Earth by changing his position by creating some variables.
While any anchor will work as long as we change the position accordingly, we will stick to Anchor.Top
for now as in the subsequent chapters we will be using Anchor.Top
for other elements that we will add on to the game. To keep things consistent and manage the positions of the different game elements more effectively, lets use Anchor.Top
for now.
1 2 3 |
|
Here we create an
.X
variable and a.Y
variable which is used to create another variable that is our.character-position
. Code is aded under initialize-character lines 12- 14.
1 2 3 |
|
.character-position
. This variable will then be fed into the:Position
tag in theUI. Area
shard. When the .X and.Y
value are changed, theUI.Area
will move and hence our character will move. Remember to change theAnchor
toAnchor.Top
Code edited in lines 127
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
|
Step 4.2¶
Now that our variables are set up, lets make Glod move! Let's start by moving him to the left and right. To do this, we simply have to change the .X value that we have just created whenever the left and right buttons are pressed.
1 |
|
We first create a .
character-x-velocity
. We will change this value when the Right and Left buttons are pressed to make our character move. This code is added uner initialize-character on line 15
1 2 3 4 5 6 |
|
Next we create the
run-logic
. When.character-x-velocity
is changed, it will be added to.X
and the.character-position
will be updated accordingly Added on lines 77-82
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
Then we just change
.character-x-velocity
whenever the Left and Right buttons are pressed. Remember to change back the.character-x-velocity
to 0 when the buttons are released or Glod will move to the left or right forever.Added underbutton-inputs
on lines 84 - 118
1 |
|
And lastly, we call our run-logic in our main-wire, line 125
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
|
Step 4.3¶
Oh no! We have a problem 🥲. If we move Glod far left and far right, you might notice that they go off screen. Let's set up a boundary to ensure that Glod does not fall off the edge into the abyss. To do this, lets creat a clamp function that limits how far our X value can go.
1 2 3 |
|
This clamp function takes in a variable and makes sure it does not exceed the min value and the max value line added from 77-80
1 |
|
Next we simply call our
clamp
function in ourrun-logic
and set the var to be .X, the min to be -600 and the max to be 600. Change the min and max value to fit your screen accordingly. Code added to line 89.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
|
Yay! Now Glod doesn't walk off into the void! 😙
Step 4.4¶
Now lets make Glod jump! However, instead of just using veloctiy, lets add acceleration to the mix. Will make Glod's jump feel even more amazing.
Jumping using Velocity & Acceleration
For smooth releastic jumping, we have to decrease velocity by acceleration whenever we jump. Decreasing velocity by acceleration decreases the rate of increase of our .Y
value and this simulates gravity thus making our jump feel more realistic.
1 2 |
|
First, lets create some variables that we will use. Code added to lines 16 & 17.
1 2 3 4 5 6 7 8 9 |
|
Similar to the
run-logic
, we add.character-y-velocity
to our.Y
variable. This time however, we will also add .character-y-acceleration
to.character-y-velocity
Code added to lines 93-99
1 |
|
Remember to call your gravity-logic Defshard in your main-wire.
1 2 3 4 5 6 7 |
|
Lastly we change the .character-y-velocity and the .character-y-acceleration whenever the Up buttons is pressed. Code added to button-inputs function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
|
Since our :Anchor is set to Anchor.Top, it places our UI.Area at the top and in the middle of the screen. This is now our origin at (0,0). The way axis works in shards,increasing the Y value, pushes our UI.Area down while decreasing it pushes it up. This is why our velocity is a negative value. Because it is a negative value, when added to our .Y value, it decreases the .Y value and thus makes our image go up. Similarly, our Acceleration is a positive value so that when it get added to our negative value velocity, it decreases it.
Step 4.5¶
Try running your code now! Oh no, we have a problem. Glod falls through the floor! 😨 Don't worry, we can fix this! Similar to how we made a boundary to ensure Glod does not walk off screen, we can add a boundary to ensure he doesn't fall through the floor by reusing the same Clamp function we made in the previous step.
1 |
|
First, call our clamp function in our
gravity-logic
with.Y
as our var and -620 as our min and 620 as our max. Code added to lines 103
1 2 3 4 5 |
|
Next we add a conditional statement to ensure that our Y velocity and acceleration reverts back to 0 when Glod is on the ground.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
|
Congratulations! Glod can now move and jump safely! 😊
Step 4.6¶
Now, lastly, those of you whoo are sharp-eyed would've noticed one small problem.
- Glod does not go back to his idle animation when he lands on the floor
- Glod changes to his running animation if we move left and right while jumping.
- Glod can continuously jump as long as you press the jump button.
Let's fix these problems shall we! For the first problem, we just have to ensure that Glod goes back to his idle animation when he reaches the floor.
1 2 3 4 5 6 7 8 9 |
|
Code added under
gravity-logic
edited to changecharacter-state
to 0 only when character is jumping.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 |
|
Here we use a nested When conditional statement to ensure that Glod goes back to his idle animation only when he is jumping. Had we simply put 0 >. character-state without the nested When
conditional statement, this would revert Glod back to his idle animation but it would cause another problem. That is, Glod will forever be in his idle animation whenever he is on the ground. This means he willl never go into his walking animations. Hence why we use the nested When conditional statement instead.
The second problem is also a similar easy fix. We just put a When conditional statement to make Glod go into his walking animation only when he is in idle and not jumping.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
We use a when conditional statement to make sure that Glod goes into his walking animation only when his character state is at 0, that is when he is idle.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
|
For the last problem, although slightly more complicated, to solve this we also use a When conditional statement.
1 |
|
First, create a .can-jump variable under innitialize-character
1 2 3 4 5 6 7 8 9 10 11 |
|
Then we make it such that Glod can not jump anymore when he jumps. So when the jump button is pressed,
.can-jump
becomes false. And only increase the velocity and acceleration when .can-jump is true.
1 2 3 4 5 6 7 8 9 10 |
|
Lastly we reset
.can-jump
back to true when God touches the floor again.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 |
|
Recap¶
Try running your code now! Glod should be happily running and jumping without any glitches😁. To recap, we made Glod move by tying a variable to the UI.Area position and changing said variable. We then ensure that Glod does not walk or fall into the void by creating boundaries. And lastly we created conditional statements to fix our problems. And walah! we have a fully functional moving character! In the next chapter, lets make Glod collect some coins! 🤑