[SOLVED]Rotation over 360 to a specific point of one axis

Help & Support
1

hello Im trying to make a game where you spin a wheel and wait till it stops and show you a result like Wheel of Fortune or Spin of the day game type.

my issue that i have to deal with degrees over 360 and euler angles doesnt support it.
how can i rotate my wheel to degrees like 1750, i want the wheel to spin couples of times then stop on a specific degree in a particular time.

Now is that the tween makes the shortest way.

any solutions?

WheelSpinner.prototype.StartSpin = function(_winningItem, spinTime, anglePerItem) 
{
    if (_winningItem <= this.prize.length)
        {
            var currentAngle = this.entity.getLocalEulerAngles().y;
            var targetAngle = _winningItem * anglePerItem + (this.spinTime * 360  - currentAngle);
            this.WheelSpinner(targetAngle);
        }
};

WheelSpinner.prototype.WheelSpinner = function(targetAngle) 
{
    spinning = true;
   var tween = this.entity.tween(this.entity.getLocalRotation()).rotate(new pc.Vec3(0,targetAngle, 0), 
 this.spinTime, pc.Linear);
    tween.start();
    spinning = false;
};
2

I would ‘manually’ tween the rotation value as shown in this thread: 2d Physics Rotation

1 Like
3

Hello,

so i manged and found a solution by tweening a value and then assign it to the entity by setLocalEulerAngles in Update.

var WheelSpinner = pc.createScript('wheelSpinner');

WheelSpinner.attributes.add("prize",{type:"number",array: true});
WheelSpinner.attributes.add("spinDirection",{type:"number"});

// initialize code called once per entity
WheelSpinner.prototype.initialize = function() 
{
    this.spinTime = 4;
    this.isTweening = false;
    this.anglePerItem = 360/this.prize.length; 
    this.curve = this.animationCurve;
    this.deltaTime = 0;
    this.tweenValue = {value:0};
};

// update code called every frame
WheelSpinner.prototype.update = function(dt) 
{
    if(this.isTweening === true)
    {
        this.entity.setLocalEulerAngles(0, this.tweenValue.value ,0);
    }
    //console.log(this.entity.getLocalEulerAngles().x + " " + this.entity.getLocalEulerAngles().y + " " + this.entity.getLocalEulerAngles().z);
};

WheelSpinner.prototype.GetWinningItem = function(winPrize)
{
    var indexesArray = [];
    var stopIndex = 0;
    for(var i = 0;i<this.prize.length; i++)
        {
            if(winPrize == this.prize[i])
                {
                    indexesArray.push(i);
                }
        }
    if(indexesArray.length > 1)
        {
            stopIndex = indexesArray[Math.floor(Math.random() * (indexesArray.length))];
        }
    else
        {
            stopIndex = indexesArray[0];
        }
    this.StartSpin(stopIndex,this.spinTime,this.anglePerItem);
};

WheelSpinner.prototype.StartSpin = function(_winningItem, spinTime, anglePerItem) 
{
    if (_winningItem <= this.prize.length)
        {
            var currentAngle = this.entity.getLocalEulerAngles().y;
            this.tweenValue.value = currentAngle;
            var targetAngle = _winningItem * anglePerItem + (this.spinTime * 360 * this.spinDirection);// + anglePerItem * 0.35
            this.WheelSpinner(targetAngle);
        }
};

WheelSpinner.prototype.WheelSpinner = function(targetAngle) 
{
    var tween = this.entity.tween(this.tweenValue).to({value: targetAngle}, this.spinTime, pc.SineOut);    
    tween.on("complete",this.EndOfSpin,this);
    tween.start();
    this.isTweening = true;
};

WheelSpinner.prototype.EndOfSpin = function()
{
    console.log("spinDone  " + this.tweenValue.value);
    this.isTweening = false;
};