How do I create a smooth scrolling effect?

  • Hi. I used the Scrolling actions to allow scolling up/down in my app.

    It works fine for now but it stops immediately and has no smooth scrolling (getting slower over time). Does anyone already have a good example for this?

    I used this code for scrolling:

    + Touch: Is in touch

    ----+ System: -110 ≤ Touch.AngleAt(0) ≤ -70

    -----> System: Set scroll Y to ScrollY+Touch.SpeedAt(0)×dt×5

    ----+ System: 70 ≤ Touch.AngleAt(0) ≤ 110

    -----> System: Set scroll Y to ScrollY-Touch.SpeedAt(0)×dt×5

    I tried a few things with saving last angle and last scroll speed with lerp but it did not work and jumped around instantly. Any ideas?

  • Try using lerp.

    Subscribe to Construct videos now
  • I use a object that every ticks goes to mouse x and mouse y, and using twine movement you can make it look great.

  • I'll try lerp again. But I don't use a camera object. It's just used for scrolling up/down in a companion app.

    I'm curious how other people add scrolling. Please share how you do it. 🙂

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • I'll try lerp again. But I don't use a camera object. It's just used for scrolling up/down in a companion app.

    I'm curious how other people add scrolling. Please share how you do it. 🙂

    There is a "scroll to" behavior, and you can also set system > every tick > scroll to object(or position x-y)

    , the camera object was just an example on how i do it.

    You can experiment with the movement behavior and use a object that is invisible as camera, this gives you the possibility to control how fast the camera will move and how it will move.

  • I tried to make it work without a camera for a few hours but it does not work. :(

    Its too fast or too slow or jumping.

    As workaround I created a camera with ScrollTo behavior and 8 direction movement, set to up/down. 1200 max speed, 5000 acceleration, 600 decel and just simulate up/down on swipe. Its not ideal cause it has a fixed speed (tried to use touch speed but did not work out; set speed=touchspeed moved it always to the right instead of down) but its "OK".

    Would be nice to know if someone has another solution.

  • I tried to make it work without a camera for a few hours but it does not work. :(

    Its too fast or too slow or jumping.

    As workaround I created a camera with ScrollTo behavior and 8 direction movement, set to up/down. 1200 max speed, 5000 acceleration, 600 decel and just simulate up/down on swipe. Its not ideal cause it has a fixed speed (tried to use touch speed but did not work out; set speed=touchspeed moved it always to the right instead of down) but its "OK".

    Would be nice to know if someone has another solution.

    can you share your c3 project? or just the camera part, so i can do my thing and you might like it. I know it can be hard to get a nice effect.

  • Thanks. I made a small example. It has still some old experiments and disabled code in it. The current version uses a camera with scroll to and 8 direction. Swipe and hold to keep scrolling in a direction.

    It would be great if you could swipe short and fast for a quick scroll which slows down. I tried to set speed/acceleration but it did not work out very well.

    1drv.ms/u/s!AvV_VKT3P7wZhptPVdfqtX6_Rc3-_Q

  • It would be great if you could swipe short and fast for a quick scroll which slows down. I tried to set speed/acceleration but it did not work out very well.

    you mean you want a inertia scroll effect here is a old C2 tutorial that can help you out

    swiped smooth scrolling with inertia

  • That's it! Thank you very much. :D

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