Mouse: Intelligent Focus Helper

[Jonforum]

Hello.
I tried to get a kind of focus helper with the mouse when the pointer rolls over an item.
but i can get a good easing when the mouse are hover a element.


I do not know if I explain myself well, but I will try.

i use the pointerLock API.
when the mouse icon get hover a new elements, i want to help the mouse to move to center of element.
But without disturbing the control of the mouse.
the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines.



i try my best to make a codepen.

for active the pointer lock, just click inside the blue square.
https://codepen.io/djmisterjon/pen/gzJVRR
if your move the mouse,

your will see that the behavior is a little messy when the mouse flies over a white square.
An idea on a good approach to create a similar system?



thank a lot for help.


the original code am trying to get was here, but this one are made with CSS!!!.
https://codepen.io/Sahil89/pen/aGgOwp
maybe my approach is not good, these very confusing the css, my knowledge in css was from 10 years ago.
I am not able to convert this approach, with my mouse engine grr.
what is xPercent:?

My code source am trying to patch it look like this.
but it very similar to the codepen.

/*:
// PLUGIN □────────────────────────────────□MOUSE INTERACTIVITY□───────────────────────────────┐
* @author □ Jonathan Lepage (dimisterjon),(jonforum)
* @plugindesc MOUSE ENGINE
* V.0.1a
* License:© M.I.T
└───────────────────────────────────────────────────────────────────────────────────────────────────┘
Controle tous ce qui est associer a la sourits, interaction avec player et camera engine
Initialise avantr le loader , seulement pendant la sceneBOOT
*/

// ┌-----------------------------------------------------------------------------┐
// GLOBAL $mouse CLASS: _mouse
//└------------------------------------------------------------------------------┘
function _mouse() {
    PIXI.Container.call(this);

};
_mouse.prototype = Object.create(PIXI.Container.prototype);
_mouse.prototype.constructor = _mouse;

$mouse = new _mouse();
console.log9('$mouse: ', $mouse);

//$mouse.initialize()
_mouse.prototype.initialize = function() {
    this.icon = null;
    this.x = this.y = 0; // mouse coor
    this.sensiX = this.sensiY = 0.8;
    this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10
    this.screenX = 1600;
    this.screenY = 900;
    this.mouseIsDown = false; // mosue is down indicator

    // check if started path selector
    this.tweenLastCase = null;
    this.startedPathCase = null;

    // easing mouse
    this.tween = new TweenLite(this.position, 0, {
        x:0, y:0,
        ease:Power4.easeOut,
    });

    this.createSpriteMouse();
    this.createListener();
    //this.debug(); // FIXME: REMOVE
};

//┌-----------------------------------------------------------------------------┐
// $mouse.createSpriteMouse();
// create the sprite spine mouse and default animations
//└-----------------------------------------------------------------------------┘
_mouse.prototype.createSpriteMouse = function() {
    const sprite = new PIXI.Sprite.fromImage('/img/mouse.png');
    sprite.anchor.set(0.5,0);
    this.icon = sprite;
    this.iconLight =  new PIXI.lights.PointLight(0xffffff,0.5); // the sceen FX sun
    this.addChild(sprite,this.iconLight);
 };
 
//┌-----------------------------------------------------------------------------┐
// $mouse.initialise();
// initialise mouse grafivs and all listener
//└-----------------------------------------------------------------------------┘
_mouse.prototype.createListener = function() {
     // mouse listener
    document.addEventListener('mousemove', this.mousemove_core.bind(this));
    document.addEventListener('mousedown', this.mousedown_core.bind(this));
    document.addEventListener('mouseup', this.mouseup_core.bind(this));
    document.addEventListener('wheel', this.wheel_core.bind(this));

    // frames window listener
    //document.body.onwebkitfullscreenchange = this.windowResized; // FIXME: F4 FULL SCREEN VOIR LA REQUETE FAITE PAR RMMV
    document.body.onresize = this.windowResized;
    document.body.onblur = this.windowBlur;
    document.body.onfocus = this.windowFocus;
};


//┌-----------------------------------------------------------------------------┐
// event: windowResized, _mouseblur, _mousefocus
// listener related to fullScreenManager and the API pointer lock
//└-----------------------------------------------------------------------------┘
_mouse.prototype.windowResized = function(event){
    document.exitPointerLock();
    document.body.requestPointerLock(); // pointlocker API
};

_mouse.prototype.windowBlur = function(event){
    document.exitPointerLock();

};

_mouse.prototype.windowFocus = function(event){
    document.exitPointerLock();
    document.body.requestPointerLock(); // pointlocker API
};


//┌-----------------------------------------------------------------------------┐
// event: _mousemousemove
// event that compute the current mouse position and move the icon
//└-----------------------------------------------------------------------------┘
_mouse.prototype.mousemove_core = function(event){
    // determine the direction
    this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0;
    this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0;
    this.x+=(event.movementX*this.sensiX);
    this.y+=(event.movementY*this.sensiY);

   // overScreen reasigment position
   this.checkOverScreen();
    // check camera
   !this.mouseIsDown && $camera.onMouseMove(this.x,this.y);
    // check cases
   const inCase = $cases.onMouseMove(this.x,this.y, this.mouseIsDown);
   if(inCase && this.tweenLastCase !== inCase){
    this.tweenLastCase = inCase;
    this.moveToCase(inCase,0.5)
   }
   console.log('inCase: ', inCase);
   if(this.startedPathCase && this.mouseIsDown){
    this.computePath();
   }
};

