Can I let people draw with the cursor using HaxeFlixel? - haxe

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;
}
}
}
}