What's the proper way to scale a group of assets?



  • I currently have a FlxSpriteGroup that contains a few FlxSprites and a FlxText field.

    I've been able to scale a lone FlxSprite like this...

    var asset = new FlxSprite();
    asset.scale.set(0.5, 0.5);
    asset.updateHitbox();
    

    That seemed to work well on a single sprite, so I tried the same on my FlxSpriteGroup, and the results are not what I expected. Even with a scale of 1, the graphics are shifted down and right, away from the FlxSpriteGroup's assigned x/y coordinates. If I turn on the red boxes in debug mode (not quite sure what these represent in code? the frame maybe?), I can see the top-left of the asset is positioned at the center of the box...well, sometimes.

    I tried to make a small-scale demo to test this. In the screenshot, below, the scale calls are as follows:
    Row 1:

    • Title 1: no call at all to testGroup.scale.set();
    • Title 3: testGroup.scale.set(1, 1);
    • Title 5: testGroup.scale.set(1.5, 1.5);

    Row 2:

    • Title 2: testGroup.scale.set(0.75, 0.75);
    • Title 4: testGroup.scale.set(0.5, 0.5);
    • Title 6: testGroup.scale.set(0.3, 0.3);

    And in each case (except #1), I call testGroup.updateHitbox(); after. If I don't call updateHitbox(), the FlxSprite(s), FlxText, and FlxButton are each scaled within their own sub-box, but do not re-position themselves (I guess I could do that manually after the scale?).

    Am I doing this wrong? Is there a call I missed, or maybe a different way to group/scale assets entirely?
    Or is it that HaxeFlixel just doesn't support what I'm trying to do?

    0_1518219163184_GroupScaleTest.jpg



  • Here's an example that achieves what you wish, in a different way:

    var backdrop:FlxSprite = new FlxSprite(0, 0, "assets/img/ui/menu_disclaimer.png");
    		backdrop.antialiasing = true;
    		backdrop.scale.set(0.5, 0.5);//0.5
    		backdrop.width *= backdrop.scale.x;
    		backdrop.height *= backdrop.scale.y;
    		backdrop.centerOffsets();
    		add(backdrop);
    

    I think you are missing centerOffsets()

    Additionally you could try:

    	setGraphicSize(50, 50);
    	updateHitbox();
    

    Good luck!



  • @claudio-ficara Thanks for the suggestions =) I tried my demo with these alterations and unfortunately the results are not much better. The FlxSpriteGroup does not seem to respond well to setGraphicSize() — for me, it disappears from the screen entirely (or fails to draw?).

    I thought the center offset was a good idea, but using that method, the green and white FlxSprites are now centered on the lower-right corner of the red boxes. And the FlxText and FlxButtons now float away into negative space for the smaller sizes. One plus is that green and white FlxSprites do align better with each other though (i.e. the border is consistent for all sizes), so there might be something there if you had a group containing only FlxSprites.

    Eventually, I gave in and decided to create a new FlxSpriteGroup and resize/re-position the group members individually, instead of trying to get HaxeFlixel to adjust the group as a whole. This works for me, since I don't have too many members in the group, so I guess this method solves my issue for now.



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