Troubles with making a scrollbar

  • Hello guys, I am making a simulation of real browser in my mobile game and I have a trouble with making a scroll bar for this. In generally it works, but not as good as I expected. (you can find project here: https://drive.google.com/open?id=1xnv46XDacm818ThbjoWYyohUoZyVai6V)

    Finished scrollbar, should move between those twe edges(upper border- scrolling progress = 0%, lower border- scrolling progress = 100%):

    I am working on a real scrollbar, which could calculate it`s size and position to fit any layout height, so I am using three objects to let it be any size:

    I am calculating size of scroll bar using this formula:

    Full events calculating size and start position:

    Then the main part of my code - I am calculating position of scrollbar to fit scrolling progress using this formula but it doesn`t work as I expected:

    A lot of thanks for those who are ready to help to deal with my problem and find out what is wrong.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • How does this work?

    https://drive.google.com/open?id=166eGVcgoTIz_mN9Euhka5A3J7qnfn_hs

    I changed out your scroll bar with a 9- patch object and it seems to work fine. Let me know if it doesn't.

  • Here's how I'd do it :)

    https://www.mediafire.com/file/j1dw83h8w21n5j1/ScrollBar.c3p/file

    - I didn't alter how you parametered the bar on start of layout

    - the collision box of your BrowserSliderMainPart was broken

    - you had problems with Touch.Y because it gives a position on the whole layout. What you want is the position relative to the BrowserUI layer, so you need to use the following expression instead : Touch.Y("browserUI")

    - You need to define a value "scrollpercentage" between 0 and 1. When the bar is at the top, this value = 0, when it's at the bottom, this value = 1. To get this you compare Touch.Y("browserUI") with 189 (the minimum) and 1080-scrollbar.height (the maximum)

    (the "padding" is here so that wherever you click on the scrollbar it won't move right away, it waits for you to actually move)

    - you can move the scrollbar accordingly

    - you can also scroll to (0,scrollpercentage*layoutheight)

    Hope this helps :D

  • Here's how I'd do it :)

    https://www.mediafire.com/file/j1dw83h8w21n5j1/ScrollBar.c3p/file

    - I didn't alter how you parametered the bar on start of layout

    - the collision box of your BrowserSliderMainPart was broken

    - you had problems with Touch.Y because it gives a position on the whole layout. What you want is the position relative to the BrowserUI layer, so you need to use the following expression instead : Touch.Y("browserUI")

    - You need to define a value "scrollpercentage" between 0 and 1. When the bar is at the top, this value = 0, when it's at the bottom, this value = 1. To get this you compare Touch.Y("browserUI") with 189 (the minimum) and 1080-scrollbar.height (the maximum)

    (the "padding" is here so that wherever you click on the scrollbar it won't move right away, it waits for you to actually move)

    - you can move the scrollbar accordingly

    - you can also scroll to (0,scrollpercentage*layoutheight)

    Hope this helps :D

    You have a little bit misunderstood what I am talking about. I want to keep scrolling working only if user swipes the content and to use scrollbar as indicator only. It just need to show the progress and that`s all. Previus version of scrolling(made by me) is good and all I need - just to fix scrolling bar to show scrolling progress.

  • How does this work?

    https://drive.google.com/open?id=166eGVcgoTIz_mN9Euhka5A3J7qnfn_hs

    I changed out your scroll bar with a 9- patch object and it seems to work fine. Let me know if it doesn't.

    ReallyBasic Oh, nice solution. I haven`t used 9patch before but it`s great opportunity to learn how it works. It should be my mistake in the start, but upper edge of scrolling doesn`t fit blue rectangle`s edge. Can you help me to fix it? I just don`t want to break something and after it would work perfect, I will study it hard to understand how every single action and event works.

    And thank you for your hard work ;)

  • And thank you for your hard work ;)

    No problem, IcticStep.

    I think it's flush now, and this time I added comments in cyan to show what and where i edited.

    https://drive.google.com/open?id=167bd4A6lgv3TdRAMIcwFiaJ8dHNJSBvW

    Cheers!

  • Oh, right, that's swiping. I did offer you a classic desktop scroll bar that you need to click.

    I kept clicking on your own scrollbar thinking that it was completely broken x)

    Glad you're satisfied by ReallyBasic's solution then.

  • Oh, right, that's swiping. I did offer you a classic desktop scroll bar that you need to click.

    I kept clicking on your own scrollbar thinking that it was completely broken x)

    Glad you're satisfied by ReallyBasic's solution then.

    Oh, that`s sometimes happens)) I was also trying to deal with your project and was thinking it`s comletly broken)) LOL, just as in your case) I understood everything only after reading th event sheet. Despite this funny situation, thank you also for hard work and trying to help :D

  • > And thank you for your hard work ;)

    No problem, IcticStep.

    I think it's flush now, and this time I added comments in cyan to show what and where i edited.

    https://drive.google.com/open?id=167bd4A6lgv3TdRAMIcwFiaJ8dHNJSBvW

    Cheers!

    Oh... Almost, bet there is a big problem. Sorry for disturbing you again but it doesn`t works perefect. Now, it doesn`t go to the 1080px. I also tried a lot of times to guess numbers to move scrollbar but if you fix it in one layout - it wouldn`t work in other layouts because of different layout height. I have started this topic to invent in cooperation an ideal formula to make a finished solution for a scrolling bar which would work with any layout size, so show must go on. I am trying to make something for a third day but I have fail after fail. I am using all my logic, but all my developing in the end reaches the same formula and it doesn`t works at all, but it should. Maybe it`s bug in C3? But I am not sure... That`s why I am here.

    I have made some calculations about it, maybe it`s confused but it can help. So this is just pieces of formulas and my logic:

    English translation of the mess above:

    Final formula seems to be something like these:

    scrollarProgress = scrollingProgress

    We can`t just use this, so we need to deal with Y of scrollbar:

    scrollbarY = scrollingProgress*(maxScrollbarPos-minScrollbarPos)+minScrollbarPos

    It may seems to be a non-logical from the fierst view because I am substructing and then adding minScrollbarPos, but here is the explanation: I am doing it to get a value that is between minScrollbarPos to maxScrollbarPos and equal an x%, where x = scrollingProgress.

    I am becoming crazy. How that`s possible? Where is my mistake?

    ReallyBasic, let`s find out what to do, Shall we?

    P.S.: And about 72... It should be a kind of proportion because it should be changed if we have another layout size... I am totaly confused...

  • Sorry, that number I added was hard-coded. Here is the change:

    Here is the link:

    https://drive.google.com/file/d/16EN0pyNVr8_T241PCdouN5kUEJahQIuo/view?usp=sharing

    I added an extra layout as well and it seemed to work on that one.

    Let me know if it doesn't.

  • Sorry, that number I added was hard-coded. Here is the change:

    Here is the link:

    https://drive.google.com/file/d/16EN0pyNVr8_T241PCdouN5kUEJahQIuo/view?usp=sharing

    I added an extra layout as well and it seemed to work on that one.

    Let me know if it doesn't.

    Ok, top edge works perfect but that about hte bottom? I feel myself totaly stupid because I can`t understand your last formula... But how to fix the bottom edge?

  • OK, great thanks for everyone, tho took part. After all I have made the biggest part work for myselft, but I really glad and thankful for everyone who tried to help. Now this formula works with any layout and screenSize(change '1080' in you screen height and 179 in your additional interface height). So, the final variant is:

    (((scrolly-(1080/2))/(LayoutHeight-1080))*((1080-9patchSlider.Height)-179))+179

    It works really great, so if anyone more neeed this, you may copy it, but I would be glad if you mention me in final titles smth like this "Special thanks to Ictic_Step, my dog, my friends and family". Have a nice day, developers!

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