Thursday, February 19, 2015

How to make a scroll parallax with zoom

I have seen a lot of tutorials/answers about how to make a scroll parallax. But I have not seen the zoom part anywhere. Here I'm going to show my approach to a scroll parallax with zoom effect.

Scroll parallax in Unity.

One way of doing scroll parallax in unity is to create a new Gameobject and place the objects you want to have the parallax effect as childs. Like this:

Then, you make a script to handle the parallax movement and attach it to the gameobject you just created. This script will "transform" our gameobject into a sort of a layer. Then, from the script we will move the layer to the correct position, taking into account the amount of parallax effect desired.

Vertical and horizontal parallax.

This is the script you need to attach to our "layer" object:

using UnityEngine;
using System.Collections;

public class ScrollParallax : MonoBehaviour 
   public Camera camera;

   public float xParallax = 0.4f;
   public float yParallax = 0.4f;
   void LateUpdate () 
      Vector3 tempPos = transform.position;

      tempPos.x = camera.transform.position.x * xParallax;
      tempPos.y = camera.transform.position.y * yParallax;

      transform.position = tempPos;

As you see is pretty straightforward. You can set the camera from the editor or use Camera.main, that's up to you. Note that we put the [ExecuteInEditMode] so the placement of the objects is WYSIWYG. Just move the camera to the desired position in the editor and place the background objects as you like.

For the parallax effect we use two variables:
  • xParallax: control the amount of parallax to the x axis.
  • yParallax: control the amount of parallax to the y axis.

So depending on the values, the layer will move that amount with respect to the camera.
  • parallax=1: means the layer will move the same amount as the camera. The effect is like having a static background. 
  • parallax=0: means the layer does not move, So it will be like a normal image placed on the scene, no movement applied.
  • 0<value<1: Values closer to 0 appears to be in the foreground, while values closer to 1 appears to be further away.
  • other values can be useful for fancy and trippy effects. Just try it, experiment!

This is the result:

  • Be sure the camera is in orthographic mode.
  • After you have attached the parallax script you will be unable to move the layer object. You need to move the child objects to place them.

Adding zoom.

Until now it's a pretty straightforward-everyday scroll parallax. For the zoom part, we need to add a couple variables, set the size of the layer, and set the resulting position taking into account the displacement derived from the scale applied.

using UnityEngine;
using System.Collections;

public class ScrollParallax : MonoBehaviour 
   public Camera camera;
   public float referenceSize = 2;

   public float xParallax = 0.2f;
   public float yParallax = 0.2f;
   public float sizeParallax = 0.2f;
   void LateUpdate () 
      float sizeRatio = (camera.orthographicSize/referenceSize);
      float newSize = (sizeRatio - 1) * sizeParallax + 1;
      Vector3 tempScale = transform.localScale;
      tempScale.x = newSize;
      tempScale.y = newSize;
      transform.localScale = tempScale;

      Vector3 tempPos = transform.position;

      tempPos.x = camera.transform.position.x * (1 -newSize + newSize*xParallax );
      tempPos.y = camera.transform.position.y * (1 -newSize + newSize*yParallax );
      transform.position = tempPos;

To zoom in/out you only need to change the size of the camera. After changing the size value, the layer will be set to the correct scale and position.

To make the zoom part we added a couple more variables:
  • sizeParallax: variable to control the amount of parallax applied, this time to the zoom. 
  • referenceSize: variable set as the reference size for the camera (the size the camera will normally have). Of course you can set the reference size on the start method of the script. But for testing purposes is easier to set it manually.

As with the parallax variables, the sizeParallax has different effects depending on his value:
  • sizeParallax = 0: No parallax effect applied to zoom. The objects will zoom normally.
  • sizeParallax = 1: Full size applied. If you make the camera twice as big, the layer will also be twice as big. The effect is that even though the camera zooms, the layer and his contents keeps the same in the screen.
  • for the rest of values just play with them for strange effects. 

And the result:

  • Although you can set the xParallax, yParallax and sizeParallax individually, if you don't want strange effects you must set them to the same amount (or be extra-careful).
  • Recommended values for (xParallax, yParallax, sizeParallax):
    • (1,1,1) for background objects.
    • from (0,0,0) to (1,1,1) to objects between foreground and complete background.
    • (0,0,0) for objects belonging to the foreground.
    • negative values for objects in front of the foreground.

I hope you like this mini tutorial. Bye!

Tuesday, February 17, 2015


We have a little new game in Google play store.

Check it out on Google Play:

Do you like it? Have some suggestions?

Leave a comment and let us know what do you think.

Wednesday, February 11, 2015

Problems with Google Play Plugin for Unity

Well, it seems Google Play Android Plugin has a few issues.

If you call Application.Quit() after a Google Play authentication, the app freeze for about 5 seconds. Too bad! That an ANR to the face. There's an open issue on github. Fortunately, there's a little workaround.

Tuesday, February 10, 2015

Rhythm teacher

Learn and improve your sight reading with this app. Practice the notes timings and rhythms in a "guitar-hero" like type of game. Learn about compasses, note durations and more. Compete in the online challenge with other users to see which one gets the hi-score.

Are you interested in learn or improve your music sight reading? Do you want to learn the basis of rhythm in music? If so, this app is for you, click in the link below.

Get this app for free in Google Play Store:

Do you like the app? Do you want more levels? Please download and Rate the app. More levels are coming in the future.