grumpygamer Posted April 27, 2015 Share Posted April 27, 2015 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! Link to comment Share on other sites More sharing options...
totallybueno Posted April 27, 2015 Share Posted April 27, 2015 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. Link to comment Share on other sites More sharing options...
grumpygamer Posted April 27, 2015 Author Share Posted April 27, 2015 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? Link to comment Share on other sites More sharing options...
totallybueno Posted April 27, 2015 Share Posted April 27, 2015 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 Link to comment Share on other sites More sharing options...
drhayes Posted April 27, 2015 Share Posted April 27, 2015 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? Link to comment Share on other sites More sharing options...
ZoomBox Posted April 27, 2015 Share Posted April 27, 2015 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.xOnce 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. Link to comment Share on other sites More sharing options...
MichaelD Posted April 27, 2015 Share Posted April 27, 2015 You can view this example which might be a good place to start: http://phaser.io/examples/v2/input/drag-event-parameters Link to comment Share on other sites More sharing options...
grumpygamer Posted April 27, 2015 Author Share Posted April 27, 2015 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-maskbut could I create that mask with a "vector" shape - rect?Thanks Link to comment Share on other sites More sharing options...
Recommended Posts