[SOLVED] Help with virtual joystick

Help & Support
8

Good evening @Abneto,

Sorry for the delay. Some other projects got in the way. It’s not the cleanest script in the world, but I did manage to have the handle limited to the radius of the background:

var DragscriptNew = pc.createScript('dragscriptNew');

DragscriptNew.attributes.add('handle', {
    type: 'entity',
    title: 'handle',
});

DragscriptNew.attributes.add('bg', {
    type: 'entity',
    title: 'handle background'
});
// initialize code called once per entity
DragscriptNew.prototype.postInitialize = function() {
  
     var app = this.app;
     var self = this;    
     var hnd = this.handle; 
     var localBg = this.bg;   
     var localBgPos = this.bg.getLocalPosition().clone();
     var originalPosition = hnd.getLocalPosition().clone();
     var radius = localBg.element.height / 2;
     
    
     this.handleDragHelper = new pc.ElementDragHelper(this.handle.element);
    
    
    
        
    
     self.handleDragHelper.on('drag:move', function(pos){
       
        var x = pos.x;
        var y = pos.y;
        var dx = self.handleDragHelper._deltaHandlePosition.x;
        var dy = self.handleDragHelper._deltaHandlePosition.y;
        var distance = Math.sqrt( (dx * dx) + (dy * dy) );
         
         
         if(distance > radius) {
           var normX = dx / distance;
           var normY = dy / distance;
             
             x = normX * radius;
             y = normY * radius;
             self.handleDragHelper._deltaHandlePosition.x = x;
             self.handleDragHelper._deltaHandlePosition.y = y;
             
             self.entity.setLocalPosition(self.handleDragHelper._deltaHandlePosition);
         }
         
         
     });
    
     self.handleDragHelper.on('drag:end', function(pos){
        
         console.log("stopped");
         hnd.setLocalPosition(originalPosition);
         
     });   
                           
};

// update code called every frame
DragscriptNew.prototype.update = function(dt) {
    
};



// swap method called for script hot-reloading
// inherit your script state here
// DragscriptNew.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/
//

I hope this is helpful. Since the calculation was now purely distance based, I had to take a different approach that doesn’t immediately reference the background apart to set the radius.

I hope others comment if there are any serious improvements that need to be made.

edit:

@Abneto I just realized I should mention that I adjusted the set up of the scene in question and adjusted the pivots for this script. Check out this fork of your project:

https://playcanvas.com/project/763684/overview/round-draggable

1 Like