Let the camera move with a Scrollbar

Since a while I’m learning to program a game with Unity, but I’m still a bit stupid with C#…

Well, I’m trying to let the camera move over the x-axis with a scrollbar. I’ve tried to find a script online and at the forums let the camera move, but still didn’t found anything.

My idea is just simple; move the camera over a picture, and that picture is very long.

Ow, yeah, I don’t want to use a scrollbar that automatically pops up when you run the game in the Editor, becouse I want to customize it. So I need a component that already exists that controls the camera with a C# script.

It would be great if anyone could help me!

Thanx,

Vliegenier04

//Edit: I don’t know if it’s smart to put it in 2D, or Scripting, please forgive me :wink:

Learn about Canvas, ScrollRect, and ScrollBar.

https://docs.unity3d.com/Manual/script-Scrollbar.html

If you absolutely must move the camera, and not the image, then you can use ScrollBar to setup your scrollbar visual. Then in a script you can add a listener to ScrollBar’s onValueChanged event, and move the camera based on the scrollbar’s new value.

1 Like

Great, learned it, but there’s still a little problem; my scrollbar won’t move at all! I fixed the space it got to move and still it won’t move…

Here are my files:

3170527--241530--upload_2017-8-3_16-2-18.png

3170527--241531--upload_2017-8-3_16-2-54.png

3170527--241532--upload_2017-8-3_16-3-29.png

What am I doing wrong? :frowning:

I see what you were going for, adding the camera as a child of the ScrollRect, but it doesn’t quite work that way.

The “content” field is intended to be a container of RectTransform type objects that will be scrolled. For example, in a scrollable list of buttons, all the buttons would go underneath a “content” parent object.

I don’t think your approach will work unless you also do something kind of hacky, like add a UI panel which is the same size as your camera to trick the ScrollRect into scrolling it.

A better option is to not use ScrollRect at all since you’re not moving UI elements, and instead just use ScrollBar alone, and script your own movement component for the camera like this:

using UnityEngine;
using UnityEngine.UI;
public class Example : MonoBehaviour
{
    public Scrollbar scrollbar; // assign in the inspector
    public Vector2 minPosition;
    public Vector2 maxPosition;

    private void Awake()
    {
        if(scrollbar != null)
        {
            scrollbar.onValueChanged.AddListener(onScroll);
        }
    }

    private void onScroll(float value)
    {
        transform.position = Vector2.Lerp(minPosition, maxPosition, value);
    }
}

The scrollbar’s ‘value’ will come through as a number between 0 and 1, which is perfect for plugging into a linear interpolation function to go from point A to B (minPosition and maxPosition).

How should I add that to my components? I’ve got this now:
3170637--241540--upload_2017-8-3_17-24-5.png

BTW, really thanx for your help!

That looks correct to me, what happens when you test it out?

In the game view, the scrollbar disappreared, so I even couldn’t try it out :face_with_spiral_eyes:

Did you get to this point by deleting the stuff related to ScrollRect? If so, your RectTransform settings may be a little out of whack. Try remaking your UI setup by right clicking in the hierarchy and creating a new UI → Scrollbar. It should be visible with the correct default settings.

Nope, tried it… But it didn’t work… Do you need more screenshots?

Does it look fine in the Scene & Game view until you hit play?

I’m not sure exactly where the problem lies so I don’t know what to ask you to screenshot. If you want to show me the settings and components for your Canvas, Panel, and Scrollbar that could be insightful.

Oh wait, getting this Error:
SendMessage cannot be called during Awake, CheckConsistency, or OnValidate
UnityEngine.GUIUtility: ProcessEvent(Int32, IntPtr)

It even don’t appear in the Game view, even before I hit “Play”

Owkay: Changing in the canvas the rendermode to World Space is showing it up, but when I click play I can’t move the scrollbar, becouse if I hit it, the field jumps to another place

Found another thing out: The camera goes to Z = 0, but I want it to be at -3…

//Edit: Also the Scrollbar is not static, so it doens’t keeps to be at his place when I move the Bar.

Okay, you can change the Vector2 fields on the component to Vector3’s, and then set the Z positions in the inspector. You’ll also have to change Vector2.Lerp to Vector3.Lerp.

I’m not sure what you mean when you say that it doesn’t keep its place when you move the bar.

I’ll try it when my computer is fully charged :wink:

You definitely can’t use WorldSpace Canvas, because when the Camera moves you won’t be able to see the Canvas anymore.

Use either Overlay or Camera Space. I would also advise using small values instead of -15 and +15 just for testing purposes.

GREAT! It worked, really thank you!

1 Like