Develop GUI scroll-bar/number-picker control with Phaser routines.

[spinnerbox]

I am trying to develop a custom made scroll-bar(or should I call it number-picker) with graphical elements and input functions.

I think there is an example where a certain Phaser game object can be constrained in coordinates.

For example it can be set to only move along X axis in certain range, but Y stays always unchanged.

I should be able to drag it only in X axis, so left and right.

Can you suggest some example for this bit?

Here is a picture of what I try to do:

As you move the handle to right, the number on the left decreases down to zero. As you move the handle to the left, the number increases up to 100. Simple.

Note: No need for Physics.

[samid737]

Here is an example that applies to your situation using inputHandlers in Phaser:

https://phaser.io/examples/v2/input/motion-lock-horizontal#gv

https://phaser.io/docs/2.6.2/Phaser.InputHandler.html

To calculate the value of the parameter for your slider, I took the width of the boundary rectangle (you can also make a sprite as boundary) as the slider "range". The slider handle its x value is then used to calculate the min parameter. Note that in my example I had to consider the sprite its width in the calculation, so the setParameter() function might be a bit overcomplicated. You might be able to find something much more convenient for it, but this is what I could think of.

 

[spinnerbox]

Some of the code I use:

minRangeHandle = gameObject.add.graphics();
artmUtils.drawCircle(minRangeHandle, 70, 435, 20, 0.5, 0x000000, 0.5, 0xffffff, 1);
minRangeHandle.inputEnabled = true;
minRangeHandle.input.useHandCursor = true;
minRangeHandle.input.enableDrag();
minRangeHandle.input.allowVerticalDrag = false;
minRangeHandle.input.boundsRect = phaser.Rectangle(70, 435, 170, 0);
this.menuObjects.add(minRangeHandle);

To be honest, I didn't expect it to be that simple. allowVerticalDrag property does the job, but setting boundsRect doesn't work, I can still move it indefinitely to left and right. 

Do I miss to do something, or I should create my own code to constrain it in which X axis bounds should it move?

[spinnerbox]

Ok it should be with new keyword:

minRangeHandle = gameObject.add.graphics(0, 0);
artmUtils.drawCircle(minRangeHandle, 70, 435, 20, 0.5, 0x000000, 0.5, 0xffffff, 1);
minRangeHandle.inputEnabled = true;
minRangeHandle.input.useHandCursor = true;
minRangeHandle.input.enableDrag();
minRangeHandle.input.allowVerticalDrag = false;
minRangeHandle.input.boundsRect = new phaser.Rectangle(0, 0, 100, 1);
this.menuObjects.add(minRangeHandle);

I also had mixing of coordinates, so now I set coordinates only when I draw the circle.

It works now, thanks.

drawCircle() method in my Utility.js file:

drawCircle: function (graphics, x, y, diameter, bSize, bColor, bAlpha, fColor, fAlpha) {
     var circle = artm.gameObject.add.graphics(0, 0);

     circle.name = artm.Const.Graphics.CIRCLE_KEY + this.randomNumber(0, diameter);
     circle.lineStyle(bSize, bColor, bAlpha);
     circle.beginFill(fColor, fAlpha);
     circle.drawCircle(x, y, diameter);
     circle.endFill();

     graphics.addChild(circle);

     return circle;
},

 

[samid737]

Quote

To be honest, I didn't expect it to be that simple.

I was thinking the same, but really you just need two things an inputHandler and graphic  Phaser power level over 9000....