Can I let people draw with the cursor using HaxeFlixel?

Question

basically the question. I'm trying to make a game where you need to draw certain shapes to do certain actions. I want to have the game trace the movement of the cursor, but I can't find any good way to make the lines.

I'v tried using FlxSpriteUtil.drawLine, but that doesn't seem to work. I've also tried using FlxSpriteGroups.clone() to clone a dot as the cursor, but that just leaves a trail of dots, so that doesn't work either.

I'm really new to Haxe and HaxeFlixel, so I have no idea what to do or what to use. Any suggestions?

Answer 1

Sounds like you started off right by using drawLine from FlxSpriteUtil. When making a drawable line, the easiest way to do it is to just save the previous mouse position in a variable, and draw a line from the previous position to the current position every frame (i.e. put the code in update()).

Here's a small code example which creates a canvas sprite which allows drawing.

package;

import flixel.FlxG;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.math.FlxPoint;
import flixel.util.FlxColor;

using flixel.util.FlxSpriteUtil;

class PlayState extends FlxState
{
    private var canvas:FlxSprite;
    private var lastPoint:FlxPoint;

    private static inline var CANVAS_OFFSET = 16;
    private static inline var DRAW_THICKNESS = 2;
    private static inline var DRAW_COLOR = FlxColor.BLACK;

    override public function create()
    {
        super.create();
        canvas = new FlxSprite(CANVAS_OFFSET, CANVAS_OFFSET);
        canvas.makeGraphic(256, 256, FlxColor.WHITE);
        add(canvas);
    }

    override public function update(elapsed:Float)
    {
        super.update(elapsed);
        if (FlxG.mouse.pressed && FlxG.mouse.overlaps(canvas))
        {
            if (FlxG.mouse.justPressed)
            {
                // This is the first point, i.e. the beginning of a new stroke
                lastPoint = FlxG.mouse.getPosition();
                // First, create an ellipsis to enable the player to click to draw a line
                canvas.drawEllipse(
                    FlxG.mouse.x - CANVAS_OFFSET, 
                    FlxG.mouse.y - CANVAS_OFFSET, 
                    DRAW_THICKNESS / 2, 
                    DRAW_THICKNESS / 2, 
                    DRAW_COLOR
                );
            }
            else
            {
                // Otherwise, line to the previously drawn point
                var mousePos = FlxG.mouse.getPosition();
                canvas.drawLine(
                    lastPoint.x - CANVAS_OFFSET, 
                    lastPoint.y - CANVAS_OFFSET, 
                    mousePos.x - CANVAS_OFFSET, 
                    mousePos.y - CANVAS_OFFSET, 
                    {
                        thickness: DRAW_THICKNESS,
                        color: DRAW_COLOR
                    }
                );
                lastPoint = mousePos;
            }
        }
    }
}