Support of scale in FlxSpriteGroup

[yannicular]

Hi guys, this is my first post here, although I've been working for about a year in my free time with HaxeFlixel.

I'm trying to use FlxSpriteGroup to achieve a complex tween on a group of FlxSprites.
Although the position updates seems to work fine, I've been having trouble when updating the SpriteGroup scale property: the contained children Sprites are not following the parent's scale updates properly. I noticed that:

• Adding a downscaled large Sprite (bigger that FlxG.width) seems to mess up the SpriteGroup's scale when using FlxTween. Changing the FlxGroup's scale from ( 1,1) to e.g (2,2) and Using FlxTween  to scale back to (1,1) results to a wrong/different scale
• I tested adding non-scaled Sprites into the SpriteGroup, but the problem seems to persist
• I also tried with sprites that are smaller than FlxG size, and still have the same problems
  
• I also tried scaling the Group manually in the update function ( no Tween ), but the scale update to the FlxSpriteGroup's children is still wrong.

So, is the scale update generally working ok on FlxSpriteGroup, with some limitations that I overlooked, or is it that the scale update isn't complete yet ?

Thanx!

[yannicular]

Please let me try to explain better with a working example:

I'm creating 2 tests, one with FlxSpriteGroup (red and blue rectangles) and one with FlxNestedSprite (yellow, green and grey Rectanges)

With scale 1 they look like image #1:

Scaling them up, you can see that the child sprites are scaled up like images #2 and #3
  

What I expected (well what I try to do anyway) to see, is that at all scales, the blue square's top-left corner should be aligned with the red squere's top-left corner.

Same goes for the 2nd example where

• the green box top-left corner, should be always alligned with the yellow one's top-leftcorner
• the grey box bottom-right corner, should be always alligned with the yellow one'sbottom-right corner.

So is this the supposed behavior or not ? How can I achieve what I want to do ?

I'm posting the code for the test Scene

    var cnt:FlxSpriteGroup;
    var parent:FlxNestedSprite;
    var scale1Txt:FlxText;
    var scale2Txt:FlxText;
   
    override public function create():Void{
        super.create();
       
        cnt = new FlxSpriteGroup();
        add(cnt);
       
        var spr1 : FlxSprite = new FlxSprite(80, 80);
        spr1.makeGraphic(40, 40, FlxColor.RED);
       
        var spr2 : FlxSprite = new FlxSprite(80, 80);
        spr2.makeGraphic(20, 20, FlxColor.BLUE);
       
        cnt.add(spr1);
        cnt.add(spr2);
       
        parent = new FlxNestedSprite(160, 80);
        parent.makeGraphic(40, 40, FlxColor.YELLOW);
        add(parent);
       
       
        var child1 : FlxNestedSprite = new FlxNestedSprite(0, 0);
        child1.makeGraphic(20, 20, FlxColor.GREEN);
       
        var child2 : FlxNestedSprite = new FlxNestedSprite(0, 0);
        child2.makeGraphic(20, 20, FlxColor.GRAY);
        child2.relativeX = 20;
        child2.relativeY = 20;
       
        parent.add(child1);
        parent.add(child2);
       
        var groupTestBtn:FlxButton = new FlxButton(60, 20, "Test Group", testGroupScale);
        var nestTestBtn:FlxButton = new FlxButton(140, 20, "Test Nested", testNestedScale);
       
        add(groupTestBtn);
        add(nestTestBtn);
       
        scale1Txt = new FlxText(60, 0, 80, "scale=");
        add(scale1Txt);
       
        scale2Txt = new FlxText(140, 0, 80, "scale=");
        add(scale2Txt);
    }
   
   
    public function testGroupScale():Void {
        //scale up and tween back to original scale
        cnt.scale.set(3, 3);
        var cntScaleTween : FlxTween = FlxTween.tween(cnt.scale, { x: 1, y: 1 }, 3.0, { ease:FlxEase.elasticOut, startDelay:1.5 } );
    }
   
    public function testNestedScale():Void {
        //scale up and tween back to original scale
        parent.scale.set(3, 3);
        var parentScaleTween : FlxTween = FlxTween.tween(parent.scale, { x: 1, y: 1 }, 3.0, { ease:FlxEase.elasticOut, startDelay:1.5 } );
    }
   
    override public function update():Void
    {
        super.update();
        scale1Txt.text = "scale=" + cnt.scale.x;
        scale2Txt.text = "scale=" + parent.scale.x;
    }   
   

Please guys, help me out here..

P.s: I tried with Flixel 3.3.6 also!

[yannicular]

One more update: I've noticed that the angle is not updated properly either. The above image is showing what happens when you just set the parent.angle to 45 (scale is 1)

Looking at FlxNestedSprite code, I've narrowed down the problem to the postUpdate method

public function postUpdate():Void  {
       // ....Skipping some code here
       
        for (child in children)
        {
            if (child.active && child.exists)
            {
                child.velocity.x = child.velocity.y = 0;
                child.acceleration.x = child.acceleration.y = 0;
                child.angularVelocity = child.angularAcceleration = 0;
                child.postUpdate();
               
                if (isSimpleRender())
                {
                    child.x = x + child.relativeX - offset.x;
                    child.y = y + child.relativeY - offset.y;
                }
                else
                {
                   
                    var radians:Float = angle * FlxAngle.TO_RAD;
                    var cos:Float = Math.cos(radians);
                    var sin:Float = Math.sin(radians);
                   
                    var dx:Float = child.relativeX - offset.x;
                    var dy:Float = child.relativeY - offset.y;
                   
// I think this probably won't do the job
                    var relX:Float = (dx * cos * scale.x - dy * sin * scale.y);
                    var relY:Float = (dx * sin * scale.x + dy * cos * scale.y);
                    child.x = x + relX;
                    child.y = y + relY;
                   
                   
                }
               
                child.angle = angle + child.relativeAngle;
                child.scale.x = scale.x * child.relativeScale.x;
                child.scale.y = scale.y * child.relativeScale.y;
               
               
               
                child.velocity.x = velocity.x;
                child.velocity.y = velocity.y;
                child.acceleration.x = acceleration.x;
                child.acceleration.y = acceleration.y;
            }
        }
    }

I'll try to fix this for myself and let you know when I do..

By the way, I noticed that this post has more that 50 views but no answer at all. I don't know if I'm asking too much for help, or it's just I'm not making myself clear, or giving you a hard time to understand my problem. However, if you think I can improve my question, please tell me how

[yannicular]

Looks like I've solved the problem. I'll do some more testing and open a new post on how can I submit my patch to flixel-addons

Thanx for reading

yannicular

...