Repeating sprite patterns for menu bars and backgrounds

[xerosugar]

I'm adding this because I need it myself :) Maybe this could be build from a modified flxbackdrop or something - with customizable height/width.

[larsiusprime]

I believe you can do this already with FlxUI9SliceSprite, by using tiling instead of scaling?

But perhaps you mean something different, care to elaborate?

[xerosugar]

ah, I didn't know there was a tiling option for that :) but I'll just show a picture of what I want to do: http://postimg.org/image/q33i0wpft/

In other words, use an image and then repeat it vertically/horizontally or both.

[larsiusprime]

Yeah you can use FlxUI9SliceSprite with tiling for this, but it's probably not the most efficient solution.

Any reason you don't want to use a FlxTileMap?

[xerosugar]

I didn't even consider a tilemap, but that sounds like overkill to me. right now I'm just doing this:

    var bg:FlxSprite;
    function makeBackground():Void
    {
        var lastX:Int = 0;
        var lastY:Int = 0;
        var imgAssetStr = "assets/images/dirt_bg.png";
        var dirtPattern:FlxSprite = new FlxSprite(0, 0, imgAssetStr);

        bg = new FlxSprite(0, 0);
        bg.makeGraphic(FlxG.width, FlxG.height, FlxColor.TRANSPARENT);

        while (lastY < FlxG.height)
        {
            while (lastX < FlxG.width)
            {
                bg.stamp(dirtPattern, Std.int(lastX), Std.int(lastY));
                lastX += Std.int(dirtPattern.width);
            }

            lastX = 0;
            lastY += Std.int(dirtPattern.height);
        }

        dirtPattern.destroy();
        add(bg);
    }();

and it works. but I'm not sure how I'll handle potential optional screen sizes etc. for menu bars and text elements. that's why I was thinking of using FlixelUI instead.

[larsiusprime]

Ah I see. I'll see if I can think of something that's performant, convenient, and easily resizable, and see where it naturally fits in the existing API.

Do you have a specific invocation in mind you'd like to use?

[xerosugar]

Not really no... but if I were to make one up right now, how about (without knowing how FlxUI works...):

widget.repeat(startPosX, startPosY, FlxUI.Vertical&FlxUI.Horizontal, spacingX, spacingY, ?targetArea:FlxRectangle); // if areaRec is provided, posx/y is ignored

(maybe css background logic can serve as inspiration as well: https://developer.mozilla.org/en/docs/Web/CSS/background-repeat)

[xaedes]

There is a FlxTiledSprite addon which could be used for this: https://api.haxeflixel.com/flixel/addons/display/FlxTiledSprite.html