Part 2: Create A Clicker Game With Rust

#rust #macroquad #gamedev #series

This is part 2 of the series, check out part one here

Introduction

Greetings 👋!
In this part, we'll be looking how to make the user have better experience by adding sounds when clicking the circle, and changing it's color.

Adding sound

Macroquad provides us with functions for loading sounds and playing them. But first, let's get the sounds that we need.
Create a res folder in the main folder (out side of src). This is where we'll keep the resources for the game such as sounds, images etc.
Now, get your sounds!
You can download the sounds that I used here (in the res folder)
Now let's get coding

We'll first import the functions we need:

use macroquad::audio::{play_sound_once,load_sound};

The functions do exactly what they sound like.
load_sound loads the sound, while play_sound_once plays the sound once. There's also another function play_sound which requires some additional params which allow more customization.
Let's load the sounds!

//snip
let click_sound = load_sound("res/click.wav").await.unwrap();

load_sound takes in one argument, the path to the sound. We use await to wait for that sound to load and unwrap because load_sound returns a Result type, which has either the sound or FileError.
Now, let's play the sound for each click in the circle, add this in your click detection:

// snip
if circle.overlaps(&mouse_circ){
            score+=1;
            play_sound_once(click_sound); // add this!
}

play_sound_once just takes the sound to play. Pretty Simple right? Now to test yourself, play another sound if the score reaches each multiple of 10. If you haven't got another sound, use the milestone one in the repository.
Here's one way of completing that.
Load the sound

let milestone_sound = load_sound("res/milestone.wav").await.unwrap();

Check if score is a multiple of 10:

//snip
if  circle.overlaps(&mouse_circ){
           ...
            if score%10 ==0 {
               play_sound_once(milestone_sound);
            }
}

And that's it, you've got sounds in your game!

Changing Colors

This one is pretty simple too.
First let's declare a constant array of colors which we're going to use:

const COLORS:[Color;9] = [
   RED,
   GREEN,
   BLUE,
   PURPLE,
   SKYBLUE,
   BLACK,
   WHITE,
   YELLOW,
   PINK,
];

I've used 9, you can use how ever many you want.
Then let's make a color variable, so that we can dynamically change the color.

let mut color = RED; //RED being the default color which we'll use now

Then make once change in the color argument of our draw_circle function:

draw_circle(x,y,r,color);

Now, on each click, randomly get a color and assign the color variable to it:

//snip
if  circle.overlaps(&mouse_circ){
           ...
           color = COLORS[rand::gen_range(0,9)]; //use use 9 as the max value because we've got 9 colors in our array
};

And we're done, we've got the color changing in our game too!

Here's the final code:

use macroquad::prelude::*;
use macroquad::audio::{play_sound_once,load_sound};

const COLORS:[Color;9] = [
   RED,
   GREEN,
   BLUE,
   PURPLE,
   SKYBLUE,
   BLACK,
   WHITE,
   YELLOW,
   PINK,
];

#[macroquad::main("Clicker Game")]
async fn main() {
   let (x,y) = (screen_width()/2.,screen_height()/2.);
   let r = 70.;
   let circle = Circle::new(x,y,r);
   let mut score = 0;
   let click_sound = load_sound("res/click.wav").await.unwrap();
   let milestone_sound = load_sound("res/milestone.wav").await.unwrap();
   let mut color:Color = RED;
   loop {
      clear_background(GRAY);

      if is_mouse_button_pressed(MouseButton::Left) {
         let (mouse_x,mouse_y) = mouse_position();
         let mouse_circ = Circle::new(mouse_x,mouse_y,1.);

         if  circle.overlaps(&mouse_circ){
            score+=1;
            play_sound_once(click_sound);
            color = COLORS[rand::gen_range(0,9)];
            if score%10 ==0 {
               play_sound_once(milestone_sound);
            }

         }
      }

      draw_text("Clicker Game",screen_width()/2.-100.,100.,50.,WHITE);
      draw_text(format!("Clicks: {}",score).as_str(),screen_width()/2.-100.,500.,50.,WHITE);
      draw_circle(x,y,r,color);
      next_frame().await;
   }
}

Hope this series helped you in learning about this easy to use framework. I seriously recommend exploring their official examples which can be found in their website.
Goodbye 👋!