›

gameQuery Platformer Collision

eddiebees
edited April 2013 in Support
We suck. We have no clue how to make a platformer. We have set up the tilemap and sprites, but can't figure out how to do collision detection to keep the character from moving through the tiles. Any help would be appreciated. One of us has prior experience with C++ and their own engine, but that doesn't translate very well into Javascript and gameQuery.

Our current code is here: (see full resources below)

Comments

  • selimselim
    edited April 2013
    Typically you will be interested in collision with only a few of the tiles. Maybe you're even looking for collision with two different sets of tiles (for example the ground that stops the player and some spikes that kill him).

    So instead of doing :
    tileCollisions = $("#playerBody").collision("gQ_tilemap");

    You would specify the tiles you're interested in. And I would recommend using the CSS class provided by library:
    tileCollisions = $("#playerBody")
       .collision("." + $.gameQuery.tilemapCssClass + ",." 
                      + $.gameQuery.tileTypePrefix + "2,." 
                      + $.gameQuery.tileTypePrefix + "7");


    Here the tiles with type 2 and 7 will be tested for collision. To find-out what is the type of the tiles that concern you you should simply use the browser's inspector and look at the class of the tiles.

    As you can see there is a small error in you code since you use as a filter "gQ_tilemap" and it should have been ".gQ_tilemap".

    If you haven't already done so I would recommend watching the video tutorial about collision detection :
  • eddiebees
    edited April 2013
    I had actually had a working way of detecting the tiles, the issue came into play with the specifics of handling that collision. What is the proper way to change the player's movement with this engine? I had attempted to just move the player to the top of the tile if the bottom of their hitbox is inside the upper half of the tile but with the setup of the engine it caused them to drop and fly back up as the sprites are immediately redrawn instead of being redrawn on command.

    I am not able to access that video.
  • selimselim
    I can't say for sure without seeing the effect you describe but there is a very simple way to delay the redraw...

    Instead of calling .x() immediately you can store the new coordinate into a variable and assign this variable to the sprite position once the collision detection is finished.

    Oh and a small remarks: you don't need to parseInt() the value returned by .x(),.y(),.w() or .h().
  • eddiebees
    edited April 2013
    We now have vertical collisions somewhat working, but once we hit a tile we can't move horizontally.

    Here is the entirety of the code and resources for the game:
    https://docs.google.com/file/d/0B2ucvP-R0-IHN0pnNHJtQmdETWc/edit?usp=sharing
  • eddiebees
    You haven't responded to our comment yet. Does this mean we're breaking up? =((
  • selimselim
    Hi, sorry I've been busy lately... I'll try to have a look at you code tomorrow.
  • selimselim
    Hi here are my remarks regarding you code:
    if(tileCollisions.length > 0)
    {
        tileCollisions.each(function() {
            var blockX = $(this)[0].gameQuery.posx;
            var blockY = $(this)[0].gameQuery.posy;
     
            var blockMidX = blockX + $(this)[0].gameQuery.width;
            var blockMidY = blockY + $(this)[0].gameQuery.height;
     
            newPosY = blockY - parseInt($("#player").h);
        });
    }

    1. You don't need the if check since .each will only iterate if the number of elements is not 0.

    2. You shouldn't use $(this)[0].gameQuery.posx but $(this).x() instead (same y, width and height).

    3. you use .h like a field but it is a function. Furthermore this function returns a number so you don't need to parse it. So you should really do
      newPosY = blockY - $("#player").h())

    I think the bug you describe is caused by an exception being thrown during the collision detection due to some of the problems I've listed above.

    Other than that the algorithm you use to move the player is not perfect:
    The beginning is right: Compute the next position, check for collision but after that you should for each tile:

    1. Compute the distance along the x axis the player has entered the tile.

    2. Same for the y axis

    3. Push the sprite out of the collision along the shortest distance by setting the new position like you did in your code

    This should work.
  • selimselim
    edited May 2013
    Oh and I wrote a book about making games using jQuery (not gameQuery but the techniques are the same) and the chapter dealing with movement of the player in a platformer can be read online for free.

    You could have a look at it from the section "Coding the game" and it will provide interesting information.

    the book:
    http://www.packtpub.com/jquery-game-development-essentials/book

    the free chapter:
    http://www.packtpub.com/sites/default/files/9781849695060_Chapter_04.pdf?utm_source=packtpub&utm_medium=free&utm_campaign=pdf
  • eddiebees
    We've almost got collision detection kind of working, but it doesn't work at all.

    https://docs.google.com/a/pghboe.net/file/d/0B2ucvP-R0-IHWlg0bkdPclhlY2s/edit?usp=sharing
  • eddiebees
    Baby, come back. You can blame it all on Eddie Bees.
  • eddiebees
    Hey hey, you you I don't like your girlfriend. Hey hey, you you I think you need a new one. I WANT CANDY.
Sign In or Register to comment.