Circular GUI Bars in Multimedia Fusion 2 and Clickteam Fusion

Last Updated: April 25th, 2015

It is always good to be, at the very least, at little different from the general crowd. One of the easiest and simplest mechanics available is implementation of a unique graphical user interface (GUI). This will tutorial explains how to set up a circular GUI bar within MMFusion.

Quick Links:

Concept

There are numerous ways a circular GUI bar can be implemented. Such ways include, and are not limited to:

Creating an entire animation within an active object
Use Sin and Cos to individual place active objects and setting the angle based on the needed angle
Using several different objects to compose the GUI bar

While each of these methods work, each have their respective disadvantages. This tutorial explains how to create an object-based GUI bar, which has the disadvantage of being too object heavy. We have two values which reflect the GUI's value; Actual_Value and Current_Value.

Actual_Value is the GUI's actual value. Event triggers, such as "Object A collides with Object B", sets this value.

Current_Value represents the value displayed on screen. Current_Value approaches Actual_Value. If Current_Value and Actual_Value are 0 and 50 respectively, Current_Value increments frame-by-frame until it equals Actual_Value. Likewise, if Current_Value exceeds Actual_Value, Current_Value decrements frame-by-frame until it equals Actual_Value.

Slowly Adjusting the GUI's Value

For this mechanic, we slowly increment or decrement the GUI's visible value towards its actual value. This frame-by-frame adjustment creates an extremely nice smooth/easing effect. Implementing this mechanic involves two events.

+ Is < GUI's current value > less than < GUI's actual value >?

- Increment < GUI's current value >

+ Is < GUI's current value > greater than < GUI's actual value >?

- Decrement < GUI's current value >

< GUI's current value > and < GUI's actual value > represent two different variables.

With these two events, we can set GUI's actual value and have GUI's current value adjust towards GUI's actual value.

It just so happens that it is efficient to have additional actions execute when the GUI's current value is less than the GUI's actual value. When this tutorial is completed, the event will look something like this:

+ Is < GUI's current value > less than < GUI's actual value >?

- Increment < GUI's current value >

- Create instance of GUI_Segment (all of these should be created at the same coordinate)

- Set angle of GUI_Segment instance

- Set ID of GUI_Segment instance

Creating the GUI Segments

As mentioned before, the GUI we are making is composed of smaller GUI_Segments. The crux of this tutorial lies in when we create the individual GUI_Segments. We want to create a GUI_Segment anytime the GUI's current value increments. When the GUI's current value increments, the GUI should "grow" larger. When the GUI_Segment is created, we also set its angle. A circular GUI can be simulated by having a set of objects located at the same coordinate with varying, contiguous angles.

This leaves us with the below event.

+ Is < GUI's current value > less than < GUI's actual value >?

- Increment < GUI's current value >

- Create instance of GUI_Segment (all of these should be created at the same coordinate)

- Set angle of GUI_Segment instance to 360 * < percentage of GUI's current value>

- Set ID of GUI_Segment instance to GUI's current value

Destroying the Correct GUI Segments

Destroying the correct GUI_Segment(s) is a much simpler process as compared to their creation process. We simply compare the GUI_Segment ID to the GUI's current value. If a given GUI_Segment's ID is greater than the GUI's current value, we destroy the given GUI_Segment. This works because the GUI_Segment's ID is supposed to be represent an existing value of the GUI's current value. When an ID is greater than the GUI's current value, we know the associated GUI_Segment should be removed from the GUI.

The GUI Segment ID

The GUI_Segment's ID is initialized when any instance of a GUI_Segment is created. The ID is initialized to the GUI's current value. This creates a one-to-one association between a GUI_Segment and the GUI's current value. If the GUI's current value is 127, for example, the most recently created GUI_Segment's ID is 127. If the GUI's current value is 5, the most recently created GUI_Segment's ID is 5. This one-to-one association will help us destroy the proper GUI_Segments as the GUI's current value decrements.

Summary

In summary, a circular GUI can be constructed in a few steps. You need to create the individual segments, position them (really just manipulate their angle) and associate the segment with a certain GUI value. If any segment's associated value is higher than the GUI's value, that segment should be destroyed.

This tutorial also explains how to automate the process of incrementing and decrementing the GUI. For this, we keep two separate values, one represents the current value displayed by the GUI (Current_Value) while the other represents the actual, immediate value of the GUI (Actual_Value). Any event which should modify the GUI's value modifies Acutal_Value. When Current_Value is different than Actual_Value, Current_Value increments/decrements towards Actual_Value.

Combining these two mechanics provides an easy and, yet, robust implementation of a circular GUI. Check out the example file located at the top and be sure to rate this tutorial! You can add additional flair by adding animations or color changes to your circular GUI.

Rate This Tutorial

Vote: 4.5/5

If you have read this tutorial, rate it from poor (1) to average (3) to great (5)!