2D - How to detect collisions between overlapping sprites ?

Author

Message

patmaba

21

Years of Service

User Offline

Joined: 4th Sep 2002

Location: Belgium

Posted: 6th Dec 2018 18:22

Link

Hello,

How to detect collisions between overlapping sprites ?

The source code below has three sprites.

- The blue element represents the sea
- The green corresponds to the land
- The red, the hero.

If I place the red hero on the grass. The collision with the sea also occurs when it is not.

How to detect the collision with the grass only without the see collision ?
How to detect the collision with the sea by taking into account the overlapping images ?

I need to know when the player(red sprite) touch water only ?

Thanks

+ Code Snippet

// Project: GetCollision01 
// Created: 2018-12-06

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window

img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 ) 

// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpritePosition( spr_sea, 300, 300)   
SetSpriteDepth ( spr_sea, 30 )

// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpritePosition( spr_land, 320, 320)   
SetSpriteDepth ( spr_land, 20 )

// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth ( spr_hero, 10 )

do
	
	
    SetSpritePosition( spr_hero, GetRawMouseX(), GetRawMouseY())   
    
    Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
    Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )

    Sync()
loop

Sincerely

Patmaba

Back to top

Profile PM

puzzler2018

User Banned

Posted: 6th Dec 2018 18:50

Link

ummm Interesting, I would stick a few IF conditions in there

// Project: GetCollision01 
// Created: 2018-12-06
 
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
 
img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 ) 
 
// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpritePosition( spr_sea, 300, 300)   
SetSpriteDepth ( spr_sea, 30 )
 
// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpritePosition( spr_land, 320, 320)   
SetSpriteDepth ( spr_land, 20 )
 
// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth ( spr_hero, 10 )
 
do
     
	
    SetSpritePosition( spr_hero, GetRawMouseX(), GetRawMouseY())

if GetSpriteCollision(spr_sea,spr_land)
		if GetSpriteCollision(spr_hero, spr_land) 
			Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )
		else
			Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
		endif
	endif
	
    Sync()
loop

+ Code Snippet

// Project: GetCollision01 
// Created: 2018-12-06
 
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
 
img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 ) 
 
// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpritePosition( spr_sea, 300, 300)   
SetSpriteDepth ( spr_sea, 30 )
 
// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpritePosition( spr_land, 320, 320)   
SetSpriteDepth ( spr_land, 20 )
 
// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth ( spr_hero, 10 )
 
do
     
	
    SetSpritePosition( spr_hero, GetRawMouseX(), GetRawMouseY())   


	if GetSpriteCollision(spr_sea,spr_land)
		if GetSpriteCollision(spr_hero, spr_land) 
			Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )
		else
			Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
		endif
	endif
	
    Sync()
loop

Unless can use some kind of SetSpriteGroup and GetSpriteHit commands

Back to top

Profile

patmaba

21

Years of Service

User Offline

Joined: 4th Sep 2002

Location: Belgium

Posted: 6th Dec 2018 20:59

Link

Thank you for your draft code.

First remark the following condition is useless because it is always true.

+ Code Snippet

if GetSpriteCollision(spr_sea,spr_land)

You give me part of the answer to the question:
How to detect the collision with the grass only without the see collision?

For the second part, it is incomplete.
Imagine that half of our hero's body is on the ground and the other half of his body has his feet wet.
In this case, the functions must return the information for the 2 collisions.

It pisses me off. I haven't found a solution.

Back to top

Profile PM

puzzler2018

User Banned

Posted: 6th Dec 2018 21:14 Edited at: 6th Dec 2018 21:14

Link

The only way could test that scenario is combine sprites together.

A body sprite
and a
A foot sprite

which are joined together by simply moving together in a scene and then you will have a feet in the water collision

Back to top

Profile

puzzler2018

User Banned

Posted: 6th Dec 2018 21:21 Edited at: 6th Dec 2018 21:23

Link

Like this

// Project: GetCollision01 
// Created: 2018-12-06
 
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
 
img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 ) 
img_foot = CreateImageColor( 255, 255, 0, 255 ) 
 
// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpritePosition( spr_sea, 300, 300)   
SetSpriteDepth ( spr_sea, 30 )
 
// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpritePosition( spr_land, 320, 320)   
SetSpriteDepth ( spr_land, 20 )
 
// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth ( spr_hero, 10 )

// hero foot Area
spr_leftfoot= CreateSprite( img_foot )
SetSpriteSize( spr_leftfoot, 16,16)
SetSpriteDepth ( spr_leftfoot, 10 )

// hero foot Area
spr_rightfoot= CreateSprite( img_foot )
SetSpriteSize( spr_rightfoot, 16,16)
SetSpriteDepth ( spr_rightfoot, 10 )

do
     
	
    SetSpritePosition( spr_hero, GetRawMouseX(), GetRawMouseY())   
    SetSpritePosition( spr_leftfoot, GetRawMouseX()-16, GetRawMouseY()-16)   
    SetSpritePosition( spr_rightfoot, GetRawMouseX()+32, GetRawMouseY()-16)

if GetSpriteCollision(spr_leftfoot,spr_sea)
		print("The Guys left foot is in the water")
	endif
	if GetSpriteCollision(spr_rightfoot,spr_sea)
		print("The Guys left right is in the water")
	endif
	if GetSpriteCollision(spr_sea,spr_land)
		if GetSpriteCollision(spr_hero, spr_land) 
			Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )
		else
			Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
		endif
	endif
	
    Sync()
loop

+ Code Snippet

// Project: GetCollision01 
// Created: 2018-12-06
 
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
 
img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 ) 
img_foot = CreateImageColor( 255, 255, 0, 255 ) 
 
// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpritePosition( spr_sea, 300, 300)   
SetSpriteDepth ( spr_sea, 30 )
 
// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpritePosition( spr_land, 320, 320)   
SetSpriteDepth ( spr_land, 20 )
 
// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth ( spr_hero, 10 )

// hero foot Area
spr_leftfoot= CreateSprite( img_foot )
SetSpriteSize( spr_leftfoot, 16,16)
SetSpriteDepth ( spr_leftfoot, 10 )

// hero foot Area
spr_rightfoot= CreateSprite( img_foot )
SetSpriteSize( spr_rightfoot, 16,16)
SetSpriteDepth ( spr_rightfoot, 10 )

 

do
     
	
    SetSpritePosition( spr_hero, GetRawMouseX(), GetRawMouseY())   
    SetSpritePosition( spr_leftfoot, GetRawMouseX()-16, GetRawMouseY()-16)   
    SetSpritePosition( spr_rightfoot, GetRawMouseX()+32, GetRawMouseY()-16)   

	if GetSpriteCollision(spr_leftfoot,spr_sea)
		print("The Guys left foot is in the water")
	endif
	if GetSpriteCollision(spr_rightfoot,spr_sea)
		print("The Guys left right is in the water")
	endif
	if GetSpriteCollision(spr_sea,spr_land)
		if GetSpriteCollision(spr_hero, spr_land) 
			Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )
		else
			Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
		endif
	endif
	
    Sync()
loop

Back to top

Profile

Virtual Nomad

Moderator

18

Years of Service

User Offline

Joined: 14th Dec 2005

Location: SF Bay Area, USA

Posted: 7th Dec 2018 08:01 Edited at: 7th Dec 2018 08:11

Link

in the end, i think you simply want to know if the entire hero sprite is completely contained within the land sprite?

assuming your sprites are all (non-rotated) box shapes as your code suggests, i'd check opposing corners of the hero and compare the results (note the 2 1px "dummy" sprites added to your code):

// Project: GetCollision01 
// Created: 2018-12-06

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window

img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 )

// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpritePosition( spr_sea, 300, 300)   
SetSpriteDepth ( spr_sea, 30 )

// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpritePosition( spr_land, 320, 320)   
SetSpriteDepth ( spr_land, 20 )

// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth ( spr_hero, 10 )

hero_w = GetSpriteWidth(spr_hero) `hero dimensions
hero_h = GetSpriteHeight(spr_hero)

img_dummy = CreateImageColor(0,0,0,0) `create 1px dummy sprites to check top left and bottom right corners of the hero sprite for collision vs land sprite
spr_dummy1= CreateSprite(img_dummy)
SetSpriteSize(spr_dummy1,1,1)
spr_dummy2= CloneSprite(spr_dummy1)

