Search the Community

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); };

Hi there, everytime I have to make a game that pauses when the canvas loses the focus (jquery blur()) I struggle with lines and lines of stupid lines of javascript and I´m pretty sure there´s something simpler than my way to do that. I have a normal sprite on the game that pauses/unpauses the game, and I would like to do exactly the same when the canvas focus/blur... how do you guys handle this?

I want to run myPixi.ticker.stop() when the window loses focus in any way, eg minimize, click a different tab or even closing the window. Q: Is there a javascript event that covers all the possibilities? Q2: Is there a javascript event that covers all possible methods of a window regaining focus, eg a return from minimize, reclicking the tab etc?

Hi everyone, i was trying to pause a scene when the browser window is not active(eg. user switches tab, ctrl/cmd+tab, another window is currently focus,etc). To pause the scene, i need the background music and all animations to be paused, below playground example shows my approach: http://babylonjs-playground.com/#1MZCTQ I got two results: 1. when I click on another window(for example a notepad) that overlapped the browser, the notepad is now focus and the browser is blur, hence both sound and animation are paused, this is expected; 2. when I ctrl/cmd+tab or manually click on another tab to switch tab, only sound is paused but the animation continues playing. looks like $(window).blur(function() {...}); is triggered, but only bgm.pause() work, anim.pause() doesn't work. $(window).focus(function() { anim.restart(); bgm.play(); }); $(window).blur(function() { anim.pause(); bgm.pause(); }); any help will be appreciated, thank you!

Hi, I have a game with audio and for some reason it still playing when out of focus I used the same code from other game that don't behave like this.. why is that? this.load.audio('msx_main', ['assets/audio/main.ogg', 'assets/audio/main.mp3']); var msx_main = this.game.add.audio('msx_main'); msx_main.play("",0,0.2,true); It does stop on IOS but not on desktop or Android HELP!!! Thank you

I have an button in my game where I am popping a Facebook share window using Facebook SDK for JavaScript. When I interact with the popup and close it, the entire game show's a hand cursor and behaves as if it is the button. Anywhere I click on the screen will launch the popup again. I found that I can stop this behavior by adding the code at the bottom of this function, but then I have to click on the game to regain its focus before I can click on another button. Anyone have any ideas on how to deal with this? shareThis.inputEnabled = true;shareThis.input.useHandCursor = true;shareThis.events.onInputDown.add(function () { share(shareTitles[level - 1], shareMessages[level - 1], shareImgPath + 'icon_level' + level + '.jpg'); // I can stop the whole game acting like a button thing by doing this... shareThis.inputEnabled = false; shareThis.inputEnabled = true; shareThis.input.useHandCursor = true; // ...but then I have to click on the game once to regain its focus before I can interact with it again});

Is there any way to force my game to be in focus if it loses it so I don't have to click on it before I can start interacting with it? This happens if I click on the game, drag off of it, and mouse up in IE.

So I have been fighting with focus issues for days now and it's driving me crazy. I would appreciate any input you seasoned canvas devs might have. I just switched my game from another JS engine to Phaser and lo and behold - my focus issues were gone! The game starts with focus every time. Awesome. After a little more development on my Phaser version of my game, I rename my game_phaser.php page to index.php so it will auto-load on my page - suddenly no focus! However... this focus issue ONLY happens when I access my page directly through my domain forwarding. It's set up like this: My game resides at <myname>.com/game/index.php I own <gamename>.com which forwards to the above address ^ If I access the game through the URL <myname>.com/game/index.php, the game auto-focuses and everybody is happy. If I access the game through the URL <gamename>.com, even though it pulls the EXACT SAME FILE, the game does not start focused and developer tears flow. I have domain masking on the domain forwarding. Has anybody else seen this kind of behavior before? I am at a loss here. Thanks so much!

Hey, I have two divs side by side, one containing the game and the other containing some html5 range inputs. (I require a complicated GUI so am using DOM for this) The issue is that phaser somehow causes a strange issue where range sliders won't work until i've clicked inside the phaser game div. The below behaviour occurs if i do not click inside the game div first: In firefox: If I drag a slider it works, but as soon as the mouse is moved away from the slider, the slider jumps back to its initial value. In chrome: if i drag the slider it becomes stuck to the mouse, even if I let go of the mouse button. I can no longer click any other element (no buttons or anything) and I can't click in the game div either to fix the issue. I have to close the browser and restart. Internet explorer however works fine (what??) Is there any way to fix this other than just using textboxes instead of sliders? Thanks, pyre

Hello everyone, I am developing with Phaser for a few weeks and got stuck with an issue that themes to be Phaser sited. You can see the code below-> The soundfile is only playing if the loaded game is touched. (Themes to be a focus-problem?) There is no function etc. around the code below. The soundfiles are very small and encoded very fast. I'm using latest Phaser (2.0.7) and cocoonjs (2.0.2). This issue themes to be affect every iOS Device. Maybe someone can help. cheers, Code: preload: this.load.audio('menu', ['assets/audio/menu.mp3', 'assets/audio/menu.ogg']);create: this.menuMusic = game.add.audio('menu');this.menuMusic.play('',0,1,true);Testing Devices: iPad mini (iOS 7) iPad Air (iOs 7) iPhone 4s (iOs 7) iPhone 4 (iOs 7) iPhone 5 (iOs 7) Sound-file-info: .mp3 file: length: 00:12 (seconds) 296 KB .ogg file: lenght: 00:12 (seconds) 666KB

Hi all, random problem here, wondering if anyone has had it - we're trying to develop a facebook game which consists of a Phaser app running in an iFrame. It all works great, but for some reason, the keyboard keys never register in IE10. We've tried ensuring the iFrame has focus, tried setting game.stage.disableVisibilityChange to false and to true, but cannot for the life of us figure out why the Phaser app can't control the keyboard from within an iFrame. Does anyone know if there's a way, maybe from the parent document, to allow Phaser to capture the keys? Thanks in advance, Nick