Unity3D : Simple Parallax Scrolling

parallax scrolling

is a special scrolling technique in computer graphics, creating an illusion of depth in a 2D video game and adding to the immersion. The key of parallax scrolling is background layer move by the camera slower than foreground layer.  We will create simple parallax scrolling effect, using UV Scrolling technique and Object Scrolling technique,.

UV Scrolling is a method to create looping animation by moving UV Textures according to textures planar position. We could do this by modifying offset of x-coordinate and y-coordinate of textures. UV Scrolling can be used to animate water flow, river, waterfall, rain, background scrolling, etc

Object Scrolling is a method to create looping animation by moving Object according to world position. After object isn’t seen on the scene / camera, we would move it’s to initial position, so it will create looping object animation.

Here is our final example of the simple parallax scrolling, we could download project file in the end of post.


The Code

UV Scrolling

#pragma strict
var isVertical : boolean = false;
var scrollSpeed : float = 20;

function Start () {
}

function Update () {
	var offset : float = Time.time * -scrollSpeed;
	if (isVertical) {
		renderer.material.mainTextureOffset = Vector2 (0, offset);
	}else{
    	renderer.material.mainTextureOffset = Vector2 (offset, 0);
    }
}

There is 2 key variable in UVScrolling.js, scrollSpeed  used to define speed of movement, negative value will scrolling to left or down, positive value will scrolling up or right. isVertical used to define whether we would use vertical scrolling or horizontal scrolling, ‘false’ value will scrolling vertically (up/down) and ‘true’ value will scrolling horizontally (left/right)

Object Scrolling

#pragma strict

var speed : float;
var resetDistance : float;
var initialDistance : float;
var isVertical : boolean = false;

function Start () {

}

function Update ()
{
	var move : float = speed * Time.deltaTime;
	if (isVertical) {
		transform.Translate(Vector3.down * move, Space.World);
		if (transform.position.y < resetDistance)
		{
			transform.position = Vector3(transform.position.x, initialDistance, transform.position.z);
		}
	}else{
		transform.Translate(Vector3.left * move, Space.World);
		if (transform.position.x < resetDistance)
		{
			transform.position = Vector3(initialDistance, transform.position.y, transform.position.z);
		}
	}
}

There is 4 key variable in ObjectScrolling.js, speed used to define speed of movement, negative value will scrolling to left or down, positive value will scrolling up or right. isVertical used to define whether we would use vertical scrolling or horizontal scrolling, ‘false’ value will scrolling vertically (up/down) and ‘true’ value will scrolling horizontally (left/right), initialDistance used to define initial position where object will be started all over again when object is out of the scene. initialDistance value is depend to our scrolling orientation, if we use vertical scrolling, so we put position-Y value into our initialDistance variable, else we put position-X value into our initialDistance. resetDistance used to define position where object is out of the scene. resetDistance value is depend to our scrolling orientation just like initialDistance.

so, here is our download-able project file, tweet and Get it


Tweet&getit is powered by Viuu

22 Opinion to this post

  1. Bagusflyer says:

    Hello, thanks for your blog. I’m new to Unity3D and I’d like to implement a parallax effect in my game. Is it possible to share your Unity project for me? I can’t download it from the TweetAndGet web site. It’s totally blank. Thanks.

  2. Ito says:

    It’s impossible to get access to the source. Sounds a very nice snippet, BTW.

  3. Nathan says:

    The tweet and get it link does not work. I cannot get your file. I really would like to use your parallax scrolling as it is superbly done. If you could email me the project code instead that would be great. Thank you. Sorry for bad english, it is not my first language

  4. Andre says:

    Hey I tried “tweeting and getting it”, but I didn’t end up getting the project file. If its possible can you please send me the project file. Much appreciated.

    Cheers!!

  5. FU says:

    I haven’t been able to download the project, and I did all the steps.

    Please fix this as soon as possible.

    Thanks

  6. Mohomed says:

    Your “tweet & get” button isn’t working. Could you please post a link as I am interested in the project file. Thanks!

  7. Vhalik says:

    I tried the tweet and get it link, but it would not let me download the file. Is there another way of downloading the project?

  8. DarkSkies says:

    Link doesn’t work anymore

  9. catt says:

    Hello. I find that your project is really useful for mine. However, I cannot download the project file. Can u email to me?

    Thanks :)

  10. ttnn says:

    Hi, Tween & Get it! does’nt work. It doesn’t redirect unfortunately. Is it possible to get project code? Thank you.

  11. Julia Agnes says:

    Amazing! thanks for this tutorial)

  12. Siddu says:

    Hi,

    I am not able to download the “Simple Parallax Scrolling” project files, I cannot see the app in app tab of my twitter.

    Thanks,
    Siddu

  13. This is AMAZING, congratulations!
    But Tweet and Get it isn’t working :(

  14. Alex says:

    Yeah, that widget isn’t working :/

  15. Anna says:

    I can’t download it. Please fix. Thank you!

  16. Artem says:

    It is a usefull post, but  we could not download project file in the end of post. We have problem with twitandgetit It is in error 103 (net::ERR_CONNECTION_ABORTED)

  17. Wagner says:

    the tweetandgetit link is off =/

  18. hwang won chul says:

    good

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment moderation is enabled. Your comment may take some time to appear.