Jump to content

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


spinnerbox
 Share

Recommended Posts

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:

AritmetikoMinRangeBar.png.43aa316f6ff8b03a317d378c7a12bc4a.png

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.

Link to comment
Share on other sites

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.

 
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
},

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...