Have you ever wanted to make those cool projects where the draw a trail block is used to make animated art, but didn’t know how?
If you want to learn how to do this, continue reading this topic.
I hope you will learn how this is done. Of you don’t understand something, just ask me.
Let’s draw an eye which looks from side to side.
This is the code for preparation for drawing.
The first when block is only necessary when you are using an object which is visible. So anything besides a blank text Object. (A text Object you don’t give a text.) It checks to make sure self is invisible, and if it isn’t, it becomes invisible.
The second when creates clones really fast. While for this project we only need three clones (four total objects, since the original counts for total clones) you will usually be using a lot more, making this cloning method make more sense.
The way it works is every frame, every clone of the object creates a clone of itself. This means that the clones will be created really fast. So how many frames for it to create four clones?
The first frame there’s only one object doing it.
The second frame there’s the original object, and the one it created doing it.
Two times two equals four. We have all our clones in two frames.
While there is no noticeable difference if you use a repeat four create a clone block inside of when game starts, this method works much better if you need, for example, 100 clones. Which some of the more complex trail arts do need.
What do you mean when you say frame?
A frame is the amount of time it takes a single block in Hopscotch to run. For example, if we had a rule with twelve flip blocks, that rule would be over in twelve frames.
This is the second custom rule. Really, this screenshot is just to show you that you should have the same custom ability in both a when game starts rule and a when Object is cloned rule. This means that all our objects, whether we have four or four hundred, use this custom ability.
This is that custom ability. That check once if block will be explained later, right now let’s focus on what comes after it.
The same custom ability that we are working on. This means that it will run the code above it, then repeat it. It will continue to do this forever.
Now let’s move on to the check once if.
This is very important. It is what draws the background. First, the condition checks if it is the original object. Then, it draws a trail in whatever color you want the background to be with a width of 3000.
The block inside is the default go to center block.
Since this is repeating forever, it will constantly draw over the other trails.
How do you control which trails draw over each other?
Since we are using clones of an object, the code we have means that the order of the clones are also the order of the layers, from bottom to top. This means that the original object is the bottom layer, and the last clone is the top.
This is the check once if in the else field of the first one. You can actually see a bit of the code from the last screenshot at the very top of this one.
The condition checks if this object is the first clone to be made. If it is, it draws a white circle with a width of five hundred in the center of the screen.
This will become the white of the eye.
How does clone index work?
Clone index and total clones include the original object and all of its clones. For clone index specifically, this means that the original object has a clone index of one. The first clone has a clone index of two. And this continues for however many clones you have.
This is the check once if in the else of the second check if else. Once again, the previous screenshot’s code is peeking into this one.
The condition checks if it is the second clone to be made. If it is, it draws a green circle with a width of three hundred. But where?
Since we want the eye to look around, we need the x axis to change. But since this same code will run every single time, we can’t do that here.
To figure out where it should go, let’s ask a few questions.
Where is the eyeball on the screen?
The eyeball is on the center.
How will we get it to move?
We should make a variable to change the x. Let’s call it eye x offset.
Knowing that, let’s copy the block in the go to center. This is because of the answer to question 1.
Now, let’s edit the code to add our variable to the x.
This is what the code inside the iris draw a trail should be.
(I just realized I typed “do center.” I meant “go to center.”)
This is the check once if block inside of the else area of the third check once if. It checks if the object is the third clone created. If it is, it draws a black circle with a width of 125.
The location is the same as in the last screenshot. I should have put it inside of a custom ability, but I did not.
Now let’s get into the animation part.
The first rule sets the eye x offset to -80 when the game starts. Why? That will be explained in the next screenshot.
This code says that if I am the original object, I will do these two repeat blocks over and over again forever.
Now do you see why we set it to negative 80? If we repeat eighty times increasing it by two, what will it be?
It will be 80. It will have gone, in eighty frames, from the center - 80 to the center + 80. Then it will go back. Then it will start all over again.
That’s about it. Let me know if there’s anything you didn’t understand, and I’ll help you.