Parallax effect

[bluemagica]

is there any good equations to create a parallax effect(I don't mean a pixel perfect one)?....something that calculates the x position of an image relative to another object, say the camera? (I don't want to use fp10 and z axis)

[ickydime]

I don't think you want to compare the x position. But you could assign a psuedo "z" attribute (not one baked into FP10) to your movies and move their x position based on how far back you set the object's z.

[bluemagica]

yeh, but my problem in the calculation is the object relative to the background. say I have just one background(just assume it for now), which is 1300px, and the stage is 400px....so I will be drawing only a 400px image at a time....so i really can't use distance of the player from the edge of the of the background to calculate the bg movement. so how should i go about doing the calculation?

[ickydime]

this may not be the most accurate method... but I would suggest forgetting about the character's x in relationship to the background's x. Focus on Z!

Lets say your character has a z of 0.
Your mid ground has a z of 50.
You background has a z of 100.


Your character's xSpeed = 4;

On render you could do the following:

char.x += xSpeed*(200-char.z/200); // +4
midGround.x += xSpeed*(200-char.z/200); //+3
background.x += xSpeed*(200-char.z/200); // +2

[bluemagica]

what is xspeed actually? to me it is movement in pixels which is applicable only when the character is "moving", afterall the bg won't scroll when he is standing. Assuming this, i can use xspeed when I know exactly how he is moving like keypress event, but what if that is unknown, like say being blasted from a bomb, with the help of a physics engine?

[ickydime]

xSpeed may be a bad variable name. It is the amount that the character is moving along the x Axis. (And now that I think about it, the character probably will not move. It will stay in the center of the screen and only the level will move...)

If nothing is happening then xSpeed is 0. And on render nothing will move. If an arrow keyPress occurs you could set xSpeed to 10 or -10. If you are using a mouse for controls and a mouse click occurs you could find how far the character is from the click and set the xSpeed accordingly. If the environment causes the character to move... be it a bomb, moving platform, etc... then change the xSpeed accordingly.

Ex. xSpeed starts at 0. If the user holds the right arrow key then xSpeed += 10. The character is on a moving platform that is moving to the left by 5 pixels a frame: xSpeed -= 5; On this particular frame render, the character should move 5 pixels to the right. The foreground should be a full 5 pixels. the midground should be a percentage of that. the background should be even a smaller percentage. percentages are based off of an assigned Z as mentioned above.

This is all rough and pseudo code. But I hope you get the general gist. Which is to run through all of your calculations for movement, physics, etc. Come up with a number that the character will be moving along the x. Apply the number to the backgrounds based on their z.

[bluemagica]

hmm, k, i will give it a try......

[Squize]

Wow there's some in depth thinking here.

I just do a simple scrollSpeed/2 and that's it. So long as the more distant layers move increasingly slowly that's all you need.

Squize.

[ickydime]

scrollSpeed... that makes more sense than xSpeed. all that thinking was getting in the way.

[bluemagica]

After experimenting a bit I came up with a simple scrolling code, but it doesn't work, any ideas why?

Executes in enterFrame event

public function scroll():void
		{
			if (Math.round(currentSpeed) != 0)
			{
				currentSpeed += currentSpeed > 0? -0.1:0.1;

				for (var i:uint = 0; i < bkgArr.length; i++ )
				{
					if ((currentSpeed > 0 && (this.x+currentSpeed) < 0) || (currentSpeed<0 && ((this.x+currentSpeed+this.width)-stage.stageWidth)>0))
					{
						this.x += currentSpeed;
						bkgArr[i][0].mc.x += (currentSpeed * bkgArr[i][0].speed);
						bkgArr[i][1].mc.x += (currentSpeed * bkgArr[i][1].speed);
						//check out of left boundary
						if (bkgArr[i][0].mc.x <= -bkgArr[i][0].mc.width)
						bkgArr[i][0].mc.x = bkgArr[i][1].mc.x + bkgArr[i][1].mc.width; //wrap to right
						if (bkgArr[i][1].mc.x <= -bkgArr[i][1].mc.width)
						bkgArr[i][1].mc.x = bkgArr[i][0].mc.x + bkgArr[i][0].mc.width;
						//check out of right boundary
						if (bkgArr[i][0].mc.x >= stage.stageWidth)
						bkgArr[i][0].mc.x = bkgArr[i][1].mc.x - bkgArr[i][0].mc.width; //wrap to left
						if (bkgArr[i][1].mc.x >= stage.stageWidth)
						bkgArr[i][1].mc.x = bkgArr[i][0].mc.x - bkgArr[i][1].mc.width; //wrap to left
					}
				}
			}
		}

Executes in keydown event for left and right arrow keys

		//Scroll towards left
		public function scrollLeft(speed:Number = 6):void
		{
			var sp:Number = Math.abs(this.x) < speed?Math.abs(this.x):speed;
			if ((this.x+sp) < 0)
			{
				currentSpeed = sp;
			}
			else
			{
				this.x = 0;
				currentSpeed = 0;
			}
		}

		//Scroll towards right
		public function scrollRight(speed:Number = -6):void
		{
			var dist:Number = (this.x + this.width) - stage.stageWidth;
			var sp =dist < speed?dist:speed;
			if ((dist+sp)>0)
			{
				currentSpeed = sp;
			}
			else
			{
				this.x = stage.stageWidth-this.width;
				currentSpeed = 0;
			}
		}

Output:-
http://www.megaswf.com/view/158bbfd6...6ab34253e.html


The wrapping seems to be off, any ideas?