How do I make a scrollbox?

Get help using Construct 2

Post » Sat Jul 29, 2017 12:52 pm

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?
B
18
S
5
Posts: 126
Reputation: 1,480

Post » Thu Aug 03, 2017 9:09 pm

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.
https://www.ravenheart.ca/home
Company name changed to avoid Facebook-type shenanigans

"Someone once told me I bite off more than I can chew...

I told them I would rather choke on greatness than nibble on mediocrity."
B
22
S
6
G
1
Posts: 1,414
Reputation: 4,822

Post » Fri Aug 04, 2017 1:53 am

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
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
80
S
34
G
40
Posts: 3,029
Reputation: 30,393

Post » Fri Aug 04, 2017 7:26 am

SoldjahBoy wrote:........... snip .................

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

~Sol


Other useful technical terms include 'thingamajig' and 'thingamabob' :)
If your vision so exceeds your ability, then look to something closer.
Moderator
B
131
S
29
G
81
Posts: 5,328
Reputation: 56,630

Post » Fri Aug 04, 2017 4:28 pm

zenox98 wrote:Other useful technical terms include 'thingamajig' and 'thingamabob' :)

My DoD mentor used the word 'jabi' for everything too, lol.
https://www.ravenheart.ca/home
Company name changed to avoid Facebook-type shenanigans

"Someone once told me I bite off more than I can chew...

I told them I would rather choke on greatness than nibble on mediocrity."
B
22
S
6
G
1
Posts: 1,414
Reputation: 4,822

Post » Fri Aug 04, 2017 4:38 pm

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
B
91
S
31
G
102
Posts: 5,232
Reputation: 67,250

Post » Sun Aug 06, 2017 11:59 pm

@R0J0hound

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

~Sol
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
80
S
34
G
40
Posts: 3,029
Reputation: 30,393


Return to How do I....?

Who is online

Users browsing this forum: luck1210, tarek2 and 1 guest