do
	
	mx = GetRawMouseX()	:	my = GetRawMouseY()
    SetSpritePosition( spr_hero, mx, my) 
    
    SetSpritePosition( spr_dummy1,mx,my) `position dummies 
    setspriteposition( spr_dummy2,mx+hero_w-1,my+hero_h-1)
	If GetSpriteCollision( spr_dummy1, spr_land) = 1 and GetSpriteCollision( spr_dummy2, spr_land) = 1 then Print ("All On Land")
		
    Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
    Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )

Sync()
loop

+ Code Snippet

// Project: GetCollision01 
// Created: 2018-12-06

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window

img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 ) 

// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpritePosition( spr_sea, 300, 300)   
SetSpriteDepth ( spr_sea, 30 )

// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpritePosition( spr_land, 320, 320)   
SetSpriteDepth ( spr_land, 20 )

// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth ( spr_hero, 10 )

hero_w = GetSpriteWidth(spr_hero) `hero dimensions
hero_h = GetSpriteHeight(spr_hero)

img_dummy = CreateImageColor(0,0,0,0) `create 1px dummy sprites to check top left and bottom right corners of the hero sprite for collision vs land sprite
spr_dummy1= CreateSprite(img_dummy)
SetSpriteSize(spr_dummy1,1,1)
spr_dummy2= CloneSprite(spr_dummy1)


do
	
	mx = GetRawMouseX()	:	my = GetRawMouseY()
    SetSpritePosition( spr_hero, mx, my) 
    
    SetSpritePosition( spr_dummy1,mx,my) `position dummies 
    setspriteposition( spr_dummy2,mx+hero_w-1,my+hero_h-1)
	If GetSpriteCollision( spr_dummy1, spr_land) = 1 and GetSpriteCollision( spr_dummy2, spr_land) = 1 then Print ("All On Land")
		
    Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
    Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )

    Sync()
loop

in theory, this should work, but i can see that if either of the corners are (visibly) 1 pixel "outside" of the land sprite, it still records collision. i'm assuming its due to virtual resolution?

otherwise, you could try a more-manual approach and remove AppGameKit sprite collision from the equation altogether and consider checking if the 2 points both lie within the rectangle that is the land (mathematically).

(or simply add a 1px transparent border around your hero sprite to account for the visible anomaly produced by the above "solution")

i hope that helps!

Attachments

Login to view attachments

Back to top

Profile PM Website

patmaba

21

Years of Service

User Offline

Joined: 4th Sep 2002

Location: Belgium

Posted: 7th Dec 2018 14:52

Link

Thank you Virtual Nomad for your draft source code .

Some remarks about your sprite dummy. It is no longer necessary to do this :

+ Code Snippet

