Welcome to the Clickteam Blogs
This new area of our site will host a range of blogs including Clickteam News, information about Fusion 3 development, ClickStore Features, User Devlogs and much more besides.

If you would like to write a guest blog article about your game, app, development or something else then please Contact Us for more information.
Transitions in Fusion 3
Posted on: January 30, 2017
In this blog post I’m going to cover a bit about transitions.

Transitions between screens/images/levels are very useful in any kind of game but there haven’t been a wide variety of them for Fusion 2.5 and previous titles. To make them for Fusion 2.5 you needed to program in C++ and it was only using functionality originally designed for software rendering (no hardware acceleration). To make matters worse the transitions also suffered from not being very portable to the other runtimes. We felt that transitions had been overlooked for too long. But how can you make something like transitions easy to modify for clickers?

To look forward you sometimes have to look back first.

Some of you might remember the rarely used functionality in The Games Factory where you could make a frame designed to be used as a transition. It sounds pretty useful but it had a few limiting quirks: You didn’t have much control over what was drawn and what wasn’t. It worked by using the objects in the “transition frame” as invisible “coins” on a big “scratch & win” card – revealing the next frame wherever the objects moved for as long as the transition duration. It was actually kind of cool but it was very limited in scope.

The idea that you could make your own transitions kind of stuck since then. As you might have read in all our previous blog posts we have a completely new type system which is our sort of version of an entity/component system but it ties nicely together with object oriented programming. A “Frame” is in Fusion 3 just another object of sorts – an object that we can subclass quite easily. All frames in Fusion 3 are in effect sub classes of “Frame” in one way or another but they can also be sub-classes of other frames inheriting their special features and functionality.

This means that we could simply make a subclass of “Frame” called “Transition” that gives one access to two images – one image representing the previous frame and one of the next frame. With those two images you can then event your very own transitions using whatever objects or pixel shaders you can think of. Here is how I implemented a few simple transitions…


Just position two image objects on top of each other. At the start of the frame the two image objects have their images set to the previous and next frame images respectively. Then, in an always event, I set the opacity of the top image to the transition progress (retrieved from an expression). Done!

3D Card Flip transition

For this transition I simply only show the first image when the transition progress is less than 0.5 and only show the second image when the progress is greater than or equal to 0.5. This switches the images midway. Secondly I set the user matrix of the two images to be the rotation matrix around the Y axis for 180 degrees times the transition progress. This slowly animates the rotation around the vertical axis. I made sure that the hotspot and center of rotation were are the center of the images. Finally I set the blending color of the images to slightly darken them as the angle isn’t 0 or 180. Basically:

[Image A] and [Image B]:
—Set “darkeningFactor” to (1 – abs( sin(progress*180) ) * 0.3) * 255
—Set blending color to: Color(darkeningFactor, darkeningFactor, darkeningFactor, 1)

Other types of transitions

As I mentioned you can use pixel shaders and even several objects to represent the transition between two images. We haven’t worked on object transitions yet but they will simply use the exact same system. You will have the full power of all your coding creativity at your disposal when it comes to this. As people get creative with this system I’m predicting it will be used a lot more than it currently is. I’m imagining the flip transition being used for card games when a card is drawn from a deck.

I can even imagine this being used a lot for making reusable special effects on objects. For example different “kill” effects on objects as they are destroyed using different weapons. One transition could make objects appear to disintegrate in various ways, others could show the object having an electrocution effect and have it burn away – even more complex transitions that can make the objects appear to “melt”.

I’m very excited about Fusion 3’s transition system so far. Mostly because it hardly required any extra work on our part to bring so much more power and creativity in the hands of our users.

We’d love to hear your comments on our blog posts and on our development.Throw us a mention on Twitter or Facebook and tell us what you think!

Visit Clickteam @ FacebookVisit Clickteam @ TwitterVisit Clickteam @ YoutubeVisit Clickteam @ TwitchVisit Clickteam's The Reactor @ PatreonVisit Clickteam @