Is It Possible To Get A Scrolling Effect Like This

0 favourites
From the Asset Store
Change the size and position of everything without calculating anything!

    I have attached a link to this post regarding the style of scrolling im trying to do.

    I myself understand how to implement everything but i am lacking the skill make my list move up and down when the player swipes up or down or left and right.

    When it comes to scrolling in this fashion there are almost no tuts or examples availible.

    Could someone give me a hand in understanding this.



    i seen you helped newguy out by anwsering his question,Mine is almost the same as his but i would like to scroll my inventory box so its going up and down with your entire inventory.Could you give me a hand with this.

  • Anyone?

    And if i am not as detailed as i should be in descibing my issue please let me know.

  • I've seen many examples of scrolling in the forums, why not adjust one of those to your needs?

  • LittleStain I have been looking for one but all i have seen were for scrolling entire layouts and not scrolling on an Inventory screen.

    I looked through every FAQ How Do I and still found limited info.

    Most of the scrolling examples are hidden.

    I usually go to google if i cant find anything in our forums.

  • Instead of scrolling the layout, you could easily adjust to scroll a layer. This way you could let a part be obscured by layers on top or you could use blendmodes to make part of the layer invisible.

  • LittleStain I definitly understand where your coming from and what you are suggesting i do,I have been doing since day one to actually learn how things work.

    I love to decode capX files aand learn from others.

    I will have another look around but i come to the forums to find a soulution to an issue that i dont know much about.

    Scrolling should be one of the Top Tutorials on scirra since the mobile market is Very Big.I kinda kicked myself in the rear by waiting this long to learn about scrolling but in my head i thought it would be fairly easy to find out how to create the effect.

  • RookieDev, I also need an effect like this in my work, but I've been holding on. But just got an idea from what LittleStain said (although that might not solve my own problem) why can't you inventory list be a layer that is always visbile( the oda game area is the remaining dimension, you camn follow my signature link to see how I cut out a part of the layout into a layer which is always visible), then you can add the scrolling effect to that layer like LittleStain said.

  • The most important part in creating scroll is comparing the start of the touchinput with the current touchposition.

    Second most important thing is to disable unwanted input while scrolling.

    My personal preference is creating a sprite on touch start if the touch is not overlapping an active part, store the touch start positions as variables in this sprite and compare touch position with this sprite. While this sprite is visible all other events except the scrolling are disabled by deactivating the groups they are in. if touch.y is less than sprite.oldY I set the position of the things I want to scroll to their y position minus abs(sprite.oldy-touch.y), if touch.y is more than sprite.oldy I add abs(sprite.oldy-touch.y) to their current y-position.

    Those are the basics for vertical scrolling I guess..

  • Dasat LittleStain i will take everything you both said into account,I will go back to looking through capX files to try and figure this out so it fits my creative vision.Thank you both for your replies,It means alot to get help.I think people like me know how it feels to be stuck on something for a few days.Thanks again

  • Tinkering around with this all you need is a object with the drag and drop behavior, objects pinned to that and a layer to do the masking. The extent of the math needed is a clamp() to limit the range of scrolling. Unless of course you want a widget on the right that indicates the scroll position, then you'll need a bit more math.


  • go go R0j0hound. I just saw this post :D

    that's pretty much what I was going to suggest. Since the example screen doesn't show anykind of moving gameplay. You can just mask it.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • R0J0hound


    This is exactly what i was looking for!

    This is almost identical to the style of scrolling i need.This is better than most AAA Games on mobile,The style is awesome Thank you guys im about to decode this to the best of my knowledge.

    Kyatric Can you move this to the FAQs in How Do I Section.

    I think this will help out almost everyone on the forums.

  • jayderyu R0J0hound

    Do you guys mind if i ask you another question about this capX file?

    I have been looking this over for a few days and i actually do understand how it works.One thing that i cant put my finger on is setting the Clamp to the BBox Bottom and BBoxTop the right way.

    When i use your method i get some crazy bugged out effect where my scroll bar jumps from one place to another.

    I guess my question would be Is there a specific way to set up a frame for scrolling if it will be clamped to the bounding Box?

    Should i use a frame size mimicking the size of the scroll area?

    also would it be possible to just clamp my scrollbar to the top and bottom of the window view port? If so could you explain how to do so?

    I understand everything but just these factors.

  • It helps to visualize if you draw a picture or move the scroll_pane around in the editor. Clamp is used to limit how high and low the scroll_pane goes. Basically we're doing this: "set y to clamp(self.y, low_y, high_y)". To find the low_y move the scroll_pane as far up as possible so the frame object covers the last bottom portion. Where the y position of the scroll_pane in relation to the frame. It's the scroll_pane's height above the bottom of the frame or "frame.BBoxBottom-scroll_pane.Height". Next to find the high_y move the scroll_pane as far down as possible so the frame object covers the topmost portion. Notice that the top's of both objects are the same so high_y is "frame.BBoxTop". Now if the hotspot of the frame is topleft it also is valid to use frame.Y instead of frame.BBoxTop.

    Generally you want the scroll_pane at least as big as the frame. Also you could also use two events to compare scroll_pane's y position instead of using clamp for the same effect.

  • R0J0hound jayderyu

    can i ask you something?

    I have taken everything you said into account and i figured out how to make everything work inside of my own project.i want to thank you for that.One thing that still bothers me is one event that you have placed inside of the capX.I circled the event inside the photo.I was wondering if its possible to make that touch?When i tried switching it to touch control things got buggy and wouldnt work.Is it a must that i have to use a mouse event or can i use this same capX for a touch scroll?Everything works with touch but that one event.

    <img src="" border="0" />

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