How do I make a scrollbox?

0 favourites
  • 7 posts
  • I've read many threads and tutorials about this, but I wasn't able to find a good answer. I want to make a "box" with scrollable content, but I want to imitate real scrolling (on touch devices). Of course, you can try with a transparent sprite with Drag&Drop and set the axes to "Vertical only", use clamp() to set the limits and then pin other objects on it to scroll with (and "fake" a scrollbar if you want), but this doesn't look real as there is no momentum scrolling as you are used to see on touch devices. It feels weird because it stops scrolling whenever you release (and there isn't any bouncing effect at the tob/bottom of the scrollbox either).

    Is there any way to make a scrollbox that looks real?

  • Yes, it is possible.

    It is a severe PITA. If you are REALLY insistent, I will send you a few test files I have lying around.

    Your best bet is to use iFrames and actual HTML pages. Make sure you have the iFrame security headers set. If you look at the pages in our website, this uses iFrames and independent pages.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • The easiest way I've found to make a completely custom scrollbar is... not easy.

    The basic idea though, is you make a "Frame" that masks the outside of the scrollable area, and has basically a "cut-out" or "window" that shows the content you want to scroll. Then, make a background for the scroll area, preferably a tiled background image so you can dynamically scale it taller or shorter depending on your content requirements.

    You then have to make a scroll bar thingy, and always set it's X position to a fixed number on the layout or layer and add the drag and drop behaviour to that.... then you simply set your scrollable tiled background Y position to be the same as the scroll bar thingy, with some additional math (the height of the scrollable area divided by the height of the scrollbar itself) then you do set scrollarea.Y to scrollbar.Y*(scrollarea.height/scrollbar.height) - I think xD

    Adding content to the scrollable area can be tricky, depending what it is... but you can use sprite fonts, sprites, and whatever you want... position them according to the scroll area tiled background - make sure your "frame" is in the front of everything (z order top) and it should work pretty good!

    I have to make a scroll area for another thing I'm messing with, so if I end up doing that today I will upload an example. Either way, hopefully my really bad explanation will help a little bit.

    *EDIT*

    I should read more carefully... I just realised you wanted momentum in the scrolling... that is another problem all together. You could do it by having a dummy object that takes control of the "scroll thingy" if the user has previously scrolled, but let go of the mouse or stopped touching the screen. You would need a variable or something to track the "scroll amount" - maybe a number that goes up based on how far the user has scrolled, or if you can create some kind of velocity measurement based on a combination of distance and time of the scrolling action? Use this variable, possibly combined with LERP, to make the scrolling continue for a short while after the user releases the scroll thingy.

    Yes... "thingy". I'm a very technical individual, as you can see.

    ~Sol

  • ........... snip .................

    Yes... "thingy". I'm a very technical individual, as you can see.

    ~Sol

    Other useful technical terms include 'thingamajig' and 'thingamabob'

  • Other useful technical terms include 'thingamajig' and 'thingamabob'

    My DoD mentor used the word 'jabi' for everything too, lol.

  • Momentum is just keeping the speed it was dragged and slowing it down over time. You can get the speed from the current position and the previous.

    So something like:

    sprite: on drop

    --- sprite: set vx to self.x-self.oldx

    [inverted] sprite: is dragging

    --- sprite: set x to self.x+self.vx

    --- sprite: vx to vx*0.9

    every tick

    --- sprite: set oldx to self.x

  • R0J0hound

    Look! He at it again MOM! Bein' all smart and stuff....

    ~Sol

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