img_dummy = CreateImageColor(0,0,0,0) `create 1px dummy sprites to check top left and bottom right corners of the hero sprite for collision vs land sprite
spr_dummy1= CreateSprite(img_dummy)
SetSpriteSize(spr_dummy1,1,1)

You can do this directly with the new function CreateDummySprite

I like your 1px transparent technique.

I refined my collision detection technique by using this other function: GetSpriteHit

I get what I want here is the code:

// Project: GetCollision01 
// Created: 2018-12-06
// author : patmaba
// thread : https://forum.thegamecreators.com/thread/223392

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
UseNewDefaultFonts( 1 )
SetPrintSize(20)

img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 )

// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpriteDepth(spr_sea, 30)
SetSpritePosition( spr_sea, 300, 300)   
  
// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpriteDepth(spr_land, 20)
SetSpritePosition( spr_land, 320, 320)   
  
// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth(spr_hero, 10)

do
	// mouse position
	mx = GetRawMouseX()
	my = GetRawMouseY()
	
	// hero corner + 1 pixel size
	rx = mx-1 // right x position
	lx = mx+33 // left x position	
	ty = my-1   // top y
	by = my+33  // botom y
	
	// draw the hero
    SetSpritePosition( spr_hero, mx, my)

// Draw graphically the hero corner
    col = MakeColor(255,255,255)
    DrawEllipse(rx,ty,2,2,col,col,0)    
    DrawEllipse(lx,ty,2,2,col,col,0)        
    DrawEllipse(rx,by,2,2,col,col,0)
    DrawEllipse(lx,by,2,2,col,col,0)
        
    Print( "spr_sea="+str(spr_sea)+ ", spr_land="+str(spr_land) + ", spr_hero="+str(spr_hero))
    Print("")
    
    Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
    Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )

// Check hero collision corner
    Print( "Hero Upper Left hit:" + str(GetSpriteHit(rx, ty))) 
    Print( "Hero Upper Right hit:" + str(GetSpriteHit(lx, ty)))
    Print( "Hero Bottom Left hit:" + str(GetSpriteHit(rx, by)))
    Print( "Hero Bottom Right hit:" + str(GetSpriteHit(lx, by)))
    
    Sync()
loop

+ Code Snippet

// Project: GetCollision01 
// Created: 2018-12-06
// author : patmaba
// thread : https://forum.thegamecreators.com/thread/223392

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
UseNewDefaultFonts( 1 )
SetPrintSize(20)

img_sea = CreateImageColor( 0, 0, 255, 255 ) 
img_land = CreateImageColor( 0, 255, 0, 255 ) 
img_hero = CreateImageColor( 255, 0, 0, 255 ) 

// sea Area
spr_sea= CreateSprite( img_sea )
SetSpriteSize( spr_sea, 300,300)
SetSpriteDepth(spr_sea, 30)
SetSpritePosition( spr_sea, 300, 300)   
  
// land Area
spr_land= CreateSprite( img_land )
SetSpriteSize( spr_land, 200,200)
SetSpriteDepth(spr_land, 20)
SetSpritePosition( spr_land, 320, 320)   
  
// hero Area
spr_hero= CreateSprite( img_hero )
SetSpriteSize( spr_hero, 32,32)
SetSpriteDepth(spr_hero, 10)

do
	// mouse position
	mx = GetRawMouseX()
	my = GetRawMouseY()
	
	// hero corner + 1 pixel size
	rx = mx-1 // right x position
	lx = mx+33 // left x position	
	ty = my-1   // top y
	by = my+33  // botom y
	
	// draw the hero
    SetSpritePosition( spr_hero, mx, my)   

    // Draw graphically the hero corner
    col = MakeColor(255,255,255)
    DrawEllipse(rx,ty,2,2,col,col,0)    
    DrawEllipse(lx,ty,2,2,col,col,0)        
    DrawEllipse(rx,by,2,2,col,col,0)
    DrawEllipse(lx,by,2,2,col,col,0)
        
    Print( "spr_sea="+str(spr_sea)+ ", spr_land="+str(spr_land) + ", spr_hero="+str(spr_hero))
    Print("")
    
    Print( "Collision hero vs sea :" +str(GetSpriteCollision( spr_hero, spr_sea )) )
    Print( "Collision hero vs land:" +str(GetSpriteCollision( spr_hero, spr_land)) )     

    // Check hero collision corner
    Print( "Hero Upper Left hit:" + str(GetSpriteHit(rx, ty))) 
    Print( "Hero Upper Right hit:" + str(GetSpriteHit(lx, ty)))
    Print( "Hero Bottom Left hit:" + str(GetSpriteHit(rx, by)))
    Print( "Hero Bottom Right hit:" + str(GetSpriteHit(lx, by)))
    
    Sync()
loop

Thanks to all

patmaba

Back to top

Profile PM

Virtual Nomad

Moderator

18

Years of Service

User Offline

Joined: 14th Dec 2005

Location: SF Bay Area, USA

Posted: 7th Dec 2018 15:47

Link

This post has been marked by the post author as the answer.

i haven't played with AppGameKit sprites much and didn't notice CreateDummySprite(); nice to know. we both learned something

Back to top

Profile PM Website

Sorry your browser is not supported!

Newcomers AppGameKit Corner / [SOLVED] 2D - How to detect collisions between overlapping sprites ?

Attachments