Go to content

Main menu:

How to Implement Block Scrolling in Multimedia Fusion 2 and Clickteam Fusion

Last Updated: July 3rd, 2014

In top-down perspective and platformers, scrolling is an important mechanic. You may always want to focus the camera on the player or you may want to focus the camera on specific sub-regions within the game. This tutorial explains the concept and implementation of the camera type and provides examples of these camera types.

Quick Links:

Example of Block Scrolling
Example of old Zelda-esque block scrolling
Concept

The concept behind this tutorial is simple and straight forward. Rather than sustaining a continuous scrolling system, where the camera is always focused on the player, we will implement a block scrolling system where the camera focus on specific regions rather on a moving player. Doing such a system will require us to subdivide the playable frame into a grid-like system, detect when a region is entered or exited, and to scroll to the new region.

The frame is divided into smaller sub-regions so we can easily distinguish the region's boundaries. After we firmly established a region's boundaries, we detect the entrance or exit of the player to/from a region so we can tell the camera exactly when to move. After the camera is instructed to move, we let the camera move according to the specific needs.

The next section introduces a couple of ways to easily subdivide the frame.

Exasmple of splitting one large frame into smaller sub-regions
Subdivision Methods - Object Masks

One method of frame division is with the use of collision based object masks. Essentially when the player collides with one of these "camera objects," the camera will scroll/jump to the center of said object. These objects can be of variable size and even shape.

This method is relatively simple to grasp. Setup is as easy as placing objects during edittime and moving the camera to the center of the object during runtime. That being said, setup time may increase substantially as the frame grows larger as you will likely need to fill the entire frame with these object masks. One special perk this method has is the ability to create different sized/positioned objects. You can mix and match the different sizes of the regions as you wish.

**Note**
You will need to be careful to ensure the collision checks are free of glitches and bugs.

Subdivision Methods - Mathematical Grid

The other primary method to divide the frame is using the same mathematical approach used to create grids shown below.

Grid or Forced Multiple Formula:
(
Input Variable / Base Multiple ) * Base Multiple

This formula returns a value only in multiples of the "Base Multiple." So how do you use this to divide a frame? You would simply detect if the camera's current grid position (such as [0,1]) is the same as the player's current grid position. When these positions are different, simply force the camera to jump/scroll towards the new position. The sub-regions created by this method are of a fixed dimensional size, but setup requires only configuring the grid for your needs. After the code is implemented, no further setup is required.

Did You Know
Did you Know?
The "Easing" Formula

Need help create an expression to smoothly scroll from one position to another? You can use the Easing Formula!

The Easing Formula is a formula which allows a smooth movement of one value to another value at a defined rate. Examples of such values are points for distance ease, values for numerical eases (such as a decreasing hp bar), and colors for gradient shifts. The max rate of the ease is specified by "
Ease Speed."

The General Easing Formula is as follows:

Current or offset value + ( Min( Ease Speed, AbsDistance between values ) ) * ( ( Distance between values ) / AbsDistance between values ) ) )


When all the correct values are inputted, the formula solves for direction and takes care of any overshooting.

The breakdown of the formula is as follows:

Current or offset value:

This section of the formula represents the "base value."  The second half of the equation calculates a displacement value for the Current or offset value.


Min (Ease Speed, AbsDistance between values ) ):

This section of the formula takes care of overshooting. The value picks the minimum (ignoring numerical sign) of the ease speed and the remaining distance. As the remaining distance decreases, the number reaches a point where it is less than ease speed. When this happens, we know that the object only has one more "move" left.


Distance between values ) / AbsDistance between values ):

This section of the determines which direction of the easing. This formula returns "-1" if the direction is negative or "1" if the direction is positive. With respect to an object's position, a negative direction causes the object to ease left or up while a positive direction cause the object to ease right or down.

In conclusion, you can use the Easing Formula to aid with the scrolling of the camera or insert your own formula.

Summary

In conclusion, you can follow these steps to implement a block-esque scrolling system

1. Split the frame into sub-regions through some method
2. Adjust the camera when a sub-region is left or a new sub-region is entered
3. (Optional) Freeze all activities until the camera scrolling is completed

You will need to be cautious when programming the code but even programming the code is easy work. Hopefully this tutorial introduced new concepts or refined pre-existing concepts about how to implement a specific style of scrolling. Check out the two interactive examples below to glimpse an example of scrolling without and with easing!

Interactive Demo of Block Scrolling with Instant Jumps
Interactive Demo of Block Scrolling with Instant Jumps
Use the arrow keys to move. Move towards the edge of the frame and observe the effect
Interactive Demo of Block Scrolling with Easing
Interactive Demo of Block Scrolling with Easing
Use the arrow keys to move. Move towards the edge of the frame and observe the effect

Rate This Tutorial
Vote: 4.5/5
If you have read this tutorial, rate it from poor (1) to average (3) to great (5)!
Back to content | Back to main menu