Search the Community
Showing results for tags 'mouse'.
-
Hi, I'm trying to replicate the camera movement from a typical FPS game. I want the camera to follow the player's mouse, without the need to click at all. Here's what I've got so far: var lastMove = 0;oldx = 0,oldy = 0,mousemovemethod = function (e) { if(Date.now() - lastMove > 40) { if (e.pageX < oldx) { camera.rotation.y -= .1; } else if (e.pageX > oldx) { camera.rotation.y += .1; } if (e.pageY < oldy) { camera.rotation.x -= .1; } else if (e.pageY > oldy) { camera.rotation.x += .1; } oldx = e.pageX; oldy = e.pageY; lastMove = Date.now(); }}document.addEventListener('mousemove', mousemovemethod);The camera movement is rough and intermittent. I'd like it to be smooth with a bit of easing. Here's a link to the full code: http://www.babylonjs-playground.com/#WM1VE My question: How can I smooth out the rotation code above, or is there a better way? Solution: camera.cameraRotation.ycamera.cameraRotation.x cameraRotation provides the smooth transition I was looking for.
-
OnPointerOverTrigger Triggers through other meshes
jroosterman posted a topic in Questions & Answers
I have a group of meshes that have OnPointerOverTrigger events. When I mouse over them the event triggers. However, when I mouse over them while they are behind another object that has no events, the OnPointerOverTrigger still triggers. Is there a simple way to make OnPointerOverTrigger not trigger when the mesh is behind another mesh?- 4 replies
-
- onpointerovertrigger
- mouse
-
(and 2 more)
Tagged with:
-
Hello, I am trying to use the Pixi.js example for mouse trails, and I wanted to spice it up with switching up the mouse trail every time I click a button Here is the HTML <!doctype html> <html> <head> <style> body{ margin: 0; } </style> </head> <body> <button id = "trailSwap">Swap Trail Color</button> <script src="pixi.js"></script> <script src="mouse-trail.js"></script> <script type="text/javascript"> </script> </body> </html> And here is the Javascript that I changed, the actual following and functionality of the trail works perfectly, however the actual act of switching between the trails doesn't. var app = new PIXI.Application({ backgroundColor: 0x1099bb }); document.body.appendChild(app.view); var bol = false; var swap = document.getElementById("trailSwap"); var picture = 0; let trailTexture = PIXI.Texture.from('pic/trail0.png'); var historyX = []; var historyY = []; var historySize = 20; var ropeSize = 1000; var points = []; // Create history array. for (let i = 0; i < historySize; i++) { historyX.push(0); historyY.push(0); } // Create rope points. for (let i = 0; i < ropeSize; i++) { points.push(new PIXI.Point(0, 0)); } // Create the rope let rope = new PIXI.SimpleRope(trailTexture, points); // Set the blendmode rope.blendmode = PIXI.BLEND_MODES.ADD; app.stage.addChild(rope); rope.interactive = true; rope.buttonMode = true; swap.addEventListener('click', onClick); function onClick(){ alert("here"); bol = !bol; if (bol){ let trailTexture = PIXI.Texture.from('pic/trail1.png'); } else{ let trailTexture = PIXI.Texture.from('pic/trail0.png'); } let rope = new PIXI.SimpleRope(trailTexture, points); alert("here again"); } The rest of the code isn't important to this as it is just making the trail smooth and follow the mouse properly. Any help would be splendid. Thank you!
-
Hello, I am using babylonjs to implement a 3D visualizations inside my app. The app allows a user to define a scene in a 2D view. The scene is static in the 3D view - meshes cannot be moved, edited etc. A user can interact with objects using mouse - selection by click, hover on mouse move, double click to open in another view. In my opinion the most natural way to present that something is happening when user moves mouse is to change meshes’ colors. Everything works well (50-60 fps) when there isn't much meshes – 300-400. Unfortunately, performance drops down when the scene becomes more complex – about 4k meshes. I’ve already tried improving performance by using: mesh instances (cause a lot of them have the same texture and vertex data) - unfortunately I haven't found a way to color a mesh instance on mouse selection. I found a method set/updateVerticesData but VertexData.ColorKind cannot be updated when mesh instances are used (an error occurs when I try to set argument makeItUnique to true) mesh clones - it works like I expected because clones do not share material, but the performance problem still exists solid particle system - when I started implementing and saw the results I was amazed and thought that I found a solution. But then I realized that I cannot use particles as parents for other meshes. Am I right? I’ve prepared a playground showing my problem. On the left-hand side of the scene (3 boxes) is my real use case. It shows how I use mesh parent system. On the right-hand side there are rendered boxes that represent objects in my scene. https://playground.babylonjs.com/indexStable.html#U0KFSU#5 I am afraid that I am bound to CPU due to having a lot of transparent textures and a lot of meshes. When I was profiling my scene a lot of CPU time was spent on recognizing which meshes are active (I freezed activemeshes on the scene by calling scene.freezeActiveMeshes()). Now i get around 12/13 FPS (measured with Chrome DevTool/Rendering and FPS meter feature), CPU usage (in windows task manager) is around 35%, GPU usage (in windows task manager) 19%. Is there anything else I can do to have at least 25-30 FPS and still react to mouse operations? Thank you in advance for any suggestions ?
-
Refer to the link below, for billboard enabled meshes, I added mouse pick event so the camera will target to the mesh which being clicked. However, after click on the mesh which BILLBOARDMODE_ALL is enabled, I got the following error. I'd be really appreciated if anyone can fix this issue. Thanks. https://www.babylonjs-playground.com/#9XBPW4#2 if (!m.actionManager){ m.actionManager = new BABYLON.ActionManager(scene); } var act = new BABYLON.ExecuteCodeAction( BABYLON.ActionManager.OnPickTrigger, pick ); m.actionManager.registerAction(act); function pick(evt){ var mesh = evt.meshUnderPointer; camera.setTarget(mesh); }
- 5 replies
-
- exceeded
- billboardmode_all
- (and 8 more)
-
Hi, Can anyone tell me please what the best way to hide a "BETTING CONFIGURATION" container by clicking anywhere on the screen other than that container? Actually i'm detecting the mouse coordinates and comparing with the window / container coordinates, but it's good practice? public static isColliding(mouse: any, object: any): boolean { return !(mouse.x < object.x || mouse.x > (object.x + object.width) || mouse.y < object.y || mouse.y > (object.y + object.height)); } this.baseContainer.interactive = true; this.baseContainer.addListener('pointerdown', () => { if (Utils.isColliding(this.mouseCoord, betConfigUI)) { console.log('you are in window space'); } else { console.log('you are not in the window space'); } }) Thanks in advance!
-
This is my code right now to check if left or right mouse button is down: // Left button down app.stage.on("mousedown", function() { // code... }); // Right button down app.stage.on("rightdown", function() { // code... }); But it doesn't seems to be possible that both events happen at the same time. How would I check if both mouse buttons are pressed? Left and right.
-
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); };
-
Hello, I am getting a strange bug in chrome with the pointer lock API. When using chrome on windows 10, the mouse will randomly move to a new location as I move the mouse around. I have repeated this bug on seperate machines. Works fine on firefox. Here's a play ground: https://playground.babylonjs.com/#H9FRSI#2. I removed the non chrome pointer lock stuff. Pointerlock code for chrome: scene.onPointerDown = function (evt) { canvas.requestPointerLock(); }; I would really appreciate any help on this! Thanks!
-
Hi! I made a small fun game with all cryptocurrencies - https://catch.cryptland.com Need to click on any coin in 60 seconds, while it is moving around. Remember to check Ranking after your score submitted. If anybody has something to say about this fun game, I will be very grateful. Thanks
-
I'm working on a project where on mobile version you can use two fingers to zoom in and out, pan and rotate a rectangle. How would that work on a desktop or laptop computer with a mouse? Any suggestions?
-
I'm working with PixiJS to create a web app with OS-like functionality (source here: https://github.com/steverichey/OpenGNOP) so I obviously need to have stuff related to mouse and touch events. I've tried stuff like this (based on the examples): this.interactive = true;this.mousedown = this.touchstart = this.onClick.bind(this);this.mouseup = this.touchend = this.mouseupoutside = this.touchendoutside = this.onRelease.bind(this);But it's hit or miss. BitmapText will function normally but DisplayObjectContainers may or may not, and Graphics seem to never register clicks. Is there something I'm missing? It appears that all of these elements should support mouse and touch events.
-
I've been working with Pixi for quite sometime with V3 up until now. Recently decided it was time to move some code over to version 4 but have been experiencing some issues with interaction events. I have a button class that originally used both listeners for touch and mouse events to a.) change the visual state of the button on up/down etc b.) perform an action on click/tap. This had been working perfectly fine in version 3 and I could have multiple buttons in a class/container. Switching to version 4 this caused issues with click/tap area where only the last button to be added to a particular class/container will fire this event. All buttons will fire the up/dwn start/end events still though. On upon researching I tried converting them all pointer events and still experience the issue. I'm currently using V4.7.0. I've been trying to pick my way through the PIXI source trying to figure out why the event doesn't fire but it's not clear to me. All I can see is that it doesn't seem to have 'trackingData' when processing the up portion when it does on the one that does fire the tap/click. I've being using Chrome only at this point for Dev tools and tried but desktop and mobile/tablet emulator, both having the same result. I know interaction was reworked for v4 but can anyone give me any pointers as to why those changes have affected my code thus. I don't understand well enough the changes to be able to find the right place to look for a solution. I can't provide the exact code at the moment as it's not a personal project and corporate rules prevent me from doing so. But can give an overview. The class is structured with a parent container (essentially a stage) to add class container to and a class container to display the current button state (current button state can be a graphic, sprite, animation). The current button state container has all the interaction events attached to it. These call binded functions within the class which either change the current state sprite or call a function on click/tap that has been passed in the settings on instantiation (event data is sent to this function). As stated if the event is fired, which it is on the last button added, the function is fired but event doesn't trigger for click/tap on the others. All other events fire normally on each button. I've possibly just overlooked something simple as you get to that 'wood for the trees' state. Any thoughts, suggestions would be grateful.
-
1. How to resize the window at any time when I change my window size. Something weird will occur in my app now like the image below.(the right size should be black) 2. How can I directly access mouse local position without listening to an event. I want to deliver my mouse local position to the server even if the mouse doesn't move at all. Thx a lot!!
-
Hey All, When you set inertia to 0 on the ArcRotateCamera, you can't rotate on a single mousedown/mousemove a great distance. You have to reset your mouse towards the center and drag again to turn a large degree. Can someone tell me what parameter makes it so that moving the mouse traverses more rotation? I've tried neither of these seem to do anything: camera.moveSensibility = 50; camera.angularSensibility = 50;
-
Hey everyone! I wanted to get a bit of help getting a function working whereby when I hover my mouse over character sprites it will show a there name and title just above the mouse position for each different sprite, I'm unsure if I need to look at going down the route of a mouse hover/mouse over function or i need to create an event listener. If anyone could make a demo that I could play with and learn from or something that would be perfect! Thanks guys! Mezz
-
Please bear with me, this is very likely going to be a long post. In my quest to implement a pause system with an active ui I found myself investigating input/Pointer.js. Here I discovered the reason that my Buttons were useless when the game was paused. Specifically: input/Pointer.js if (this.game.paused){ return this;}My first, and simplest fix for my use case, was simply to comment out all of the above lines. This allows me to still process Pointer callbacks when the game is paused. In my case, the UI is already set up using callbacks, but the rest of the game uses polling. So it was a convenient way to allow UI interaction without allowing other in game actions. Offhand this method seems to have some limitations. If you're implementing first person controls your character might still spin around while you interact with the UI, though I haven't looked into it. Also if you use Pointer callbacks on any objects you want to actually pause that can cause issues. After some more thought I came up with the following solutions: First: input/Pointer.js while (i-- && !this.game.paused){ this.game.input.moveCallbacks[i].callback.call(this.game.input.moveCallbacks[i].context, this, this.x, this.y, fromClick);}All I did was add a check if the game was paused before running any moveCallbacks. Correct me if I'm wrong, but I believe this would solve the issues with a first person style camera. Honestly though I'm not sure what all uses there are for moveCallbacks so some examples for context would be nice. Next: input/Pointer.js else if (!this.game.paused || (this.game.paused && candidateTarget.sprite.nopause && candidateTarget.sprite.nopause == true))This allows you to set a nopause member on any sprite. This allows you to specify exactly which objects you want to respond while the game is paused. I went ahead and added a nopause member to the sprite constructor as follows: gameobjects/Sprite.js this.nopause = false;Then I can clean up the checks from before: input/Pointer.js else if (!this.game.paused || (this.game.paused && candidateTarget.sprite.nopause == true))What do you guys think?
-
Hi, I am very new to Phaser, so this is a very basic question. I want objects to follow the mouse around the screen. To do this I was going to get mouse position values and then set the x and y coordinates of a sprite to the mouse position. Unfortunately I could not find an example of this from the files and thought that the forums would be the quickest and easiest place for an answer. Thanks!
- 15 replies
-
- mouse position
- mouse
-
(and 1 more)
Tagged with:
-
Hi There is bug when BABYLON.GUI buttons that has been created with custom viewport on camera: buttons can be clicked even if mouse is out of button playground: https://www.babylonjs-playground.com/#08PH4F#1
-
I wanted to know how to recreate the mouse movement effect I have found in an online example I am trying to recreate, the example is found here: https://www.g-star.com/en_gb/raw Currently I get Jerky movements and fast rotation, I'm looking for infinite gradual scrolling effect which increases depending on mouse position, this is what im using for my mouse movement are there any alternatives or changes I can make to fix this? var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed);
-
I have been working tirelessly with this and really struggling to get anywhere, if anyone can offer some form of assistance I would be greatly appreciative. I have essentially set up a reel of characters (staff) as sprites organised by co'ords in three circles, 12 characters per circle, around the camera set at (0,0,0), (Radius of circles are 1.5/1.45/1.4 I have a scene built currently which is super buggy in movement as well. I need it to when the mouse hovers on the left or right side of the screen to rotate the camera continuously scrolling through the images on loop (Cant get working past following the mouse - no loop - no smooth movement as mouse movement on y axis also rotates the camera. This is my mouse movement code: var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); The second main issue i'm having is that the sprites keep disappearing when rotating the camera, I'm trying to create a constant panable image reel from inside to view members of staff, there is an example i'm trying to follow and recreate found here: https://www.g-star.com/en_gb/raw If anyone could tell me how to solve me mouse hover to move issue (with infinite looping) or a fix for the rendering of sprites issue it would be great! If anyone thinks they can help and needs any more code of any kinds just let me know and i''ll sort it! Thanks!
-
Hi, On Firefox the camera stops rotating when your pointer leaves the canvas: http://playground.babylonjs.com/ Which doesn't happen on Edge, IE, Chrome or Opera
-
Hey guys, I'm very new to babylon JS and I've a problem with understanding how to add a mesh to the cursors movement. Here is an example: try.matterport.com. I've created a playgroud: https://www.babylonjs-playground.com/#S0BZWE The mesh is changing its size and isn't always in front off all other meshes as shown in the exampel (matterport). Can somebody give me some light? Thanks in advance Benji
-
I have been having problems when I scale my gamemaker 2 html5 game to fit the height of the browser. Once it scales up it no longer detects the mouse position. Without it being scaled to height I am able to click on my enemies, but when it is scaled to browser height I am unable to. I figure it has to do with the scaling to the browser height Thanks in advance! if(os_type == os_windows){ ideal_width = 0; ideal_height = browser_height; start_b_width = browser_width; start_b_height = browser_height; aspect_ratio = browser_width/ browser_height; ideal_width = round(ideal_height / aspect_ratio); if(ideal_width & 1){ ideal_width++; } room_set_width(rm_game, ideal_width); room_set_height(rm_game, ideal_height); surface_resize(application_surface, ideal_width,ideal_height); room_goto_next(); alarm[0] = 60; } //In my alarm window_set_size(room_width,room_height); window_center();
-
Hi, I did setup the LensRenderingPipeline and i noticed that the code i use for picking meshes work awkward away from the center of the screen once I enable lens distortions, if removed all is fine. I am using the pick results from scene.pick(scene.pointerX, scene.pointerY) and is only working with no distortion.
- 2 replies
-
- lens distortion
- mouse
-
(and 2 more)
Tagged with: