DEV Community: Flavius

Pong: With Rust and Macroquad

Flavius — Mon, 10 Apr 2023 10:55:27 +0000

Introduction

In this short tutorial, learn how to make a two-player pong game in Rust.
We will be using Macroquad for this.

Prerequisites

Having Rust installed on your machine.
Some basic knowledge of Rust (structs, tuples, async/await, loops and random numbers etc.).
If you want to learn some basics of Macroquad, click here

Getting Started

Create a new Rust project:

cargo new pong

Add Macroquad and Rand Crate:

Either add it in your Cargo.toml file:

[dependencies]
macroquad = "0.3.25"
rand = "0.8.5"
# these were the latest versions on the time of making this post

Or add it using cargo add:

cargo add macroquad
cargo add rand

Blank Window

In your src/main.rs file, add:

use macroquad::prelude::*;

#[macroquad::main("Pong")]
async fn main() {
   loop {
     clear_background(SKYBLUE);

     next_frame().await;
   }
}

This sets up a window with sky-blue as the background color.
Click here for some explanation of the code.

If you wanted more control over the window properties:

//snip
fn conf() -> Conf {
      Conf {
      window_title:"Pong".to_owned(),
      ...
    }
}

#[macroquad::main(conf)]

Specify custom properties to Conf struct. For this tutorial, I'll set window_resizeable to false.

Creating Paddles

Let's start by making a Paddle struct.

//snip
#[derive(Copy,Clone)]
struct Paddle {
    rect:Rect,
}

The Rect has these fields:

The X-Coordinate
The Y-Coordinate
The width of the rectangle
The height of the rectangle This will make it easier for us to manage the position and size of the paddles. Speaking of size, let's create some constants for the height and width of the paddles and also their color:

// snip
const PADDLE_W:f32 = 20f32;
const PADDLE_H:f32 = 80f32;
const PADDLE_COLOR:Color = DARKBLUE;

Implementations for Paddle struct:

// snip
impl Paddle {
    fn new(rect:Rect) -> Self {
        Self {
            rect,
        }
    }

    fn draw(&self) {
        let r = self.rect;
        draw_rectangle(r.x,r.y,r.w,r.h,PADDLE_COLOR);
    }
}

The new method to create a new instance of Paddle and draw function to draw the paddle onto the screen.
the draw_rectangle function takes the x and y position and width and height (all of f32 type) and also the color to draw.
screen_width() and screen_height() return the width and height of the screen respectively. We assign the x and y values to be half of the width and height of the screen so that the paddle is at the center of the window.

Coordinate system of Macroquad, where the black rectangle is the screen:

In your main function, create a paddle and draw it on to the screen:

//snip
async fn main() {
    let paddle = Paddle::new(Rect::new(screen_width()/2.,screen_height()/2.,PADDLE_W,PADDLE_H));
    loop {
        clear_background(SKYBLUE);
        paddle.draw();
        next_frame().await();
    }
}

The resulting code should give:

And the code:

use macroquad::prelude::*;

const PADDLE_W:f32 = 20f32;
const PADDLE_H:f32 = 80f32;
const PADDLE_COLOR:Color = DARKBLUE;

fn conf() -> Conf {
      Conf {
      window_title:"Pong".to_owned(),
      window_resizable: false,
      ..Default::default()
    }
}

#[derive(Copy,Clone)]
struct Paddle {
    rect:Rect,
}

impl Paddle {
    fn new(rect:Rect) -> Self {
        Self {
            rect,
        }
    }

    fn draw(&self) {
        let r = self.rect;
        draw_rectangle(r.x,r.y,r.w,r.h,PADDLE_COLOR);
    }
}

#[macroquad::main("Pong")]
async fn main() {
   let paddle = Paddle::new(Rect::new(screen_width()/2.,screen_height()/2.,PADDLE_W,PADDLE_H));
   loop {
     clear_background(SKYBLUE);

     paddle.draw(); // Make sure its after the clear_background function
                    // else it cannot be seen

     next_frame().await;
   }
}

Now let's make two paddles, one for the right side and another for the left. Modify your main function:

