Basic introduction to game creation with Clickteam Fusion 2.5

The prospect of creating your own game is an exciting one, but even with the countless tools and engines available on the internet it can easily seem like a daunting task. Though in reality with the right mindset and the right tool and an a couple of hours... or minutes depending on what qualifies as a finished game in your eyes.

Today I'll walk you through the process of creating a very simple game with Clickteam Fusion made by... well Clickteam of course.

It's an older engine that despite its age still receives updates. Though it should matter little which release in this product family you decide to use for your first project as I won't be using any fancy or new features, with luck you might even be able to follow the instructions using the first product in the line, which is Klik & Play that was released in 1994. Though I wouldn't recommend it as it's very feature limited compared to the later releases. Just to put things into perspective it didn't even have built in screen scrolling features until its successor that was released a few years later.

Installation is very easy as you can download the installer on their website (www.clickteam.com), or just use Steam to download it.

There are two versions to consider which are the paid regular version called Standard, and the free version which is called Free Edition, both are available on Steam and on their website.

The free version has restrictions but they should not be an issue for this short tutorial. Maybe I should create a blog post about sidestepping those limitations, if anyone is interested in such an article feel free to leave a comment about it below.

Regardless let's get on to the tutorial now. When you boot up the program you should be greeted with the main menu of the program that looks like this.

We'll start by creating our project by simply selecting File and then New from the menu bar on the top left corner. Which will make a tiny white window appear on the right side, and so we are introduced to the first concept in Clickteam Fusion, which is Frames.

You can think of them as scenes from a movie to begin with. It's a lot more flexible than that and you could use a frame in any which way you could imagine. Nothing stops you from cramming the entirety of your game into a single frame if you want. Titles, levels, high score lists, end credits, every cutscene you name it, but... that can easily get really messy. In short frames are the default way to compartmentalize different parts of your game.

What is important to understand is that when you move from one frame to another the current state your game gets lost, and if you jump back to that frame it will start over from it's initial state. There are a few things Clickteam Fusion keeps track of between frames by default, like Lives, Score and Global Values & Strings. There's more to it but those features are not relevant to this tutorial.

Let's get started by double clicking on the white window below "Thumbnail" you will be greeted by a white window inside a gray one, that's the play area for your game. You can place objects here and have them interact each other.

Now the fun starts, by right clicking the play area you get the popup menu, select "Insert Object"

This is the "Create new Object Menu" and your one stop shop for everything you need to add to make a functional game, they can essentially be thought about as what constitutes as plugins in this engine.

Double click on Active, and you'll get this green diamond on your screen.

This is the Active Object, the workhorse of the engine, you can just about accomplish any task within your application boundaries with this unassuming thing, if you need to get data from outside your application you of course need other plugins but that's beyond the scope of this tutorial.

So what does it do? Just about everything, you can animate it, collision logic is handled through it, you can move it, rotate, stretch, squash, shrink, enlarge your animations using built in effects. Essentially, it can be anything you want it to be, a puzzle block, a mushroom loving plumber, a fast hedgehog, a mad ape on a quest to recover his stolen banana hoard. It's literally what you make of it the sky is the limit.

Though we will stay grounded for this tutorial and just make it to a simple paddle for a block breaking game. Yep, gameplay straight from the Atari 2600 era... daring I know.

To get started just double click the green diamond.

This is the animation editor of this software. A simple tool though a bit more fiddly than what I remember it being in past versions of this software, though it should be fairly easy to work with.

It might be a little overwhelming at first glance but we wont be using much here as our paddle won't even be animated, but feel free to play around with it, messing around is the best way to familiarize yourself with this software.

We will first resize the image, just click on the tool below the Paint Bucket, the one with arrows pointing in two directions diagonally.

Then simply change the w(width) to a round 100 (or less if you want to make the game harder) and click apply.

Then you can draw whatever you feel inside the Animation Frame window, and don't forget to use the zoom (it's the sliding bar beside the looking glass). When working on small details it helps a lot.

Perfect is as perfect does! When you're done we will be doing a small little thing before clicking OK, it's not important for this tutorial but being aware of this can save you from some animation related headaches in the future.

The highlighted tool in the image is the animation Hotspot, it's the center of mass for an animated object, just use the quick move as een on the side to center it s seen on the image, and click OK.

Congratulations, there's the paddle the player will control!

The white background is a bit too much I think we need a little less contrast, let's add a background!

Yep, we open the "Create new object" menu again. If you forgot how just scroll up for a refresher. ;)

