00:00
00:00
Newgrounds Background Image Theme

Chan99 just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

Need help with parallax!

461 Views | 11 Replies
New Topic Respond to this Topic

Need help with parallax! 2014-03-11 18:05:32


So my island is 1500x1100. My viewable screen is 800x400. When I move my mouse around, the island scrolls left down up and right. I want to place objects that are independant of the map, that move around at the same frequency as the map. However, when I apply the same code to another (much smaller) object, the object behaves erratically. It almost follows my mouse instead of being fixed to the map like it should... Can anyone help my keep my object grounded to the map?

Here's the code, with comments for comprehension:

var speed:Number = .05; //range .01-1

this.addEventListener(Event.ENTER_FRAME,parallax,false,0,true);//happens every frame
 
function parallax(e:Event):void{
    var myPosx = mouseX/800; //width
	var myPosy = mouseY/400; //height
   
    movexy(island,myPosx,myPosy);//object island is the main map, behaving normally
    movexy(deviceofpower,myPosx,myPosy);//an object on the map, much smaller than the map, almost following my mouse
	
	
}

function movexy(me:MovieClip,myPosx:Number, myPosy:Number){//this function affects movement, I don't really understand it.
    me.maxwidth = stage.stageWidth - me.width;
    var destinationX = myPosx * me.maxwidth;
    me.x += speed * (destinationX - me.x); //easing
	
	 me.maxheight = stage.stageHeight - me.height;
    var destinationY = myPosy * me.maxheight;
    me.y += speed * (destinationY - me.y); //easing
	
	
}

I've been working for months on a game. However I'm stuck and I don't know what to do. Help is greatly appreciated!

Response to Need help with parallax! 2014-03-11 19:29:31


At 3/11/14 06:05 PM, BelgarionRiva wrote: I've been working for months on a game. However I'm stuck and I don't know what to do. Help is greatly appreciated!

Can you just addChild the device of power to the island and then move the island? Your positions are changing differently because the max width of the thing is less than the max width of the island.

Response to Need help with parallax! 2014-03-11 20:38:41


I somewhat fixed it like this:

island.x += 0.05 * ((mouseX/800 * -700) - island.x); //-700 +1500 = 800
	island.y += 0.05 * ((mouseY/800 * -400) - island.y); 
		
	deviceofpower.x+= 0.05 * ((mouseX/800 * -697.5) - island.x);
	deviceofpower.y+= 0.05 * ((mouseY/800 * -398.25) - island.y);

The deviceofpower object now 'snaps' to the map, and the map is scrollable. Problem is, the deviceofpower follows the motion of the map veeeery slowly. (like 0.01 inch/sec). Any way to dampen this motion a LOT, or to just make the object fully follow the map and not deviate?

Response to Need help with parallax! 2014-03-11 20:54:10


At 3/11/14 08:38 PM, BelgarionRiva wrote: I somewhat fixed it like this:

I think you're going about it in a weird way. Parallaxing in general is

x += displacement or speed * coefficient;

Displacement would be how much the mouse moves in your case. If 2 objects should move together, their coefficients would be equal. If something in the background moves more slowly, then its coefficient is less than the other one.

Response to Need help with parallax! 2014-03-11 22:41:15


island.x += 0.05 * ((mouseX/800 * -700) - island.x); //
deviceofpower.x+= 0.05 * ((mouseX/800 * -700) - island.x);

These two objects should move the same, since they have the same coefficient and the same speed. However, the object is sorta hovering in place and is always moving a little. It's not 100% "bound" to the island.

I made a vid to show what I mean.

The background is behaving normally, but the buildings are just drifting away in the same direction as the island. If the island doesn't move, the objects are sorta trying to center themselves on god knows what...

Response to Need help with parallax! 2014-03-11 22:44:24


At 3/11/14 10:41 PM, BelgarionRiva wrote: These two objects should move the same, since they have the same coefficient and the same speed. However, the object is sorta hovering in place and is always moving a little. It's not 100% "bound" to the island.

Well, they can't move the same because you alter island.x before using it in the second line.

Response to Need help with parallax! 2014-03-11 22:50:59


Yeah, just figured that out. Stupid of me. It looks like this now.

It's tons better, but for some reason, it's slightly drifting to the left... Here's the code now, executing every frame:

tempx=island.x
	tempy=island.y
	
	island.x += 0.5 * ((mouseX/800 * -700) - tempx);
	island.y += 0.5 * ((mouseY/800 * -400) - tempy); 
		
	deviceofpower.x += 0.5 * ((mouseX/800 * -700) - tempx);
	deviceofpower.y += 0.5 * ((mouseY/800 * -400) - tempy);

Response to Need help with parallax! 2014-03-11 23:04:50


Tried like this instead:

tempx=0.5 * ((mouseX/800 * -700) - island.x);
	tempy=0.5 * ((mouseY/800 * -400) - island.y);
	
	
	island.x +=tempx
	island.y += tempy
		
	deviceofpower.x += tempx
	deviceofpower.y += tempy

It's still slowly drifting towards the top left corner... Could it have to do with the difference in image sizes?

Response to Need help with parallax! 2014-03-11 23:28:55


At 3/11/14 11:04 PM, BelgarionRiva wrote: Tried like this instead:

tempx=0.5 * ((mouseX/800 * -700) - island.x);
tempy=0.5 * ((mouseY/800 * -400) - island.y);


island.x +=tempx
island.y += tempy

deviceofpower.x += tempx
deviceofpower.y += tempy

It's still slowly drifting towards the top left corner... Could it have to do with the difference in image sizes?

I would need to see the actual swf and code. Trace values to see what they are versus what they should be. Check if the island is moving too. If tempx isn't zero when you stop moving the mouse after a while, then your tempx formula doesn't work. It doesn't seem like there's a way for it to be zero considering both values are negative.

Response to Need help with parallax! 2014-03-11 23:40:11


Wow this really helped!
For some reason, when I don't move, x should be 0. But it's not, it's: -0.037499999999994316. I'll just offset that value if I can't find what's causing it.

Thank you so much!!

Response to Need help with parallax! 2014-03-12 00:05:08


Yeah no... Tempx is rarely 0, sometimes something really small negative, sometimes a little smaller negative, but never entirely 0. This is causing an offset for the other objects...

With a screen size of 800x800 px, and an island picture of 1500x1000, how would you code this in a non-complicated way that doesn't yield negatives? (I'm trying to scroll the map when the mouse moves).

Response to Need help with parallax! 2014-03-12 01:00:23


Someone suggested that I offset based on updated mouse position, rather than map position. Worked wonderfully, since the object's position was constantly being updated. Thanks MSGhero!