The Mugen Multiverse
Would you like to react to this message? Create an account in a few clicks or log in to continue.


Welcome!!! - Bienvenidos!!! - ( We hope you will get involved in the MMV Community which is dedicated to having fun with Mugen ) - Bienvenidos!!! - Welcome!!!
 
PortalHomeFAQMemberlistLatest imagesUsergroupsSearchRegisterComic WIP TrackerDownloadsLog inChat
Website Navigation Help
Translate the Website
Log in
Username:
Password:
Log in automatically: 
:: I forgot my password
Latest topics
» Green Goblin by Chuchoryu FIX MMV/cormano EASTER EVENT
Parallax Interpolation Emptyby Shining Today at 1:36 am

» MMV Easter Egg Event 2023 - Happy Easter Everyone!!
Parallax Interpolation Emptyby Shining Today at 12:32 am

» Cyborg Superman by yolomate for Easter Egg event 2024
Parallax Interpolation Emptyby volzzilla Yesterday at 11:33 pm

» Shriek mugen char by Gartanham
Parallax Interpolation Emptyby gartanham Yesterday at 10:30 pm

Special Features at MMV




Chat on MMV w/ Discord

Video Content Creation Reference
Search
 
 

Display results as :
 
Rechercher Advanced Search

 

 Parallax Interpolation

Go down 
2 posters
AuthorMessage
Aℓίcℯ

Aℓίcℯ


Posts : 160
Join date : 2016-09-11

Parallax Interpolation Empty
PostSubject: Parallax Interpolation   Parallax Interpolation EmptyJune 30th 2018, 8:23 pm

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.

Parallax Interpolation Cryptprev_by_murdertroyd-dadbk04--->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.
Parallax Interpolation VB8KGVD




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
Parallax Interpolation DqNjQo6

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:


Last edited by Aℓίcℯ on July 18th 2018, 4:26 pm; edited 10 times in total
Back to top Go down
Doom

Doom


Posts : 10403
Join date : 2014-08-22

Parallax Interpolation Empty
PostSubject: Re: Parallax Interpolation   Parallax Interpolation EmptyJuly 1st 2018, 2:01 pm


Impressive tutorial ... clap clap
This will be very useful for the creators of stages in our forum ... yes
Thanks for sharing ... Parallax Interpolation 705151839
Back to top Go down
https://doom783.wixsite.com/doomismia
Aℓίcℯ

Aℓίcℯ


Posts : 160
Join date : 2016-09-11

Parallax Interpolation Empty
PostSubject: Re: Parallax Interpolation   Parallax Interpolation EmptyJuly 4th 2018, 11:06 pm

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:
Back to top Go down
Aℓίcℯ

Aℓίcℯ


Posts : 160
Join date : 2016-09-11

Parallax Interpolation Empty
PostSubject: Re: Parallax Interpolation   Parallax Interpolation EmptyJuly 6th 2018, 9:39 pm

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
Parallax Interpolation DqNjQo6

Process:

Spoiler:

Back to top Go down
Aℓίcℯ

Aℓίcℯ


Posts : 160
Join date : 2016-09-11

Parallax Interpolation Empty
PostSubject: Re: Parallax Interpolation   Parallax Interpolation EmptyJuly 11th 2018, 11:17 am

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:
Back to top Go down
Aℓίcℯ

Aℓίcℯ


Posts : 160
Join date : 2016-09-11

Parallax Interpolation Empty
PostSubject: Re: Parallax Interpolation   Parallax Interpolation EmptyJuly 18th 2018, 4:28 pm

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:
Back to top Go down
Sponsored content





Parallax Interpolation Empty
PostSubject: Re: Parallax Interpolation   Parallax Interpolation Empty

Back to top Go down
 
Parallax Interpolation
Back to top 
Page 1 of 1
 Similar topics
-
» WHERE CAN I GET PARALLAX
» WHERE CAN I GET PARALLAX AT????
» Parallax and Starro
» Parallax Project
» PARALLAX ZERO HOUR

Permissions in this forum:You cannot reply to topics in this forum
The Mugen Multiverse :: Mugen Related :: Mugen Resources-
Jump to: