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.
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.
👉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)
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
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
SOCIAL SHARE CARD GENERATOR