Parallax Interpolation

Ok, so I was helping someone to know how parallax works for the Mugen Class section at Mugen Guild.
There are some "tutorials" around the internet, I've checked several of them but all they do is just trial & error without showing how to calculate the values, & probably they don't even know what they're doing.

Doing it by trial & error can work when doing very simple stages, although it can get annoying if one wants to make more complex stuff, so I'm copy-pasting the breakdown I made here as well (& in a couple more places).

There are two ways of doing this, Width and Xscale, I'll just cover Width for now. VIB's tutorial covers Xscale (http://mugenguild.com/forum/topics/parallax-tutorial-vib-116138.msg1119796.html#msg1119796), I feel it falls kind of short on explanation, not really hard, although just very few people have made use of it's potential. I may cover Xscale, along with ceiling parallax, scaledelta, animated parallax, vertical parallax & delta that changes (late 2 are workarounds).

For anyone who doesn't know what parallax is, it refers to the effect in which the position of some object appears to change when is viewed from different positions. In mugen, when we refer to parallax we basically refer to this:

^This is an example of a 100% parallax BG (not finished at the time of the video).

A bad parallax will make your characters or any other BG object slide & look weird while scrolling.

---->this is bad parallax.

A good parallax matches with everything and helps to give depth.

---->this is good parallax.

Unlike Xscale (which is used for floors with a given perspective), Width is used mainly for tiled floors, or floors without perspective, the advantage of Width is that it allows a wider distortion without shearing details.

--->this was made using Xscale.

--->this was made using Width & a tiled floor without perspective.

---

Tutorial starts here.

Calculating Zoffset & Deltas: Deciding a starting & ending delta for the parallax floor, one can calculate the Zoffset of the characters and the delta of any element positioned on the floor.
Example used:
--->this was made using width & a floor without perspective (not tiled).

Process:

Spoiler:

I'll leave this here for anyone who's familiar with linear interpolation/extrapolation. This is the whole reasoning of these 2 examples, who knows, it may be easier to understand like this.

---

Mapping with horizontal rows: Let's say I already calculated my Zoffset and want to add one more parallaxed row on top of my bottom parallax, I'd need to calculate the X delta & top width of the parallax behind my first parallax.
Example used:


Process:

Spoiler:

---

With the same method for this example, I'm using 4 parallaxed horizontal rows, and calculating them so that each one aligns with the previous one.
|
V


Process:

Spoiler:

---

Animated Parallax:


Using Width, once you have calculated your parallax values, you just need to code it like you would code a normal animation, but instead of Spriteno, you use Actionno.

Spoiler:

However, this only works with Width & it only was implemented in 1.1, it won't work in 1.0.
By using Xscale you need to make use of BG controls (whether you use 1.0 or 1.1).

Reminder: Xscale is used for floors with a given perspective, Width is used mainly for tiled floors, or floors without perspective.

For Xscale (or anything below 1.1), once you have calculated your parallax values you assign an ID to each frame that makes up the parallax.
Parallax values are the same except for the Spriteno & the ID.

Spoiler:

My animation is formed by 8 sprites, each frame lasts 8 ticks, so the whole animation lasts 64 ticks = looptime 64.
Basically you enable & disable each frame in 8 ticks intervals.

The first frame activates at time 0 & disables at time 8.
The second frame starts disabled at time 0, enables at time 8 & becomes disabled at time 16.
The third frame starts disabled at time 0, enables at time 16 & becomes disabled at time 24.
this goes on until loop is completed.

Spoiler:

Here's another way to code it.

Spoiler:

---

Scaledelta:
Refers to the amount to change the scale of the element for each unit of camera movement, you calculate it dividing the delta range by the sprite width multiplied by the sprite delta.

Spoiler:

Part 2

Mapping with horizontal rows: Let's say I already calculated my Zoffset and want to add one more parallaxed row on top of my bottom parallax, I'd need to calculate the X delta & top width of the parallax behind my first parallax.
Example used:


Process:

Spoiler:

Part 2.5

With the same method for this example, I'm using 4 parallaxed horizontal rows, and calculating them so that each one aligns with the previous one.
|
V


Process:

Spoiler:

Part 3

Animated Parallax:


Using Width, once you have calculated your parallax values, you just need to code it like you would code a normal animation, but instead of Spriteno, you use Actionno.

Spoiler:

However, this only works with Width & it only was implemented in 1.1, it won't work in 1.0.
By using Xscale you need to make use of BG controls (whether you use 1.0 or 1.1).

Reminder: Xscale is used for floors with a given perspective, Width is used mainly for tiled floors, or floors without perspective.

For Xscale (or anything below 1.1), once you have calculated your parallax values you assign an ID to each frame that makes up the parallax.
Parallax values are the same except for the Spriteno & the ID.

Spoiler:

My animation is formed by 8 sprites, each frame lasts 8 ticks, so the whole animation lasts 64 ticks = looptime 64.
Basically you enable & disable each frame in 8 ticks intervals.

The first frame activates at time 0 & disables at time 8.
The second frame starts disabled at time 0, enables at time 8 & becomes disabled at time 16.
The third frame starts disabled at time 0, enables at time 16 & becomes disabled at time 24.
this goes on until loop is completed.

Spoiler:

Here's another way to code it.

Spoiler:

Part 4

Scaledelta:
Refers to the amount to change the scale of the element for each unit of camera movement, you calculate it dividing the delta range by the sprite width multiplied by the sprite delta.

Spoiler: