Select HELP (How to create slider with options)
im trying to make a slide selector
i tried to detect a button location between two points
when point detected activate a post effect
but its just not working :(
// -----JS CODE-----
// @input Component.ScreenTransform screenTransform
var less = 3.2473533153533936;
var plus= 3.247354030609131;
var bb = script.screenTransform.getTransform().getLocalPosition();
if(bb.x >= less && bb.x <= plus){
print(" detected");
}else{
print(" nor detected");
}
this is a preview how its looks like
https://filebin.net/071a5uniiv0si125/previ.mp4?t=3uwbcfqc
-
Hi, Just Me!
Could you please share a project with me so I could troubleshoot it asap?
Thanks!
Comment actions -
Hi, just me!
I will create an example of a slider with a set of different choices.
1. Setting up sceneObjects
So first i created a Screen Transform that will be a ScrollBar container.
Then i created a Bar ScreenImage and made it a child of the container.
Also I created 4 images of a checkpoints (set them to fixed width and height so they are not affected by resizing a parent) and a Knob
Here is a hierarchy setup:
2. Scripting
I will use a screenTransform's API that makes it very easy to transform between screen, world and relative screen transform positions.
Especially this functions may be useful:
screenPointToLocalPoint(vec2 screenPoint)
:vec2
containsScreenPoint(vec2 screenPoint)
:Boolean
Also screenTransform.anchors.getCenter() and screenTransform.anchors.setCenter()
Adding inputs:
//@input Component.ScreenTransform parentTransform
//@input Component.ScreenTransform knobTransform
//@input Component.ScreenTransform[] checkPointsCreating events:
script.createEvent("TouchStartEvent").bind(updatePos);
script.createEvent("TouchMoveEvent").bind(updatePos);
script.createEvent("TouchEndEvent").bind(onTouchEnd);Storing checkpoint values to the array and creating empty callbacks:
var values = []
var callbacks = []
for (var i = 0; i < script.checkPoints.length; i++) {
values.push(script.checkPoints[i].anchors.getCenter().x)
callbacks.push(function (idx) { return function () { print(idx + " is Selected") } }(i));//empty func
}Then defining updatePos function:
function updatePos(eventData) {
var localPos = script.parentTransform.screenPointToLocalPoint(eventData.getTouchPosition());
//transforming screen position to the screenTransform position inside it's parent
localPos.x = clamp(localPos.x);
localPos.y = 0;
script.knobTransform.anchors.setCenter(localPos);
}Comment actions -
Hi, just me!
I will create an example of a slider with a set of different choices.
1. Setting up sceneObjects
So first i created a Screen Transform that will be a ScrollBar container.
Then i created a Bar ScreenImage and made it a child of the container.
Also I created 4 images of a checkpoints (set them to fixed width and height so they are not affected by resizing a parent) and a Knob
Here is a hierarchy setup:
2. Scripting
I will use a screenTransform's API that makes it very easy to transform between screen, world and relative screen transform positions.
Especially this functions may be useful:
screenPointToLocalPoint(vec2 screenPoint)
:vec2
containsScreenPoint(vec2 screenPoint)
:Boolean
Also screenTransform.anchors.getCenter() and screenTransform.anchors.setCenter()
Adding inputs:
//@input Component.ScreenTransform parentTransform
//@input Component.ScreenTransform knobTransform
//@input Component.ScreenTransform[] checkPointsCreating events:
script.createEvent("TouchStartEvent").bind(updatePos);
script.createEvent("TouchMoveEvent").bind(updatePos);
script.createEvent("TouchEndEvent").bind(onTouchEnd);Storing checkpoint values to the array and creating empty callbacks:
var values = []
var callbacks = []
for (var i = 0; i < script.checkPoints.length; i++) {
values.push(script.checkPoints[i].anchors.getCenter().x)
callbacks.push(function (idx) { return function () { print(idx + " is Selected") } }(i));//empty func
}Then defining updatePos function:
function updatePos(eventData) {
var localPos = script.parentTransform.screenPointToLocalPoint(eventData.getTouchPosition());
//transforming screen position to the screenTransform position inside it's parent
localPos.x = clamp(localPos.x);
localPos.y = 0;
script.knobTransform.anchors.setCenter(localPos);
}
function clamp(v) {
return Math.min(Math.max(v, -1.0), 1.0);
}And onTouchEnd function, that snaps to the closest checkpoint:
function onTouchEnd() {
//finding closest value
var curPos = script.knobTransform.anchors.getCenter();
var minDistance = 100.0;// very big value
var index;
for (var i = 0; i < values.length; i++) {
var diff = Math.abs(values[i] - curPos.x);
if (diff < minDistance) {
minDistance = diff;
index = i;
}
}
if (index != undefined) {
curPos.x = values[index];
script.knobTransform.anchors.setCenter(curPos);
callbacks[index]();
}
}3. Adding callbacks
And here is an example of a script that enables one of several objects according to the selected checkpoint
function addCallback(idx, callBack) {
if (idx < callbacks.length) {
callbacks[idx] = callBack;
}
else {
print("no such index")
}
}It is only an example, that can be extended with a functionality you need. I just added an example of screenTransform positions use and transforming between and local ScreenTransform spaces
Example project can be found here
Best
Olha
Comment actions
Please sign in to leave a comment.
Have a comment?