In order for your objects to be displayed properly at the position calculated by the physics engine, you have to set the hot-spot of all the images of your object at the correct position.

What is a hot-spot?

The Clickteam Fusion 2.5 engine calculates the position of the different objects of your game with complex formulas. At the end of the calculation, two display coordinates, X and Y emerge from the process : they are the object’s coordinate on the frame.
An object is made of various images, that you can edit in the animation editor. Each image has a “hot-spot”, indicating where it must be displayed exactly.

What if hot-spots did not exist?

If hot-spots did not exist, the images would always be displayed on the right and bottom of the object’s X and Y coordinates, as shown in the image.
Hot-spots have been invented to allow the images to be positionned at a finer location, which is a lot more practical for the Clickteam Fusion 2.5 engine.

The hot-spot of the image is the position within the image where it will be displayed.

Imagine now that the previous image has its hot-spot located in the center. When it’s displayed by Clickteam Fusion 2.5, it will look like this:

Please notice that the center of the image of the object is now displayed at the X and Y coordinates of the object.

If you set the hot-spot at the bottom-right of the image, the object will be displayed like this:

Why is the hot-spot so important?

• It indicates the position of every image of every object
  As objects are made of images, and as all images have hot-spots, the final position of your object on the screen depends directly from the position of the hot spot of the images.
• The Physics engine needs the hot-spots to be positionned correctly
  The Physics engine performs very complex calculations to simulate the life of a real physical world, and assumes a certain number of things. One of these things is that the coordinates of each object in the physical world correspond to the center of mass (also called center of gravity) of each object. If the position of the hot-spot of the images does not correspond to the exact position of the center of gravity, the object will be displayed at an incorrect location on the screen.

How can I see that my hot-post are not positionned correctly

• Your object sinks in the backgrounds
  Instead of stopping at the limit of an obstacle, your object penetrates it.

• Your object rotates in a non-symetrical way
  Physical objects should rotate around their center. If your object seems to rotate around one of its edges, this is an indicator that the hot-spot is not correctly positionned.

instead of

• The collisions with other objects occur at a distance
  This is also an indicator of a hot-spot improperly positionned.

collision at distance

Hot-spots

This position is simple : for all the physical movements, but the platform movement, the hot-spot should be set at the center of gravity of the object.

For all physical movements but the platform movement
All the movements, including the background and spring movements.
The hot-spot should be set at the center of gravity of the image. Use the “G” button of the animation editor to calculate the exact position of the center of gravity of the image.

Please follow this step by step tutorial on how to set the hot-spot of your object to the center of gravity.

Please note that setting the hot-spot at another location will only have adverse effects. You might be tempted to set the hot-spot at the location of a joint you might want to create, or an axis in the object. Don’t do it. The rule of thumb for physical objects is “always set the hot-spot at the center of gravity of the object”.

For the physical platform movement

The hot-spot of the image should be set in the middle of the feet of the character.

Please follow this step by step tutorial on how to set the hot-spot of your object in the middle of the feet of your object.

How to set the hot-spot of a physical object

The physical engine performs very complex calculations, resulting in coordinates where the objects are displayed. For each object, the coordinates correspond to the center of gravity of the object (also called center of mass).
In order for your object to be displayed properly in Clickteam Fusion 2.5, you have to set the hot-spot of all the images of your objects to this center of gravity, using the animation editor.

How to change the hot-spot of the images:

Step 1

In the frame editor, double-click on your object to open the animation editor.

Step 2

Click on the HOT SPOT button (the button with an eye) in the toolbar on the left of the animation editor.

Step 3

A crosshair appears over the image of your object. For the moment, it is positionned at an incorrect location, on the top and left of the image.

A new tool bar appears under the HOT SPOT button, with a group of buttons in a “Quick move” zone. One button is made specially for us : “G”. Click on it and it will position the hot-spot of the image at the center of gravity automatically.

Step 4

Now select another image in the image list, and do this operation for all the images of your object. Please note that if you press SHIFT-CONTROL when changing the position of the hot-spot of one image, all the hot-spots of all the images of the animation will be changed automatically.

What if I forget to set the hot spot?
When running your application, you will realize that “something is wrong”. The object makes erratic movements, or suddenly jumps from location to another. If this occurs to you, please check that the hot-spot of all the images of your object are set to the center of gravity (you might have missed one).

How to set the hot-spot of a platform object

The hot-spot of an object with the Physics – Platform movement has to be positionned at a very specific location for your object to be displayed properly : it has to be in the middle of the feet of the character. This position of the hot-spot is due to the fact that the character walks on the ground, climbs ladders and jumps : all the calculations are made starting from its feet, and the images of the animations must reflect that.

How to change the hot-spot of the images:

Step 1

In the frame editor, double-click on your object to open the animation editor.

Step 2

Click on the HOT SPOT button (the button with an eye) in the toolbar on the left of the animation editor.

Step 3

A crosshair appears over the image of your object. For the moment, it is positionned at an incorrect location, on the top and left of the image.

Now click over the image of your object displayed in the animation editor, and drag the cross-hair between the feet of your character.

Step 4

Now select another image in the image list, and do this operation for all the images of your object. Please note that if you press ALT when changing the position of the hot-spot of one image, all the hot-spots of all the images of the animation will be changed automatically. Be careful when you do that for a platform movement character, as during the walk animation the position of the center between the feet might vary slightly from image to image.

What if I forget to set the hot spot?
When running your application, you will see you character burried deep into the ground. Or its position will change instantly during the walk, jump or fall. If this occurs to you, open the animation editor and search for images where the hot-spot might not be positionned between the feet.