0
\$\begingroup\$

I am working on simple drag and drop game with JavaScript and PixiJS. The game itself is 2D, but I have some pseudo-3D objects (I guess isometric) and I am trying to get the position of those objects.

My question is if there is any mathematical equation or algorithm to solve my problem:

I have some fruit objects, and the user should put those objects in the basket I have below, but only in the yellow surface like below in the picture. Currently, I am using the code below to check if the object is inside the basket or not, but this checks the entire texture and not the yellow surface!

isInside() 
{
    if (this.object.x > basket.x1 && this.object.x <= basket.x2 &&
        this.object.y > basket.y1 && this.object.y <= basket.y2) 
    {
        return true;
    }
    else 
    {
        return false;
    }
}

Which algorithm can I use to check only the yellow surface?

enter image description here

\$\endgroup\$
2
\$\begingroup\$

Usually, you would specify a shape or mask that would serve as that object's "physical area", so to speak, with which the other objects in the world can interact.

I haven't used Pixi.js, but it seems to me like that concept is realised by the hitArea property of an InteractiveTarget (see sources). It should be enough to set a polygon of the proper shape as the hitArea for the fruit basket object.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.