Skip to content

Step 5

Dropping Coins and Scoring Points - Overview

Good job on reaching this far!

Now that we have a moving character, we can add more game elements.

As mentioned in the intro, this will be a point collection game. We'll start by creating coins for Glod to collect.

In this chapter we will be:

  1. Drawing a coin image on screen.

  2. Having it move by using variables.

  3. Creating a spawning system to randomly spawn coins on the screen.

  4. Creating a collision system to have Glod be able to collect coins.

  5. Reusing 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 to make Glod appear on the screen. 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 the screen.

Create a new initialize-coin shard. We will separate the initializing of our coin and character variables to make our code neater.

1
2
3
;; -------------- Initialize Coin ----------
(defshards initialize-coin [] ;; (1)
  (LoadTexture "GlodImages/Coin/Coin_1.png") = .coin-1)
  1. Added to line 177.

Remember to call initialize-coin in the Setup of the main-wireto ensure that these variables are only created once.

1
2
3
4
(defloop main-wire
  (Setup
   (initialize-character)
   (initialize-coin)) ;; (1)
  1. Added to line 183.

We then create a new UI.Area to draw the coin on the screen.

1
2
3
4
(UI.Area ;; (1)
 :Position (float2 0 0)
 :Anchor Anchor.Top
 :Contents (-> .coin-1 (UI.Image :Scale (float2 0.2)))
  1. Added to line 218.
  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
(defshards load-texture [name]
  (LoadImage name)
  (GFX.Texture))

(defshards initialize-character []
  (LoadTexture "GlodImages/Character1.png") = .idle-left-image-array
  (LoadTexture "GlodImages/Character1_Left.png") = .character-left
  (LoadTexture "GlodImages/Character1_Right.png") = .character-right
  (LoadTexture "GlodImages/Character1_Jumping.png") = .character-jumping

  0 >= .character-state
  0 >= .character-direction ;; 0 = facing left, 1 = facing right
  true >= .can-jump

  0.0 >= .x
  310.0 >= .y
  (float2 .x .y) >= .character-position
  0.0 >= .character-x-velocity
  0.0 >= .character-y-velocity
  0.0 >= .character-y-acceleration

  ;; ---------- Character Idle Array (Facing Left)----------
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

  ;; ---------- Character Idle Array (Facing Right) ----------------
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

  0 >= .idle-image-index
  (Count .idle-left-image-array) = .idle-image-index-max
  0.08 = .idle-animation-speed

  ;; -------------- Walking Array (Facing Left) -----------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

  ;; ----------- Walking Array (Facing Right) ---------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

  (Count .walking-left-image-array) = .walking-image-index-max
  0 >= .walking-image-index
  0.08 = .walking-animation-speed ;; Reduce number to increase animation speed
  )

;; --------- Idle Animation Loop ---------
(defloop idle-animation
  .idle-image-index (Math.Add 1)
  > .idle-image-index
  (When
   :Predicate (IsMoreEqual .idle-image-index-max)
   :Action (-> 0 > .idle-image-index))
  (Pause .idle-animation-speed))

;; -------- Walking Animation Loop --------
(defloop walking-animation
  .walking-image-index (Math.Add 1)
  > .walking-image-index
  (When
   :Predicate (IsMoreEqual .walking-image-index-max) 
   :Action (-> 0 > .walking-image-index))
  (Pause .walking-animation-speed))

;; ---------- Character Boundary ------------
(defshards clamp [var min max]
  var (Max min) (Min max) > var)

;; ------------ Character Run Logic ----------------
(defshards run-logic []
  .x (Math.Add .character-x-velocity)
  > .x

  (float2 .x .y) > .character-position

  (clamp .X -600.0 600.0))

;; ------------ Character Gravity Logic ---------------
(defshards gravity-logic []
  .y (Math.Add .character-y-velocity)
  > .y

  .character-y-velocity (Math.Add .character-y-acceleration)
  > .character-y-velocity

  (float2 .x .y) > .character-position

  (clamp .y -620.0 620.0)
  .y
  (When
   :Predicate (IsMoreEqual 620.0)
   :Action (->
            0.0 > .character-y-velocity
            0.0 > .character-y-acceleration
            true > .can-jump
            .character-state
            (When
             :Predicate (Is 3)
             :Action (->
                      0 > .character-state)))))

;; ------- Button Inputs ----------
(defshards button-inputs []
  (Inputs.KeyDown
   :Key "left"
   :Action
   (->
    (Msg "left")
    .character-state
    (When
     :Predicate (Is 0)
     :Action (-> 1 > .character-state))
    0 > .character-direction
    -5.0 > .character-x-velocity))

  (Inputs.KeyDown
   :Key "right"
   :Action
   (->
    (Msg "right")
    .character-state
    (When
     :Predicate (Is 0)
     :Action (-> 2 > .character-state))
    1 > .character-direction
    5.0 > .character-x-velocity))

  (Inputs.KeyDown
   :Key "up"
   :Action
   (->
    (Msg "up")
    3 > .character-state
    .can-jump
    (When
     :Predicate (Is true)
     :Action (->
              -20.0 > .character-y-velocity
              1.0 >  .character-y-acceleration
              false >= .can-jump))))

  (Inputs.KeyUp
   :Key "left"
   :Action 
   (->
    0 > .character-state
    0.0 > .character-x-velocity))

  (Inputs.KeyUp
   :Key "right"
   :Action
   (->
    0 > .character-state
    0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ----------
(defshards initialize-coin []
  (LoadTexture "GlodImages/Coin/Coin_1.png") = .coin-1)

(defloop main-wire
  (Setup
   (initialize-character)
   (initialize-coin))

  (run-logic)
  (gravity-logic)

  (Step idle-animation)
  (Step walking-animation)

  (GFX.MainWindow
   :Title "MainWindow" :Width 1920 :Height 1080
   :Contents
   (->
    (Setup
     (GFX.DrawQueue) >= .ui-draw-queue
     (GFX.UIPass .ui-draw-queue) >> .render-steps)
    .ui-draw-queue (GFX.ClearQueue)

    (UI
     .ui-draw-queue
     (->
      (UI.Area
       :Position .character-position
       :Anchor Anchor.Top
       :Contents
       (->
        .character-state
        (Match [0 (-> .character-direction
                      (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                              1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                             :Passthrough false))
                1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                3 (-> .character-jumping (UI.Image :Scale (float2 0.2)))]
               :Passthrough false)))

      (UI.Area
       :Position (float2 0 0)
       :Anchor Anchor.Top
       :Contents (-> .coin-1 (UI.Image :Scale (float2 0.2))))))

    (GFX.Render :Steps .render-steps)

    (button-inputs))))

(defmesh main)
(schedule main main-wire)
(run main (/ 1.0 60))

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.

The logic will be exactly the same as when we animated Glod. This will be much easier however as we won't need any conditional statements to control the coin.

  • Download coin images here.

Just like what we did to animate Glod, we replace the singular image with an array of images.

We also create variables for controlling the Coin animation:

  • .coin-image-index

  • .coin-image-index-max

  • .coin-animation-speed

;; -------------- Initialize Coin ---------- (defshards initialize-coin [] ;; (1) (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array (Count .coin-image-array) (Math.Subtract 1) >= .coin-image-index-max 0 >= .coin-image-index 0.1 >= .coin-animation-speed)

  1. Updated initialize-coin at line 177.

Then we create a coin-animation loop that follows the same logic as Glod's animations.

;; -------------- Coin Animation ------------------ (defloop coin-animation .coin-image-index (Math.Add 1)

.coin-image-index (When :Predicate (IsMore .coin-image-index-max) :Action (-> 0 > .coin-image-index))

(Pause .coin-animation-speed))

  1. Added to line 190.

Remember to Step into the Coin's animation in your main-wire!

(Step coin-animation) ;; (1)

  1. Added to line 210.

Lastly, update your coin's UI.Area to draw the image located in an index of .coin-image-array. The index used is determined by the value of .coin-image-index.

(UI.Area :Position (float2 0 0) :Anchor Anchor.Top :Contents (-> .coin-image-array (Take .coin-image-index) (UI.Image :Scale (float2 0.2))))

  1. Added to line 239.

(defshards load-texture [name] (LoadImage name) (GFX.Texture))

(defshards initialize-character [] (LoadTexture "GlodImages/Character1.png") = .idle-left-image-array (LoadTexture "GlodImages/Character1_Left.png") = .character-left (LoadTexture "GlodImages/Character1_Right.png") = .character-right (LoadTexture "GlodImages/Character1_Jumping.png") = .character-jumping

0 >= .character-state 0 >= .character-direction ;; 0 = facing left, 1 = facing right true >= .can-jump

0.0 >= .x 310.0 >= .y (float2 .x .y) >= .character-position 0.0 >= .character-x-velocity 0.0 >= .character-y-velocity 0.0 >= .character-y-acceleration

;; ---------- Character Idle Array (Facing Left)---------- (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

;; ---------- Character Idle Array (Facing Right) ---------------- (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

0 >= .idle-image-index (Count .idle-left-image-array) = .idle-image-index-max 0.08 = .idle-animation-speed

;; -------------- Walking Array (Facing Left) ----------------- (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

;; ----------- Walking Array (Facing Right) --------------- (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

(Count .walking-left-image-array) = .walking-image-index-max 0 >= .walking-image-index 0.08 = .walking-animation-speed ;; Reduce number to increase animation speed )

;; --------- Idle Animation Loop --------- (defloop idle-animation .idle-image-index (Math.Add 1)

.idle-image-index (When :Predicate (IsMoreEqual .idle-image-index-max) :Action (-> 0 > .idle-image-index)) (Pause .idle-animation-speed))

;; -------- Walking Animation Loop -------- (defloop walking-animation .walking-image-index (Math.Add 1)

.walking-image-index (When :Predicate (IsMoreEqual .walking-image-index-max) :Action (-> 0 > .walking-image-index)) (Pause .walking-animation-speed))

;; ---------- Character Boundary ------------ (defshards clamp [var min max] var (Max min) (Min max) > var)

;; ------------ Character Run Logic ---------------- (defshards run-logic [] .x (Math.Add .character-x-velocity)

.x

(float2 .x .y) > .character-position

(clamp .X -600.0 600.0))

;; ------------ Character Gravity Logic --------------- (defshards gravity-logic [] .y (Math.Add .character-y-velocity)

.y

.character-y-velocity (Math.Add .character-y-acceleration)

.character-y-velocity

(float2 .x .y) > .character-position

(clamp .y -620.0 620.0) .y (When :Predicate (IsMoreEqual 620.0) :Action (-> 0.0 > .character-y-velocity 0.0 > .character-y-acceleration true > .can-jump .character-state (When :Predicate (Is 3) :Action (-> 0 > .character-state)))))

;; ------- Button Inputs ---------- (defshards button-inputs [] (Inputs.KeyDown :Key "left" :Action (-> (Msg "left") .character-state (When :Predicate (Is 0) :Action (-> 1 > .character-state)) 0 > .character-direction -5.0 > .character-x-velocity))

(Inputs.KeyDown :Key "right" :Action (-> (Msg "right") .character-state (When :Predicate (Is 0) :Action (-> 2 > .character-state)) 1 > .character-direction 5.0 > .character-x-velocity))

(Inputs.KeyDown :Key "up" :Action (-> (Msg "up") 3 > .character-state .can-jump (When :Predicate (Is true) :Action (-> -20.0 > .character-y-velocity 1.0 > .character-y-acceleration false >= .can-jump))))

(Inputs.KeyUp :Key "left" :Action (-> 0 > .character-state 0.0 > .character-x-velocity))

(Inputs.KeyUp :Key "right" :Action (-> 0 > .character-state 0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ---------- (defshards initialize-coin [] (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array (Count .coin-image-array) (Math.Subtract 1) >= .coin-image-index-max 0 >= .coin-image-index 0.1 >= .coin-animation-speed)

;; -------------- Coin Animation ------------------ (defloop coin-animation .coin-image-index (Math.Add 1)

.coin-image-index (When :Predicate (IsMore .coin-image-index-max) :Action (-> 0 > .coin-image-index))

(Pause .coin-animation-speed))

(defloop main-wire (Setup (initialize-character) (initialize-coin))

(run-logic) (gravity-logic)

(Step idle-animation) (Step walking-animation)

(Step coin-animation)

(GFX.MainWindow :Title "MainWindow" :Width 1920 :Height 1080 :Contents (-> (Setup (GFX.DrawQueue) >= .ui-draw-queue (GFX.UIPass .ui-draw-queue) >> .render-steps) .ui-draw-queue (GFX.ClearQueue)

(UI
 .ui-draw-queue
 (->
  (UI.Area
   :Position .character-position
   :Anchor Anchor.Top
   :Contents
   (->
    .character-state
    (Match [0 (-> .character-direction
                  (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                          1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                         :Passthrough false))
            1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
            2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
            3 (-> .character-jumping (UI.Image :Scale (float2 0.2)))]
           :Passthrough false)))

  (UI.Area
   :Position (float2 0 0)
   :Anchor Anchor.Top
   :Contents
   (-> .coin-image-array
       (Take .coin-image-index)
       (UI.Image :Scale (float2 0.2))))))

(GFX.Render :Steps .render-steps)

(button-inputs))))

(defmesh main) (schedule main main-wire) (run main (/ 1.0 60))

Try running your code to see if your coin is animated. Good job if it is!

Step 5.3

Now let's make our coin fall. To do this, like we did with Glod, we will:

  1. Set a variable in the Position parameter of the coin's UI.Area, replacing the (float2 0 0) used previously.

  2. Change this variable accordingly.

Without further ado, let's get started!

First we create the coin's x, y, and position variables.

1
2
3
4
;; ----- Coin 1 ------
0.0 >= .coinx-1 ;; (1)
0.0 >= .coiny-1
(float2 .coinx-1 .coiny-1) >= .coin-position-1
  1. Added to line 190.

We then replace the value of the Position parameter in our coin's UI.Area.

1
2
3
4
5
6
7
(UI.Area
 :Position .coin-position-1 ;; (1)
 :Anchor Anchor.Top
 :Contents
 (-> .coin-image-array
     (Take .coin-image-index)
     (UI.Image :Scale (float2 0.2))))
  1. Amended at line 245.
  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
(defshards load-texture [name]
  (LoadImage name)
  (GFX.Texture))

(defshards initialize-character []
  (LoadTexture "GlodImages/Character1.png") = .idle-left-image-array
  (LoadTexture "GlodImages/Character1_Left.png") = .character-left
  (LoadTexture "GlodImages/Character1_Right.png") = .character-right
  (LoadTexture "GlodImages/Character1_Jumping.png") = .character-jumping

  0 >= .character-state
  0 >= .character-direction ;; 0 = facing left, 1 = facing right
  true >= .can-jump

  0.0 >= .x
  310.0 >= .y
  (float2 .x .y) >= .character-position
  0.0 >= .character-x-velocity
  0.0 >= .character-y-velocity
  0.0 >= .character-y-acceleration

  ;; ---------- Character Idle Array (Facing Left)----------
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

  ;; ---------- Character Idle Array (Facing Right) ----------------
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

  0 >= .idle-image-index
  (Count .idle-left-image-array) = .idle-image-index-max
  0.08 = .idle-animation-speed

  ;; -------------- Walking Array (Facing Left) -----------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

  ;; ----------- Walking Array (Facing Right) ---------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

  (Count .walking-left-image-array) = .walking-image-index-max
  0 >= .walking-image-index
  0.08 = .walking-animation-speed ;; Reduce number to increase animation speed
  )

;; --------- Idle Animation Loop ---------
(defloop idle-animation
  .idle-image-index (Math.Add 1)
  > .idle-image-index
  (When
   :Predicate (IsMoreEqual .idle-image-index-max)
   :Action (-> 0 > .idle-image-index))
  (Pause .idle-animation-speed))

;; -------- Walking Animation Loop --------
(defloop walking-animation
  .walking-image-index (Math.Add 1)
  > .walking-image-index
  (When
   :Predicate (IsMoreEqual .walking-image-index-max) 
   :Action (-> 0 > .walking-image-index))
  (Pause .walking-animation-speed))

;; ---------- Character Boundary ------------
(defshards clamp [var min max]
  var (Max min) (Min max) > var)

;; ------------ Character Run Logic ----------------
(defshards run-logic []
  .x (Math.Add .character-x-velocity)
  > .x

  (float2 .x .y) > .character-position

  (clamp .X -600.0 600.0))

;; ------------ Character Gravity Logic ---------------
(defshards gravity-logic []
  .y (Math.Add .character-y-velocity)
  > .y

  .character-y-velocity (Math.Add .character-y-acceleration)
  > .character-y-velocity

  (float2 .x .y) > .character-position

  (clamp .y -620.0 620.0)
  .y
  (When
   :Predicate (IsMoreEqual 620.0)
   :Action (->
            0.0 > .character-y-velocity
            0.0 > .character-y-acceleration
            true > .can-jump
            .character-state
            (When
             :Predicate (Is 3)
             :Action (->
                      0 > .character-state)))))

;; ------- Button Inputs ----------
(defshards button-inputs []
  (Inputs.KeyDown
   :Key "left"
   :Action
   (->
    (Msg "left")
    .character-state
    (When
     :Predicate (Is 0)
     :Action (-> 1 > .character-state))
    0 > .character-direction
    -5.0 > .character-x-velocity))

  (Inputs.KeyDown
   :Key "right"
   :Action
   (->
    (Msg "right")
    .character-state
    (When
     :Predicate (Is 0)
     :Action (-> 2 > .character-state))
    1 > .character-direction
    5.0 > .character-x-velocity))

  (Inputs.KeyDown
   :Key "up"
   :Action
   (->
    (Msg "up")
    3 > .character-state
    .can-jump
    (When
     :Predicate (Is true)
     :Action (->
              -20.0 > .character-y-velocity
              1.0 >  .character-y-acceleration
              false >= .can-jump))))

  (Inputs.KeyUp
   :Key "left"
   :Action 
   (->
    0 > .character-state
    0.0 > .character-x-velocity))

  (Inputs.KeyUp
   :Key "right"
   :Action
   (->
    0 > .character-state
    0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ----------
(defshards initialize-coin []
  (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array
  (Count .coin-image-array) (Math.Subtract 1) >= .coin-image-index-max
  0 >= .coin-image-index
  0.1 >= .coin-animation-speed

  ;; ----- Coin 1 ------
  0.0 >= .coinx-1
  0.0 >= .coiny-1
  (float2 .coinx-1 .coiny-1) >= .coin-position-1)

;; -------------- Coin Animation ------------------
(defloop coin-animation
  .coin-image-index (Math.Add 1)
  > .coin-image-index
  (When
   :Predicate (IsMore .coin-image-index-max)
   :Action (-> 0 > .coin-image-index))

  (Pause .coin-animation-speed))   

(defloop main-wire
  (Setup
   (initialize-character)
   (initialize-coin))

  (run-logic)
  (gravity-logic)

  (Step idle-animation)
  (Step walking-animation)

  (Step coin-animation)

  (GFX.MainWindow
   :Title "MainWindow" :Width 1920 :Height 1080
   :Contents
   (->
    (Setup
     (GFX.DrawQueue) >= .ui-draw-queue
     (GFX.UIPass .ui-draw-queue) >> .render-steps)
    .ui-draw-queue (GFX.ClearQueue)

    (UI
     .ui-draw-queue
     (->
      (UI.Area
       :Position .character-position
       :Anchor Anchor.Top
       :Contents
       (->
        .character-state
        (Match [0 (-> .character-direction
                      (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                              1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                             :Passthrough false))
                1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                3 (-> .character-jumping (UI.Image :Scale (float2 0.2)))]
               :Passthrough false)))

      (UI.Area
       :Position .coin-position-1
       :Anchor Anchor.Top
       :Contents
       (-> .coin-image-array
           (Take .coin-image-index)
           (UI.Image :Scale (float2 0.2))))))

    (GFX.Render :Steps .render-steps)

    (button-inputs))))

(defmesh main)
(schedule main main-wire)
(run main (/ 1.0 60))

Try changing the .coinx-1 or .coiny-1 values to check if your coin's position changes. Wonderful!

Now, similar to our running and jumping logic, we have to create a gravity logic to make our coin fall. Let's once again use velocity and acceleration to make our coin fall realistically.

First, create velocity and acceleration variables under the initialize-coin shard.

1
2
0.0 >= .coin-velocity-1 ;; (1)
0.5 >= .coin-acceleration
  1. Added to line 188, under initialize-coin.

Create our coin-gravity-logic shard. The logic behind it is the same as our jump logic. We add velocity to the y position and then add acceleration to our velocity to increase the rate of increase.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
;; ------------- Coin Gravity ------------------
(defshards coin-gravity-logic [] ;; (1)

  .coiny-1 (Math.Add .coin-velocity-1)
  > .coiny-1

  .coin-velocity-1 (Math.Add .coin-acceleration)
  > .coin-velocity-1

  (float2 .coinx-1 .coiny-1) > .coin-position-1)
  1. Added to line 207.

Remember to call the coin-gravity-logic shard in our main-wire loop.

1
(coin-gravity-logic) ;; (1)
  1. Added to line 229.
  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
(defshards load-texture [name]
  (LoadImage name)
  (GFX.Texture))

(defshards initialize-character []
  (LoadTexture "GlodImages/Character1.png") = .idle-left-image-array
  (LoadTexture "GlodImages/Character1_Left.png") = .character-left
  (LoadTexture "GlodImages/Character1_Right.png") = .character-right
  (LoadTexture "GlodImages/Character1_Jumping.png") = .character-jumping

  0 >= .character-state
  0 >= .character-direction ;; 0 = facing left, 1 = facing right
  true >= .can-jump

  0.0 >= .x
  310.0 >= .y
  (float2 .x .y) >= .character-position
  0.0 >= .character-x-velocity
  0.0 >= .character-y-velocity
  0.0 >= .character-y-acceleration

  ;; ---------- Character Idle Array (Facing Left)----------
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

  ;; ---------- Character Idle Array (Facing Right) ----------------
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

  0 >= .idle-image-index
  (Count .idle-left-image-array) = .idle-image-index-max
  0.08 = .idle-animation-speed

  ;; -------------- Walking Array (Facing Left) -----------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

  ;; ----------- Walking Array (Facing Right) ---------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

  (Count .walking-left-image-array) = .walking-image-index-max
  0 >= .walking-image-index
  0.08 = .walking-animation-speed ;; Reduce number to increase animation speed
  )

;; --------- Idle Animation Loop ---------
(defloop idle-animation
  .idle-image-index (Math.Add 1)
  > .idle-image-index
  (When
   :Predicate (IsMoreEqual .idle-image-index-max)
   :Action (-> 0 > .idle-image-index))
  (Pause .idle-animation-speed))

;; -------- Walking Animation Loop --------
(defloop walking-animation
  .walking-image-index (Math.Add 1)
  > .walking-image-index
  (When
   :Predicate (IsMoreEqual .walking-image-index-max) 
   :Action (-> 0 > .walking-image-index))
  (Pause .walking-animation-speed))

;; ---------- Character Boundary ------------
(defshards clamp [var min max]
  var (Max min) (Min max) > var)

;; ------------ Character Run Logic ----------------
(defshards run-logic []
  .x (Math.Add .character-x-velocity)
  > .x

  (float2 .x .y) > .character-position

  (clamp .X -600.0 600.0))

;; ------------ Character Gravity Logic ---------------
(defshards gravity-logic []
  .y (Math.Add .character-y-velocity)
  > .y

  .character-y-velocity (Math.Add .character-y-acceleration)
  > .character-y-velocity

  (float2 .x .y) > .character-position

  (clamp .y -620.0 620.0)
  .y
  (When
   :Predicate (IsMoreEqual 620.0)
   :Action (->
            0.0 > .character-y-velocity
            0.0 > .character-y-acceleration
            true > .can-jump
            .character-state
            (When
             :Predicate (Is 3)
             :Action (->
                      0 > .character-state)))))

;; ------- Button Inputs ----------
(defshards button-inputs []
  (Inputs.KeyDown
   :Key "left"
   :Action
   (->
    (Msg "left")
    .character-state
    (When
     :Predicate (Is 0)
     :Action (-> 1 > .character-state))
    0 > .character-direction
    -5.0 > .character-x-velocity))

  (Inputs.KeyDown
   :Key "right"
   :Action
   (->
    (Msg "right")
    .character-state
    (When
     :Predicate (Is 0)
     :Action (-> 2 > .character-state))
    1 > .character-direction
    5.0 > .character-x-velocity))

  (Inputs.KeyDown
   :Key "up"
   :Action
   (->
    (Msg "up")
    3 > .character-state
    .can-jump
    (When
     :Predicate (Is true)
     :Action (->
              -20.0 > .character-y-velocity
              1.0 >  .character-y-acceleration
              false >= .can-jump))))

  (Inputs.KeyUp
   :Key "left"
   :Action 
   (->
    0 > .character-state
    0.0 > .character-x-velocity))

  (Inputs.KeyUp
   :Key "right"
   :Action
   (->
    0 > .character-state
    0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ----------
(defshards initialize-coin []
  (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array
  (Count .coin-image-array) (Math.Subtract 1) >= .coin-image-index-max
  0 >= .coin-image-index
  0.1 >= .coin-animation-speed
  0.0 >= .coin-velocity-1
  0.5 >= .coin-acceleration

  ;; ----- Coin 1 ------
  0.0 >= .coinx-1
  0.0 >= .coiny-1
  (float2 .coinx-1 .coiny-1) >= .coin-position-1)

;; -------------- Coin Animation ------------------
(defloop coin-animation
  .coin-image-index (Math.Add 1)
  > .coin-image-index
  (When
   :Predicate (IsMore .coin-image-index-max)
   :Action (-> 0 > .coin-image-index))

  (Pause .coin-animation-speed))   

;; ------------- Coin Gravity ------------------
(defshards coin-gravity-logic []

  .coiny-1 (Math.Add .coin-velocity-1)
  > .coiny-1

  .coin-velocity-1 (Math.Add .coin-acceleration)
  > .coin-velocity-1

  (float2 .coinx-1 .coiny-1) > .coin-position-1)

(defloop main-wire
  (Setup
   (initialize-character)
   (initialize-coin))

  (run-logic)
  (gravity-logic)

  (Step idle-animation)
  (Step walking-animation)

  (Step coin-animation)
  (coin-gravity-logic)

  (GFX.MainWindow
   :Title "MainWindow" :Width 1920 :Height 1080
   :Contents
   (->
    (Setup
     (GFX.DrawQueue) >= .ui-draw-queue
     (GFX.UIPass .ui-draw-queue) >> .render-steps)
    .ui-draw-queue (GFX.ClearQueue)

    (UI
     .ui-draw-queue
     (->
      (UI.Area
       :Position .character-position
       :Anchor Anchor.Top
       :Contents
       (->
        .character-state
        (Match [0 (-> .character-direction
                      (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                              1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                             :Passthrough false))
                1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                3 (-> .character-jumping (UI.Image :Scale (float2 0.2)))]
               :Passthrough false)))

      (UI.Area
       :Position .coin-position-1
       :Anchor Anchor.Top
       :Contents
       (-> .coin-image-array
           (Take .coin-image-index)
           (UI.Image :Scale (float2 0.2))))))

    (GFX.Render :Steps .render-steps)

    (button-inputs))))

(defmesh main)
(schedule main main-wire)
(run main (/ 1.0 60))

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:

  1. Check when Glod is colliding with our coin.

  2. Gain a point when the collision happens.

Let's do this step by step.

First, nice and easy, let's create a .score variable. Remember to initialize this in your main loop setup.

1
2
(defshards initialize-game-elements []
  0 >= .score)

1
(initialize-game-elements)

Next, create a new UI.Area to draw our .score using UI.Label. Remember to convert our .score to a string first with the (ToString) shard.

1
2
3
4
(UI.Area :Position (float2 -40 20)
                            :Anchor Anchor.TopRight
                            :Contents (->
                                      .score (ToString)(UI.Label)))

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 let's do that.

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
;; ------ UI Style --------
(def style
  {:override_text_style "MyStyle"
  :text_styles
  [{:name "MyStyle"
    :size (float 46)
    :family "Monospace"}]
  :visuals
  {:override_text_color (color 250 250 250)}})

1
2
3
4
5
6
;; ------ UI Style --------
(UI.Area :Position (float2 -40 20)
                            :Anchor Anchor.TopRight
                            :Contents (->
                                      style (UI.Style)
                                      .Score (ToString)(UI.Label))) ;;(1)


  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
(defshards LoadTexture [name]
  (LoadImage name)
  (GFX.Texture))

(defshards initialize-character []
  (LoadTexture "GlodImages/Character1_Jumping_Left.png") = .character-jumping-left
  (LoadTexture "GlodImages/Character1_Jumping_Right.png") = .character-jumping-right

  0 >= .character-state
  0 >= .character-direction
  true >= .can-jump

  0.0 >= .X
  620.0 >= .Y
  (float2 .X .Y) >= .character-position
  0.0 >= .character-x-velocity
  0.0 >= .character-y-velocity
  0.0 >= .character-y-acceleration

  ;; ---------- Character Idle Array (Facing Left) ----------
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

  ;; ---------- Character Idle Array (Facing Right) ----------------
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

  0 >= .idle-image-index
  (Count .idle-left-image-array) = .idle-image-index-max
  0.08 = .idle-animation-speed

  ;; -------------- Walking Array (Facing Left) -----------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

  ;; ----------- Walking Array (Facing Right) ---------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

  (Count .walking-left-image-array) = .walking-image-index-max
  0 >= .walking-image-index
  0.08 = .walking-animation-speed) ;; Reduce number to increase animation speed

;; --------- Idle Animation Loop ---------
(defloop idle-animation
  .idle-image-index (Math.Add 1)
  > .idle-image-index
  (When :Predicate (IsMoreEqual .idle-image-index-max)
        :Action (-> 0 > .idle-image-index))
  (Pause .idle-animation-speed))

;; -------- Walking Animation Loop --------
(defloop walking-animation
  .walking-image-index (Math.Add 1)
  > .walking-image-index
  (When :Predicate (IsMoreEqual .walking-image-index-max)
        :Action (-> 0 > .walking-image-index))
  (Pause .walking-animation-speed))

;; ---------- character-boundary ------------

(defshards clamp [var min max]
  var (Max min) (Min max) > var)

;; ------------ Character Run Logic ----------------
(defshards run-logic []
  .X (Math.Add .character-x-velocity)
  > .X

  (float2 .X .Y) > .character-position

  (clamp .X -600.0 600.0))

;; ------------ Character gravity-logic ---------------
(defshards gravity-logic []
  .Y (Math.Add .character-y-velocity)
  > .Y

  .character-y-velocity (Math.Add .character-y-acceleration)
  > .character-y-velocity

  (float2 .X .Y) > .character-position

  (clamp .Y -620.0 620.0)
  .Y
  (When :Predicate (IsMoreEqual 620.0)
        :Action (->
                0.0 > .character-y-velocity
                0.0 > .character-y-acceleration
                true > .can-jump
                .character-state
                (When :Predicate (Is 3)
                      :Action (->
                                0 > .character-state)))))

;; ------- Button Inputs ----------
(defshards button-inputs []
  (Inputs.KeyDown
  :Key "left"
  :Action (->
            (Msg "left")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 1 > .character-state))

            0 > .character-direction
            -5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "right"
  :Action (->
            (Msg "right")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 2 > .character-state))
            1 > .character-direction
            5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "up"
  :Action (->
            (Msg "up")
            3 > .character-state
            .can-jump
            (When :Predicate (Is true)
                  :Action (->
                          -20.0 > .character-y-velocity
                          1.0 >  .character-y-acceleration
                          false >= .can-jump))))

  (Inputs.KeyUp
  :Key "left"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity))

  (Inputs.KeyUp
  :Key "right"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ----------
(defshards initialize-coin []
  (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array
  (Count .coin-image-array) = .coin-image-index-max
  0 >= .coin-image-index
  0.1 = .coin-animation-speed

  ;; ----- Coin 1 ------
  0.0 >= .coinx-1
  0.0 >= .coiny-1
  (float2 .coinx-1 .coiny-1) >= .coin-position-1
  0.0 >= .coin-velocity-1

  0.5 >= .coin-acceleration)

;; -------------- Coin Animation ------------------
(defloop coin-animation
  .coin-image-index (Math.Add 1)
  > .coin-image-index
  (When :Predicate (IsMoreEqual .coin-image-index-max)
        :Action (-> 0 > .coin-image-index))

  (Pause .coin-animation-speed))

;; ------------- Coin Gravity ------------------
(defshards coin-gravity-logic []

  .coiny-1 (Math.Add .coin-velocity-1)
  > .coiny-1

  .coin-velocity-1 (Math.Add .coin-acceleration)
  > .coin-velocity-1

  (float2 .coinx-1 .coiny-1) > .coin-position-1)

;; --------- Game Elements ------------
(defshards initialize-game-elements []
  0 >= .score)

;; ------ UI Style --------
(def style
  {:override_text_style "MyStyle"
  :text_styles
  [{:name "MyStyle"
    :size (float 46)
    :family "Monospace"}]
  :visuals
  {:override_text_color (color 250 250 250)}})

;;---------- main-wire ------------
(defloop main-wire
  (Setup
  (initialize-character)
  (initialize-coin)
  (initialize-game-elements))

  (run-logic)
  (gravity-logic)

  (Step idle-animation)
  (Step walking-animation)

  (Step coin-animation)
  (coin-gravity-logic)

  (GFX.MainWindow
  :Title "MainWindow" :Width 1920 :Height 1080
  :Contents
  (-> (Setup
        (GFX.DrawQueue) >= .ui-draw-queue
        (GFX.UIPass .ui-draw-queue) >> .render-steps)
      .ui-draw-queue (GFX.ClearQueue)

      (UI
        .ui-draw-queue
        (->
        (UI.Area :Position .character-position
                  :Anchor Anchor.Top
                  :Contents (->
                            .character-state
                            (Match [0 (-> .character-direction
                                          (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                                                  1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))
                                    1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    3 (->  .character-direction
                                            (Match [0 (-> .character-jumping-left (UI.Image :Scale (float2 0.2)))
                                                    1 (-> .character-jumping-right (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))]
                                    :Passthrough false)))

        (UI.Area :Position .coin-position-1
                  :Anchor Anchor.Top
                  :Contents (->
                            .coin-image-array (Take .coin-image-index) (UI.Image :Scale (float2 0.2))))

        (UI.Area :Position (float2 -40 20)
                  :Anchor Anchor.TopRight
                  :Contents (->
                            style (UI.Style)
                            .score (ToString) (UI.Label)))))

      (button-inputs)

      (GFX.Render :Steps .render-steps))))


(defmesh main)
(schedule main main-wire)
(run main (/ 1.0 60))

Step 5.5

Now that we have our score UI, we can start to increase it. To do this, we need our collision logic.

Create:

  1. An upper and lower x limit.

  2. 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. Since our character is moving, we have to constantly update our collision box.

Glod Collision Box

We also create a .scored variable to limit the number of times we can score from one coin. These variables will be added under initialize-game-elements.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.X (Math.Add 50.0)
>= .scoringUpper-x-limit
.X (Math.Subtract 50.0)
>= .scoringLower-x-limit

.Y (Math.Add 10.0)
>= .scoringUpper-y-limit
.Y (Math.Subtract 10.0)
>= .scoringLower-y-limit

false >= .scored

Next, we will implement our collision logic with a conditional statement.

Create the logic to trigger whenever our coin falls within our collision box.

This conditional statement will check if the x value of our coin:

  • Is lesser then the upper x limit of our collision box.

  • Is 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.

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
;; ------------- Scoring ------------
(defshards score-collision []
  .coinx-1
  (When :Predicate (->
                    (IsLess .scoringUpper-x-limit)
                    (And)
                    .coinx-1 (IsMore .scoringLower-x-limit)
                    (And)
                    .coiny-1 (IsLess .scoringUpper-y-limit)
                    (And)
                    .coiny-1 (IsMore .scoringLower-y-limit)
                    (And)
                    .scored (Is false))
        :Action (->
                true > .scored
                (Log "Score: "))))

(defshards scoring []
  .X (Math.Add 50.0)
  > .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  > .scoringLower-x-limit

  .Y (Math.Add 10.0)
  > .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  > .scoringLower-y-limit 

  (score-collision)

  .scored
  (When :Predicate (Is true)
        :Action (->
                .score (Math.Add 1)
                > .score
                false > .scored)))

  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
(defshards LoadTexture [name]
  (LoadImage name)
  (GFX.Texture))

(defshards initialize-character []
  (LoadTexture "GlodImages/Character1_Jumping_Left.png") = .character-jumping-left
  (LoadTexture "GlodImages/Character1_Jumping_Right.png") = .character-jumping-right

  0 >= .character-state
  0 >= .character-direction
  true >= .can-jump

  0.0 >= .X
  620.0 >= .Y
  (float2 .X .Y) >= .character-position
  0.0 >= .character-x-velocity
  0.0 >= .character-y-velocity
  0.0 >= .character-y-acceleration

  ;; ---------- Character Idle Array (Facing Left) ----------
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

  ;; ---------- Character Idle Array (Facing Right) ----------------
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

  0 >= .idle-image-index
  (Count .idle-left-image-array) = .idle-image-index-max
  0.08 = .idle-animation-speed

  ;; -------------- Walking Array (Facing Left) -----------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

  ;; ----------- Walking Array (Facing Right) ---------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

  (Count .walking-left-image-array) = .walking-image-index-max
  0 >= .walking-image-index
  0.08 = .walking-animation-speed) ;; Reduce number to increase animation speed

;; --------- Idle Animation Loop ---------
(defloop idle-animation
  .idle-image-index (Math.Add 1)
  > .idle-image-index
  (When :Predicate (IsMoreEqual .idle-image-index-max)
        :Action (-> 0 > .idle-image-index))
  (Pause .idle-animation-speed))

;; -------- Walking Animation Loop --------
(defloop walking-animation
  .walking-image-index (Math.Add 1)
  > .walking-image-index
  (When :Predicate (IsMoreEqual .walking-image-index-max)
        :Action (-> 0 > .walking-image-index))
  (Pause .walking-animation-speed))

;; ---------- character-boundary ------------

(defshards clamp [var min max]
  var (Max min) (Min max) > var)

;; ------------ Character Run Logic ----------------
(defshards run-logic []
  .X (Math.Add .character-x-velocity)
  > .X

  (float2 .X .Y) > .character-position

  (clamp .X -600.0 600.0))

;; ------------ Character gravity-logic ---------------
(defshards gravity-logic []
  .Y (Math.Add .character-y-velocity)
  > .Y

  .character-y-velocity (Math.Add .character-y-acceleration)
  > .character-y-velocity

  (float2 .X .Y) > .character-position

  (clamp .Y -620.0 620.0)
  .Y
  (When :Predicate (IsMoreEqual 620.0)
        :Action (->
                0.0 > .character-y-velocity
                0.0 > .character-y-acceleration
                true > .can-jump
                .character-state
                (When :Predicate (Is 3)
                      :Action (->
                                0 > .character-state)))))

;; ------- Button Inputs ----------
(defshards button-inputs []
  (Inputs.KeyDown
  :Key "left"
  :Action (->
            (Msg "left")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 1 > .character-state))

            0 > .character-direction
            -5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "right"
  :Action (->
            (Msg "right")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 2 > .character-state))
            1 > .character-direction
            5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "up"
  :Action (->
            (Msg "up")
            3 > .character-state
            .can-jump
            (When :Predicate (Is true)
                  :Action (->
                          -20.0 > .character-y-velocity
                          1.0 >  .character-y-acceleration
                          false >= .can-jump))))

  (Inputs.KeyUp
  :Key "left"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity))

  (Inputs.KeyUp
  :Key "right"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ----------
(defshards initialize-coin []
  (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array
  (Count .coin-image-array) = .coin-image-index-max
  0 >= .coin-image-index
  0.1 = .coin-animation-speed

  ;; ----- Coin 1 ------
  0.0 >= .coinx-1
  0.0 >= .coiny-1
  (float2 .coinx-1 .coiny-1) >= .coin-position-1
  0.0 >= .coin-velocity-1

  0.5 >= .coin-acceleration)

;; -------------- Coin Animation ------------------
(defloop coin-animation
  .coin-image-index (Math.Add 1)
  > .coin-image-index
  (When :Predicate (IsMoreEqual .coin-image-index-max)
        :Action (-> 0 > .coin-image-index))

  (Pause .coin-animation-speed))

;; ------------- Coin Gravity ------------------
(defshards coin-gravity-logic []

  .coiny-1 (Math.Add .coin-velocity-1)
  > .coiny-1

  .coin-velocity-1 (Math.Add .coin-acceleration)
  > .coin-velocity-1

  (float2 .coinx-1 .coiny-1) > .coin-position-1)

;; --------- Game Elements ------------
(defshards initialize-game-elements []
  0 >= .score
  .X (Math.Add 50.0)
  >= .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  >= .scoringLower-x-limit

  .Y (Math.Add 10.0)
  >= .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  >= .scoringLower-y-limit

  false >= .scored)

; ------------- Scoring ------------
(defshards score-collision []
  .coinx-1
  (When :Predicate (->
                    (IsLess .scoringUpper-x-limit)
                    (And)
                    .coinx-1 (IsMore .scoringLower-x-limit)
                    (And)
                    .coiny-1 (IsLess .scoringUpper-y-limit)
                    (And)
                    .coiny-1 (IsMore .scoringLower-y-limit)
                    (And)
                    .scored (Is false))
        :Action (->
                true > .scored
                (Log "Score: "))))

(defshards scoring []
  .X (Math.Add 50.0)
  > .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  > .scoringLower-x-limit

  .Y (Math.Add 10.0)
  > .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  > .scoringLower-y-limit

  (score-collision)

  .scored
  (When :Predicate (Is true)
        :Action (->
                .score (Math.Add 1)
                > .score
                false > .scored)))



;; ------ UI Style --------
(def style
  {:override_text_style "MyStyle"
  :text_styles
  [{:name "MyStyle"
    :size (float 46)
    :family "Monospace"}]
  :visuals
  {:override_text_color (color 250 250 250)}})

;;---------- main-wire ------------
(defloop main-wire
  (Setup
  (initialize-character)
  (initialize-coin)
  (initialize-game-elements))

  (run-logic)
  (gravity-logic)

  (Step idle-animation)
  (Step walking-animation)

  (Step coin-animation)
  (coin-gravity-logic)

  (scoring)

  (GFX.MainWindow
  :Title "MainWindow" :Width 1920 :Height 1080
  :Contents
  (-> (Setup
        (GFX.DrawQueue) >= .ui-draw-queue
        (GFX.UIPass .ui-draw-queue) >> .render-steps)
      .ui-draw-queue (GFX.ClearQueue)

      (UI
        .ui-draw-queue
        (->
        (UI.Area :Position .character-position
                  :Anchor Anchor.Top
                  :Contents (->
                            .character-state
                            (Match [0 (-> .character-direction
                                          (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                                                  1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))
                                    1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    3 (->  .character-direction
                                            (Match [0 (-> .character-jumping-left (UI.Image :Scale (float2 0.2)))
                                                    1 (-> .character-jumping-right (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))]
                                    :Passthrough false)))

        (UI.Area :Position .coin-position-1
                  :Anchor Anchor.Top
                  :Contents (->
                            .coin-image-array (Take .coin-image-index) (UI.Image :Scale (float2 0.2))))

        (UI.Area :Position (float2 -40 20)
                  :Anchor Anchor.TopRight
                  :Contents (->
                            style (UI.Style)
                            .score (ToString) (UI.Label)))))

      (button-inputs)

      (GFX.Render :Steps .render-steps))))


(defmesh main)
(schedule main main-wire)
(run main (/ 1.0 60))

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. Let's reuse this coin and have it appear again in another random x position for Glod to run after and collect.

Here we are creating a loop that will give our coin a random x value and reset its y value. It will do this every one and a half seconds. This means that our coin will randomly spawn, fall, and then one and a half seconds later, randomly spawn and fall again.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
;; ---------- Random Coin ------------
(defloop random-coin
  .coinx-1
  (RandomFloat :Max 1200.0)
  > .coinx-1
  (Math.Subtract 600.0)
  > .coinx-1

  0.0 > .coiny-1
  0.0 > .coin-velocity-1
  (float2 .coinx-1 .coiny-1) > .coin-position-1
  (Pause 1.5))

Remember to Step into your loop in your main wire.

```{.clojure .annotate linenums="1"}
(Step  random-coin) ;; (1)      
```

  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
(defshards LoadTexture [name]
  (LoadImage name)
  (GFX.Texture))

(defshards initialize-character []
  (LoadTexture "GlodImages/Character1_Jumping_Left.png") = .character-jumping-left
  (LoadTexture "GlodImages/Character1_Jumping_Right.png") = .character-jumping-right

  0 >= .character-state
  0 >= .character-direction
  true >= .can-jump

  0.0 >= .X
  620.0 >= .Y
  (float2 .X .Y) >= .character-position
  0.0 >= .character-x-velocity
  0.0 >= .character-y-velocity
  0.0 >= .character-y-acceleration

  ;; ---------- Character Idle Array (Facing Left) ----------
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

  ;; ---------- Character Idle Array (Facing Right) ----------------
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

  0 >= .idle-image-index
  (Count .idle-left-image-array) = .idle-image-index-max
  0.08 = .idle-animation-speed

  ;; -------------- Walking Array (Facing Left) -----------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

  ;; ----------- Walking Array (Facing Right) ---------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

  (Count .walking-left-image-array) = .walking-image-index-max
  0 >= .walking-image-index
  0.08 = .walking-animation-speed) ;; Reduce number to increase animation speed

;; --------- Idle Animation Loop ---------
(defloop idle-animation
  .idle-image-index (Math.Add 1)
  > .idle-image-index
  (When :Predicate (IsMoreEqual .idle-image-index-max)
        :Action (-> 0 > .idle-image-index))
  (Pause .idle-animation-speed))

;; -------- Walking Animation Loop --------
(defloop walking-animation
  .walking-image-index (Math.Add 1)
  > .walking-image-index
  (When :Predicate (IsMoreEqual .walking-image-index-max)
        :Action (-> 0 > .walking-image-index))
  (Pause .walking-animation-speed))

;; ---------- character-boundary ------------

(defshards clamp [var min max]
  var (Max min) (Min max) > var)

;; ------------ Character Run Logic ----------------
(defshards run-logic []
  .X (Math.Add .character-x-velocity)
  > .X

  (float2 .X .Y) > .character-position

  (clamp .X -600.0 600.0))

;; ------------ Character gravity-logic ---------------
(defshards gravity-logic []
  .Y (Math.Add .character-y-velocity)
  > .Y

  .character-y-velocity (Math.Add .character-y-acceleration)
  > .character-y-velocity

  (float2 .X .Y) > .character-position

  (clamp .Y -620.0 620.0)
  .Y
  (When :Predicate (IsMoreEqual 620.0)
        :Action (->
                0.0 > .character-y-velocity
                0.0 > .character-y-acceleration
                true > .can-jump
                .character-state
                (When :Predicate (Is 3)
                      :Action (->
                                0 > .character-state)))))

;; ------- Button Inputs ----------
(defshards button-inputs []
  (Inputs.KeyDown
  :Key "left"
  :Action (->
            (Msg "left")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 1 > .character-state))

            0 > .character-direction
            -5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "right"
  :Action (->
            (Msg "right")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 2 > .character-state))
            1 > .character-direction
            5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "up"
  :Action (->
            (Msg "up")
            3 > .character-state
            .can-jump
            (When :Predicate (Is true)
                  :Action (->
                          -20.0 > .character-y-velocity
                          1.0 >  .character-y-acceleration
                          false >= .can-jump))))

  (Inputs.KeyUp
  :Key "left"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity))

  (Inputs.KeyUp
  :Key "right"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ----------
(defshards initialize-coin []
  (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array
  (Count .coin-image-array) = .coin-image-index-max
  0 >= .coin-image-index
  0.1 = .coin-animation-speed

  ;; ----- Coin 1 ------
  0.0 >= .coinx-1
  0.0 >= .coiny-1
  (float2 .coinx-1 .coiny-1) >= .coin-position-1
  0.0 >= .coin-velocity-1

  0.5 >= .coin-acceleration)

;; -------------- Coin Animation ------------------
(defloop coin-animation
  .coin-image-index (Math.Add 1)
  > .coin-image-index
  (When :Predicate (IsMoreEqual .coin-image-index-max)
        :Action (-> 0 > .coin-image-index))

  (Pause .coin-animation-speed))

;; ------------- Coin Gravity ------------------
(defshards coin-gravity-logic []

  .coiny-1 (Math.Add .coin-velocity-1)
  > .coiny-1

  .coin-velocity-1 (Math.Add .coin-acceleration)
  > .coin-velocity-1

  (float2 .coinx-1 .coiny-1) > .coin-position-1)

;; ------------- Random Coin ------------------
(defloop random-coin
  .coinx-1
  (RandomFloat :Max 1200.0)
  > .coinx-1
  (Math.Subtract 600.0)
  > .coinx-1

  0.0 > .coiny-1
  0.0 > .coin-velocity-1
  (float2 .coinx-1 .coiny-1) > .coin-position-1
  (Pause 1.5))

;; --------- Game Elements ------------
(defshards initialize-game-elements []
  0 >= .score
  .X (Math.Add 50.0)
  >= .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  >= .scoringLower-x-limit

  .Y (Math.Add 10.0)
  >= .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  >= .scoringLower-y-limit

  false >= .scored)

; ------------- Scoring ------------
(defshards score-collision []
  .coinx-1
  (When :Predicate (->
                    (IsLess .scoringUpper-x-limit)
                    (And)
                    .coinx-1 (IsMore .scoringLower-x-limit)
                    (And)
                    .coiny-1 (IsLess .scoringUpper-y-limit)
                    (And)
                    .coiny-1 (IsMore .scoringLower-y-limit)
                    (And)
                    .scored (Is false))
        :Action (->
                true > .scored
                (Log "Score: "))))

(defshards scoring []
  .X (Math.Add 50.0)
  > .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  > .scoringLower-x-limit

  .Y (Math.Add 10.0)
  > .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  > .scoringLower-y-limit

  (score-collision)

  .scored
  (When :Predicate (Is true)
        :Action (->
                .score (Math.Add 1)
                > .score
                false > .scored)))



;; ------ UI Style --------
(def style
  {:override_text_style "MyStyle"
  :text_styles
  [{:name "MyStyle"
    :size (float 46)
    :family "Monospace"}]
  :visuals
  {:override_text_color (color 250 250 250)}})

;;---------- main-wire ------------
(defloop main-wire
  (Setup
  (initialize-character)
  (initialize-coin)
  (initialize-game-elements))

  (run-logic)
  (gravity-logic)

  (Step idle-animation)
  (Step walking-animation)

  (Step coin-animation)
  (coin-gravity-logic)
  (Step  random-coin)

  (scoring)

  (GFX.MainWindow
  :Title "MainWindow" :Width 1920 :Height 1080
  :Contents
  (-> (Setup
        (GFX.DrawQueue) >= .ui-draw-queue
        (GFX.UIPass .ui-draw-queue) >> .render-steps)
      .ui-draw-queue (GFX.ClearQueue)

      (UI
        .ui-draw-queue
        (->
        (UI.Area :Position .character-position
                  :Anchor Anchor.Top
                  :Contents (->
                            .character-state
                            (Match [0 (-> .character-direction
                                          (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                                                  1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))
                                    1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    3 (->  .character-direction
                                            (Match [0 (-> .character-jumping-left (UI.Image :Scale (float2 0.2)))
                                                    1 (-> .character-jumping-right (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))]
                                    :Passthrough false)))

        (UI.Area :Position .coin-position-1
                  :Anchor Anchor.Top
                  :Contents (->
                            .coin-image-array (Take .coin-image-index) (UI.Image :Scale (float2 0.2))))

        (UI.Area :Position (float2 -40 20)
                  :Anchor Anchor.TopRight
                  :Contents (->
                            style (UI.Style)
                            .score (ToString) (UI.Label)))))

      (button-inputs)

      (GFX.Render :Steps .render-steps))))


(defmesh main)
(schedule main main-wire)
(run main (/ 1.0 60))

Try running your code now!

Congrats, you have a very basic game. You can try it out and have fun chasing coins! 😁

Step 5.7

While we have a basic game on our hands now, we can still polish it further. Currently, we only have one coin spawning. Let's have more! To do this, we have to change some of our shards to accept arguments instead of having hard coded variables.

Create some new variables for our second coin. These variables are added under initialize-coin.

1
2
3
4
5
;; ----- Coin 2 ----
  0.0 >= .coinx-2
  0.0 >= .coiny-2
  (float2 .coinx-2 .coiny-2) >= .coin-position-2
  0.0 >= .coin-velocity-2)

Next, create a 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.

1
2
3
4
(UI.Area :Position .coin-position-2
                  :Anchor Anchor.Top
                  :Contents (->
                            .coin-image-array (Take .coin-image-index) (UI.Image :Scale (float2 0.2))))

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
;; ###### DON'T DO THIS ########
(defshards coin-gravity-logic []

  .coiny-1 (Math.Add .coin-velocity-1)
  > .coiny-1

  .coin-velocity-1 (Math.Add .coi-acceleration)
  > .coin-velocity-1

  (float2 .coinx-1 .coiny-1) > .coin-position-1)

(defshards coin-gravity-logic-2 []

  .coiny-2 (Math.Add .coin-velocity-1)
  > .coiny-2

  .coin-velocity-2 (Math.Add .coin-acceleration)
  > .coin-velocity-2

  (float2 .coinx-2 .coiny-2) > .coin-position-2)

While the above code can work, our code will end up being very messy. Instead, let's have our original coin-gravity-logic shard take in arguments instead.

Here we convert our original coin-gravity-logic shard into one that takes arguments. Now that we have this, rather than duplicating this code a million times, we can call it as many times as required and simply pass it the correct variables.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
;; ------------- Coin Gravity ------------------
(defshards coin-gravity-logic [coiny coinx coin-velocity coin-position]

  coiny (Math.Add coin-velocity)
  > coiny

  coin-velocity (Math.Add .coin-acceleration)
  > coin-velocity

  (float2 coinx coiny) > coin-position)

1
2
(coin-gravity-logic .coiny-1 .coinx-1 .coin-velocity-1 .coin-position-1)
(coin-gravity-logic .coiny-2 .coinx-2 .coin-velocity-2 .coin-position-2)

We'll do the same for our coin randomizing logic.

Now you might be wondering how do we get our random-coin logic to accept arguments as it is a defloop and 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 below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
;; ------------- Random Coin ------------------
(defshards random-coin [coinx coiny coin-velocity coin-position pause-length]
  coinx
  (RandomFloat :Max 1200.0)
  > coinx
  (Math.Subtract 600.0)
  > coinx

  0.0 > coiny
  0.0 > coin-velocity
  (float2 coinx coiny) > coin-position
  (Pause pause-length))

1
2
3
4
5
(defloop random-coin-1
  (random-coin .coinx-1 .coiny-1 .coin-velocity-1 .coin-position-1 1.5))

(defloop random-coin-2
  (random-coin .coinx-2 .coiny-2 .coin-velocity-2 .coin-position-2 2.5))

1
2
(Step random-coin-1)
(Step random-coin-2)

Now, last but not least, we will 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
;; --------- Scoring ----------
(defshards score-collision [coinx coiny]
  coinx
  (When :Predicate (->
                    (IsLess .scoringUpper-x-limit)
                    (And)
                    coinx (IsMore .scoringLower-x-limit)
                    (And)
                    coiny (IsLess .scoringUpper-y-limit)
                    (And)
                    coiny (IsMore .scoringLower-y-limit)
                    (And)
                    .scored (Is false))
        :Action (->
                true > .scored
                (Log "Score: "))))

(defshards scoring []
  .X (Math.Add 50.0)
  > .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  > .scoringLower-x-limit

  .Y (Math.Add 10.0)
  > .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  > .scoringLower-y-limit

  (score-collision .coinx-1 .coiny-1)
  (score-collision .coinx-2 .coiny-2)

  .scored
  (When :Predicate (Is true)
        :Action (->
                .score (Math.Add 1)
                > .score
                false > .scored)))

  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
(defshards LoadTexture [name]
  (LoadImage name)
  (GFX.Texture))

(defshards initialize-character []
  (LoadTexture "GlodImages/Character1_Jumping_Left.png") = .character-jumping-left
  (LoadTexture "GlodImages/Character1_Jumping_Right.png") = .character-jumping-right

  0 >= .character-state
  0 >= .character-direction
  true >= .can-jump

  0.0 >= .X
  620.0 >= .Y
  (float2 .X .Y) >= .character-position
  0.0 >= .character-x-velocity
  0.0 >= .character-y-velocity
  0.0 >= .character-y-acceleration

  ;; ---------- Character Idle Array (Facing Left) ----------
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_1.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_2.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_3.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_4.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_5.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_6.png") >> .idle-left-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Left/Character1_Idle_Left_7.png") >> .idle-left-image-array

  ;; ---------- Character Idle Array (Facing Right) ----------------
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_1.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_2.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_3.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_4.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_5.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_6.png") >> .idle-right-image-array
  (LoadTexture "GlodImages/Character_Idle/Idle_Right/Character1_Idle_7.png") >> .idle-right-image-array

  0 >= .idle-image-index
  (Count .idle-left-image-array) = .idle-image-index-max
  0.08 = .idle-animation-speed

  ;; -------------- Walking Array (Facing Left) -----------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_1.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_2.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_3.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_4.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_5.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_6.png") >> .walking-left-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Left/Character1_Walking_Left_7.png") >> .walking-left-image-array

  ;; ----------- Walking Array (Facing Right) ---------------
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_1.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_2.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_3.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_4.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_5.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_6.png") >> .walking-right-image-array
  (LoadTexture "GlodImages/Character_Walking/Walking_Right/Character1_Walking_Right_7.png") >> .walking-right-image-array

  (Count .walking-left-image-array) = .walking-image-index-max
  0 >= .walking-image-index
  0.08 = .walking-animation-speed) ;; Reduce number to increase animation speed

;; --------- Idle Animation Loop ---------
(defloop idle-animation
  .idle-image-index (Math.Add 1)
  > .idle-image-index
  (When :Predicate (IsMoreEqual .idle-image-index-max)
        :Action (-> 0 > .idle-image-index))
  (Pause .idle-animation-speed))

;; -------- Walking Animation Loop --------
(defloop walking-animation
  .walking-image-index (Math.Add 1)
  > .walking-image-index
  (When :Predicate (IsMoreEqual .walking-image-index-max)
        :Action (-> 0 > .walking-image-index))
  (Pause .walking-animation-speed))

;; ---------- character-boundary ------------

(defshards clamp [var min max]
  var (Max min) (Min max) > var)

;; ------------ Character Run Logic ----------------
(defshards run-logic []
  .X (Math.Add .character-x-velocity)
  > .X

  (float2 .X .Y) > .character-position

  (clamp .X -600.0 600.0))

;; ------------ Character gravity-logic ---------------
(defshards gravity-logic []
  .Y (Math.Add .character-y-velocity)
  > .Y

  .character-y-velocity (Math.Add .character-y-acceleration)
  > .character-y-velocity

  (float2 .X .Y) > .character-position

  (clamp .Y -620.0 620.0)
  .Y
  (When :Predicate (IsMoreEqual 620.0)
        :Action (->
                0.0 > .character-y-velocity
                0.0 > .character-y-acceleration
                true > .can-jump
                .character-state
                (When :Predicate (Is 3)
                      :Action (->
                                0 > .character-state)))))

;; ------- Button Inputs ----------
(defshards button-inputs []
  (Inputs.KeyDown
  :Key "left"
  :Action (->
            (Msg "left")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 1 > .character-state))

            0 > .character-direction
            -5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "right"
  :Action (->
            (Msg "right")

            .character-state
            (When :Predicate (Is 0)
                  :Action (-> 2 > .character-state))
            1 > .character-direction
            5.0 > .character-x-velocity))

  (Inputs.KeyDown
  :Key "up"
  :Action (->
            (Msg "up")
            3 > .character-state
            .can-jump
            (When :Predicate (Is true)
                  :Action (->
                          -20.0 > .character-y-velocity
                          1.0 >  .character-y-acceleration
                          false >= .can-jump))))

  (Inputs.KeyUp
  :Key "left"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity))

  (Inputs.KeyUp
  :Key "right"
  :Action (->
            0 > .character-state
            0.0 > .character-x-velocity)))

;; -------------- Initialize Coin ----------
(defshards initialize-coin []
  (LoadTexture "GlodImages/Coin/Coin_1.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_2.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_3.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_4.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_5.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_6.png") >> .coin-image-array
  (LoadTexture "GlodImages/Coin/Coin_7.png") >> .coin-image-array
  (Count .coin-image-array) = .coin-image-index-max
  0 >= .coin-image-index
  0.1 = .coin-animation-speed

  ;; ----- Coin 1 ------
  0.0 >= .coinx-1
  0.0 >= .coiny-1
  (float2 .coinx-1 .coiny-1) >= .coin-position-1
  0.0 >= .coin-velocity-1
  0.5 >= .coin-acceleration

  ;; ----- Coin 2 ----
  0.0 >= .coinx-2
  0.0 >= .coiny-2
  (float2 .coinx-2 .coiny-2) >= .coin-position-2
  0.0 >= .coin-velocity-2)

;; -------------- Coin Animation ------------------
(defloop coin-animation
  .coin-image-index (Math.Add 1)
  > .coin-image-index
  (When :Predicate (IsMoreEqual .coin-image-index-max)
        :Action (-> 0 > .coin-image-index))

  (Pause .coin-animation-speed))

;; ------------- Coin Gravity ------------------
(defshards coin-gravity-logic [coiny coinx coin-velocity coin-position]

  coiny (Math.Add coin-velocity)
  > coiny

  coin-velocity (Math.Add .coin-acceleration)
  > coin-velocity

  (float2 coinx coiny) > coin-position)

;; ------------- Random Coin ------------------
(defshards random-coin [coinx coiny coin-velocity coin-position pause-length]
  coinx
  (RandomFloat :Max 1200.0)
  > coinx
  (Math.Subtract 600.0)
  > coinx

  0.0 > coiny
  0.0 > coin-velocity
  (float2 coinx coiny) > coin-position
  (Pause pause-length))

(defloop random-coin-1
  (random-coin .coinx-1 .coiny-1 .coin-velocity-1 .coin-position-1 1.5))

(defloop random-coin-2
  (random-coin .coinx-2 .coiny-2 .coin-velocity-2 .coin-position-2 2.5))

;; --------- Game Elements ------------
(defshards initialize-game-elements []
  0 >= .score
  false >= .scored

  .X (Math.Add 50.0)
  >= .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  >= .scoringLower-x-limit

  .Y (Math.Add 10.0)
  >= .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  >= .scoringLower-y-limit)

;; --------- Scoring ----------
(defshards score-collision [coinx coiny]
  coinx
  (When :Predicate (->
                    (IsLess .scoringUpper-x-limit)
                    (And)
                    coinx (IsMore .scoringLower-x-limit)
                    (And)
                    coiny (IsLess .scoringUpper-y-limit)
                    (And)
                    coiny (IsMore .scoringLower-y-limit)
                    (And)
                    .scored (Is false))
        :Action (->
                true > .scored
                (Log "Score: "))))

(defshards scoring []
  .X (Math.Add 50.0)
  > .scoringUpper-x-limit
  .X (Math.Subtract 50.0)
  > .scoringLower-x-limit

  .Y (Math.Add 10.0)
  > .scoringUpper-y-limit
  .Y (Math.Subtract 10.0)
  > .scoringLower-y-limit

  (score-collision .coinx-1 .coiny-1)
  (score-collision .coinx-2 .coiny-2)

  .scored
  (When :Predicate (Is true)
        :Action (->
                .score (Math.Add 1)
                > .score
                false > .scored)))

;; ------ UI Style --------
(def style
  {:override_text_style "MyStyle"
  :text_styles
  [{:name "MyStyle"
    :size (float 46)
    :family "Monospace"}]
  :visuals
  {:override_text_color (color 250 250 250)}})

;;---------- main-wire ------------
(defloop main-wire
  (Setup
  (initialize-character)
  (initialize-coin)
  (initialize-game-elements))

  (coin-gravity-logic .coiny-1 .coinx-1 .coin-velocity-1 .coin-position-1)
  (coin-gravity-logic .coiny-2 .coinx-2 .coin-velocity-2 .coin-position-2)

  (run-logic)
  (gravity-logic)
  (scoring)

  (Step idle-animation)
  (Step walking-animation)
  (Step coin-animation)

  (Step random-coin-1)
  (Step random-coin-2)

  (GFX.MainWindow
  :Title "MainWindow" :Width 1920 :Height 1080
  :Contents
  (-> (Setup
        (GFX.DrawQueue) >= .ui-draw-queue
        (GFX.UIPass .ui-draw-queue) >> .render-steps)
      .ui-draw-queue (GFX.ClearQueue)

      (UI
        .ui-draw-queue
        (->
        (UI.Area :Position .character-position
                  :Anchor Anchor.Top
                  :Contents (->
                            .character-state
                            (Match [0 (-> .character-direction
                                          (Match [0 (-> .idle-left-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))
                                                  1 (-> .idle-right-image-array (Take .idle-image-index) (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))
                                    1 (-> .walking-left-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    2 (-> .walking-right-image-array (Take .walking-image-index) (UI.Image :Scale (float2 0.2)))
                                    3 (->  .character-direction
                                            (Match [0 (-> .character-jumping-left (UI.Image :Scale (float2 0.2)))
                                                    1 (-> .character-jumping-right (UI.Image :Scale (float2 0.2)))]
                                                  :Passthrough false))]
                                    :Passthrough false)))

        (UI.Area :Position .coin-position-1
                  :Anchor Anchor.Top
                  :Contents (->
                            .coin-image-array (Take .coin-image-index) (UI.Image :Scale (float2 0.2))))

        (UI.Area :Position .coin-position-2
                  :Anchor Anchor.Top
                  :Contents (->
                            .coin-image-array (Take .coin-image-index) (UI.Image :Scale (float2 0.2))))

        (UI.Area :Position (float2 -40 20)
                  :Anchor Anchor.TopRight
                  :Contents (->
                            style (UI.Style)
                            .score (ToString) (UI.Label)))))

      (button-inputs)

      (GFX.Render :Steps .render-steps))))


(defmesh main)
(schedule main main-wire)
(run main (/ 1.0 60))

Now with all the pieces in place, we can add as many coins as we want.

In this tutorial we will stick to just four coins, but you can create as many as you want!

Just remember to follow the same process and flow as the above to make sure that you don't miss out something.

In summary:

  1. Create the necessary variables for your new coins.

  2. Create a new UI.Area for each of your new coins.

  3. Make sure your new coins fall by adding new coin-gravity-logic.

  4. Make sure your coins loop and randomize by adding a new random-coin-loop.

  5. Make sure you can earn points from them by adding a 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 to make our character move.

  • We created a scoring system by making a collision system.

  • We set up 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! 👋🏼😀