Double click on Backdrop and you'll get... a small painting?

Yes it looks a little strange, but it's essentially just a static image. To put it succinctly, where the active object can do everything, the Backdrop Object can do nothing. It's job is literally to just be there and exist, like a theater prop. Though that's giving it too much credit as at least a theater prop can be moved, but the Backdrop can't be interacted with at all once we start playing the game.

It can be used for collision purposes with active objects. A feature which thankfully for this project is off by default. So its job here is to do nothing.

Double click it and paint the whole box with the color of your choice, black is good, but I'll personally go with a mellow purple this time.

Use your mouse to move the Backdrop to the top left corner, click it a single time to bring up the resize hooks and resize it so it fills the screen. Don't worry if it doesn't align perfectly, just make sure it covers the whole screen.

Like so!

Now we need two more object to make this a playable game. A ball and a brick!

Create two more Active Objects. It's important to note when creating these two objects they will look identical, but are in fact two different objects with separate properties. What differentiates them is their name

Using the same method as earlier draw a brick and a ball.

We now have our trio assembled and they are ready to make you the game creator you always wanted to be! But, before we do anything there's a tiny little problem. They have awful generic names! It's not a big deal in a small game like this but in a big project it can easily devolve into a nightmare if your trying to keep track of Active 1 through 50. Was 21 the soldier perhaps? No that was a bullet, no wait a grenade! Oh, it was the explosion object all along. It would indeed looks silly if our grenadier was throwing explosions around, maybe a little funny but probably not what anyone would want.

Anyway fixing this is thankfully easy, and changing names mid project is no problem so no pressure if you can't think of a good name for your object, just pick a name and roll with it, and if you think of a better one, that's great! The Engine keeps track of all these changes for you.

Here's where you make your changes, the Properties window. All objects have different properties that can be altered depending on your needs. It's also where you make Backdrops collidable.

We are after name changes. Which are found by clicking on the little info tool. With that we can rename all our objects by clicking them and changing that specific property.

Now we're ready to make our game playable!

We're going to click on our paddle and select the Movement property, which is currently set to static.

We're changing that to Eight Directions, and also disabling most of them so it can only move to the right and to the left.

Also change the Acceleration and Deceleration to 100, it's the preferred settings for this type of game, and I'll set the speed of my paddle 40.

Next we do the ball. Simply pick bouncing ball. That's it, we don't need to fiddle with anything else here. Though feel free to change whatever you want, it's all good, unless you make the directions so restrictive that the game is impossible to complete, though I don't think that should be possible to do through this menu.

With the brick we don't need to change anything, its job is to stay put as a good brick does.

We now create another object, the humble counter.

We could use the lives object here and it would be more appropriate, but I'll refrain for it because it has a few properties that might cause headaches for a complete beginner. Namely it's a global object which means its state persists between frames and it's in limited supply, as there are only 4 lives counters global for the entire application. This is an archaic remnant from it's first released version Klik & Play, and it's existence can largely be attributed to as a legacy feature.

Just like Windows every single feature from back in the day still exists in the newest version of this software, that's like what 30 year old features that only exists so you can take that 30 year old project and still open and run it in the newest release. How's that for backwards compatibility?

Anyways back to our counter.

We change the initial value to 3, this will be our lives counter.

oh and add another counter. That's our score, we need a scoring system for our arcade game.

And lastly we need a little text. In this Engine they're called strings, and might not look like much, but I assure you you can do a lot of cool things with string objects. But in this project we will use it to denote lives and score.

Personally I just use one String object because I can't be bothered to align them separately, but you can use multiple Strings if you want.

Creating a String is as easy as creating any other object.

The stage is set, but now the real fun part begins. That is we're going to start programming. Navigate to the Event Editor by clicking this tool.

Here's where you will be spending the bulk of your development time, excel sheet like menu of sorts where you add all the game logic. Don't worry if it doesn't look like much yet. You'll understand why I say that it reminds me of an excel sheet real soon.

We start by adding your first line of code, by right clicking new condition.

You a little window like this. We start by right clicking the ball object to Test position of "Ball"

Make your selection like this.

We select the Left, Right and Top boundaries, and click OK.

We have successfully created a condition. In essence what one would call an "If statement" in a "real" programming language.

Now you select the ball from the right, and select Movement -> Bounce.

This is the paradigm of Clickteam Fusion programming. The events are conditions, and pick the effects by picking the corresponding box on the grid.

