Problem about scrolling part of a screen

[yvzyldrm]

Hello everyone,

 

I have a problem about a list scrolling issue and attached an SS. The problem is, I have some elements just like you see at the SS. Menu 1 and menu 2 is static but the content part must be scrollable. The content part is dynamic so it can grow in numbers. With the state of the current project they are scrollable but the content part is sliding through the back of the menu part. I just want a nice scrollable part so the content will be hidden of masked when getting throughout the menus or the header part.

 

 

Thanks in advance.

 

[lewster32]

I think there're two ways you can approach this:

 

1) You can try using some custom BitmapData or RenderTexture trickery to render your menu items down onto a flat texture, and then crop the texture accordingly. 

2) You can use pixi masking, as seen here: http://www.goodboydigital.com/pixijs/examples/14/ (see this post on how to implement it with groups)

[yvzyldrm]

thanks dude. ok, no problem for masking.

 

but, how will scroll number 2 screen? actually, I do not know it 

[lewster32]

Draggable and motion lock will get you started I guess, with a fixed drag area (boundsRect):

• http://examples.phaser.io/_site/view_full.html?d=input&f=motion+lock+-+vertical.js&t=motion%20lock%20-%20vertical
• http://docs.phaser.io/Phaser.InputHandler.html#boundsRect

If you want to get even fancier and have 'throw' physics like mobile devices typically use for scrolling then you'll have to roll your own routine for this - it's outside of the scope of this post, but there are plenty of tutorials around the web (this is a good start), and at least one very good premium solution exists: http://www.greensock.com/draggable/

[mrBRC]

hmm.. I haven't reviewed phaser that much.. but I don't see a reference in the doc to 'elements' other than the HTMLCanvasElement AddToDOM and create methods, nor do I see a menu or content.. so when you say elements.. do you mean HTML elements within the canvas?

I mean, maybe it is me, but the question as stated doesn't seem to relate to phaser or any of its classes.. am I right?

 

[lewster32]

I think by elements he just means objects on the screen rather than specifically HTML elements. The question is essentially about masking, so it's still relevant to Phaser.