Collision detection in a tile based environment

I am having problems with my collision detection. basically when I hit a solid tile my character's body is half way in the tile already. here is my code.

The properties wY and wX are my game world positioning. Not the stage positioning. dx and dy is the velocity the character is traveling. This first snippet of code is within a game loop. The focus point of my character is centered on the x axis

package com.objects 
{
    import flash.display.MovieClip;
    import com.eapi.EngineApi;
    import flash.events.Event;

    /**
     * ...
     * @author Anthony Gordon
     */
    public class Engine extends EngineApi
    {
        public var friction:Number =  0.93;
        protected var Heros:Array;

        public function Engine(w:Number = 540,h:Number = 360, tw:Number = 50, th:Number = 50) 
        {
            super(w, h, tw, th);
            Heros = new Array();
        }

        override protected function loop(e:Event):void
        {
            UpdateObjects();
            Rules();
            CheckHero();
            UpDateMap();
        }

        public function AddHero(g:GameObject):void
        {
            Heros.push(g);
        }

        protected function Rules():void
        {
            //Everything Has friction
            for (var i:Number = 0; i < gameObjects.length; i++)
            {
                var char:GameObject = GameObject(gameObjects[i]);
                char.dx *= friction;
                //char.dy *= friction;

                //Below is the tile positioning of my character
                var cgridx:Number = Math.floor(char.wX / tileW);
                var cgridy:Number = Math.floor(char.wY/ tileH);

                //This is the tile in front of the character
                var nextx:Number = Math.floor((char.wX + char.dx) / tileW);
                var nexty:Number = Math.floor((char.wY + char.dy) / tileH);

                //We assume the character is in the air before we figure it to be false
                char.onGround = false;

                //I am about to remove the vars from cgrid below. Keep a look out for issues in the future
                if (mapHolder[currentMap][nexty][cgridx] == 0 || mapHolder[currentMap][nexty][cgridx] == 2)
                {
                    //If character is falling down
                    if (char.dy > 0)
                    {
                        char.wY = (nexty * tileH) - 1;
                        cgridy = Math.floor(char.wY / tileH);
                        char.dy = 0;
                        char.onGround = true;
                    }
                    else if (char.dy < 0)//If character is going up
                    {
                        char.wY = (nexty * tileH) + (tileH + 1);
                        cgridy = Math.floor(char.wY / tileH);
                        char.dy = 0;
                    }
                }

                //mapHolder is a array that holds an array of maps and their tile numbers
                if (mapHolder[currentMap][cgridy][nextx] == 2)
                {
                    if (char.dx > 0)//if character is going right
                    {
                        char.wX = ((nextx * tileW) - 1);
                    }
                    else if (char.dx < 0)// if character is going left
                    {
                        char.wX = (nextx * tileW) + (tileW + 1);
                    }

                    char.dx = 0;
                }
                //if character is not on ground then keep faling
                if (char.onGround == false)
                {
                    char.dy += .9;
                    if (char.dy > 30) char.dy = 5;
                }
            }
        }

        protected function CheckHero():void
        {
            var char:Hero = Heros[0];
            char.x = char.wX - offsX;
            char.y = char.wY - offsY;

            if (char.wX < 0)
            {
                char.wX = 0;
                char.dx = 0;
            }

            if (char.wY < 0)
            {
                char.wY = 0;
                char.dy = 0;
            }

            offsX = char.wX - (vWidth/2);
            offsY = char.wY - (vHeight/2);

            if (offsX < 0)
            {
                offsX = 0;
            }

            if (offsY < 0)
            {
                offsY = 0;
            }

            //If screen hits the world END STOP!!!
            if ((offsX + vWidth) > wWidth)
            {
                offsX = (wWidth - vWidth);
            }

            if ((offsY + vHeight) > wHeight)
            {
                offsY = (wHeight - vHeight);
            }
            /////

            //If char hits the end, Stop!!
            if (char.wX > wWidth)
            {
                char.wX = char.wX - wWidth;
                char.wX = wWidth;
            }

        }


    }

}

Here is my character class

