Main menu:

Last Updated: July 3rd, 2014

Quick Links:

Example of Block Scrolling

Example of old Zelda-esque block scrolling

Concept

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

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

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.

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, Abs( Distance between values ) ) * ( ( Distance between values ) / Abs( Distance 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, Abs( Distance 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 ) / Abs( Distance 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)!