It looks simple and maybe even limiting now but it's rather powerful. You can pile on as many conditions as you like and there might be a limit to how many but I've never encountered it the decades I've used this program, and it's the same with resulting actions that take effect when conditions are met. I'll show you later a little sample of how confusing code can get but right now let's keep it simple.

Now we make our first collision event. Like so!

And we select bounce again as the resulting action

Then we make a loss condition, which is what happens when you fail to keep the ball in the play area with the paddle. For this we check the Y coordinate of our ball. Yes you can check if it leaves the play but checking the coordinate is much more reliable, as it doesn't care why the ball is where it is, so it's generally more reliable.

We select "Compare Y position to a value"

And finally we will have to start dealing with math! Or numbers at least.

This is the expression evaluator of the program. It's where the most complex stuff usually happens, and will be the source of most of your frustration. I've used this program for decades and I still lose track of nested parenthesises, don't worry about it. You'll learn to deal with it, or you'll make simpler games where you don't, both approaches are valid.

Our condition will be " If greater than 500" Why 500? Well to understand this you have to understand how coordinates in 2D engines work. In 3D engines like unity the closer it's to 0 the closer the coordinates are to ground, which is intuitive, but it's not so in 2D engines like this.

Now why is that? Well rendering the Y position starts from the top and works it's way down increasing in magnitude the farther down it gets. The logic is the same as when writing a text document, you start at 0 at the top and work yourself down, because you don't know how far down you're going down while writing your document... or article.

In 3D it's different due to how we perceive the world 0 is ground, and it increases the farther up to heaven we travel. Where's the top? Who knows. It's all about where the perceived baseline is and where we are going from there.

Anyway with 500 or greater as our position for our ball we're going to do what needs to be done. We're destroying the ball.

We're also subtracting 1 from the lives counter.

Now that our ball is gone, we need a way to get it back.

We make our condition "Upon pressing a key."

and press "Space Bar" when prompted for a key.

We're also comparing for the number of "Ball" objects, to ensure that none exist.

Now we create another ball.

Above our paddle.

We also make sure it looks in the direction of our paddle.

You select the object to look towards by simply clicking it. This is just to ensure that the ball doesn't go flying in a surprising direction which can result in you losing the game unfairly.

Now to make the game a little more comfortable to play we trigger an event at the beginning of the frame with the "Start of frame" condition. This triggers an event once at the start. It's very useful for initializing your game state.

Select Destroy for your "Ball" object. This is to ensure that the player can start playing when they feel comfortable.

We're almost there, just one more event and you have a playable game! We select the Brick and check for a collision.

We make it so that the brick gets destroyed when colliding with the ball, and you get 100 points for the effort! Don't forget to make it so that your ball bounces when it hits the brick!

Now we just drag and drop more bricks from the menu on the left to the play area and then we're ready to test our game!

We just select Run from the Menu Bar, and then Frame.

And your game is running! It's playable and also quite dreadful.

We have been using the built in movements in this tutorial, but to be frank they are dreadful, you can probably tell that sometimes bouncing on the bricks barely works. This is why no Clickteam Fusion developer worth its salt uses the built in movement, they're old, and sometimes they barely function, but don't worry, just have fun with it. I'll show you how to do things the proper way later, but I wanted to make this tutorial easy to follow and also shortish.

We'll do a few more things to tighten up the game. You should be familiar enough with it that I don't need to do hand holding from now on.

Like make sure that the paddle can't leave the play area

Now we go back to the Frame menu by clicking the red application, and add two more frames, by clicking the last number below "No."

Put the game frame in the middle like this by dragging and dropping.

Select black (RGB = 0,0,0) as background color for both white frames. It's easier on the eyes.

Feel free to give the frames new names if you want.

Create a new String object and change the color from the properties menu

I prefer to use yellow it's legible and somewhat easier on the eyes than white. It's my goto for frames that need more work.

A simple event for the frame.

Now use navigation toolbar to go to the 3rd and last frame. We're going to do a fancy little trick here to demonstrate what strings are capable of. So just drop a normal String object without canging the text.

We're going to "Change alterable string"

Here's a little trick you can use strings to display numbers too! And also do all sorts of useful

string manipulation operations, it's in fact my most used tool when making windows tools. There's a lot more capable string tools but that's beyond the scope of this tutorial.

Just type the text as you see in the image and use the gears to Retrieve Global Value A.,

Or copy this text:

"Your final score is: " + Str$(Global Value A)

Now for the finishing touches.