DEV Community

Cover image for Dropping Detection
Dat One Dev
Dat One Dev

Posted on

Dropping Detection

#miniscript #minimicro

Introduction

Not too long ago, I published a post titled "Drag and Drop".

This post included.

  • What is drag and drop?
  • How does it make your game feel polished
  • Example of some games that use drag and drop wisely.
  • How Drag and Drop changed my whole game.
  • How to Implement Drag and Drop in Mini Micro: A Step-by-Step Guide

But, when I looked carefully at that post , I realised it was only Drag Logic. Although you can drop in that code too, it doesn't detect where I dropped it?

For this, my code needed drop detection.

And that's what I am going to teach today. How to detect a drop on a sprite.

This post will be shorter than my usual post, because there is no need to extend it for no reason at all.

If you haven't read my drag logic tutorial , I highly recommend checking it out first, otherwise, it would be very hard to understand what I teach today, as I am going to use the same code.

Before I start

The Previous Night, or the night I posted the Drag Logic Blog .
I made this simple game, which uses drop detection.

Image description

This was a fun little game I wanted to showcase. Soon enough, I am going to either use it for Learn By Code 1.4 (Not 1.3 because I already have a game called Click_ASAP for that). If you can't wait for Learn By Code 1.3, check out my YouTube I have already uploaded it there.

👉Tutorial for Click ASAP

👉Click ASAP (Learn By Code 1.3)

👉Take Down UFO (Learn By Code 1.4)

👉Previous Code For Drag Logic (Check Out DragAndDrop.ms in 1st Branch)

👉Drag Logic Blog

Drop Detection

Drag Logic

Code Used In Previous Blog 

clear

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

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

// Define the sprite bounds for interaction
rock.localBounds = new Bounds
rock.localBounds.width = rock.image.width
rock.localBounds.height = rock.image.height

// Add to scene
display(4).sprites.push rock

// Drag variables
isDragging = false
dragOffset = {"x": 0, "y": 0}

while true
    isDown = mouse.button // Left mouse pressed?

    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

    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

    yield
end while
Enter fullscreen mode Exit fullscreen mode

Drop Detection

Drop Detection Logic

First, let's understand the Logic behind drop detection.

Let's take the UFO Game I made. Here, a UFO sprite is constantly moving over the screen on the x-axis. You have to drag and drop the rock onto the UFO so that it loses HP.

UFO is a sprites that we are rendering onto the display(4). We know how sprites work in Mini Micro already.

We can create a Bounds for our UFO sprites so it could detect collision.

In our game loop, we have 2 if blocks.

  • Triggers dragging when the left mouse button is pressed on the sprite and the player isn't dragging currently. This if block sets the offset value and sets isDragging to true

  • Now isDragging is true, and the condition for the previous if block was not isDragging, so we exit that if block and come into the second if block. Second if block used to have nested if blocks, which execute when play stops dragging.

If we think for a while, we need to subtract the health of UFO when:

  • isDragging = true
  • UFO.contains(rock) = true
  • isDown = false

This means the player has dropped the rock sprites onto the UFO sprites . Then we can execute our choice of code.

In my game, I need to:

  • Subtract 10 from UFO's Health
  • Print "UFO under attack."
  • Print the updated health of UFO.
  • Make the rocks come back to the initial position they had.
  • Display a blast sprite on UFO.

But this is for my project, you might be different

The main thing is that there is one thing inside this if block you need to include, no matter what, otherwise you will get unexpected behavior.

As you might have seen, all this code happens when we drop. But actually, if we take a closer look, then even when dropped on UFO isDragging variable is still set to true.

So we need to do isDragging = false

That's all for drop detection. Today I am not going to show code because I have used no new thing that I haven't taught previously, and if I always write the code then you would not improve because

Practice doesn't make a man perfect, but it does make a man 1% better >than yesterday

Outro

Coming Soon:

  • Learn By Code 1.3 - Click ASAP
  • Learn By Code 2.1 - Click ASAP
  • Ebiten - Creating Games with GO
  • Love2D - Creating Games with Lua
  • Pygame - Creating games with Python
  • "fmt" Package in GO

Recommended Post:
Mini Micro

GO

Conceptual

Developer Essential

Learn By Code and Code Review

Top comments (0)