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.

  • 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

    Semoreh

    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 ;)

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • 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, Semoreh 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?

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