Tags

, , , , , ,

In my recent game creation, I needed to be able to allow the player to drag and drop an object to complete a puzzle. I wanted the player to know when they had placed the object in the right position by locking it in place and not allowing it to be picked up again. But I quickly realised that this could be very problematical if I used a hitTestObject action. The player might drop the piece close enough to lock in place, but not close enough to really be in the right spot, and because the piece would now be locked, the player wouldn’t be able to move it again to get it closer to the desired location.

One way “around” this problem is to use hitTestPoint instead. It’s not really a way to get around the problem above, but more accurately it is a way to allow the player to be more accurate in the placement of their piece, and has the added advantage of allowing you (the game coder) to add some extra code in, that will move the piece that potential final small distance needed to be in just the right spot that you know it needs to be.

Ok, so how do we do this? Relatively easily actually, it looks tricky, but it’s not.
This code is for moving only one object, but it is easily scaled up to allow for multiple objects to be interacted with in the same way.

// set target point co-ordinates
var practiceHitPoint:Point = new Point();
practiceHitPoint.x = 366;
practiceHitPoint.y = 496;

// create event listeners and call functions for dragable objects
practiceBall_mc.addEventListener(MouseEvent.MOUSE_DOWN, selectPracticeBall);
practiceBall_mc.addEventListener(MouseEvent.MOUSE_UP, dropPracticeBall);

// define functions;
function selectPracticeBall(event:MouseEvent):void
{
practiceBall_mc.startDrag();
parent.addChild(practiceBall_mc);
}

function dropPracticeBall(event:MouseEvent):void
{
// check if drag object is over correct target
if (practiceBall_mc.hitTestPoint(practiceHitPoint.x,practiceHitPoint.y,true))
{
// if yes, drop object and snap to pre-determined hit point
practiceBall_mc.stopDrag();
practiceBall_mc.x = practiceHitPoint.x;
practiceBall_mc.y = practiceHitPoint.y;

// remove event listeners so object can not be picked up again
practiceBall_mc.removeEventListener(MouseEvent.MOUSE_DOWN, selectPracticeBall);
practiceBall_mc.removeEventListener(MouseEvent.MOUSE_UP, dropPracticeBall);
}
else
{
// otherwise just drop object
practiceBall_mc.stopDrag();
}
}

Now, here’s a really cool thing you can do with this now you have that much done. What if you want to reset the pieces back to where they started and do it all over again?

When you declare the target variables, also declare some reset variables for where your pieces start.

// set variables for object start point
var practiceStartX:Number = 123;
var practiceStartY:Number = 496;

After your drop code, you’ll now need to add in…

// button to reset dragable object/s back to start position;
practice_btn.addEventListener(MouseEvent.CLICK,clickpractice_btn);
function clickpractice_btn(event:Event):void
{
practiceBall_mc.x = practiceStartX;
practiceBall_mc.y = practiceStartY;
// re-create Event listeners
practiceBall_mc.addEventListener(MouseEvent.MOUSE_DOWN, selectPracticeBall);
practiceBall_mc.addEventListener(MouseEvent.MOUSE_UP, dropPracticeBall);
}

Now obviously, to do this properly, you will need a reset button, but I’ve covered those basics in another post. But there is your “Drag, Drop, Snap, Stay & Reset”. Have fun!

Advertisements