DEV Community

Dat One Dev
Dat One Dev

Posted on

Drag & Drop

#miniscript #minimicro #gamedev

Introduction

Drag-and-drop is a significant feature that makes even a simple game feel polished.

Dragging and dropping make the game feel more polished and juicy. Don't believe me, let me give you a recent example.

Schedule 1 (A game where you are a Dr*g dealer) uses the power of dragging and dropping very nicely, for instance, while packaging Dr*g by dropping them into packages, you feel satisfaction somehow.

Packaging items in-game is a task that is mostly supposed to be boring, but Schedule 1 changes the case by using dragging and dropping in such a way that it feels satisfying.

Similarly, the Indie Game of the year 2024 - Balatro also uses dragging and dropping in such a way that it feels satisfying and addictive.

A simple feature like dragging and dropping can change your game significantly.

I also tried this, in Godot Jam #3 by Toolings, I made a game called Atomic Memory. It didn't have dragging and dropping at that time. Then, after some months, I decided to recreate that game by adding some polishing, one of which was dragging and dropping.

And believe me when I say - My game just felt like a different game now.

So I decided to teach this sorcery to you too. So Today I prepared a tutorial for:

Dragging and Dropping in Mini Micro

Dragging and Dropping in Mini Micro

Rendering a sprite

First, I have to render a sprite. For this task, I thought something like a Rock would be perfect.

To render a sprite in Mini Micro, we just have to load the image of the sprite and push it to display(4), which is a pixel display.

If you want to learn more about rendering sprites, here are some resources to help you.

👉How to render a sprite in mini micro
👉How to render a sprite in mini micro from web

Here is how I rendered sprite for this program.

clear

// Load the sprite
rock = new Sprite
rock.image = file.loadImage("/sys/pics/Rock.png")

// Set Properties 
initial_position = {"x": 960/2, "y": 640/2}
rock.x = initial_position.x
rock.y = initial_position.y

// Add to scene
display(4).sprites.push rock
Enter fullscreen mode Exit fullscreen mode

Creating Bounds

Bounds handle collision detection in Mini Micro. For dragging and dropping, our mouse needs to collide with the rock(sprite).

So we need to add Bounds to our sprite.

If you want to learn more about bound, here are some resources.

👉Bounds In Mini Micro
👉Bounds(Official)

//Bounds
rock.localBounds = new Bounds
rock.localBounds.width = rock.image.width
rock.localBounds.height = rock.image.height
Enter fullscreen mode Exit fullscreen mode

Drag & Drop Logic

Creating Variables

At the start, we need 2 variables.

isDragging = false //Detects if user is currently dragging or not
dragOffset = {"x": 0, "y": 0} // How far from the top-left of the rock did we click?
Enter fullscreen mode Exit fullscreen mode

Game Loop

Before going into the main code, let's create another flag.

isDown = mouse.button
This detects if the left mouse button is pressed or not. This method returns 0(False) if the left button isn't pressed and 1(True) if it is pressed.

👉More about mouse.button(Official)

Dragging Logic 

if isDown and rock.contains(mouse) and not isDragging then
    isDragging = true
    dragOffset.x = mouse.x - rock.x
    dragOffset.y = mouse.y - rock.y
end if
Enter fullscreen mode Exit fullscreen mode

This if block checks 3 conditions at once.

isDown - Is the left mouse button pressed?
rock.contains(mouse) - Is mouse hovering over the rock sprite.
not isDragging - User isn't already dragging.

If all of these 3 condition returns true, then the code inside the if block is executed.

isDragging = true //Sets the flag to true
dragOffset.x = mouse.x - rock.x 
dragOffset.y = mouse.y - rock.y
Enter fullscreen mode Exit fullscreen mode

DragOffset variables save the data: How far from the pivot of the rock have you clicked?

As the pivot is already fixed to the initial position(rock.x and rock.y), we subtract these values from our mouse position to get the dragOffset.

We store this so that when we drag, we remember where we grabbed the rock.

The Core of Drag and Drop 

if isDragging then
    // Follow the mouse with drag offset
    rock.x = mouse.x - dragOffset.x
    rock.y = mouse.y - dragOffset.y

    // Stop dragging when mouse released
    if not isDown then
        isDragging = false

        // Snap back to original position
        rock.x = initial_position.x
        rock.y = initial_position.y
    end if
end if
Enter fullscreen mode Exit fullscreen mode

This code starts with a big if block, which only executes code when the player is dragging.

If a player is dragging the if block updates the position of the sprite according to the mouse position - dragOffset. Subtracting the mouse position from the dragOffset for Sprite position isn't always necessary; you can simply set the sprite position to the mouse position, but using dragOffset makes drag and drop logic more polished, as whenever you click on the sprite, the sprite doesn't get teleported to its pivot.

But what if isDragging is true but isDown is false

This means the player has stopped dragging in such a situation, the code sets the rock's position back to its initial position and sets isDragging to false.

Outro

And that's how you drag sprites in Mini-Micro

You can get the source code for this on my GitHub

👉Source Code
👉Youtube
👉Pop Ballon Game In Mini Micro Tutorial

That's it for today, drop down your thoughts in comments, make sure to check out my YouTube, and bye

Top comments (2)

Collapse
 
fernando_noise profile image
Fernando •

Nice, but I think you forgot to use while true and end while somewhere.

Collapse
 
dat_one_dev profile image
Dat One Dev •

Nope, I didn't. You can check the source code. You may be confused because I didn't show using them in code blocks, but I did use them in made code, and in the blog, I used a header "Game Loop" to tell I am using them.