Fusion 2.5 – Make a ‘Snap-to’ Grid

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…

Fusion Grid Quick Backdrop

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

Stretch to Playarea

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…

Red Square 8x8 Hotspot

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

Special Conditions Event Editor

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

Set Active X Coordinate

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

XMouse / 8 * 8

It should appear like so…

XMouse / 8 * 8

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…

Snap to 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.

Leave a Reply