Overflow:hidden slider

[grumpygamer]

Hi again,

I'm in the process of building a sort of slider inside the game and was wondering the best way to approach this.

Normally in html/css I would define a div with a hidden overflow with a set width/height and then move objects inside.

 

Maybe I've been too focussed on css, but I am hoping there is a way to do a similar thing in Phaser.

If not what would be the best approach?

Thanks!

 

[totallybueno]

Probably not the best answer for you, but my advice, forget about CSS in Phaser. Here everything works different, nothing to do with CSS stuff.

[grumpygamer]

yes understood.

But I was asking if there is a similar method or how would you do it?
 

Would I hide it behind some sprites?

[totallybueno]

Well, I guess it depends on the content, but probably the whole slider would be a masked and draggable group... not sure about the performance, but I would try that.

 

P.S. Wait for more answers, I´m not the best guy with this stuff

[drhayes]

You've talked about the solution – what's the problem you're trying to solve? Are you talking about making a UI component that is, literally, a slider? Or are you talking about making a scrolling background or something?

[ZoomBox]

My vision:

The slider's sliding part is a sprite, the background is an attached sprite (generated with the slider).

The update function of this sprite is empty.

Fire an event on click of the sliding part.

This event will erase the sprite's update function with a new one:

In this update: Sprite.position.x = pointer.position.x

Once the finger is no longer touching, fire a new event that will erase the update function with an empty one.

 

You could also just use a bool in the update (in order to know if the sprite is beeing dragged or not) but I guess it's less optimized.

Also, don't forget to set a max x position.

[MichaelD]

You can view this example which might be a good place to start: http://phaser.io/examples/v2/input/drag-event-parameters

[grumpygamer]

I think my problem is more related to masking than the slider itself - I have already done a slider (actually two synced ones), but none of them had masking.

It's like in the OP, I think the solution might be this: http://phaser.io/examples/v2/bitmapdata/alpha-mask

but could I create that mask with a "vector" shape - rect?

Thanks