Step 5¶
Dropping Coins and Scoring Points - Overview¶
Good job on reaching this far! Now that we have moving character, we can add more game elements. As mentioned in the intro, this will be a point collection game. So let's start by creating coins for Glod to collect. In this chapter we will be:
- Drawing a coin image on screen
- Having it move by using variables
- Creating a spawning system to randomly spawn coins on screen.
- Creating a collision system to have Glod be able to collect
- Reuse code to create more coins by making shards accept arguments.
Step 5.1¶
Drawing an image on screen and using variables to move them. Does that not sound familiar? π€ Yes! It is using the same logic as making Glod. Let's start, first of all download the images that we will be using.
- Download Coin Images here
Let's start off nice and easy by first drawing the coin image on screen.
1 2 3 |
|
Let's start of by creating a new Initialize_Coin Defshard. We will separate initializing variables related to our coins from Innitialize_Character to make our code more neater.
1 2 3 4 |
|
Then, remember to call
innitialize-coin
in theSetup
of themain-wire
. We are callinginitialize-coin
in setup as we only need to create these variables once.
1 2 3 4 |
|
We then create a new UI.Area to draw this coin on screen.
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 211 212 213 214 215 216 217 218 219 220 |
|
Step 5.2¶
Try running your code now. You should see a coin being drawn on the top of the screen. Congrats! We are off to a good start. Now, let's animate this coin. Yes! The logic will be exactly the same as when we animated Glod. Except this will be much easier as we won't need any conditional statements to control the coin.
- Download coin images here.
1 2 3 |
|
First we create the coin's X, Y and position variables.
1 2 3 4 |
|
We then replace the position under the :
Position
tag in our coin'sUI.Area
.
1 |
|
- Then remember to
Step
into the Coin animation in your main-wire
1 2 3 4 |
|
Lastly, update your coin
UI.Area
to draw the .coin-image-index'th image in the.coin-image-array
.
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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 |
|
Try running your code to see if your coin is animated. Good job!
Step 5.2¶
Now let's make our coin fall. To do this, like we did with Glod, we once again replace the (float2 0 0)
in the :Position
tag in our coin's UI.Area
with a variable. Then, we change this variable accordingly. Without further ado, let's get started!
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 2 |
|
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 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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 |
|
Try running your code to see if your coin is animated. Good job!
Step 5.3¶
Now let's make our coin fall. To do this, like we did with Glod, we once again replace the (float2 0 0)
in the :Position
tag in our coin's UI.Area
with a variable. Then, we change this variable accordingly. Without further ado, let's get started!
1 2 3 |
|
- First we create the coin's X, Y and position variables.
1 2 3 4 |
|
- We then replace the position under the :Position tag in our coin's UI.Area.
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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 |
|
Try running your code and changing the .coinx-1 or .coiny-1 values to check if your coin's position is changing. Wonderful! Now, similar to our Run Logic and Jump Logic, we have to create a Coin gravity Logic to make our coin fall. Let's once again use velocity and acceleration to make our coin fall realistically.
1 2 |
|
First lets create our velocity and acceleration variables under our initialize-coin shard
1 2 3 4 5 6 7 8 9 10 |
|
Then, we create our
coin-gravity-logic
defshard. The logic behind coin is the same as our jump logic. We add velocity to y position then add acceleration to our velocity to increase the rate of increase.
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 |
|
- Remember to call our Coin_Gravity_Logic shard in our main-wire loop
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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 |
|
Step 5.4¶
If you run your code now, you would see our coin falling! Nice π. Now let's have adorable Glod chase some money π€π°π΅πΆπ· To do that we need to create the logic to check when Glod is colliding with our coin. And when that happens, gain a point. Let's do this step by step. First lets create a Score variable and some UI to draw our variable on the screen.
1 2 |
|
1 |
|
First, nice and easy, let's create a
.score
variable. Remember to call this def shards in your main loop setup.
1 2 3 4 |
|
Then we create a new
UI.Area
to draw our.score
usingUI.Label
. Remember to convert our.score
to a string first using the(ToString)
shard. If you try to run our code now you will see a teeny tiny 0 in the corner of your screen. This means that our score is being drawn! But it unfortunately has not been styled yet. So lets do that.
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 6 |
|
We first create a style shard and then call this shard before we draw our UI.Label. Now if you try running your code you would see that our score is styled nicely.
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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 |
|
Step 5.5¶
Now that we have our score UI, we can increase it. To do this, we need our collision logic.
1 2 3 4 5 6 7 8 9 10 11 |
|
First we create an Upper and Lower X limit followed by an Upper and Lower Y limit. This is to draw a collision box around our dear Glod. These variables are added to our
initialize-game-elements
shard. We also create a .scored variable to limit the number of times we can score from one coin. These variables can be added underinitialize-game-elements
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 |
|
Since our character is moving, we have to constantly update our collision box. Then we have our collision logic and this is followed by our conditional statement.
After we have our collision box, the next step is to create the logic to read whenever our coin falls within our collision box. This conditional statement is checking if the X value of our coin is lesser then the upper X limit of our collision box and more than the lower X limit of our collision box. It is checking if it within the stated range and does the same for the Y value. Next, we increase the score whenever this happens.
Then, whenever the .scored variable is true, gain a point. Once a point is gained, Reset .scored to false once again. This ensures that only one point is gained whenever we collect a coin. Remember to call the
(scoring)
shard in your main wire
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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 |
|
Try running your code now and see if you get a point. You did?! Congratulations!
Step 5.6¶
Now that we have a scoring system, let's create more coins. Currently, we have only one coin falling down. Lets reuse this coin and have it appear again in another random X position for Glod to run after and collect.
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Here we are creating a defloop that will give our coin a random X value and reset its y value. It will do this every 1.5 seconds. This means that our coin will randomly spawn, fall and then 1,5 seconds later, randomly spawn and fall again.
1 |
|
- Remember to Step into your loop in your main wire
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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 |
|
Try runnning your code! Congrats, you have a very basic game. You can try it out and have fun chasing coins! π
Step 5.7¶
While we have a very basic game on our hands now, let's polish it further. Right now, we only have one coin spawning, lets have more! To do this, we have to change some of our shards to accept arguments instead of having hard coded variables.
1 2 3 4 5 |
|
As usual lets create some new variables for our second coin these variables are added under initialize-coin
1 2 3 4 |
|
Next, we create a new
UI.Area
to draw our new coin. You can try running your code at this point to make sure that your coin is being drawn. Now to make it fall
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
While this can work, our code will end up being very messy. Instead, lets have our original
coin-gravity-logic
shard take in arguments instead
1 2 3 4 5 6 7 8 9 10 |
|
Here we convert our original
coin-gravity-logic
shard into one that takes arguments. Now that we have this,instead of copy and pasting thiscode a million times, call it as many times as we need and simply feed it the correct variables.
1 2 |
|
Now we can just call it as many times as we need if we want to spawn more coins. Net we have to do the same for our randomise coin logic.
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 4 5 |
|
1 2 |
|
Now you might be wondering how do we get our
random-coin
logic to accept arguments as it is adefloop
, not a defshards. Do not fret! To do this, we simply change our current defloop into a defshards that accepts arguments and create a new defloop that calls this new defshards as shown above.
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 |
|
Now, last but not least, we have to also convert our Scoring logic into a defshards that accepts arguments.
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 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 |
|
Now with all the pieces in place we can add as many coins as we want. In this tutorial we will stick to just 4 coins but you can create as many as you want! Just remember to follow the same process and flow as above to make sure you don't miss out something. 1. Create the necessary variables for your new coins. 2. Create new UI.Areato draw your new coins 3. Make sure your new coins fall by adding new coin-gravity-logic 4. Make sure your coins loop and randomise by adding new random-coin-loop 5. Make sure you can earn points from them by adding new score-collision
Recap¶
Phew that was a really long step! Good job for making it through ππ. To recap, we made a coin fall by using the same logic when making our character move. We then created a scoring system by making a collision system. And lastly we setup a system to create as many coins as we want by making our defshards accept arguments. Phew! That was a mouthful but worth it! In the next chapter, we will use the same logic to create falling hazards for Glod! See you ππΌπ!