HaxeFlixel: make object disappear in certain area

Question

I'm trying to make a game where you can capture floating lights that moves randomly in the air. In the game there is going to be 3 different boxes where you can put the floating lights, so there is also going to be 3 different lights.

The lights works properly and I am able to drag them around like I want.

My issue is how to catch them and re-spawn them. I want to use the kill() method that you find in the flixel.FlxNapeSprite.

When you catch them, you should move them to the correct box, and when they come inside the box, they should get killed, you get points, and a new random light re spawn.

Link to image of the game so far

How do I kill the light-object inside a certain area?

Answer 1

I guess the boxes are FlxNapeSprites as well? Typically you would set up a collision callback here, which is called whenever the hitboxes of two nape bodies overlap (the light and the box in this case). You can display the nape bodies with napeDebugEnabled = true or by pressing the "N" button in the top right of flixel's debugger overlay.

Here's a simple example of how to set up a simple collision callback using Flixel + Nape:

package;

import flixel.addons.nape.FlxNapeSprite;
import flixel.addons.nape.FlxNapeState;
import flixel.util.FlxColor;
import nape.callbacks.CbEvent;
import nape.callbacks.CbType;
import nape.callbacks.InteractionCallback;
import nape.callbacks.InteractionListener;
import nape.callbacks.InteractionType;
import nape.phys.BodyType;
using flixel.util.FlxSpriteUtil;

class PlayState extends FlxNapeState
{
    override public function create()
    {
        super.create();
        bgColor = FlxColor.BLACK;
        napeDebugEnabled = true;

        var light = new Light(10, 10);
        var box = new Box(10, 100);

        add(light);
        add(box);

        light.body.velocity.y = 200;

        FlxNapeState.space.listeners.add(new InteractionListener(
            CbEvent.BEGIN, 
            InteractionType.COLLISION, 
            Light.CB_TYPE,
            Box.CB_TYPE,
            collideLightBox));
    }

    function collideLightBox(callback:InteractionCallback)
    {
        var light:Light = cast callback.int1.castBody.userData.sprite;
        light.kill();
    }
}

class Light extends FlxNapeSprite
{
    public static var CB_TYPE(default, null) = new CbType();

    public function new(x:Float, y:Float)
    {
        super(x, y);
        makeGraphic(10, 10, FlxColor.TRANSPARENT);
        var radius = 5;
        drawCircle(5, 5, radius, FlxColor.WHITE);
        createCircularBody(radius);
        body.cbTypes.add(CB_TYPE);
        // we need this to get the Light instance in the callback later
        body.userData.sprite = this;
    }
}

class Box extends FlxNapeSprite
{
    public static var CB_TYPE(default, null) = new CbType();

    public function new(x:Float, y:Float)
    {
        super(x, y);
        makeGraphic(100, 50, FlxColor.GREEN);
        createRectangularBody(width, height);
        body.cbTypes.add(CB_TYPE);
        body.type = BodyType.STATIC;
    }
}

Be sure to check out the official FlxNape demo. The Nape website also has some very helpful examples + docs.