Jump to content

Mouse: Intelligent Focus Helper [solved]


jonforum
 Share

Recommended Posts

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/?editors=1011

 

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?
Am using GSAP libs.

thank a lot for help.

 

 

 

my source code am trying patch   look like this , but it very similar to the code pen demo.

/*:
// 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);
};

 

Link to comment
Share on other sites

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 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.

 

4us97RHU_o.gif

 

//$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}] ||
        `
    });
};

close for solved.

thank

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...