Actionscript 3.0. How to calibrate collision detection?

Question

This is for a flash game that I am working on. I am trying to improve the collision detection between LevelOnePlayer and Wall11. However, even if I change the Wall Hit Detection variables by 0.1 pixels, the game keeps on detecting collision when the player is too close or too far from the walls. Is there anyway to make the collision detection pixel perfect?

const LEFT_WALL_HIT_DETECTION: Number=5.5;
const RIGHT_WALL_HIT_DETECTION: Number=5.5;
const UP_WALL_HIT_DETECTION: Number=5.5;
const DOWN_WALL_HIT_DETECTION: Number=5.5;
const ENEMY_HIT_DETECTION: Number=5.5;

var left:Boolean = false;
var right:Boolean = false;
var up:Boolean = false;
var down:Boolean = false;

var leftBumping:Boolean = false;
var rightBumping:Boolean = false;
var upBumping:Boolean = false;
var downBumping:Boolean = false;



var Onespeed: Number=3.5;
var LevelOneStartFrame: Number=1010; 
addEventListener(Event.ENTER_FRAME, LevelOne);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, keyReleased); 
    function keyPressed(event:KeyboardEvent): void{
        if(event.keyCode == Keyboard.LEFT || event.keyCode == 65){
            left=true; 
        }
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == 68){
            right=true;
        }
        if(event.keyCode == Keyboard.UP || event.keyCode == 87){
            up=true;  
        }
        if(event.keyCode == Keyboard.DOWN || event.keyCode == 83){
            down=true; 
        }
    }
    function keyReleased(event:KeyboardEvent): void{
        if(event.keyCode == Keyboard.LEFT || event.keyCode == 65){
            left=false;
        }
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == 68){
            right=false;
        }
        if(event.keyCode == Keyboard.UP || event.keyCode == 87){
            up=false;
        }
        if(event.keyCode == Keyboard.DOWN || event.keyCode == 83){
            down=false;
        }
    }
    function LevelOne(event:Event){
        if(left){
            LevelOnePlayer.x-=Onespeed; 
        }
        if(right){
            LevelOnePlayer.x+=Onespeed; 
        }
        if(up){
            LevelOnePlayer.y-=Onespeed; 
        }
        if(down){
            LevelOnePlayer.y+=Onespeed; 
        }
        if(Wall11.hitTestPoint(LevelOnePlayer.x-LEFT_WALL_HIT_DETECTION,       LevelOnePlayer.y, true))
        leftBumping=true; else leftBumping=false;
        if(Wall11.hitTestPoint(LevelOnePlayer.x+RIGHT_WALL_HIT_DETECTION, LevelOnePlayer.y, true))
        rightBumping=true; else rightBumping=false;
        if(Wall11.hitTestPoint(LevelOnePlayer.x, LevelOnePlayer.y+DOWN_WALL_HIT_DETECTION, true))
        downBumping=true; else downBumping=false;
        if(Wall11.hitTestPoint(LevelOnePlayer.x, LevelOnePlayer.y-UP_WALL_HIT_DETECTION, true))
        upBumping=true; else upBumping=false;

        if(leftBumping) LevelOnePlayer.x+=Onespeed;
        if(rightBumping) LevelOnePlayer.x-=Onespeed;
        if(downBumping) LevelOnePlayer.y-=Onespeed;
        if(upBumping) LevelOnePlayer.y+=Onespeed;
    }

Also, I still have not gotten the WASD keys to work perfectly. Is there anyway to fix that? — Gary Lu KOTH
If the posted Answer works then mark it as solved using the ✔ icon — VC.One
I am still having a hard time fixing this. I cannot even convert that Movie Clip into a Bitmap without code since I have already drawn it. And I tried deleting the LevelOnePlayer and making a Bitmap (with code) that looks exactly like LevelOnePlayer and named it LevelOnePlayer, but that did not help either because the way the game acts now is significantly different. Is there a way to make convert a Movie Clip into a Bitmap without code? — Gary Lu KOTH

Zze Zze · Accepted Answer · 2017-01-25T23:15:17

If you are looking for pixel perfect collision detection, you will need to change your methodology slightly and use BitmapData.hitTest(); instead of MovieClip.hitTestPoint(); You can read about the differences between the 2 functions / implementations here if you like.

To implement this, you can head over to the adobe docs, but here is the example snippet they provide (confusingggggg);

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;

var bmd1:BitmapData = new BitmapData(80, 80, true, 0x00000000);
var rect:Rectangle = new Rectangle(20, 20, 40, 40);
bmd1.fillRect(rect, 0xFF0000FF);

var pt1:Point = new Point(1, 1);
trace(bmd1.hitTest(pt1, 0xFF, pt1)); // false
var pt2:Point = new Point(40, 40);
trace(bmd1.hitTest(pt1, 0xFF, pt2)); // true

In your case, you can do the following, but please note that I wrote the following without an IDE, so there may be a syntax error or two:

var Wall1Rect:Rectangle = Wall1.getBounds(this);
var Wall1BmpData = new BitmapData(Wall1Rect.width, Wall1Rect.height, true, 0);

var playerRect:Rectangle = LevelOnePlayer.getBounds(this);
var playerBmpData = new BitmapData(playerRect.width, playerRect.height, true, 0);

if(playerBmpData.hitTest(new Point(LevelOnePlayer.x, LevelOnePlayer.y), 255, Wall1BmpData, new Point(Wall1.x, Wall1.y),255))
{
    trace("hit");
}

Another good tutorial.

Actionscript 3.0. How to calibrate collision detection?

1 Answers