//don't worru about the unused mut warning,we'll use them later.
  let mut paddle_left = Paddle::new(Rect::new(PADDLE_W,screen_height()/2.,PADDLE_W,PADDLE_H));
   let mut paddle_right = Paddle::new(Rect::new(screen_width()-PADDLE_W*2.,screen_height()/2.,PADDLE_W,PADDLE_H));

   loop {
     clear_background(SKYBLUE);

     paddle_left.draw();
     paddle_right.draw();
     next_frame().await;
   }

Creating two new paddles for the left and the right and aligning them properly, and drawing them on the screen
Output:

Movement

Create a new constant for the paddle speed:


const PADDLE_SPEED:f32 = 10f32;

In your Paddle struct, create a new implmentation for movement.


impl Paddle {
  ...
 fn movement(&mut self,up:KeyCode,down:KeyCode) {
        if is_key_down(up) {
            self.rect.y -= 1.*PADDLE_SPEED;
        }else if is_key_down(down) {
            self.rect.y += 1.*PADDLE_SPEED;
        }
    }
  ...
}

We need to change the position (x and y coordinates) of the rect, so we get a mutable refernce. Since we have two paddles with two different keys for movement, we get the keys through the parameters.

`is_key_down function takes a KeyCode and returns true if the key is being held down.
If the key to move up is held down, then we move the paddle up by negating the y coordinate multiplied with the paddle speed.
Same logic to move down, but now we add to the y coordinate.

In your main function loop:


rs

  //snip
   ...
     paddle_left.movement(KeyCode::W,KeyCode::S);
     paddle_right.movement(KeyCode::Up, KeyCode::Down);   
     paddle_left.draw();
     paddle_right.draw();
   ...

And now you should be able to move the paddles using the keys!
Here's the whole code till now:


rs

use macroquad::prelude::*;

const PADDLE_W:f32 = 20f32;
const PADDLE_H:f32 = 80f32;
const PADDLE_COLOR:Color = DARKBLUE;
const PADDLE_SPEED:f32 = 10f32;
fn conf() -> Conf {
      Conf {
      window_title:"Pong".to_owned(),
      window_resizable: false,
      ..Default::default()
    }
}

#[derive(Copy,Clone)]
struct Paddle {
    rect:Rect,
}

impl Paddle {
    fn new(rect:Rect) -> Self {
        Self {
            rect,
        }
    }

    fn movement(&mut self,up:KeyCode,down:KeyCode) {
        if is_key_down(up) {
            self.rect.y -= 1.*PADDLE_SPEED;
        }else if is_key_down(down) {
            self.rect.y += 1.*PADDLE_SPEED;
        }
    }

    fn draw(&self) {
        let r = self.rect;
        draw_rectangle(r.x,r.y,r.w,r.h,PADDLE_COLOR);
    }
}

#[macroquad::main(conf)]
async fn main() {
  let mut paddle_left = Paddle::new(Rect::new(PADDLE_W,screen_height()/2.,PADDLE_W,PADDLE_H));
   let mut paddle_right = Paddle::new(Rect::new(screen_width()-PADDLE_W*2.,screen_height()/2.,PADDLE_W,PADDLE_H));

   loop {
     clear_background(SKYBLUE);
     paddle_left.movement(KeyCode::W,KeyCode::S);
     paddle_right.movement(KeyCode::Up, KeyCode::Down);   
     paddle_left.draw();
     paddle_right.draw();
     next_frame().await;
   }
}

But you'll probably note that the paddles can go out of the screen.
To restrict the paddles into the screen, add this in your movement implementation:


rs
        if self.rect.y > screen_height()-PADDLE_H{
            self.rect.y = screen_height()-PADDLE_H;
        }else if self.rect.y < 0. {
            self.rect.y = 0.;
        }

Just some simple logic.
If the paddle is gone above screen (less than 0) then we bring it back to the screen (0). If its below the screen (screen_height()-PADDLE_H) then get it back to the screen.

Adding the Ball

Create some constants for the ball:


rs

const BALL_RADIUS:f32 = 15f32;
const BALL_COLOR:Color = PINK;
const BALL_SPEED:f32 = 8f32;

Create the Ball struct


rs

#[derive(Copy,Clone)]
struct Ball {
    circle:Circle,
    dir: Vec2 // direction or velocity of the ball
}

dir is the velocity or the direction towards which the ball should travel.
Implementations for the ball:


rs

impl Ball {
    fn new(circle:Circle) ->Self {
        Self {
            circle,
            dir:vec2(0.,1.) // for now, we'll use these
                            // we'll add random values later
        }
    }

    fn draw(&self) {

draw_circle(self.circle.x,self.circle.y,self.circle.r,BALL_COLOR);
    }
}

Add the ball to the game:


rs

async fn main() {
   ...
   let mut ball = Ball::new(Circle::new(screen_width()/2.,screen_height()/2.,BALL_RADIUS)); 
   loop {
     clear_background(SKYBLUE); //MAKE SURE: all the drawing
                                // happens below this function
     ...
     ball.draw();
     ...
   }
}

And on running it:

Great! Now to make it move, we simple add the dir value (x and y) multiplied by the speed to the balls's position.
Add another function to the ball implementation:


rs

    fn move_ball(&mut self) {
         self.circle.x += self.dir.x * BALL_SPEED;
         self.circle.y += self.dir.y * BALL_SPEED;
    }

And move the ball in your loop:


rs

//snip
 loop {
     ... 
     ball.move_ball();
     ...
   }

Now the ball moves...out of the window. But this has an easy fix!
In your move_ball function:


rs

       ...
       if self.circle.y > screen_height()-BALL_RADIUS || self.circle.y < 0.0 {
            self.dir.y = -self.dir.y;
        }
      ...

We invert the sign of dir.y so that it goes the other way. Now if you run this you can see that the ball moves up and down the screen. We aren't doing this with the x value because we will use that for scoring system.

Random dir value

Import rand crate and some of its items:


rs

use ::crate::{thread_rng,Rng};

In your new function for ball, make these changes:


rs
 let mut rng = thread_rng();
        let dir_x = rng.gen_range(-1.0..1.);
        let dir_y = rng.gen_range(-1.0..1.);
        Self {
            circle,
            dir:vec2(dir_x,dir_y)
        }

Done!
The code so far:


rs

use macroquad::prelude::*;
use ::rand::{thread_rng,Rng};

const PADDLE_W:f32 = 20f32;
const PADDLE_H:f32 = 80f32;
const PADDLE_COLOR:Color = DARKBLUE;
const PADDLE_SPEED:f32 = 10f32;

const BALL_RADIUS:f32 = 15f32;
const BALL_COLOR:Color = PINK;
const BALL_SPEED:f32 = 8f32;

fn conf() -> Conf {
      Conf {
      window_title:"Pong".to_owned(),
      window_resizable: false,
      ..Default::default()
    }
}

#[derive(Copy,Clone)]
struct Paddle {
    rect:Rect,
}

#[derive(Copy,Clone)]
struct Ball {
    circle:Circle,
    dir: Vec2
}


impl Paddle {
    fn new(rect:Rect) -> Self {
        Self {
            rect,
        }
    }

    fn movement(&mut self,up:KeyCode,down:KeyCode) {
        if is_key_down(up) {
            self.rect.y -= 1.*PADDLE_SPEED;
        }else if is_key_down(down) {
            self.rect.y += 1.*PADDLE_SPEED;
        }

        if self.rect.y > screen_height()-PADDLE_H{
            self.rect.y = screen_height()-PADDLE_H;
        }else if self.rect.y < 0. {
            self.rect.y = 0.;
        }

    }

    fn draw(&self) {
        let r = self.rect;
        draw_rectangle(r.x,r.y,r.w,r.h,PADDLE_COLOR);
    }
}

impl Ball {
    fn new(circle:Circle) ->Self {
        let mut rng = thread_rng();
        let dir_x = rng.gen_range(-1.0..1.);
        let dir_y = rng.gen_range(-1.0..1.);
        Self {
            circle,
            dir:vec2(dir_x,dir_y)
        }
    }

    fn move_ball(&mut self) {
         self.circle.x += self.dir.x * BALL_SPEED;
         self.circle.y += self.dir.y * BALL_SPEED;

        if self.circle.y > screen_height()-BALL_RADIUS || self.circle.y < 0.0 {
            self.dir.y = -self.dir.y;
        }

    }

    fn draw(&self) {
        draw_circle(self.circle.x,self.circle.y,self.circle.r,BALL_COLOR);
    }
}

#[macroquad::main(conf)]
async fn main() {
  let mut paddle_left = Paddle::new(Rect::new(PADDLE_W,screen_height()/2.,PADDLE_W,PADDLE_H));
   let mut paddle_right = Paddle::new(Rect::new(screen_width()-PADDLE_W*2.,screen_height()/2.,PADDLE_W,PADDLE_H));
   let mut ball = Ball::new(Circle::new(screen_width()/2.,screen_height()/2.,BALL_RADIUS)); 
   loop {
     clear_background(SKYBLUE);
     paddle_left.movement(KeyCode::W,KeyCode::S);
     paddle_right.movement(KeyCode::Up, KeyCode::Down);   
     ball.move_ball();
     ball.draw();
     paddle_left.draw();
     paddle_right.draw();
     next_frame().await;
   }
}

Collisions!

Now we'll add ball-to-paddle collisions.
Create a new implementation in your ball struct:


rust

    fn collision_with_paddle(&mut self, paddle_1 : &Rect, paddle_2 : &Rect) {
        let ball_rect = Rect::new(self.circle.x,self.circle.y,self.circle.r,self.circle.r);
        if ball_rect.intersect(*paddle_1).is_some() || ball_rect.intersect(*paddle_2).is_some() {
            self.dir.x = -self.dir.x;
        }
    }

We take in two refernces of paddles. Then we create a rect of the ball because the rect has a method intersect which allows us to see if a rect is touching or intersecting another rect. We pass the x and y as coordinates and radius as the height and width (more of a square than a rectangle then).
Then we check if any one of the paddles intersect with the ball and then invert the sign of the dir.x value. Easy!

Call the method in your loop:


rs
loop {
 ...
 ball.collision_with_paddles(&paddle_left.rect,&paddle_right.rect);
 ...
}

Run it!
And now you can play pong until one of you loses the ball.

Ball respawn and scores

Create a scores tuple variable in your main function (outside the loop):


rs
let mut scores = (0,0);

Now, inside the loop, we need to check for the ball position and accordingly update the scores:


rs

     if ball.circle.x < 0.0 {
         ball = Ball::new(Circle::new(screen_width()/2.,screen_height()/2.,BALL_RADIUS));         
         scores.1 += 1;
     }else if ball.circle.x > screen_width() {
         ball = Ball::new(Circle::new(screen_width()/2.,screen_height()/2.,BALL_RADIUS));        
         scores.0 += 1;
    }

What good are scores if you cannot view them?

Drawing the scores

Macroquad has functions for drawing text onto the screen. I don't really like the font, so I'll use Robot-Black. Create a folder res in your project directory (outside src but inside your project) and install the ttf version of the font there.
Now let's access it in our main function:


rs
      let font =  load_ttf_font("./res/Roboto-Black.ttf")
        .await
        .unwrap();

Create a new function to draw the text:


rs

fn draw_scores(font:Font,scores:&(u32,u32)) {
        let text_params =  TextParams {
            font_size:70,
            font,
            ..Default::default()
        };

        draw_text_ex(&format!("{}",scores.0).as_str(),100., 100.,text_params);
        draw_text_ex(&format!("{}",scores.1).as_str(),screen_width()-100., 100.,text_params);
}

We take in the font and scores. We assign text_params to a struct which allows us to customize how our text looks.(More Info). Now we draw the text using draw_text_ex at the left and right side.

Then calling it in our main loop:


rs
loop {
   ...
   clear_background(); //again, always draw stuff below this
   ...

   draw_scores(font,&scores);
   ...
}

And we're done!
Here's the full code:


rs
use macroquad::prelude::*;
use ::rand::{thread_rng,Rng};

const PADDLE_W:f32 = 20f32;
const PADDLE_H:f32 = 80f32;
const PADDLE_COLOR:Color = DARKBLUE;
const PADDLE_SPEED:f32 = 10f32;

const BALL_RADIUS:f32 = 15f32;
const BALL_COLOR:Color = PINK;
const BALL_SPEED:f32 = 8f32;

fn conf() -> Conf {
      Conf {
      window_title:"Pong".to_owned(),
      window_resizable: false,
      ..Default::default()
    }
}

#[derive(Copy,Clone)]
struct Paddle {
    rect:Rect,
}

#[derive(Copy,Clone)]
struct Ball {
    circle:Circle,
    dir: Vec2
}


impl Paddle {
    fn new(rect:Rect) -> Self {
        Self {
            rect,
        }
    }

    fn movement(&mut self,up:KeyCode,down:KeyCode) {
        if is_key_down(up) {
            self.rect.y -= 1.*PADDLE_SPEED;
        }else if is_key_down(down) {
            self.rect.y += 1.*PADDLE_SPEED;
        }

        if self.rect.y > screen_height()-PADDLE_H{
            self.rect.y = screen_height()-PADDLE_H;
        }else if self.rect.y < 0. {
            self.rect.y = 0.;
        }

    }

    fn draw(&self) {
        let r = self.rect;
        draw_rectangle(r.x,r.y,r.w,r.h,PADDLE_COLOR);
    }
}

impl Ball {
    fn new(circle:Circle) ->Self {
        let mut rng = thread_rng();
        let dir_x = rng.gen_range(-1.0..1.);
        let dir_y = rng.gen_range(-1.0..1.);
        Self {
            circle,
            dir:vec2(dir_x,dir_y)
        }
    }

    fn move_ball(&mut self) {
         self.circle.x += self.dir.x * BALL_SPEED;
         self.circle.y += self.dir.y * BALL_SPEED;

        if self.circle.y > screen_height()-BALL_RADIUS || self.circle.y < 0.0 {
            self.dir.y = -self.dir.y;
        }

    }

    fn collision_with_paddle(&mut self, paddle_1 : &Rect, paddle_2 : &Rect) {
        let ball_rect = Rect::new(self.circle.x,self.circle.y,self.circle.r,self.circle.r);
        if ball_rect.intersect(*paddle_1).is_some() || ball_rect.intersect(*paddle_2).is_some() {
            self.dir.x = -self.dir.x;
        }
    } 


    fn draw(&self) {
        draw_circle(self.circle.x,self.circle.y,self.circle.r,BALL_COLOR);
    }
}

fn draw_scores(font:Font,scores:&(u32,u32)) {
        let text_params =  TextParams {
            font_size:70,
            font,
            ..Default::default()
        };

        draw_text_ex(&format!("{}",scores.0).as_str(),100., 100.,text_params);
        draw_text_ex(&format!("{}",scores.1).as_str(),screen_width()-100., 100.,text_params);
}

#[macroquad::main(conf)]
async fn main() {
  let mut paddle_left = Paddle::new(Rect::new(PADDLE_W,screen_height()/2.,PADDLE_W,PADDLE_H));
   let mut paddle_right = Paddle::new(Rect::new(screen_width()-PADDLE_W*2.,screen_height()/2.,PADDLE_W,PADDLE_H));
   let mut ball = Ball::new(Circle::new(screen_width()/2.,screen_height()/2.,BALL_RADIUS)); 
    let mut scores:(u32,u32)= (0,0);

      let font =  load_ttf_font("./res/Roboto-Black.ttf")
        .await
        .unwrap();
    loop {
     clear_background(SKYBLUE);
     paddle_left.movement(KeyCode::W,KeyCode::S);
     paddle_right.movement(KeyCode::Up, KeyCode::Down);   
     ball.move_ball();
     ball.collision_with_paddle(&paddle_left.rect,&paddle_right.rect);
     ball.draw();
     paddle_left.draw();
     paddle_right.draw();

     if ball.circle.x < 0.0 {
         ball = Ball::new(Circle::new(screen_width()/2.,screen_height()/2.,BALL_RADIUS));         
         scores.1 += 1;
     }else if ball.circle.x > screen_width() {
         ball = Ball::new(Circle::new(screen_width()/2.,screen_height()/2.,BALL_RADIUS));        
         scores.0 += 1;
    }
        draw_scores(font,&scores);
     next_frame().await;
   }
}

Useful Links

Create Slides Using Markdowns!

Flavius — Wed, 21 Dec 2022 13:05:47 +0000

What is Marp?

Marp (a.k.a Markdown Presentation Ecosystem) is a new and open-source tool which can be used to easily create PowerPoint like slides using the markdown syntax as well as CSS type attributes.

Getting Started

There are currently 4 ways you can use Marp:
Marp for VS Code
Marp as a CLI
Marp Core tool
And a smaller version:
Marpit Frameword

Creating Your First Slide!

Go ahead and create a file with the .md extension.
Declare a file which uses Marp by writing:

---
marp:true
---

In Marp, you create and separate slides by using 3 - (which is also called as horizontal ruler)

---

# Slide Title

Slide body
etc.
It uses the normal markdown syntax

---
^^ first slide ends here 

# This is the second slide
behaves just like the previous one
---

Themes

As of writing this tutorial, Marp supports 3 CSS themes:
default
gaia
uncover

---
theme: gaia
---

There are also the backgroundColor and backgroundImage attributes:

---
backgroundColor: #fff
backgroundImage: url('Some url of image or svg file')
---

And much more!

Plugin-Type System

Because Marp is built on the marpit framework which makes HTML/CSS slide, you can easily create your own plugins!

Export to other formats

Marp also allows you to export your slides to HTMl/CSS and PowerPoint Presentations.

Anyway, Marp seems like a really fun to tool to experiment with. You might as well give it a try.

Links

Marp Official Website
Marpit Framework Website
Marp GitHub

Part 2: Create A Clicker Game With Rust

Flavius — Sun, 04 Dec 2022 05:27:10 +0000

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 👋!

Rust: Create A Clicker Game With Macroquad

Flavius — Fri, 02 Dec 2022 15:25:40 +0000

This really quick tutorial is aimed for beginners who want to get started with game/graphics development with Rust and/or Macroquad

Introduction

Hello!
In this really short tutorial, you will learn how to create a simple Clicker with Rust using the Macroquad framework. Macroquad is a simple and easy to use game library for Rust. It supports native desktop apps, WebAssembly, IOS and Android and it is really simple to use.

Perquisites

You must get the follow things down before you proceed with the tutorial:

Rust and its basics (even though I'll try to explain each and every detail of the code)

Let's Get Started!

First, create a new Rust project, then add this to the cargo.toml file under the [dependencies] section:



macroquad = "0.3.25" # at the time of writing this tutorial, this was the version
#you can change the version to the latest stable one

Now, navigate to src/main.rs file and let's start writing some code!



use macroquad::prelude::*;

#[macroquad::main("Clicker Game")]
async fn main() {
   loop {
     clear_background(GRAY);

     next_frame().await;
   }
}

Output:

That's it to get a basic window with a Gray background color, but let's look at it in a little more detail.



use macroquad::prelude::*;

This imports the library that we're going to use (duh).



#[macroquad::main("Clicker Game")]

This tells the program what is the main function, and what the window title should be. Alternatively you can write this in a diferent way for more customizing options:



//snip
fn conf() -> Conf {
 Conf {
   window_title: "Clicker Game", //this field is not optional!
   fullscreen:false,
   //you can add other options too, or just use the default ones:
   ..Default::default()
 }
}
//then pass the function to the attribute
#[macroquad::main(conf)]

Moving on.



async fn main() {
   loop {
     clear_background(GRAY);

     next_frame().await;
   }
}

We make the main function async because Macroquad requires async events. Every Macroquad program needs to have a main game loop, we define it with the loop keyword.
clear_background(GRAY) function tells the program to clear the screen background to the color Gray. There are other colors too, such as RED, GREEN, BLACK, WHITE, SKYBLUE, BLUE, etc. You can pass the color you want to use in the function.
next_frame().await This line tells the program to wait till the next frame is done. Without this, the program will just crash.

Creating the Circle

Let us first define the variables we will need, the x and y position of the circle, the radius, and the score:



   let (x,y) = (screen_width()/2.,screen_height()/2.);
   let r = 70.;
   let circle = Circle::new(x,y,r);
   let mut score = 0;

The first line gets position to the center of the screen. screen_width() gets the total width of the screen, and screen_height() gets the total height.



   let circle = Circle::new(x,y,r);

Here we create a struct called Circle, which has three values, the x and y position, and the radius. We will be needing them in click detection.

Now to draw the circle:



loop {
  clear_background(GRAY);

  draw_circle(x,y,r,RED); 

  next_frame().await;

}

draw_circle() is a function which draws a circle to the screen. It takes in four values, x ,y, radius and the color.

Your code should now look like this:



use macroquad::prelude::*;

#[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;

   loop {
    clear_background(GRAY);

    draw_circle(x,y,r,RED); 

    next_frame().await;

   }
}

Output:

If it draws a circle on the screen, it'll do!

Detecting Click Events

Let's add some basic click detection working. The way that we're doing in this tutorial is to make a smaller circle struct (of radius 1) and use the .intersect() method on the smaller mouse circle and the main circle struct which we created before. The .intersect() method takes in another struct of the same type, and returns a bool value. If they intersect at any point, it returns true, else it returns false. (Note: there's another way of checking for click on a circular object too with the include() method with takes a Vec2 value. I've used a different approach because it seems easier to understand for beginners.)
Code:



//snip
loop {
   ...
    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 mouse_circ.intersect(&circle) {
            score += 1;
         }
    }

    ...  
   }

is_mouse_button_pressed is a function which checks if a certain mouse button is pressed and returns a bool value. MouseButton is an enum which contains the values for Left mouse button, the Right mouse button and the Middle mouse button, and the Unknown variant if the value is not known.



let (mouse_x,mouse_y) = mouse_position();
let mouse_circ = Circle::new(mouse_x,mouse_y,1.);

The first line gets the mouse position at the time of calling that event and stores in the tuple values. We now create the mouse circle with the mouse position and the radius of 1. (Note that: 1. is equal to 1.00. The radius is an f32 value).



if mouse_circ.intersect(&circle) {
     score += 1;
}

Now we use the intersect function, and if it does intersect, we add the score value with 1. You can change the increment value to whatever you want.

Displaying Title And Score

To draw text, Macroquad provides us with the draw_text() function. It takes in the text to display, the x and y positions, the font size and the color of the text.
Add this inside the loop:



//snip
draw_text("Clicker Game",screen_width()/2.-100.,100.,50.,WHITE);

This draws the text "Clicker Game" to the top of the screen.
Displaying the score:



draw_text(format!("Clicks: {}",score).as_str(),screen_width()/2.-100.,500.,50.,WHITE);

We first concatenate the score variable with some other text and use the as_str() method because draw_text() accepts only an str value and not a String value. We also set the y position to somewhere below the circle, in this case, 500.

And That's It!

You've successfully created a clicker game in Rust! Now just run your project using cargo run.
Here's the full code:



use macroquad::prelude::*;

#[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;

   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;
         }
      }


      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,RED);
      next_frame().await;
   }
}

Output:

If there are any corrections, please do inform me.
I will make a part 2 with adding sounds and other stuff. If I don't, remind me!
Good Bye 👋

DEV Community: Flavius

Pong: With Rust and Macroquad

Introduction

Prerequisites

Getting Started

Create a new Rust project:

Add Macroquad and Rand Crate:

Blank Window

Creating Paddles

Movement

Adding the Ball

Random dir value

Collisions!

Ball respawn and scores

Drawing the scores

Useful Links

Create Slides Using Markdowns!

What is Marp?

Getting Started

Creating Your First Slide!

Themes

Plugin-Type System

Export to other formats

Links

Part 2: Create A Clicker Game With Rust

Introduction

Adding sound

Changing Colors

Other Useful Links:

Rust: Create A Clicker Game With Macroquad

Introduction

Perquisites

Let's Get Started!

Creating the Circle

Detecting Click Events

Displaying Title And Score

And That's It!

Other Useful Links: