How do I Smooth Camera Scroll (my case)

0 favourites
  • 5 posts
From the Asset Store
All popular touch mechanics - scrolling, zooming, swiping
  • Hey Guys. Its me. Again.

    So ive a question about how to set up a smooth camera scroll (i know iam not the only one, but i couldnt find a solution for my problem). Basically: My window size = 1180x660; Stage size = 11800x6600 (its a huge scene i know );

    In my game the camera should smoothly scroll to the position, if you click into the window area. Basically you have to follow footsteps, and i want to make only small scrolling steps inside my window (so basically the huge stage is irrelevant, the smooth camera scrolling is only for small distances).

    Example: When i start the game my window center position = x590, y330 (1180/2, 660/2, basically the left/top corner of my stage). If i click to the coordinate x1180 and y 660 (the right/bottom corner of my window)i want my window center moves smoothly to this position. Then the next max possible position to click on would be x1790/y990 and so on (because the maximum distance is: window center to window boarder, so i would make only little steps but thats exactly what i would need for this game). You should explore the map step by step, so if i got a map size with 11800/6600 you would make small scrolling steps into each direction (except youre on the boarders of course).

    I hope you can understand my description, its a little bit tricky to understand.

    Thank you so much!

  • Have you tried using an every tick event to move the viewport incrementally?

    lerp() is also recommended.

  • Take a look at this, maybe you can get something: ... th-inertia

  • Make a sprite object and call it "camera".

    Make two global variables, one called "CameraX" and the other called "CameraY"

    On mouse click

    --- Set "camerax.variable" to Mouse.X

    --- Set "cameray.variable" to Mouse.Y

    Every tick

    --- Scroll to object "camera"

    --- Set camera.x to lerp(camera.x,camerax.variable,1-0.2^dt)

    --- Set camera.y to lerp(camera.y,cameray.variable,1-0.2^dt)

    (You can change the 0.2 in the end part to make it scroll faster or slower - 0.1 is faster 0.9 is slower - the number must be between 0 and 1)

    You can also set the camera to be opacity 0 so you can't see it.


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hey guys!

    So thanks for your input, but i ran into big trouble solving this problem. At first i should descripe my layout to make it more clear.

    Ive got a level_1 layout. This layout has a size with 11800x6600 px. The window size is 1180x660px. The layout got 10 differend layers, filled with sprites. All of them, except the first layer (this is my gui layer) got a parallax with 100,100 to keep scrolling possible.

    Basically this level is splitted into two possible perspectives. The first is the map mode. The other is the search mode.

    Right at the beginning "On start of layout" iam scaling all this dynamic layers to 0.1 to get the complete stage visible (this is the map mode). My goal: If the player is touching to a specific position, the camera (or better the dynamic layers) should scroll to this position and zooming in at the same time. Ive written two differend events. One for touch input in map mode and one for touch input for the search mode. If iam in map mode, the search mode input is deactivated and vice versa.

    So now to my question:

    Iam using Touch.X / Touch.Y inputs for both modes (Touch.AbsoluteX/Touch.AbsoluteY doesnt work, because i would need the world space, not the screen space (i think)). To zoom onto a specific position doesnt work. At the moment i can zoom in and out (from 0.1 to a scale factor of 1 and vice versa). this works great. But i dont get it to find a solution how to scroll onto the right position when iam switching from the map mode into the search mode.

    Does someone got an idea how to handle this? Or maybe an excample for this kind of problem? Iam absolutly clueless right now, because ive tried so many differend things (scroll to behaviour and and and). But if iam using this option, my target camera objects got an weird parallax/offset.....and......lets forget about this... i think i need the right formula for handling positions, if i got a scalefactor on my layers or something like that.

    Every solution would be great. Sorry for the long post. If you need more informations, please tell me.

    Summary of my problem: (to make it more understandable )

    large stage (11800 x 6600), window size (1180 x 6600)

    scrolling and zooming in/out depends on mode.

    If mapmode to searchmode: Zoom in from scalefactor 0.1 to 1 (for all dynamic layers)

    If searchmode to mapmode: Zoom out from scalefactor 1 to 0.1 (for all dynamic layers)

    if you are in mapmode and youre taping for example to the coordinate 7545x, 3456y - the window should zoom and scroll to this position. (smooth camera movement that would be important)

    if you are in the searchmode (high zoom level) there should be only small position transitions (all touches you do right in the window canvas (tap and scroll to position nearby, tap and scroll to position nearby and so on)). The small camera movements should be also smooth.

    Thats basically it.....this thing is driving me crazy, i hope you can help me out!

    Thank you very much for your awesome support in this community!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)