Create your own Grid in Clickteam Fusion 2.5

In this free tutorial we will look at how you can create your own grid in your Clickteam Fusion 2.5 games or applications. We will also create a ‘snap-to’ effect so objects ‘snap’ to the nearest section of the grid.

If you like this tutorial, why not become a member of the ClickFusion Academy today and access over 140+ more!

Setting up the playarea

First of all, you need to create a ‘grid’ to use. Decide what size grid you want to snap to. In this example, I create a quick backdrop object (motif) which has a blank square of 8×8 pixels, like so…

I then stretch the object to fit the entire playarea, like so…

That’s our grid now set up in the playarea. Now insert a new active object. For this example, I am going to create an 8×8 red square, like so…

You must ensure that the Hotspot of the object is at 0,0 (top left corner).

Now click Ok. Head into the Event Editor.

Making the magic happen

Once inside the Event Editor, click on new condition and select the Special Conditions > Always…

Once this event has been inserted, hover over to the Red Square Active, right-click and select Position > Set X Co-ordinate…

Once the expression editor opens, delete the entry and type in

It should appear like so…

Click OK. Now, repeat the same but set the Y position of the object and instead of XMouse in the expression, use YMouse.

Now test your application. If you have followed these steps correctly, as you move your mouse around the playarea, the Red Square Active should follow the mouse but also appear to ‘Snap’ to the grid so it’s always aligned with the grid…

If you want to experiment further, you can increase the size of the grid, say to 32×32 and the size of the Red Square Active to 32 x 32 and adjust the expressions in the Always event replacing / 8 * 8 by 32 instead.

This is how you create a simple ‘snap-to’ event in Clickteam Fusion 2.5. Click here to view the video.