Getting Started with Clickteam Fusion — Save 50%
Create compelling 2D games using Clickteam Fusion with this book and ebook
This article is by Jürgen Brunner, the author of the book Getting Started with Clickteam Fusion. Game development is not all about turning cool ideas into games. You will also face a big non game-related technical part and a preproduction phase behind every game. Deciding on a resolution and the right interface for your game will be part of this book. You will also learn some basic enemy behavior.
(For more resources related to this topic, see here.)
We want to start a new little game prototype. Let's create a little top-down shooter. For that reason, create a new application. For now, let's choose one of my favorite resolutions for retro games: 480 x 320. Here are the steps to create a basic top-down character:
- Click on Application in the workspace toolbar, choose Window in the properties, and select 480 x 320.
- You'll be asked to apply these settings. Your application's resolution has been set.
- Now set the size of your frame to 800 x 600 to create more space for your game objects.
- Create an active object, center hotspot, and action point.
- Set the movement of your object to Eight Directions, and change the properties to your desired values.
You have just created a basic top-down character that you can steer with the arrow keys (or later with the touch joystick if you want to create a mobile game).
Of course, you can also visit the Clickteam forum and search for a 360 degree movement example to get a more advanced movement system. In our case, the built-in eight-directions movement will do a great job though.
Create one more Active object. This will be your bullet. Change the graphics if you want to. Let's create a simple shooting event:
Repeat while "button 1" is pressed – Launch
bullet in the direction "player" with a speed of 100
Too many bullets are created while pressing button 1 now. You can trigger the bullets every 10 seconds with conditions from the timer. Just add the following condition to the existing button condition:
Every 10 seconds
This event will create one bullet every 10 seconds while button 1 is pressed. One more thing you could do is center the display at your player's position to activate scrolling just like in the platformer example:
As a next step, we want to create some basic enemy movements. Remember, this is just a prototype, so we don't really care about graphics. We just want to test different movements and events to get basic knowledge about Fusion.
The simplest method to make your characters move might be on a path. Create an active object (an enemy), and set its movement to Path. Now hit the Edit button and place at least one node for a path. Also activate Reverse at End, and loop the movement in the Path Movement Setup. No matter what game type you are creating, the path movement can be used for a simple platformer enemy as well as for top-down spaceships.
Bouncing ball movement
The bouncing ball movement can be used for a million situations. The name that gives basic movement though would be another simple motion. Create an active object and set the movement to Bouncing Ball. Change the movement properties to whatever fits your game dynamic.
We want our object to bounce whenever it leaves the game area. You will only need one event to trigger this situation.
Start a new condition: navigate to Set Position | Test position of "enemy". Hit all the arrows pointing outside the frame area in the pop ( ) up that appears. This will create the condition Enemy leaves the play area. Now select your enemy object and create the action—navigate to Movement | Bounce:
Just before your enemy object leaves the game area, it will bounce to a random direction within the frame. It will move forever within your game—until you blow it to pieces of course.
Direction detection – a basic AI
You can easily modify your bouncing ball enemy to follow your player object wherever it might go and create your first little Artificial Intelligence (AI). That actually sounds pretty cool, doesn't it?
Use the bouncing ball movement for a new active object again. Set Speed to a low value such as 8. Go to the event editor and create the condition Always. Select your enemy object to create the action—navigate to Direction | Look in the direction of…— ( ) and select your player object. You should get this event:
Always – Look at (0,0) from "player"
The following screenshot shows the creation of the preceding event:
Your enemy moves with a constant speed of 8 towards the player now! This might be the most simple AI you can create with Fusion. The great thing is it totally works for simple enemies! You can always dig deeper and create a more powerful movement system, but sometimes less is more. Especially when things need to be done quickly, you will be very happy about the built-in movements in Fusion!
There are many, many, many different ways to work with the built-in movements in Fusion. There are just as many ways to create AI's for enemies and characters. You will get behind it step by step with every new game project!
At the moment, you have your frantic shooting player and a screen full of swirling enemy squares. Now we want to let them interact with each other.
In the next steps, you will learn how to use alterable values, which are internal counters you can change and make calculations with. In your special case, you will use those values for the health of your enemies, but they can actually be used for pretty much any situation where you need to set values. Some examples are as follows:
- Reloading the shield of a spaceship
- Money, gold, or credits of a character
- Number of bullets for a weapon
- Health, energy, or life bars
The easiest way to describe alterable values is with a simple example. We will give one of your enemies five health points, which is pretty nice of us.
Select the enemy with path movement and go to the Values tab in the objects properties. Hit the New button to create Alterable Value A. Double-click on Alterable Value A name it PlayerHealth, and set the value to 5:
Naming alterable values is not necessary but is highly recommended. Each object has up to 26 values (from A to Z) by the way. The following screenshot shows the naming of alterable values:
Now open the event editor to create the interaction of your bullet and your enemy. You will need a simple event that reduces the alterable value HealthBar by 1 whenever it gets hit by one of your bullets:
Collision between "enemy" and "bullet" - Sub 1 from "HealthBar"
Additionally, let this condition destroy your bullet. The plan is to destroy the enemy object after it gets hit four times. To do so, test whether the alterable value HealthBar is lower or equal to 0 to destroy the enemy:
HealthBar <= 0 – Destroy "enemy"
This event will destroy your enemy when the alterable value hits a value lower or equal to 1. This is just one of countless possibilities for alterable values. As you can already see, alterable values will be your best friends from this very day!
Interface, counters, and health bars
We could talk a million years about good or bad interface design. The way your interface might look is just the beginning. Movement, speed, transparency, position, and size are just a few values you really have to think of with every new game. Some games completely go without an interface, which can create an even more immersive gaming experience. In other words, try to plan your interface precisely before you start to create an energy bar.
We will work with the Counter game object to create a basic energy bar. The Counter object stores the numbers in your application and is used for objects such as fuel displays, clocks, speedometers, and health bars. The Counter object can be displayed as an animation, a bar, or a simple number. You can also hide the counter if you want to use it for calculations only. The following is the screenshot of the Counter object:
Create a new counter object within your frame. The counter Type in the Properties settings is set to Numbers by default. Change the type to Horizontal bar. This will turn the counter to a small black rectangle. Change the color and size of this bar if you want. Now set the Initial Value to 10, the Minimum Value to 0, and the Maximum Value to 10. This means that the counter will start with a value of 10 when the frame (game) starts.
Assuming that the bar represents your player's health, values will be subtracted or added. The value of this counter cannot go lower than 0 or higher than 10, as we have set the minimum and the maximum values!
Now take a look at the RunTime Options tab. The option Follow the frame is important for every game. It is deactivated by default. That means that the counter will always stay in the same position no matter where your player character moves to. You can also put the counter (and the whole interface) in to a new layer of course.
Open the event editor and create an event that will subtract 1 from the Counter object HealthBar (very similar to your enemy):
Collision between "player" and "enemy" - Sub 1 from "HealthBar"
Also add a limiting condition to deactivate multiple collisions at one time. You'll find this condition under Special | Limit conditions | Only one action when event loops.
The only thing that is left is an event to destroy your object. Just test whether the health counter is lower or equal to 1 to destroy the player object:
HealthBar <= 1 – Destroy "player"
The following screenshot shows the event created:
So, this is basically how you can use the counter object. As you can imagine, there are a lot of other situations where this object comes in very handy. You could, for example, create one more counter and leave it as a number. This could be your ammo counter!
Set both Maximum and Initial Value to 20 and the Minimum Value to 0. In the event editor, subtract 1 from the counter whenever your player character fires a bullet. Add the following condition to your existing shooting condition:
Counter > 0
Now your player will only shoot bullets when the counter is greater than 0. Of course, you have to add ammo packs to your game now. This is something you can find out on your own. Just use what you have learned so far.
Now think of the options you already have! You could add a destroy animation for your player. Let some simple particles bounce when your bullet hits the enemy or an obstacle. Go for some more advanced methods and change the animation of your player to a hurt state when he gets hit by an enemy. Maybe add some new events to your player. The player might be invincible for a while after he gets hurt, for example!
Also think of your previous platformer prototype. Create a counter and add 1 every time you destroy one of the red crates! Talking about the red ones: why not set a path movement to the red crates? This would turn them from static boxes to patrolling, evil, explosive crates!
Resolutions are something you will think about before you start your next prototype. You created a new game setup to test some more advanced properties.
Within this prototype, you also created and placed your first interface and turned it into a basic energy bar for your player. Alterable values will also be very useful from now on.
Resources for Article:
- Getting Started with Fusion Applications [Article]
- Dynamic Flash Charts - FusionCharts style [Article]
- Fine Tune the View layer of your Fusion Web Application [Article]
|Create compelling 2D games using Clickteam Fusion with this book and ebook|
eBook Price: £8.99
Book Price: £14.99
About the Author :
Jürgen Brunner is currently working as a game designer and an indie developer in Austria and Germany. You can definitely call him a video game enthusiast, which he has been since the 1980s. Remembering the first gaming sessions on a friend's Amiga 500, he tries to stay as connected as possible to the main goal of every game: fun!
He studied game design and music at the University of Applied Sciences in Salzburg, and received his degree in 2010 with the diploma thesis "Jump 'n' Run Evolution".
While working as a researcher at the Pervasive experience lab (P.e.l.s) in his former university, he had the privilege of exploring augmented reality and pervasive games as well as Kinect hacks.
Jürgen made his way to the professional gaming industry as a game and level designer in 2012. Besides this, he also works on his own indie games. His love and passion for retro graphics, music, and art can be experienced in every new game and in every new song. The greatest success of his indie career so far might be the release of the award winning game Pitiri 1977 on Steam in 2014.
Besides working on games, he is also a passionate musician. As well as playing six instruments, Jürgen still tries to spend every free minute on music and sound design, or with his band SaberRider.