1
\$\begingroup\$

I'm wondering how to imitate the camera movement like in the gif below. It´s from a Android game.

This game for example (via GIPHY)

Actually, I am not sure if this can be called a parallax effect, but it is the only word I can think of.

My code until now:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RotateAroundTarget : MonoBehaviour {

public Transform target;    // The object to follow
public Transform background;
public Transform foreground;
public float speedMod = 20.0f;  // Camera speed
public float topMargin = 0.2f;  // Top rotation margin

// The position of the target
private Vector3 point;
// Point if the camera is rotating to the left
private bool toLeft = false;

// Use this for initialization
void Start () {
    point = target.transform.position;
    transform.LookAt (point);
}

// Update is called once per frame
void Update () {


    // The camera is moving to the right until it reaches the top margin, then it changes it movement direction
    if (!toLeft) {
        transform.RotateAround (point, new Vector3 (0f, 1f, 0f), Time.deltaTime * speedMod);
        rotateBackground (1);
        rotateForeground (-1);
        Debug.Log ("Izquierda");
        if (transform.rotation.y >= topMargin) {
            toLeft = true;
        }
    } else {
        transform.RotateAround (point, new Vector3 (0f, -1f, 0f), Time.deltaTime * speedMod);
        rotateBackground (-1);
        rotateForeground (1);
            Debug.Log ("Derecha");
        if (transform.rotation.y <= -topMargin) {
            toLeft = false;
        }
    }
}


// Direction = 1 (left) | -1 (right)
public void rotateBackground(float direction){
    background.transform.Rotate (new Vector3(0, Time.deltaTime * (speedMod * 2) * direction, 0));
}

public void rotateForeground(float direction){
    foreground.transform.Rotate (new Vector3(0, Time.deltaTime * (speedMod / 2) * direction, 0));
}
}

But what I obtain in Unity Editor is this: Result in Unity Editor (via GIPHY)

Any suggestion on how to get this? Any help would be appreciated.

\$\endgroup\$
  • 2
    \$\begingroup\$ I don't see any parallax in the reference gif, but it might just be too low-res to be obvious. Are you asking about the "shakycam" effect, where the camera seems to wobble and wander randomly rather than holding still? \$\endgroup\$ – DMGregory Apr 18 '17 at 23:02
  • \$\begingroup\$ Yes, I think it's similar but smoother. It's like: there is a background image and a foreground image (the fence). When you move the device, a smooth relative movement of the background to the foreground happens, based on the data received from the accelerometer. But I can't wonder how to achive this corectly... \$\endgroup\$ – chick3n0x07CC Apr 19 '17 at 12:49
  • \$\begingroup\$ That has nothing to do with parallax, those can be separate objects that are actually in the background / foreground and you don't have to do anything other than rotate the camera around the objects. \$\endgroup\$ – John Hamilton Apr 20 '17 at 5:26
  • \$\begingroup\$ I've just remembered this page: matthew.wagerfield.com/parallax. Based on the cursor position, background and foreground move. @JohnHamilton Maybe you are right, in fact that's what I'm trying to do with my code, but it doesn't works well and I can't see where the error is. \$\endgroup\$ – chick3n0x07CC Apr 21 '17 at 11:28
  • \$\begingroup\$ I'm not sure what your code's supposed to do but if you're trying to move the background / foreground around to create that "parallax.js" effect then you just need to move the camera around. That's it. Have 3D objects that are not really close to each other and move your camera around. \$\endgroup\$ – John Hamilton Apr 21 '17 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.