_mouse.prototype.checkOverScreen = function(){
    if(this.x>this.screenX){
        if(this.dirH === 4){
            return this.x = this.screenX;
        };
    }else
    if(this.x<0){
        if(this.dirH === 6){
            return this.x = 0;
        };
    }else
    if(this.y>this.screenY){
        if(this.dirV === 8){
            return this.y = this.screenY;
        };
    }else
    if(this.y<0){
        if(this.dirV === 2){
            return this.y = 0;
        };
    };
};

// $camera.moveToTarget();
_mouse.prototype.moveToCase = function(inCase, speed,ease) {
    console.log1('inCase: ', inCase.getGlobalPosition());
    const p =  inCase.getGlobalPosition()
 
    this.tween.vars.x = p.x;
    this.tween.vars.y = p.y+(inCase.heigth/2);
    speed && (this.tween._duration = speed);
    this.tween.invalidate();
    this.tween.play(0);
    console.log('this.tween: ', this.tween);
};


_mouse.prototype.computePath = function(){
    if($cases.current){
        // if case not exist in array, add it
        if(this.startedPathCase.indexOf($cases.current)<0){
            this.startedPathCase.push($cases.current);
        }
    }
};

//┌-----------------------------------------------------------------------------┐
// event: mousedown_core
// event when mouse down
//└-----------------------------------------------------------------------------┘
_mouse.prototype.mousedown_core = function(event){
    this.mouseIsDown = true;
    if($cases.current){
        this.startedPathCase = [$cases.current];
        $cases.onMousedown();
    }
};

//┌-----------------------------------------------------------------------------┐
// event: mousedown_core
// event when mouse down
//└-----------------------------------------------------------------------------┘
_mouse.prototype.mouseup_core = function(event){
    this.mouseIsDown = false;
    if(this.startedPathCase){
        $player.moveToCase(this.startedPathCase[this.startedPathCase.length-1]);
        this.startedPathCase = null;
        $camera.onMouseWheel(1);
    }
};

//┌-----------------------------------------------------------------------------┐
// event: wheel_core
// event when mouse whell
//└-----------------------------------------------------------------------------┘
_mouse.prototype.wheel_core = function(event){
    // allow to add what need, example if on element do other thing than zoom ..
    $camera.onMouseWheel(event.deltaY<0 && 0.2 || -0.2);
};


//$mouse.debug(); // add debug feature mouse mouve //TODO: REMOVE ME
_mouse.prototype.debug = function(){
    var debugMouse = this._mousemousemove;
   // (dX: ${~~(mX/Zoom.x)+ScrollX}
    this._mousemousemove = function(event) {
        debugMouse.call(this,event);
        document.title = `
        x: ${~~this.x}  y: ${~~this.y} ||
        mapX: ${ (this.x/$camera.zoom.x)+$camera.position.x  }
        mapY: ${ (this.y/$camera.zoom.y)+$camera.position.y  } ||
 
        `;
       
    };
    document.onmousemove = this._mousemousemove.bind(this);
};

 

[Jonforum]

solved.
humm, well i think it working now .
I had to re-code my logic with a specific ticker for the mouse.
and a also change some property used by alpha,beta,delta,meta
it more easy to understand for me.
they are float pixi point .
And the ticker perform compute those valur to set the pointer xy.
This operation is only done once when the mouse ishovers a specific object.

//$mouse.initialize()
_mouse.prototype.initialize = function() {
    this.screenX = 1600, this.screenY = 900;
    this.icon = null;
    this.alpha = new PIXI.Point(0,0); // coor 1
    this.beta = new PIXI.Point(0,0); // coor 2
    this.moved = false; // mouse are moving indicator
    this.isDown = false; // mouse is down indicator
    this.tiker = this.create_tikers();
    this.tiker.start();

    this.sensiX = this.sensiY = 0.8;
    this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10

    // check if started path selector
    this.tweenLastCase = null;
    this.startedPathCase = null;

    // easing mouse
    this.tween = new TweenLite(this.position, 0, {
        x:0, y:0,
        ease:Power4.easeOut,
    });
  
    this.createSpriteMouse();
    this.create_Listeners();
    //this.debug(); // FIXME: REMOVE
};

_mouse.prototype._mousemove = function(event){
    // determine the direction
    this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0;
    this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0;
    this.alpha.x+=(event.movementX*this.sensiX);
    this.alpha.y+=(event.movementY*this.sensiY);
    this.inCase = $cases.onMouseMove(this.alpha.x,this.alpha.y, this.isDown);
};

_mouse.prototype.create_tikers = function() {
    // Tikers for editor update (document Title, check scroll)
    return new PIXI.ticker.Ticker().add((delta) => {
        const metaX = (this.alpha.x/$camera.zoom.x)+$camera.position.x; // reel position (will compute zoom + camera..)
        const metaY = (this.alpha.y/$camera.zoom.y)+$camera.position.y;
        let deltaX,deltaY; // diff
        let ease = this.inCase && 0.2 || 0.8;
        if(this.inCase && this.focused !==this.inCase){
            this.focused = this.inCase;
            this.alpha.x-=(metaX-this.inCase.x)/2;
            this.alpha.y-=(metaY-this.inCase.y)/2;
        };
        this.beta.x += (this.alpha.x - this.beta.x) * ease;
        this.beta.y += (this.alpha.y - this.beta.y) * ease;
 
        this.tween.vars.x = this.beta.x;
        this.tween.vars.y =  this.beta.y;
        this.tween.invalidate();
        this.tween.play(0);

        // TODO: DELETE ME DEBUG ONLY
        document.title = `
        alphaXY: [${~~this.alpha.x},${~~this.alpha.y}] || 
        betaXY: [${~~this.beta.x},${~~this.beta.y}] || 
        metaXY: [${~~metaX},${~~metaY}] ||
        `
    });
};

 

[slimmmeiske2]

This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.