Problem with collisions

andre

Hi everybody!
I'm having issues with the collision() function. Here's a sample of my code:

$.playground().addSprite("mur",{animation:anim_mur, posx: 0, posy: -100, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT+300})
        .addSprite("wall",{animation:anim_wall, posx: 459, posy: 122, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
        .addSprite("table",{animation:anim_table, posx: 459, posy: 122, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});

$.playground().addGroup("ennemies", {width:PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
        .addSprite("sp_bed",{animation:anim_bed, posx: PLAYGROUND_WIDTH-400, posy: 210, width: 320, height: 280})
(...)

I generate ennemies in the "ennemies" group with the addSprite() function. Here's how I handle the collisions:

                $("#sp_viseur").collision("#ennemies").each(function(){
                     alert('test');
                    });

But the function is never called! Please help me.
Thanks.

selim

.collision() won't return collision with groups, so you have to check collison with sprites. In this case you want to add a class to the enemies sprites and use collison with this selector: '.enemies,#enemies'

jarodium

Hello Selim.

How does one check a sprite colliding with a map based sprite?
I have a building built on top of a tileset and I have a group with only one sprite, but this is not happening

$("#player").collision("#building_map").each(function(){ console.log("colide); });

How can one achieve collision detection, if the sprite is freely moving ( x() and y() functions on top the tileset, but the buildings are on the map?

//map is below:
Numbers above 0 are the animations of the building.

var map2 = [[0, 0, 0, 3, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 6, 7, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 10, 11, 12, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 15, 16, 17, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19, 20, 21, 22, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 24, 25, 26, 27, 28, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29, 30, 31, 32, 33, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 35, 36, 37, 38, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 39, 40, 41, 42, 43, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 44, 45, 46, 47, 48, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]

selim

The selector you pass to the collision() method should not only select the name of the thing you want to select but also the whole 'tree' to access it. Furthermore only sprites and tiles (but not tile maps and groups) are returned by the collision() methode.

In you case if the tile map is not nested in a group what you want is:

$("#player").collision("#building_map,#building_map div").each(...);

This wil select the tile map (#building_map) as well as any div it contains (#building_map div) and since tiles are rendered with divs and that no tiles are done for 0 indexes you will have a list of all the tiles colliding with the player.

If you want to find what kind of tile a given tile is you can look at his CSS class: it will have a class of the form tileType_INDEX where INDEX is the number of the animation index in your map BUT starting with 0. So a tile describe with 3 in your map array will generate a div with the class tileType_2.

That also means that you can check for collision only with some given tile, for example for tile with index 3 and 11 you would wrote:

$("#player").collision("#building_map,.tileType_2,.tileType_10").each(...);

jarodium

I see. It's now working.
Thank you once again Selim

Regards
Pedro

heyman

Hello,sir.
I have issue as follows.It doesn't work.
......
$("#pg").playground({height:bgHeight, width:bgWidth, keyTracker: true})
.addSprite("superjump",{height:72,width:92,animation:playerAnima.superjump})
.addGroup("player",{height:bgHeight, width:bgWidth})
......
$('#player').addSprite(spriteName,{
height:100,width:150,
animation:barrierAnima,
posx:bgWidth,posy:(bgHeight-100)*rnd
});
$('#'+spriteName).addClass('barrierSprite')
......
$('#superjump').collision("#player,.barrierSprite").length //(it is 0 all.)
......
Could you help me? Where is the error?
Thank you!

the_Simian

heyman, I had a similar problem. The collision system was not able to detect the classes I added to a specific group, nor was it allowing my to use a group's id as the selector, I had to do something like this.

var $collided = $el.collision(".gQ_group, #playerBody");

In this case $el was a specific jQuery element I was testing for collision - similar to like the tutorial.

So at least for me, one argument had to be one of the filters which was an immediate parent of the thing you're ultimately selecting, and after the recent migration to 0.7 they have all been namespaced with gQ_. The other argument is the selector.

so.. you might need something like

$('#superjump').collision(".gQ_group,.barrierSprite").

I'm curious about the behavior of the function myself, so can you let me know if that works for you? I'm still exploring the library.

libin

Hi I have a problem with collision detection.

My game is much simpler than the example. It is only a guy that goes on the street and meet people (without shooting them). So i try to detect when two characters stay close one to another.

Here is my groups
$("#playground").playground({height: PLAYGROUND_HEIGHT,
width: PLAYGROUND_WIDTH,
keyTracker: true});

// Initialize the background
$.playground().addGroup("actors", {width: PLAYGROUND_WIDTH,
height: PLAYGROUND_HEIGHT})
.addGroup("taxi",{posx:GLOBAL_TAXI_POSITION,
posy:100,
width:220,
height:250})
.addSprite("taxiBody",{animation:taxiAnimation["look_left"],
posx:0,
posy:0,
width: 220,
height: 350
}).end()

.addGroup("player", {posx: 300,
posy: 50,
width: 120,
height: 345})

.addSprite("playerBody",{animation: playerAnimation["look_right"],
posx: 0,
posy: 0,
width: 120,
height: 345}) ;


And here is the function that i wrote.. It's doesn't work.
$.playground().registerCallback (function(){


//Test for collisions
var collided = $("#actors,#taxi,#taxiBody").collision("#actors,#player,#playerBody");
if(collided.length > 0){
alert('fjgjgg');
}
}, REFRESH_RATE);

I placed it after registerCallback function which moves the backgrounds (the same as in your example)

How can i make it work?

Thanks in advance!

selim

@Simian: Indeed you cannot have collision detection with groups. However groups have to appear in you filter if you try to detect a collision with an object nested in a group.

@libin: I see two problem with your code. Firstly collision detection only works when no more than one object is selected. Secondly you have to include the parent nodes of the elements you try to find collision with.

In you case you could write something like this:

var collided = $("#playerBody").collision("#actors,#taxi,#taxiBody,)

As you can see you don't need to include the parent node of the selected element ("#playerBody") only those of the ones you try to detect collision ("#taxi").

As a lot of people have problems with this function I will try to post a short tutorial video about this. I will comment here when it's up!

selim

So here is my collision tutorial:

hopes it helps!