CODEWITHSUNDEEP
flashspritehaxeopenflhaxeflixel
Nodebay
Nodebay

Reputation: 554

HaxeFlixel: Overlaying Graphics into Single Sprite

I have code to generate a player avatar spritesheet by pulling each individual body/clothing item and overlaying it in a particular order. Essentially, I'm trying to combine the clothing sheets into a single body by laying them over each other.

But the final output is ONLY the last item of clothing drawn.

Here is the two pieces of code I'm using to do it:

public function new(_username:String) 
{
    super();

    itemArray = new Array<String>();
    itemArray[0] = "Body";
    itemArray[1] = "Shoes";
    this.pixels = new BitmapData(Std.int(itemRect.width), Std.int(itemRect.height));

    for (itemName in itemArray)
    {
        //this.pixels.draw(prepareItem(itemName).pixels);
        var itemSprite:FlxSprite = prepareItem(itemName);
        stamp(itemSprite);
    }
}

private function prepareItem(assetName:String):FlxSprite
{
    var assetSprite:FlxSprite = new FlxSprite();
    assetSprite.loadGraphic("assets/images/" + assetName + ".png");

    assetSprite.pixels.threshold(assetSprite.pixels, itemRect, new Point(0, 0), "==", 0xFF00FF00);
    assetSprite.pixels.threshold(assetSprite.pixels, itemRect, new Point(0, 0), "==", 0xFFFF0000);

    return assetSprite;
}

As you can see, I've tried using draw() to draw pixels onto the existing BitmapData, and I'm also trying to stamp sprites generated from the clothes images.

I'm attaching an example to clarify my goal. Notice how the shoes are layered OVER the body. But with my current code, the shoes replace the body entirely.

Example

Body Shoes

Upvotes: 4

Views: 855

Answers (1)

Gama11
Gama11

Reputation: 34128

But the final output is ONLY the last item of clothing drawn.

With your code, I'm actually seeing the two assets be drawn on top of each other - I guess that might not be noticable depending on the assets you were using.

The fix is simple: you need to offset subsequent sprites in your stamp() call, e.g. like this if you want to stack the assets vertically:

var currentY = 0;
for (itemName in itemArray)
{
    var itemSprite:FlxSprite = prepareItem(itemName);
    stamp(itemSprite, 0, currentY);
    currentY += Std.int(itemSprite.height);
}

Upvotes: 3

Related Questions