To begin with, before you download the file, I recommend you read what the file is about:
What the file is about:
When you open the file, you’ll notice two frames, one that’s named “Fast,” and another that’s named “Slow.” Play the project, then use the arrow keys to move, and then pause and try the other frame. You’ll notice that there is a very noticeable difference in speed between these two frames. Both frames are the same thing, yet the only difference is one line.Now that you read that, you can download the file:
My Project1-30-2021_22-09-02.wick (12.5 KB)
How I created this project, every step explained
Ok, to begin with, I was looking for a way to make a project with 500 clones and no lag.
To do this, I needed to have the clones be physically in the project, but really not be there at the same time. This meant I needed some type of magic trick to do this.
So, I thought I should find a way to break apart the clip through code, and it didn’t take too many tries after I found out how
Clip.breakApart();
This meant that I had to resize some things perfectly so the clips scaleX and Y is 1.
After doing so, I knew no code was going to be run from these objects, so I stored their positions in an array.
project.array1.push(Math.round(this.x)+","+Math.round(this.y));
Before their positions was added to the array, I needed to perfectly grid them on the canvas (you’ll see why I need to do that in a sec).
this.x=Math.round(this.x/this.width)*this.width;
this.y=Math.round(this.y/this.height)*this.height;
500 clones is a lot, so I chose to place all of them randomly on the canvas.
this.x=random.integer(0,project.width);
this.y=random.integer(0,project.height);
And then, I added that one little line that does the magic trick
this.breakApart();
Now, I just had to clone the object 500 times
for(i=0;i<500;i++){
this.clone();
}
And ta-da!
We got 500 clones on canvas, I’ll probably remove the original clip or break it apart, who knows.
Anyways, now like I said before, how was I to make use of these broken apart clones when I only know their positions?
Well, their position is all I needed to know since the size is going to be the same.
I made another object that has the same width and height (width is the same value as the height) as the cloned objects.
My plan is to have that object (the player) make sure an area is clear before moving there, so I added this function that checks if an area is clear or not
project.checkArea=function(x,y){
if(project.array1.indexOf(x.toFixed(0)+","+y.toFixed(0))===-1)
return true;
else
return false;
};
And now, I had to add in the movement that makes the player move in a direction after assuring that an area is clear.
if(isKeyDown('up')&&project.checkArea(this.x,this.y-Math.abs(this.height)))
this.y-=Math.abs(this.height);
if(isKeyDown('down')&&project.checkArea(this.x,this.y+Math.abs(this.height)))
this.y+=Math.abs(this.height);
if(isKeyDown('right')&&project.checkArea(this.x+Math.abs(this.width),this.y))
this.x+=Math.abs(this.width);
if(isKeyDown('left')&&project.checkArea(this.x-Math.abs(this.width),this.y))
this.x-=Math.abs(this.width);
Almost done, I’ll just have to align the player the same way I aligned the clones so their positions can be related on size.
this.x=Math.round(this.x/this.width)*this.width;
this.y=Math.round(this.y/this.height)*this.height;
Ok, now that should do the magic.
Although these clones are broken, we won’t ever need anything from them other than their physical look and position. 500 walls, zero lag!
Now, I tried the same project, but without the “this.breakApart()” line.
500 clones, and the lag was VERY noticeable!
There are many ways “Clip.breakApart()” can be used to make projects work faster.
The file I shared is just an example, and the project worked better than before! I used to carefully create 100 clones or so and hope my project doesn’t crash or work any slower, but now I could create 500 clones without worry, so I hope breaking apart clips helps other people too with improving their project speed!
Thanks for reading :)
)