package com.objects 
{
    import flash.display.MovieClip;
    import flash.events.*;
    /**
     * ...
     * @author Anthony Gordon
     */
    [Embed(source='../../../bin/Assets.swf', symbol='Hero')]
    public class Hero extends GameObject
    {   
        private var aKeyPress:Array;
        private var jumpDisabled:Boolean = false;

        public function Hero() 
        {
            wY = 150;
            wX = 90;
            speed = .5;
            aKeyPress = new Array();
            TheGame.sr.addEventListener(KeyboardEvent.KEY_DOWN, keyDownListener);
            TheGame.sr..addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
        }

        private function keyDownListener(e:KeyboardEvent):void {
            //trace("down e.keyCode=" + e.keyCode);         
            aKeyPress[e.keyCode]=true;
        }

        private function keyUpListener(e:KeyboardEvent):void {
            //trace("up e.keyCode=" + e.keyCode);
            aKeyPress[e.keyCode]=false;
        }

        override public function UpdateObject():void
        {
            Controls();
            updatePosition();
        }

        private function Controls():void
        {
            wX += dx;
            wY += dy;

            if (aKeyPress[38])//Key press up
                ;//vy -= speed;         
            else if (aKeyPress[40])//Key press down
                ;//dy += speed;

            if (aKeyPress[37])//left
                dx -= speed;
            else if (aKeyPress[39])//Right
                dx  += speed;

            if (aKeyPress[32]){//space
                jump();
            }                   
        }//End Controls

        private function jump():void
        {
            if (!jumpDisabled)
            {
                if (onGround)
                {
                    dy = -15;
                    jumpDisabled = true;
                }
            开发者_StackOverflow中文版}
            else
            {
                jumpDisabled = false;               
            }
        }
    }
}

---

You should be testing before you move.

From what I can parse from your code above, you're moving the player, then testing for collision. If that's the case then you need to be prepared to back out the move if it hit anything (which is not any fun to do or to debug).

More simply, you could call a IsBlocked() method that simply looks at the tile sitting in the direction that the player is about to move.

if (!player.IsBlocked())
{
    player.Move();
}
else
{
    player.HandleCollision();
}

---

I can't really understand your code, but from making my Mega Man engine I learned some things that I can share. My method of collision handling involved attempting the move, then backing out by a necessary amount. You also need to know from which direction you approached the block, which is not trivial.

1) attempt the move. player.position += player.velocity

2) check for collisions using bounding box intersection

2a) Find the intersection of the player's and the block's bounding rectangles. I'm not going to give a formula for this, it's almost trivial. 2b) Key point: You MUST consider a 0 height or 0 width (but not both) intersection as a collision! Otherwise your player will "vibrate" against the collision surface.

3) Using the intersection rectangle, figure out approach direction. The algorithm for this involves comparing slopes of the approach velocity and the intersection rectangle's diagonal.

4) based on approach direction (horizontal or vertical) decide whether to back out of the x or y component of the movement. Use the intersection's height or width as the amount to revert.

5) Store the fact that your player is now blocked in that direction. Note that you are now touching the block, but not embedded in it. This is why a 0 sized intersection is still a collision - if it weren't, then the next frame he would think he's not colliding and fall again, leading to a "vibrating" effect.

As far as being "halfway in the tile already" - are you accidentally comparing the center point of the player to the edge of the tile?

---

Well, this is a hard thing to debug without being there, but here's something that stuck out to me.

The difference between these two lines strikes me as odd:

for going right

char.wX = ((nextx * tileW) - 1);

for going left

char.wX = (nextx * tileW) + (tileW + 1);

Why do you have (tileW + 1) on the end of the second one? I would think that these lines would be the same. I'm not sure why there is a -1 on the first line either, but these lines should at least be the same in my opinion.

Also, why are you messing with dx and dy in the first place when this is a tile-based thing and the person can only move in one tile increments from what I am seeing. The way that you're doing this seems very odd to me.

---

Well I fixed the issue. It isnt the greatest but its ten times better then before. here is what I did..

I changed...

if (mapHolder[currentMap][cgridy][nextx] == 2)
                {
                    if (char.dx > 0)//if character is going right
                    {
                        char.wX = ((nextx * tileW) - 1);
                    }
                    else if (char.dx < 0)// if character is going left
                    {
                        char.wX = (nextx * tileW) + (tileW + 1);
                    }

                    char.dx = 0;
                }

To this...

if (mapHolder[currentMap][cgridy][right] == 2)
                {
                    char.wX = right * (tileW) - (tileW / 2);
                    char.dx = 0;
                }
                else if (mapHolder[currentMap][cgridy][left] == 2)
                {
                    char.wX = right * (tileW) + (tileW / 2);
                    char.dx = 0;
                }

My character center points is in the middle on both the y axis and x axis. so to do this i did the following

if (mapHolder[currentMap][cgridy][left] == 2)
                {
                    char.wX = (left + 1) * (tileW) + (tileW / 2);
                    char.dx = 0;
                }

                if (mapHolder[currentMap][cgridy][right] == 2)
                {
                    char.wX = right * (tileW) - (tileW / 2);
                    char.dx = 0;
                }

left and right are the tiles to the left and right of the Hero. for left what I did was I got the next tile to the right by doing this (left + 1). then I got its pixel position my multiplying tileW by it (left + 1) * (tileW). All my tiles focus points are top left. So in order for the character to be positioned to the right. I had to add another half of tile. Otherwise my hero's center point would be between the left tile and the tile to the right (i.e. left+1). For the right was almost the same. but you get the picture.... I hope.