AS3: Problems with ScaleX/ScaleY and Width/Height

Question

I'm using FlashDevelop to test a menu-type system that I want to use for a game, and I'm having serious issues figuring out either the Width and Height or the ScaleX and ScaleY (I'm not really sure which set is causing the problems) of the Sprite subclasses. I've read many things that seem to be the solution to my problem, including resizing the sprite subclass after I add any children, but none seem to work. Right now, I have 3 separate Classes.

Main:

public class Main extends Sprite 
{

public function Main():void 
{
    if (stage) init();
    else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void 
{
    removeEventListener(Event.ADDED_TO_STAGE, init);
    // entry point
    var BF:BFi = new BFi;
    this.addChild(BF);
    this.width = 640;
    this.height = 480;

    trace(this + "Dimensions: " + width + ", " + height);
    trace(this + "Coordinates: " + x + ", " + y);
}

}

BFi:

public class BFi extends Sprite
{
    public function BFi() 
    {
        var BFMenu:BFiMenu = new BFiMenu;
        addChild(BFMenu);
        trace(getChildAt(0));
        this.x = this.y = 0;
        this.width = 640;
        this.height = 480;
        BFMenu.x = this.y = 0;
        BFMenu.width = 640;
        BFMenu.height = 480;
        trace(this + "Dimensions: " + width + ", " + height);
        trace(this + "Coordinates: " + x + ", " + y);
    }

}

and BFiMenu:

public class BFiMenu extends Sprite
{
    [Embed(source = "../Assets/Button1.png")]private var Button1:Class;

    public function BFiMenu() 
    {
        var Bounds:Sprite = new Sprite;
        Bounds.graphics.lineStyle(2, 0, 1);
        Bounds.graphics.drawRect(0, 0, 640, 480);
        addChild(Bounds);

        var NewButton:ComplexButton = new ComplexButton(220, 405, 200, 50, Button1, "PLAY", "Block", 50, 0x000000, function Button1(e:MouseEvent):void { /*parent.removeChildAt(0);*/ } );
        //var NewButton:ComplexButton = new ComplexButton(0, 0, 200, 50, Button1, "PLAY", "Block", 50, 0x000000, function Button1(e:MouseEvent):void { parent.removeChildAt(0); } );
        addChild(NewButton);

        this.width = 640;
        this.height = 480;

        trace(this + "Dimensions: " + width + ", " + height);
        trace(this + "Coordinates: " + x + ", " + y);
        trace(NewButton + "Dimensions: " + NewButton.width + ", " +NewButton.height);
        trace(NewButton + "Coordinates: " + NewButton.x + ", " + NewButton.y);
    }
}

the rectangle named "Bounds" has the height and width of what I want (640x480), but the button that I placed in, supposed to have a y-coord of about 450, instead has a y-value of nearly 800, and is clearly distorted, but still on screen, even though the height is only 480.

The "ComplexButton" Class that is called is my own button class, and I've tested that enough to know that it works fine. when I run this program, it Distorts everything and nothing is where I wanted it to be. Any help would be very appreciated.

can you provide pictures of way it looks and way it should look? and also the code where you are scaling — user1901867

Mike Bedar Mike Bedar · Accepted Answer · 2013-04-10T20:01:51

Few notes:

Any time a display object is created, the initial x and y coordinates are defaulted to zero, so you don't need to initialize them to 0 yourself.

Changing the width and height of an empty display object will do nothing. If the display object has graphical content, then it will scale that content so that it matches the desired width and height, which would also change the scale factors.

If you are going to draw a shape in a Disp.Object to give it a width and height, you do not then need to set those values explicitly.

Try removing each of the 3 places where you explicitly set those values.

AS3: Problems with ScaleX/ScaleY and Width/Height

1 Answers