Flash: Learning to Parallax Scroll

by ChazDragoon

in Works in Progress

< 'WIP: Moza sprite ' by ChazDragoon
> 'StarSword Legend: Main Character concept 2' by ChazDragoon

Description

May 14th 2008
Tags:
anime background chazdragoon educational experimental flash manga parallax scroll sprite
Views:
109
Comments:
4
Score:
0
Favorites:
0
So i've been dabbling in flash..and i managed to figure out how ot parallax scroll with sprite backgrounds.

I had to edit the backgrounds a bit since i had to:
a: split them up into seperate images (foreground, middle and back)
b: actually detail edit the city background since, if scrolling with just a blue undertone, it would be shoddy and not good.
c: cut, edit and measure to ensure perfect looping without any noticeable "seams"
d: This background (as you can tell is from Megaman and Bass) doesnt have a long pathway.

Now that i've figured otu Parallax Scrolling, i need to figure out how to control it to move according to character movement and how to stop it for cutscenes and stuff.

If anyone has a -GOOD- tutorial, I'd love to see it.

Oh the tutorial i followed for this is at:
http://www.trainsimpleonline.com/demo/game_dev_demo.php#

I'd love to go with the other tutorials this guy made, but they cost money. =(

Comments

Miyao Miyao Says:

wow neat!

lonewolfh Says:

sweet, now all it needs to make it cute is putting me running like sonic in it

Virangelus Says:

Very good job!

Nareion Says:

Quick parallax math:

1. Measure how much each scroll moves in a given time.
Example: street 3p/s, trees 1p/s, city 0.3p/s (p/s means pixel per second)

2. Now calculate the movement quotients relative to a fixed scoll (you should use the scroll where the character is standing, but pure maths say it could be any). This is simply doing scroll/(fixed scroll).
Example: tree/street=1/3, city/street=0.3/3=0.1

3. Each time you move the character, you just use the quotients to move the scrolls as needed.
Example: the character moves 10 pixels. street moves: 10, tree moves: 10*1/3, city moves:10*0.1


In short, the trick is just to mantain the relation the parallax uses.