How to add Movie Clips of different sizes next to each other? AS3

Question

Hello everyone so I am having some trouble with this I have Platforms that I add to the stage which are different sizes in Width. What I am trying to do in my for Loop is add more platforms on the right side of the current platforms x position on stage. I am having trouble because they are different sizes so they end up over lapping each other on this side-scroller game. I align the Platform MC's to the right of the registration like so:

here is the smaller size Movie clip:

I am doing this because I want to add different obstacles to each frame inside the Platform Movie Clip.

add Initial platform:

private function addInitPlatform():void 
    {
        platforms = new mcPlatforms();
        platforms.x = (stage.stageWidth / 2) - 380;
        platforms.y = (stage.stageHeight / 2) + 175;
        addChildAt(platforms, 1);
        aPlatformArray.push(platforms);
    }

Then add new platforms:

private function addPlatForms():void
    {
        //Loop trhough Platform Array
        for (var i:int = 0; i < aPlatformArray.length; i++) 
        {
            var currentPlat:mcPlatforms = aPlatformArray[i];

            nOffSetX += currentPlat.width + 50;

            //Add platforms
            platforms = new mcPlatforms();
            platforms.x = nOffSetX;
            platforms.y = (stage.stageHeight / 2) + 175;
            addChildAt(platforms, 1);
            aPlatformArray.push(platforms);
            break;
        }
        trace(aPlatformArray.length + " NPLATFORMS");
    }

I am trying to get the current platform which is the last platform I added to the stage and get its width so i can add it at the end but it still is doing something weird and overlapping over time,

So I was wondering if anyone knows how I should go about solving this so whenever I add on a new platform Movie Clip to the stage it aligns on the right side of the last platform Movie clip added to the stage with some space in between like so:

Thank you in advance!

One way is using `offsetX` variable that you set to zero (or whatever) before the loop. Then inside the loop: `platforms.x = offsetX; offsetX += platforms.width + 50;` (50 is the fixed gap between platforms). Then the second platform is added 50px after the first one and so on. — kaarto, Mar 22 '18 at 10:54
Okay I kind of see what you mean. Isn't the offsetX variable a built in variable in AS3 or are you saying to create my own offsetX Variable? — Nathan, Mar 22 '18 at 23:42
Create your own and use it as x-value for each platform. You could also pick `.x` and `.width` from previous element (`aPlatformArray[i-1]`), add gap value to it, and use it as a x value for new platform. (Note that you could do this only when i > 0 since that array is empty on the first run, unless if you place the first platform before the loop.) — kaarto, Mar 23 '18 at 07:01
Okay Thank you so much for all the information. So I could do something like 'aPlatformArray[i-1].x' your saying? I'll give it a try and see what I can come up with. If I run into any issues you think you could help out? I would really appreciate it. — Nathan, Mar 24 '18 at 00:18
So it is still giving me some issues it is adding them farther away but as it keeps going they become closer and closer doesn't work more than twice. I updated my code so you can take a look and maybe tell me what im doing wrong. THANK YOU! — Nathan, Mar 24 '18 at 00:55

score 1 · Accepted Answer · answered Mar 24 '18 at 06:43

I'm guessing that you have bunch of different platforms in your library with Linkage names set. Not sure if you want them to be in random order or not, but anyways you probably want to pick them up from an array, so:

var aPlatformsArray:Array = [p1,p2,p3]; //Platform Mc's from library
var addedPlatforms:Array = new Array(); //Array where we store added platforms

The first method was to simply raise offset after adding each platform:

var offsetX:Number = 0; //Starting x for the first platform

for(var i:int=0; i<10; i++){
    //Just picking random ones from the Linkage array:
    var platform:MovieClip = new aPlatformsArray[Math.floor(Math.random() * aPlatformsArray.length)]();
    platform.y = 200;
    platform.x = offsetX;
    offsetX = platform.x + platform.width + 50;
    addChild(platform);
    addedPlatforms.push(platform);
}

And actually you don't need to worry about the second method as it's technically slower.

But the main difference is that now we have an array where we pick platforms to the stage, and another array where we push added platforms. The second array is not needed at this point, but you'll probably need it later.

And for offset calculations we use x and width of the "previous" element +fixed gap.

And if you just needed fixed order for the platforms, you'd use similar condition for the loop as you already did, and pick platforms in correct order:

for(var i:int=0; i<aPlatformsArray.length; i++){
    var platform:MovieClip = aPlatformsArray[i];

Let me know if this does the job or if I got something wrong.

That works perfect man thanks so much. Really appreciate all your help! After fixing some of the code on my end the offSetX finally worked correctly. — Nathan, Mar 26 '18 at 14:54
Hey Kaarto maybe you can help me out still. This method works perfect for a set number of platforms added to the stage at once. But what if I add want to add more platforms to the stage after a few are removed and spliced. I try to add more at the end of them but this distance is now way off to the last platform added. — Nathan, Apr 15 '18 at 01:38
You should be able to do by adding the next platform to `addedPlatforms[addedPlatforms.length - 1].x + 50`. If you want to add a new set with the same loop, set this value to the first `offsetX`. — kaarto, Apr 15 '18 at 05:14
Awesome man. Figured it out after I wrote that but the way you just described it looks easier. Thanks again man for the help really appreciate it! — Nathan, Apr 16 '18 at 04:48

How to add Movie Clips of different sizes next to each other? AS3

1 Answers1