Is it possible to freely draw on a FlxSprite (like on a canvas)?



  • Hi there!

    I'm trying to draw curves on a sprite.
    So far I tried FlxSpriteUtil.drawCurve and works, but I need something more advanced.

    I noticed FlxSpriteUtil is kind of a wrapper around openfl.display.Sprite and ends up calling FlxSprite.pixels.draw.

    I tried doing something similar to write my own canvas-drawing function, but I keep getting this error: Invalid field access : draw, which I'm assuming refers to that .draw() call I mentioned before.

    My code tries to extend FlxSpriteUtil, but I also tried calling FlxSpriteUtil's static methods directly from my FlxSprite subclass with the same results :-(

    using flixel.util.FlxSpriteUtil;
    using PlayState.BezierSpriteUtil;
    
    
    class BezierSpriteUtil extends FlxSpriteUtil
    {
            public static function drawCubicCurve(sprite:FlxSprite, StartX:Float, StartY:Float, EndX:Float, EndY:Float, ControlX1:Float, ControlY1:Float, ControlX2:Float, ControlY2:Float, FillColor:FlxColor = FlxColor.TRANSPARENT, ?lineStyle:LineStyle, ?drawStyle:DrawStyle):FlxSprite
            {
                    lineStyle = FlxSpriteUtil.getDefaultLineStyle(lineStyle);
                    FlxSpriteUtil.beginDraw(FillColor, lineStyle);
                    FlxSpriteUtil.flashGfx.moveTo(StartX, StartY);
                    FlxSpriteUtil.flashGfx.curveTo(EndX, EndY, ControlX1, ControlY1);
                    FlxSpriteUtil.endDraw(sprite, drawStyle);
                    return sprite;
            }
    }
    
    class Canvas extends FlxSprite
    {
    
            override public function update(elapsed:Float):Void
            {
                    var lineStyle:LineStyle = { color: FlxColor.RED, thickness: 1 };
                    var drawStyle:DrawStyle = { smoothing: false };
                    drawCubicCurve(10, 20, 600, 360, 100, 100, 100, 100, FlxColor.RED, lineStyle, drawStyle);
                    super.update(elapsed);
            }
    }
    
    class PlayState extends FlxState
    {
            private var _canvas:Canvas;
    
    	override public function create():Void
    	{
                    _canvas = new Canvas(640, 480);
                    add(_canvas);
    		super.create();
    	}
    
    }
    

    I'm thinking this is the wrong approach. Is there a known way of freely drawing on a FlxSprite, canvas-style?


Log in to reply