Phaser interface slider button

[oler]

Hi again potential helpers..I need a slider with image buttons for my phaser client interface like the demo examples here:  http://skidding.github.io/dragdealer/#demos

 

here is a screenshot of my slider : http://i.imgur.com/RDchikM.png   note I need for the right side of the slider to remain hidden if the slider button is not at the maximum

 

can anybody provide examples or any tutorials on how to accomplish this...I don't want to reinvent the wheel as time is limited and I have searched high and low for phaser examples....

 

or alternatively how would one use the jquery plugin in a phaser game instance for example? thank you so much for your help

[nuvorm]

 jquery is DOM, so you have to position a dom element over your phaser content.

[JUL]

With a bit of that

http://www.html5gamedevs.com/topic/1730-click-sprite-and-button-question/

 

I would do something like that

// sliderBar.input.start();

 

 

if (sliderBar.input.pointerDown(game.input.activePointer.id)){

   

if(sliderBtn.x<sliderBar.x+sliderBar.width || sliderBtn.x>sliderBar.x){sliderBtn.x = game.input.worldX;}

 

}

 

Not tested so I can't guarantee it fully works, but you get the idea.

 

It's cheap, but it should do the trick I guess.

[oler]

 jquery is DOM, so you have to position a dom element over your phaser content.

 

 

well that is one solution...but i need an in canvas solution

[oler]

Ok thanks, I will try this and get back..any other solutions just in case?

 

 

With a bit of that

http://www.html5gamedevs.com/topic/1730-click-sprite-and-button-question/

 

I would do something like that

// sliderBar.input.start();

 

 

if (sliderBar.input.pointerDown(game.input.activePointer.id)){

   

if(sliderBtn.x<sliderBar.x+sliderBar.width || sliderBtn.x>sliderBar.x){sliderBtn.x = game.input.worldX;}

 

}

 

Not tested so I can't guarantee it fully works, but you get the idea.

 

It's cheap, but it should do the trick I guess.