Fastloops in Clickteam Fusion 2.5
Fastloops in Clickteam Fusion 2.5 are very handy to use. Back in the early Multimedia Fusion 2 days, loops were only really part of the design of the game loop which means if your game runs at 60 frame per second it will parse the event list 60 times per second, from top to bottom. Whilst convenient doing things faster than 60 frame per second was near-impossible. All hail the introduction of Fastloops. Probably the best routine implemented into future versions of MMF and ultimately Fusion 2.5 (alongside ForEach loops).
Even though 60 times per second is fast we still need to perform some tasks even faster than that. Using Fastloops is the way to do that. In this Clickteam Tutorial I will show you just how we can use Fastloops to complete actions, fast and efficiently optimised for Clickteam Fusion 2.5’s runtime, which is always essential especially when developing mobile games and web games.
In this Clickteam tutorial, you will learn how to:
- Create an explosion
- Create shrapnel from the explosion using Clickteam Fastloops
- Give each individual shrapnel piece random directions, sizes, speeds and angles
- Handle the shrapnel in the frame
- Destroy the shrapnel when it leaves the playarea or fades out
- Destroy the explosion once it has completed its animation
What is a Fastloop
A Fastloop is a routine that will execute X amount of times until it has completed at a very, very fast rate. So let’s say for example, we wanted to create a routine that quickly created an explosion and some shrapnel was to come out of that explosion, we could use a Fastloop to initiate that explosion and create the pieces of shrapnel within the blink of an eye.
A Fastloop will run until it has finished. The Fastloop will then halt the current runtime until it has completed. Once complete, it will then continue to run through the rest of the events as normal.
Calling a Fastloop
Calling a Fastloop inside Clickteam Fusion 2.5 is relatively simple and with a bit of guidance we can achieve that. In this tutorial, I will go through how you can use a Fastloop in Clickteam Fusion 2.5 from start to finish. We will start out by creating an explosion that will release some shrapnel that will spin in different directions at different angles with different speeds. In this Clickteam Tutorial you will learn how to use Fastloops, Create Objects, Set Random; Angles, directions and speeds for the objects. This tutorial can be followed by any learning group, beginner, intermediate or advanced.
Setting up the Playarea
Click here to Download the Template MFA for this free tutorial
Let’s go ahead and set up our playarea so we know what we will be dealing with inside the frame. Insert an explosion object from the Clickteam Library, if you cannot find it or you do not have it, download the MFA template from above. You need to drop this into your playarea (outside the playarea) select its properties and uncheck ‘Create at Start’. We will create this object ourself manually in the events. Now create an Active object and just create a random shape inside of it, we will use this for our shrapnel. The shape can be absolutely anything. Your playarea should now look like this
Ensure you have unchecked ‘Create at Start‘ for both objects. We will create everything we need to manually in the events.
Making magic happen in the Event Editor
Now we have our playarea setup let’s head over to the Event Editor (Ctrl+E). Now, as always I like to create all my events in an orderly fashion that is optimised also. We will put the Fastloop function into a Closed Group. The reason we will do this is because we only need Fusion to read those events when we need to, all other times it can remain closed. This is key for optimisation especially for when you create games and apps for mobile and web.
Once you are in the Event Editor let’s create our first event. Our first event will be when the user clicks with left mouse button. So let’s do just that. Insert a new condition, hover over the Mouse and Keyboard, right click and select The Mouse > User Clicks. When the dialog appears, select Left Button, Single Click. Click Okay.
Now that our first event is in, let’s create the Fastloop group below it. Right click and insert a new group. Call it Explosion and in the dialog uncheck Active when frame starts. This means our group will be disabled until we open it. We will open it when the user clicks the left mouse button. Your event editor should now look like this…
Let’s go back to the first event. In the first column (under the Special Conditions icon), right-click and select Group of Events > Activate. When the dialog appears, select the Explosion group. Click Okay.
So we have now so far coded our events so that when the user single clicks the left mouse button it will open the Explosion group. This is where we will create our explosion animation and create some shrapnel to go with it.
In the first event inside the group create a first condition, in the dialog select Special Conditions > Limit Conditions > Only one action when event loops.
When this condition is inserted, hover over to the create object icon, right-click and select Create Object. Select Explosion 3 and click Ok. It will now ask where we want to create it. We want to create it at the X and Y position of the mouse but we can’t do that here so just put anything inside of here or leave it as a default and click Ok. Once you have done this, in the same event line, hover over to the Explosion active, right-click and select Position > Set X Coordinate, in the expression dialog type in “XMouse” (without the speech marks). Repeat the same step in the same event line for the Y Position. Position > Set Y Coordinate and type in “YMouse” (without the speech marks).
Now we have the initial Explosion handled let’s also create the shrapnel effect. This is where we will use the Active object you created earlier. Now we need to create another event underneath that Explosion event. So insert another ‘Only one action when event loops‘ condition to create a new event, like so…
Now in this event, right-click under the first icon (Special Conditions) and select Fastloops > Start loop. When the dialog appears it will first ask us for the Loop name. Let’s call it “Explosion” (with speech marks). Click Ok. It will now prompt and ask us how many times we want to create the loop. We don’t want to put in a ‘set number’ here because we want the amount of shrapnel to be random every time, so let’s put in 10+random(11) which will give us a random number between 10-20 every time this loop is called. Click Ok.
Now create a new condition underneath that, insert condition, hover over the Special Conditions icon, right-click and select On Loop.
Once you have selected this it will ask you for the loop name. We specified this earlier, it was “Explosion” so go ahead and write that in. Click Ok.
Now this in this event we decide what will happen when the loop ‘Explosion‘ is called. We want to create a piece of shrapnel and fire it out at a random angle, direction and speed. So the first thing to do is hover over to the create object action, right-click and select Create Object. Select the shrapnel active object we created and click Ok. It will also ask where to put it, just leave the defaults and click Ok. Hover over the shrapnel object in this event, right-click and select Position > Set X Coordinate, set it’s coordinate again to “Xmouse” without speech marks. Repeat this step for the Y position using “Ymouse” as the value.
Let’s break focus for a second. We can make use of Clickteam Fusion 2.5’s built-in movement bouncing ball here to give the shrapnel some movement. Jump back to the Frame Editor. Select the shrapnel object and give it a movement. In this scenario, the bouncing ball movement. As you can see in my example, I gave it some deceleration also, just to let the object come to a stop eventually.
Now that we have that setup, let’s jump back into the Event Editor (Ctrl+E). The first thing to do is go back to our latest event ‘On Loop “Explosion”. Hover your mouse over the shrapnel object, right-click and select Movement > Set Speed. Let’s give it a random speed. In the dialog that appears, we don’t want the same speed all the time, it would look too unrealistic. Let’s put in 5+random(55). Click Ok. This will give the object a random speed between 5-59.
In the same event line again hover over the shrapnel object, right-click and select Direction > Select Direction… and when the dialog appears, select all the possible directions. This will choose a random direction for us. Click Ok. Now again in the same event line, right-click over the shrapnel object and select Angle > Set Angle. In the dialog, it says we can stipulate a starting angle of 0-359. So to get a random angle every time, type in random(360). It will now ask you what quality setting you wish to choose. 0 for performance, 1 for quality. This is how the Clickteam Fusion 2.5 runtime will redraw the new image. If you choose 0 you get a none-anti-aliased redraw which is great for performance (recommended) if you do 1 it will anti-alias the image (higher quality). For the sake of this tutorial enter 0 and Click Ok.
Now, because we create the shrapnel object AFTER the explosion, the shrapnel objects by default will appear on top of the explosion animation and we do not want that so we need to (in the same event, again) right-click on the shrapnel object and select Order > Bring to back. This will ensure all the shrapnel objects are pushed to the back of the display order (behind) when created.
Now, create a new event underneath again do (Only one action when event loops) and when you have inserted this new event, hover into the first column underneath the Special Conditions icon, right-click and select Groups > Deactivate a group and select Explosion.
At this point you can now test your app. Hit F8 or click on the menu Run > Application. When you click with the left mouse button within the window, it should now create the explosion animation and create some shrapnel behind it. If it does good stuff, let’s move on to the next part.
Cleaning up our routine in Fusion 2.5
You will probably notice that during your test there was a lot of ifs and buts with how it finishes and the polish on this. It should look something like this…
As you can see from my preview above, the animation stays on the last frame and the shrapnel stays too. It looks ugly and we don’t want it to work like this. So we will now concentrate on deleting the animation when complete, removing the shrapnel and spitting the shrapnel out in different sizes.
Scaling in Clickteam Fusion 2.5
We need to scale our shrapnel to different, random sizes when each bit is created, this gives an effect of everything being random including different sized shrapnel pieces. For the simplicity of this article, we will use an alterable value and string to set the scale size, at least this tutorial will assist beginners aswell as intermediates. Jump into the frame editor and select the shrapnel piece. We need to give it an alterable value and an alterable string. For the first alterable value, call it secondary_size. For the Alterable string call it total_size. It should look like this…
Now we need to set the secondary_size value to something random and we can do this quite easily.
We can do this by going BACK to our ‘On Loop – “Explosion” event. Jump back into the Event Editor (Ctrl+E) and locate that event. Hover over to the shrapnel object, right-click and select Alterable Values > Set. Select secondary_size in the dialog and type in a value, for this example we will type in 1+random(9). This will give us a value between 1 and 9. Click Ok. In the same event again, right-click over the shrapnel object and select Alterable Strings > Set. Ensure total_size is selected in the dialog, now in the “Enter Expression part” type in “0.” (including the speech marks). Now type in +Str$( now hover over the shrapnel object, right-click and select Alterable Values > Values A to M > secondary_size. Finish off the expression by putting ) at the end. Your expression should look like this: “0.”+Str$(secondary_size( “Active” ))
This is how your expression should look. Let’s break down this expression so you can see what we are doing here.
When we scale in Fusion, the default scale any object is, is 1.0. For this shrapnel effect, we want some small parts and some large parts, so we set the secondary size to a random number between 1-9. Now we assign this random number to the second part of our scale parameter. So we use 0.+random_number. So it will be a number between 0.1 and 0.9 depending on what the second random number was generated. We put this into a string (so you can see how it works). Next we will scale our object and convert this string to a value so the Clickteam Fusion runtime knows what scale the object needs to be.
So once you have clicked Ok in that dialog, again in the same event, hover over the shrapnel piece, right-click and select Scale / Angle > Set Scale. When the dialog appears, type in Val() and put your cursor between the ( and ). Now right-click on the shrapnel object in the dialog and select Values > Alterable Strings > Retrieve total_size. Your expression should now look like this…
What this expression does is, it converts the total_size string we set to a value. Click Ok. In the next dialog, set 0 for performance and click Ok.
Now run your application and try clicking. It will create the new shrapnel now all in different random sizes.
That looks much better but the animation of the explosion is still there afterwards. Close your ‘Explosion’ group by double-clicking on it in the Event Editor. We no longer want to do any other events in there. Make sure it is ‘greyed out’ so it is closed from editing.
Insert a new event (outside of the group). In the conditions, hover over the explosion animation object, right-click and select Animation > Has an animation finished? then select Stopped. Click Ok. In that event line, hover over the explosion object, right-click and select destroy. Run your application and when the explosion animation has finished, it should destroy itself.
Now, when shrapnel is fired out, it usually twists and moves around. To get this effect, we need to rotate it in realtime. This is quite easy to achieve. Insert a new event, right-click on the shrapnel object and select Movement > Is Active stopped. Now here we are detecting if the movement has stopped but we don’t want to rotate when it’s stopped, only when it is moving so right-click on the condition you just inserted and select negate. Negate means the opposite of this condition, in this scenario it IS moving. Like so…
Now on this event line, hover over to the shrapnel object, right-click and select Scale / Angle > Set Angle. In the dialog when it appears, delete the 0. Right-click on the shrapnel object and select Scale / Angle > Get Angle. When Angle (“Active”) appears in the expression editor put + 3 afterwards so it looks like this…
Click Ok. When the next dialog appears asking for quality settings just type 0 and click Ok. So what this event will now do is, check if the piece of shrapnel is still moving and if it is, it will rotate its angle by +3. Run the application and test it.
If all is working Ok, let’s proceed with handling destroying the shrapnel. Let’s create a new condition.
Insert a new condition (for a new event) hover over the shrapnel object, right-click and select Position > Test Position of active. Select all the arrows that point outwards from the frame and click Ok. Your new event should read (Object Leaves the Playarea). In this event line, hover over the shrapnel object, right-click and select Destroy. This will destroy any shrapnel that attempts to leave the playarea. We may aswell destroy it as the user won’t see it anyway.
The second thing we need to cover is, if the object has stopped, we need to get rid of it somehow. Just deleting it when it stops is a bit boring so we’re going to learn how to fade it and then destroy it.
Go back to the Frame Editor and select the shrapnel object so you can view its properties. Create a new alterable value and call it “fade_val” and set it to 0. Go back to the event editor and create a new event, hover over the shrapnel object, right-click and select Pick or Count > Compare to the number of active objects. In the dialog select ‘Greater’ as the comparison and type 0 in the expression, like this…
Click Ok. Now in that event line, hover over to the shrapnel object, right-click and select Alterable Values > Add to. Once the dialog appears, type in 2 and click Ok. Now in the same event line, right-click on the shrapnel object again and select Effect > Compatibility > Set semi-transparency like so…
When the dialog prompt appears, delete anything inside. Right-click on the shrapnel object and select Alterable Values > Values A to M > Retrieve fade_val. When you have finished your expression should look like this: fade_val( “Active” ). Click Ok. So in this event, we ask Clickteam Fusion 2.5 to check if there is 1 or more of the shrapnel objects. If there is, add 2 to its semi-transparency all the time. Now we need to check when the transparency hits a certain level, we can destroy it as it will no longer be visible, it will be too transparent.
Create a new event, right-click on the shrapnel object and select Alterable Values > Compare to one of the alterable values. When this dialog appears, ensure you select ‘fade_val‘ from the list, in the comparison you select Greater or Equal and in the expression type 128. Click Ok. Now in that event line, hover over to the shrapnel active object, right-click and select Destroy. Basically what this event does is, check if the value is 128 or more and destroys the object.
Run your application now. Hopefully you should be able to left click to create an explosion, this explosion should create some random shrapnel and fire it out in all different directions, in all different angles, different sizes and different speeds. It should then destroy the animation when complete. It will also handle destroying the shrapnel when it either leaves the playarea or it fades.
Conclusion to Fastloops in Clickteam Fusion 2.5
Click here to download the completed MFA
Using Fastloops in Clickteam Fusion 2.5 will rapidly speed up your design flow and development time spent creating special effects in your games and apps. It’s not just useful for effects, Fastloops are tremendously useful for getting actions done faster than the blink of an eye. You can learn much about Fastloops and also ForEach loops in Fusion 2.5. Here at the ClickFusion Academy we cover these topics quite in-depth with much more insight and lots of written lectures and video lectures for you to follow along with. We highly recommend you sign up to our Clickteam Fusion Lifetime Course if you are interested in learning more about Clickteam Fusion 2.5.
Join the Academy Today
