Adding object within another

Question

I have my main stage as 550x400. The header area is a stats bar. So I have an element underneath it which I named gameStage which is 550x350.

I am creating circles on a 1 second interval and then trying to randomly place them within my gameStage. It does not appear to be working. It seems like they're being added to a 550x350 element, but it starts at the top of my main stage -- not within my gameStage.

Also if I simply do addChild(circle) it creates an even 25 radius circle. As soon as I do gameStage.addChild(circle), the circle gets skewed slightly.

What am I doing wrong?

private function createCircle():void {      
        var stageSafeX:Number = Math.random()*gameStage.width;
        var stageSafeY:Number = Math.random()*gameStage.height;

        var circle:Sprite = new Sprite();
        circle.graphics.clear();
        circle.graphics.beginFill(Math.random()*0xFFFFFF, 1);
        circle.graphics.drawCircle(0, 0, circleRadius);
        circle.graphics.endFill();
        circle.x = stageSafeX;
        circle.y = stageSafeY;
        circle.name = String(circleCount);
        gameStage.addChild(circle);

}

Answer 1

Okay I'm using Flash Develop, so you'll have to forgive me as this program doesn't have FLA files, only classes and it uses a Main class to start the program (more reminiscent of Java if you've ever programmed in that). But the code I'll show you is more or less the same of how you want to do it.

First I would recommend you make a randomNumber function, I used it in making this code so if you want to use it here's the one I use (I put this in the Main class, you can put this wherever you want):

public static function randomNumber(minValue:Number, maxValue:Number):uint {
    return Math.floor(Math.random() * (1 + maxValue - minValue)) + minValue;
}

This is inclusive, meaning if you put randomNumber(1, 10) it will give you a number between 1 to 10, including 1 and 10. It's more or less common sense, but I figured I might as well mention it just to clarify.

Now on to the addCircle function:

public static function addCircle(gameStage:Sprite, circleRadius:uint):void {
    //Initializing the new circle instance
    var newCircle:Sprite = new Sprite();

    //Basically the same code you had (you don't need to set the alpha value to 1, it's default value is 1 regardless)
    newCircle.graphics.beginFill(Math.random() * 0xFFFFFF);
    newCircle.graphics.drawCircle(0, 0, circleRadius);
    newCircle.graphics.endFill();

    //Since the circle's origin is the center, you want its outer edges to be bound to the gameStage's edges
    var safeStageX:Number = Main.randomNumber(newCircle.width / 2, gameStage.width - newCircle.width / 2);
    var safeStageY:Number = Main.randomNumber(newCircle.height / 2, gameStage.height - newCircle.height / 2);

    //Adding the circle to the gameStage's display field
    gameStage.addChild(newCircle);

    //Only set the circle's x and y AFTER you add it to the gameStage's display list, otherwise it might not set properly
    newCircle.x = safeStageX;
    newCircle.y = safeStageY;
}

Now following up I will give the code I made for the creation of the gameStage. You probably already have something for it, but I'll provide mine just in case you want to use it instead:

//Initializing the gameStage instance
var gameStage:Sprite = new Sprite();

//Adding the gameStage to the Stage's display field
this.stage.addChild(gameStage);

//Setting the gameStage's width and height (using "gameStage.width = 550" and "gameStage.height = 350" WILL NOT WORK)
//Use the color of your main game's background so you don't see this fill (unless you want to)
//Either do this or add a background picture, you need to do one or the other in order to set the gameStage's dimensions
gameStage.graphics.beginFill(0x000000);
gameStage.graphics.drawRect(0, 0, 550, 350);
gameStage.graphics.endFill();

//This puts the gameStage on the bottom of the screen (since it's 50 pixels shorter in the y direction)
gameStage.y = 50;

Lastly I will give you the actual for loop to create your circles (this function is present in the same class/FLA that your gameStage is on, because the addCircle function needs to take in that gameStage instance:

//Now let's populate your gameStage
for (var i:uint = 0; i < [number of circles you want]; i++) {
    Main.addCircle(gameStage, [radius of the circle]);
}

And you're done! I'll also include the entire Main class, just so you can see how all the functions work together.

package {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;

    public class Main extends Sprite {

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

        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            var gameStage:Sprite = new Sprite();
            this.stage.addChild(gameStage);

            gameStage.graphics.beginFill(0x000000);
            gameStage.graphics.drawRect(0, 0, 550, 350);
            gameStage.graphics.endFill();
            gameStage.y = 50;

            for (var i:uint = 0; i < 150; i++) {
                Main.addCircle(gameStage, Main.randomNumber(15, 25));
            }
        }

        public static function addCircle(gameStage:Sprite, circleRadius:uint):void {
            var newCircle:Sprite = new Sprite();

            newCircle.graphics.beginFill(Math.random() * 0xFFFFFF);
            newCircle.graphics.drawCircle(0, 0, circleRadius);
            newCircle.graphics.endFill();

            var safeStageX:Number = Main.randomNumber(newCircle.width / 2, gameStage.width - newCircle.width / 2);
            var safeStageY:Number = Main.randomNumber(newCircle.height / 2, gameStage.height - newCircle.height / 2);

            gameStage.addChild(newCircle);

            newCircle.x = safeStageX;
            newCircle.y = safeStageY;
        }

        public static function randomNumber(minValue:Number, maxValue:Number):uint {
            return Math.floor(Math.random() * (1 + maxValue - minValue)) + minValue;
        }
    }
}