Multiple FlxSprite with makeGraphic bugs when same color.



  • Hello,

    I have found something thats probably a bug (or i'm really not getting it). If you create 2 FlxSprites of the same background color. Then they will be combined.

    // Source (From template (# flixel tpl -n 'somename') 
    package;
    
    import flixel.FlxState;
    import flixel.util.FlxColor;
    import flixel.FlxSprite;
    import flixel.FlxG;
    using flixel.util.FlxSpriteUtil;
    
    class PlayState extends FlxState
    {
        override public function create():Void
        {
    	super.create();
    
    	var triangle:FlxSprite;
    	var circle:FlxSprite;
    	var white:FlxColor      = FlxColor.WHITE;
    	var tricol:FlxColor     = FlxColor.BLUE;
    	var circol:FlxColor     = FlxColor.BLUE;
    	var objcolor:FlxColor   = new FlxColor(Std.parseInt('0x55161616'));
    	var hw:Int	        = Std.int(FlxG.stage.stageWidth / 2);
    	var hh:Int	        = Std.int(FlxG.stage.stageHeight / 2);
    	var rad:Float           = 0.5;
    	var off:Int	        = Std.int(hh * 0.5);
            var linestyle:LineStyle = { color: new FlxColor(Std.parseInt('0xAA101010')), thickness: 3 };
            var drawstyle:DrawStyle = { smoothing: true };
    
    	// setup background color;
    	bgColor	= white;	// white.
    
    	// make a triangle
    	triangle = new FlxSprite();
    	triangle.makeGraphic(hw, hh, tricol);
    	triangle.drawTriangle(0, 0, hh, objcolor, linestyle, drawstyle);
    
    	// make a triangle
    	circle = new FlxSprite();
    	circle.makeGraphic(hw, hh, circol);
    	circle.drawCircle(off, off, rad, objcolor, linestyle, drawstyle);
    	circle.x = hw;
    	circle.y = hh;
    
    	add(triangle);
    	add(circle);
    
        }
    }
    // end source
    

    If now the circle and triangle are on both Sprites :( If you change tricol or circol to be different than the other. Then it works as expected!

    So as a quick solution you can do this to solve it (make a change of just one bit);

    	var tricol:FlxColor     = new FlxColor(Std.parseInt('0xFF0000FF'));
    	var circol:FlxColor     = new FlxColor(Std.parseInt('0xFF0001FF'));
    

    Or set a alpha bit different. (as long as the colors are different it works).

    	var tricol:FlxColor     = new FlxColor(Std.parseInt('0xFF0000FF'));
    	var circol:FlxColor     = new FlxColor(Std.parseInt('0xFE0000FF'));
    

    Hopefully this gets fixed in the future!

    Best regards!

    HaxeFlixel command-line tools (1.2.1)
    Installed flixel version: 4.2.1


  • Hey,
    you need to replace these:

    triangle.makeGraphic(hw, hh, tricol); 
    circle.makeGraphic(hw, hh, circol);
    // makeGraphic() will create a new canvas or use an available one with the same width, height and color
    // because all the width, height and color are the same, the triangle and the circle will be drawn on the same canvas
    

    with these:

    triangle.makeGraphic(hw, hh, tricol, true); // Unique = true
    circle.makeGraphic(hw, hh, circol, true); // Unique = true
    // setting Unique to true, makeGraphic() will create a new canvas anyway
    

    Also, you only need to assign a FlxColor value by merely writing this:

    var objcolor:FlxColor   = 0x55161616;
    // or
    var tricol:FlxColor     = 0xFF0000FF;
    


  • Hey there,

    Thanks a lot for the reply. I'm still new to HaxeFlixel and I did not get my information about makeGraphic from the API documentation, which does states this behavior. So my bad for not checking that!

    I have some code that uses makeGraphic & drawTriangle a couple of times. I only rotate the triangles. I did notice that the Alpha was way too dark for the value it was given, the reason why is of-course because that it got rendered multiple times, which was - other then the too dark alpha color - unnoticeable for me. I've just now corrected the code to make use of the (un)unique feature. Which is actually great! (if you know what you are doing :)

    And thanks for the tip for the hexadecimal integers as wel! (I'm very new to Haxe)

    Also:

    var rad:Float           = 0.5;
    

    Is a beginners mistake. Because radius equals a Float I assumed that it was a percentage realtive to the container size. Instead its the just the pixelsize. But if its < 1 then it just defaults to just that. ( see this thread ) Because it gave the desired result I was unaware of the mistake! ;)

    Again thanks for helping and clarifying everything!

    Best Regards!


Log in to reply
 

Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.